Создание дочерней темы WordPress, позволяющей вносить изменения в функционал родительской темы без их потери при ее обновлении. Инструкция по установке.
Информация о дочерних темах WordPress
Зачем нужна дочерняя тема?
Детская тема на сайте WordPress предназначена для изменения и расширения функционала исходной (родительской) темы. Почему рекомендуется вносить изменения в функционал и настройки сайта именно с помощью дочерней темы?
Если вносить изменения и дополнения в функционал сайта непосредственно через родительскую тему, тогда при ее очередном обновлении внесенные изменения будут утрачены и каждый раз придется их восстанавливать.
Детская тема создается в отдельном каталоге, наследует весь функционал родительской темы и хранит все внесенные в дальнейшем изменения. Изменения вносятся в файлы дочерней темы.
Устаревший способ создания
Раньше при создании детской темы использовался импорт таблицы стилей родительской темы с помощью метода @import. Сейчас этот метод не рекомендуется, так как он увеличивает время загрузки таблицы стилей. Кроме того, родительская таблица стилей при использовании этого метода может быть загружена дважды.
Если вы ранее создали дочернюю тему с помощью метода @import, удалите строку с ним из файла style.css и добавьте приведенный ниже код в файл functions.php.
Внимание: перед любыми экспериментами над своим WordPress-сайтом не забывайте сделать резервные копии файлов и базы данных.
Создание дочерней темы по шагам
Перед созданием
Прежде чем самостоятельно создавать дочернюю тему, посмотрите справочные материалы по родительской теме. Возможно, вы найдете шаблон готовой детской темы от разработчиков.
Если дочернюю тему от разработчиков найти не удалось, воспользуйтесь инструкцией ниже по созданию детской темы WordPress на примере родительской темы Twenty Seventeen. Для работы с файлами на хостинге будем использовать бесплатный FTP-клиент FileZilla.
Пошаговая инструкция
1. Создайте на компьютере, например, в каталоге Download, новую папку с именем twentyseventeen-child. Вместо twentyseventeen используйте название каталога с вашей родительской темой.
2. Перейдите в папку twentyseventeen-child и создайте в ней два текстовый файла с именами style.css и functions.php.
3. Откройте файл style.css и вставьте в него следующий код:
|
1 2 3 4 |
/* Theme Name: Twenty Seventeen Child Template: twentyseventeen */ |
Twenty Seventeen замените на название вашей родительской темы, а twentyseventeen на имя каталога с вашей родительской темой.
4. Откройте файл functions.php и вставьте в него следующий код:
|
1 2 3 4 5 6 |
<!--?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } |
5. Откройте FTP-клиент FileZilla и перейдите в каталог WordPress с темами: /папка-с-файлами-сайта/public_html/wp-content/themes. Загрузите в каталог с темами папку twentyseventeen-child (с названием папки вашей родительской темы вместо twentyseventeen).
6. Откройте админ-панель WordPress и перейдите на вкладку «Темы» пункта меню «Внешний вид». Просмотрите вновь созданную дочернюю тему, нажав кнопку предварительного просмотра. Если все в порядке, активируйте вашу детскую тему.
Теперь ваш сайт находится под управлением дочерней темы, которая полностью копирует функционал родительской темы за счет подключения ее таблицы стилей и использования других ее файлов. Удалять родительскую тему нельзя.
Файлы дочерней темы
Стили, прописанные в файле style.css дочерней темы, имеют преимущество перед стилями в одноименном файле родительской темы. Копируйте записи из style.css родительской темы в файл style.css детской темы и редактируйте их для изменения дизайна сайта.
Файл functions.php дочерней темы загружается перед одноименным файлом родительской темы и является его дополнением. Не закрывайте код в конце файла functions.php закрывающим тегом ?>, иначе, если вы оставите после него какой-нибудь символ, например, пробел, сайт работать не будет.
Файлы шаблонов – single.php, page.php, header.php, footer.php и другие, скопированные из родительской темы в дочернюю, замещают собой аналогичные файлы родительской темы. Вы можете вносить в них изменения, которые не будут утрачены при обновлении родительской темы.
Если хотите, чтобы на виджете детской темы в админ-панели WordPress отображалось какое-нибудь изображение, добавьте в папку twentyseventeen-child файл изображения с названием screenshot.png или screenshot.jpg.
Плагин для создания дочерних тем
Самый простой способ создания дочерней темы – с помощью плагина Child Theme Configurator:
Чтобы было понятней, можно воспользоваться переводчиком Google. Справка находится здесь же, на странице плагина, выше этого окна. В ней перечислены все шаги по созданию дочерней темы.
Плагин Child Theme Configurator проанализирует активную родительскую тему и создаст шаблон детской темы в виде каталога с необходимыми файлами. Папка с дочерней темой будет загружена в каталог themes.