Не знаю точно, по каким причинам шаблоны для сайтов WordPress упорно называют темами, но именно это во вступлении к этой статье, рождает тавтологию: тема данной статьи как создать дочернюю тему WordPress. А проще говоря, как сделать так, чтобы изменения, сделанные в шаблоне сайте, не исчезали после каждого обновления шаблона автором.
Зачем это нужно
Зачем нужна дочерняя тема, я пояснил во вступлении. Поясню на практике. Я давно не использую шаблоны в авторском варианте, постоянно что-то меняю в файле, отвечающем за дизайн (style.css), убираю ссылки из футера, меняю местами вступления и анонсы к статьям в архивах. Короче делаю правки в файлах шаблона. Каждый раз, когда автор обновляет шаблон, я бы терял и восстанавливал свои правки, если бы не использовал дочерние темы.
Нужно отметить, что с недавних пор, ситуация потерей правок несколько упростилась. Во всех современных темах, есть пользовательская правка файла стилей (style.css), который не меняется после обновления темы, однако, это не решает общую задачу статьи, создать дочернюю тему WordPress.
Создать дочернюю тему WordPress вручную
- Предположим, у вас тема «father», создаем к ней дочернюю темы;
- Создайте каталог дочерней темы, пусть будет «daughter»;
- В Notepad++ создайте файл.css со следующим содержимым:
Обратите внимание, что директива Template указывает родительскую тему и она обязательна.
Важно! Теперь, когда вы поместите в каталог «дочки» файл, он заменяет аналогичный файл у «родителя». Это правило НЕ работает для файла functions.php.
Но это не всё. Нужно стили «родителя» перенести в стили «дочки». Это делается двумя способами:
Способ 1. Просто перенести содержимое файла стилей (style.css) в аналогичный файл родителя;
Способ 2. Или добавить файл style.css дочки следующую строку:
@import url("../father/style.css");
Обращаем внимание на относительный адрес с указанием родительского шаблона (father).
Тематические плагины для создания дочерней темы
Про плагины для создания дочерней темы, скажу так, если вам нужна дочерняя тема, поставьте плагин, создайте «дочку», удалите плагин и не мучайтесь ручной работой. Работа с любым перечисленным ниже плагином займет 10-15 секунд, если вы не создаете дочернюю тему уже измененного шаблона.
Child Theme Wizard
Позволяет создать новую дочернюю тему без необходимости использования дополнительных инструментов прямо из интерфейса администратора WordPress.
Child Theme Configurator
https://ru.wordpress.org/plugins/child-theme-configurator/
Быстрая и простая в использовании утилита, которая позволяет анализировать любую рабочую тему и создавать дочернюю тему настраивать её. Child Theme Configurator позволяет легко идентифицировать и переопределять точные атрибуты CSS, которые вы хотите настроить. Анализатор сканирует предоставленную тему и автоматически настраивает вашу дочернюю тему.
Childify Me
https://ru.wordpress.org/plugins/childify-me/
Позволит создать дочернюю тему для любой установленной темы, непосредственно с панели Внешний вид>>>Тема.
Создать дочернюю тему измененного шаблона
Представим ситуацию, вы работаете со своим сайтом и вам надоело постоянно править шаблон после обновления. Что делать? Нужно создать дочернюю тему уже измененного шаблона. Как это сделать?
Вариант 1. Поставьте плагин Child Theme Configurator, он сам «просветит» ваш шаблон и перенесет измененные файлы в дочернюю тему;
Вариант 2. Сделайте «дочку» в ручном режиме и далее: Перенесите измененные файлы из родительской темы в дочернюю тему.
Всё! Теперь вы работаете на дочерней, измененной ранее теме.
Выводы
Теперь вы знаете, как создать дочернюю тему WordPress. Использование данного функционала упрощает работу с шаблонами и убирает задачу по контролю за постоянно изменяющимися темами. С дочерней темой можно править шаблон без боязни потереть исправления после обновления. Вопросы в комментариях.
WordPress всегда удивляла меня скрытыми возможностями. И удивляла не столько наличием этих возможностей, сколько простотой их реализации. Конечно, скрытые возможности не относятся к великим тайнам системы, просто до поры до времени, ты даже не знаешь, что «такое» можно сделать на WordPress. Доступность для редактирования кодов рабочих тем WordPress, позволяют изменять и дополнять внешний вид сайта от смены оформления до создания дополнительных виджетов и плагинов.
Зачем нужна дочерняя тема
Однако, есть одно небольшое неудобство: любые прямые корректировки кода темы, исчезают, а вернее возвращаются к первоисточнику, после каждого обновления шаблона. Чтобы избежать таких откатов, создается дочерняя тема WordPress, которая позволяет редактировать код темы без угрозы потерять все изменения при плановом обновлении.
Что такое дочерняя тема WordPress
Дочерняя (child theme, тема-потомок) это инструмент, позволяющий вносить любые корректные изменения внешнего вида (редакция файла style.css) и функционала сайта (файлы functions.php и другие файлы шаблона) и не потерять редакции при обновлении шаблона.
Стили и разметка темы родителя подкачиваются в тему потомок, а изменения в child theme наслаиваются на них. Все изменения мы вносим в дочернюю тему, а основная тема остается неизменной.
Создаем дочернюю тему WordPress – практический пример
Напомню, все темы системы «лежат» в каталоге wp-content/themes . Далее по шагам.
- В каталоге wp-content/themes создаем папку с произвольным названием дочерней темы. Для примера создаю папку: first-child-theme. Название произвольно, скоро понадобится.
- В любимом текстовом редакторе (я использую Notepad++) создаем текстовой файл с расширением css и названием style . Название не меняем, а содержание файла должно содержать, пока, только заголовок:
Здесь, важна только, последняя строка, это название папки с родительской темой. Именно из нее, система будет подкачивать стили шаблона.
- Файл сохраняем и заливаем в папку дочерней темы, first-theme.
- В консоли сайта появляется дочерняя тема. Название совпадает с названием указанным в строке: Theme Name. При открытии темы показывается указанное описание темы — строка Description.
Тема еще пустая и нужно ее наполнить и активировать. Можно наоборот: активировать, а потом наполнить.
Как наполнить дочернюю тему
Напоминаю задачу, нам не нужна пустая дочерняя тема, а нужна тема, дублирующая родительскую тему, чтобы в ней менять стили и разметку.
Для дублирования темы выбираем из двух вариантов исполнения:
- Копируем родительский файл style.css и переносим его в аналогичный файл дочерней темы (пока он всего один).
- Или в файле style.css дочерней темы вписываем дополнительную строку:
Где, zeefocus – основная, родительская тема.
Важно! Этой строкой мы подгружаем стили основной темы. Теперь, не нужно копировать файл стиля, можно вносить изменения в пустой файл дочерней темы и он будет записываться поверх стилей основной темы. Редактировать файл style.css можно из админки сайта, с соблюдением , на вкладке Внешний вид→Редактор .
Не забываем, функцию import вынести из заголовка файла style.css .
Другие файлы темы
Опять два варианта,
- создаем пустые файлы с аналогичными названиями пустым содержимым: () и пишем их, как нужно;
- или, проще, переносим файлы основной темы в дочернюю тему и их редактируем, как нужно.
Плагины child theme
О плагинах облегчающий создание дочерней темы сайта в статье.
В некоторых случаях при работе над сайтом заказчик просит не вносить изменения в оригинальную тему. Это необходимо, если в будущем планируется делать ее обновления и внесенные в файлы изменения исчезнут.
Для подобных случаев в WordPress предусмотрен механизм создания дочерней темы (child theme). Такая тема использует в качестве основы родительский шаблон и при этом вы можете добавить в нее свои собственные файлы и функции.
Механизм работы с дочерними темами довольно простой. Прежде всего вам нужно в папке wp-content/themes создать новую папку для нее. Будем считать, что папка с основным шаблоном у нас называется parent, а мы создадим новую, которую назовем child.
В папку child нужно поместить, как минимум, один файл style.css. В нем необходимо разместить следующие инструкции:
/* Theme Name: Child Template: parent */
Theme Name: Child Template: parent |
Первая инструкция (Theme Name: Child) это просто название дочерней темы, фактически она не является обязательной, а вот вторая инструкция (Template: parent) является обязательной, и указывает, что данный шаблон является дочерним к parent.
Если вы помещаете в папку с дочерней темой какой-либо файл, то он заменяет такой же из родительского шаблона. Это правило действует для всех файлов, кроме functions.php.
@import url("../parent/style.css");
@ import url ("../parent/style.css" ) ; |
Для корректной работы перед директивой @import не должно быть никаких правил CSS.
Никаких дополнительных настроек делать не нужно. Иногда автоматическое подключение стилей css из дочерней папки может не работать. Разработчик шаблона должен использовать функции:
- get_stylesheet_uri() — адрес файла стилей;
- get_stylesheet_directory_uri() — адрес папки со стилями,
но он может подключать style.css каким либо другим способом, что приводит к возникновению проблем. В этом случае, скорее всего, будет не сложно посмотреть код и найти проблему.
Подробнее по файлу functions.php. Если в дочерней теме есть такой файл, то движок сначала загрузит именно его, а затем файл с этим именем из родительской папки. Таким образом вы можете свободно расширять функционал шаблона.
Все прочие файлы, находящиеся в дочерней папке, как уже было сказано, заменяют аналоги из родительской темы. То есть вы можете взять оригинальный single.php, внести в него изменения и поместить в дочернюю папку. При работе движка Вордпресс будет использоваться именно он.
Плюсы использования дочерней темы понятны: вы сохраняете нетронутой оригинальную тему и можете свободно ее обновлять. Минусов особых нет, если только в оригинальном шаблоне разработчик не допустил ошибки, затрудняющие использование.
Структура папок в дочерней теме должна совпадать с родительской структурой, если вы модифицируете файлы во вложенных папках.
Разработчики WordPress добавили возможность создавать дочерние темы, теперь у вас появилась возможность сделать свою подтему на основе родительской. Функция создания дочерней темы позволит вам изменить внешний вид родительской темы, а затем сохранить измененную тему отдельно, не затронув при этом первую. В этом руководстве вы узнаете, что такое дочерняя тема WordPress и как создать дочернюю тему в WordPress.
Для чего использовать дочернюю тему
Дочерняя тема позволяет изменять родительскую тему в соответствии с вашими пожеланиями. Главным преимуществом этой функции является то, что вы можете внести изменения в дочернюю тему без влияния на родительскую или любую другую тему использующую ее в качестве основы.
Как работает дочерняя тема WordPress
Дочерняя тема располагается в отдельной папке и содержит свои собственные файлы style.css и functions.php . При необходимости возможно добавить дополнительные файлы, но основные файлы темы обязательны для ее правильной работы.
Используя соответствующие .css и .php файлы, вы можете изменить практически все, начиная от стиля и параметров макета, до скриптов которые использует дочерняя тема.
Дочернюю тему можно сравнить со слоями в любом редакторе изображений. Когда посетитель заходит на ваш сайт, сначала загружается дочерняя тема, а затем подключаются отсутствующие стили и функции из родительской темы. В результате, большую часть кода пользователь получает из родительской темы, но перед отображением, он изменяется в соответствии с настройками дочерней темы.
Перед тем, как вы начнете это руководство, вам понадобится следующее:
- Доступ к панели управления WordPress
- Доступ к (рекомендуется) или
Шаг 1 - Создание дочерней темы в WordPress
Процесс создания дочерней темы довольно прост и может быть легко выполнен внимательно следуя данному руководству.
Вам необходимо создать папку для дочерней темы в стандартном каталоге тем WordPress wp-content/themes . Для удобства и сохранения порядка в каталоге, лучше создать папку с окончанием -child после названия родительской темы. Если хотите, можете добавить название конкретного проекта. Запомните, название каталога не должно содержать пробелы для избежания возможных ошибок. Для создания новой папки воспользуйтесь FTP-клиентом или Файловым Менеджером. Мы рекомендуем использовать бесплатный FTP-клиент FileZilla
В этом руководстве мы будет использовать Файловый Менеджер, для создания дочерней темы на основе стандартной темы Twenty Seventeen, поэтому полный путь до папки будет выглядеть так wp-content/themes/twentyseventeen-child .
- Войдите в панель управления Hostinger и нажмите на иконку Файловый Менеджер .
- Перейдите в папку где установлен WordPress (обычно это public_html ), далее wp-content → themes .
- Нажмите кнопку Новая папка , введите название дочерней темы и нажмите Создать .
- Войдите в созданную папку дочерней темы.
- Нажмите кнопку Новый файл , введите style.css в качестве имени файла и нажмите Создать .
- Вставьте следующий код в файл:
- Смените все значения на соответствующие вашему домену и теме. Самыми важными полями являются Template и Theme name , так как они указывают WordPress на какой родительской теме основана ваша дочерняя тема. Далее, нажмите Сохранить для сохранения изменений.
- Добавьте файл functions.php в тот же каталог, но не вставляйте туда код из родительской темы, так как он должен оставаться отдельным от нее. Вместо этого, создайте пустой файл или добавьте новые.php функции необходимые для вашей дочерней темы.
- Из панели управления WordPress, перейдите в раздел Внешний вид → Темы и нажмите кнопку Активировать на вашей дочерней теме.
- Зайдите на ваш сайт, вы можете увидеть, что тема отображается не совсем правильно (как на картинке снизу). Без паники, это происходит из-за того, что файл functions.php еще не подгружает CSS из родительской темы.
- Из панели управления WordPress перейдите в раздел Внешний вид → Редактор и выберите файл functions.php .
- WordPress имеет функцию загрузки CSS из родительской темы. Скопируйте данный код в файл function.php дочерней темы:
- Нажмите Обновить файл внизу страницы для сохранения изменений.
- Посетите ваш сайт вновь. Теперь CSS загружен и ваша дочерняя тема выглядит также, как и родительская.
Как вы могли заметить, процесс создания дочерней темы довольно прост, если иметь правильный подход и воспользоваться пошаговой инструкцией нашего руководства.
Шаг 2 - Настройка дочерней темы WordPress
Теперь вы скорее всего хотите поскорее начать изменять внешний вид дочерней темы. Вы же создали ее именно для этого, правильно?
Шаг 2.1 - Настройка внешнего вида вашей дочерней темы
Для настройки внешнего вида темы вам необходимо отредактировать файл custom.css в каталоге вашей дочерней темы. Для этого можно использовать текстовый редактор и FTP-клиент, файловый менеджер или редактор WordPress (Внешний вид → Редактор) . Вам также необходимы некоторые базовые знания о правилах CSS и умение проверять элементы сайта с помощью браузера.
К примеру, для изменения цвета заднего фона, добавьте следующие CSS правила в файл style.css :
Site-content-contain { background-color: #d5ffa0; position: relative; }
Ниже показано то, каким станет внешний вид вашего сайта после внесения изменений.
Данный процесс применим и для изменения других элементов сайта.
Шаг 2.2 - Добавление и удаление функций
Еще одним преимуществом использования дочерней темы является возможность иметь раздельные файлы functions.php , которые как и плагины, используются для добавления (или удаления) определенных функций. Имея файл functions.php в дочерней теме, вы можете быть уверены в его сохранности, так как он не будет удален или изменен после обновления стандартной темы.
Для добавления новых функций к вашей теме, добавьте нужный PHP код в файл functions.php вашей дочерней темы. К примеру, данный код отключит функцию поиска WordPress:
Function disable_search($query, $error = true) { if (is_search()) { $query->is_search = false; $query->query_vars[s] = false; $query->query[s] = false; // to error if ($error == true) $query->is_404 = true; } } add_action("parse_query", "disable_search"); add_filter("get_search_form", create_function("$a", "return null;"));
Заключение
Дочерняя тема WordPress предоставляет возможность создать полностью новый проект на основе родительской темы, без какого-либо вмешательства в ее файлы. С помощью небольшого кода и работы с каталогами, вы можете изменить ваш сайт настолько, насколько вы этого захотите.
Дочерняя тема - это тема, которая наследует функционал и дизайн другой темы, называемой «родительской». Дочерняя тема - рекомендуемый разработчиками WP способ модифицировать «под себя» существующую тему.
Зачем использовать дочернюю тему?
Есть несколько причин, почему вам бы хотелось использовать дочернюю тему:
- Если вы измените тему напрямую, и она обновится, то ваши изменения просто пропадут. Используя дочернюю тему, вы будете уверены, что ваши изменения сохранятся.
- Использование дочерней темы может ускорить время разработки.
- Использование дочерней темы - хороший способ изучить сам процесс разработки темы для Вордпресс.
Как сделать дочернюю тему WordPress
Дочерняя тема состоит, как минимум, из одной папки (директории дочерней темы) и двух файлов (style.css и functions.php), которые вам нужно будет создать. Итак, вам потребуется:
- Директория дочерней темы
- style.css
- functions.php
Первый шаг - это создание директории для дочерней темы, которая будет размещаться в папке wp-content/themes . Рекомендуется, чтобы название директории дочерней темы оканчивалось суффиксом “ -child ” (хотя и не обязательно, особенно, если вы создаете тему для публичного использования).
Вам также нужно удостовериться, чтобы в названии директории для дочерней темы не было пробелов, в против случае это вызовет ошибку. На скриншоте выше название нашей дочерней темы “ twentyfifteen-child ”, означающее, что родительской темой является Twenty Fifteen .
Следующий шаг - создание файла стилей для дочерней темы (style.css). Файл стилей должен начинаться со следующей мета-информации:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child |
Важная информация, о которой вы должны знать:
- Вам надо будет заменить текст этого примера, исходя из вашей ситуации.
- Строка “ Template ” соответствует названию директории родительской темы. В нашем примере родительской темой является Twenty Fifteen, поэтому строка “ Template ” содержит “ twentyfifteen ”. В вашем случае может быть другая тема, поэтому скорректируйте ее соответствующим образом.
- В принципе, файла стилей (style.css) уже достаточно для создания дочерней темы. Однако для грамотной постановки в очередь на загрузку файлов стилей потребуется файл functions.php (см. ниже).
Третий и последний шаг - постановка в очередь родительских и дочерних файлов стилей.
Заметьте, что предыдущий метод предполагал импорт родительских стилей, используя директиву @import . Сейчас это уже устаревшая практика.
Как правильно и корректно загружать стили
Корректный метод постановки в очередь родительского файла стилей заключается в добавлении хука (или, по-английски, action ) в виде функции wp_enqueue_scripts .
Данный метод также предполагает использование функции wp_enqueue_style() в дочернем файле functions.php . Поэтому вам нужно создать этот файл в директории с дочерней темой.
Первая строка дочернего файла functions.php начинается с открытия тега PHP (
Следующий пример функции будет работать, если родительская тема использует только один главный файл style.css , содержащий все CSS правила. Если ваша тема имеет больше одного.css файла (в т.ч. ie.css , style.css , main.css), тогда вам потребуется удовлетворить все необходимые зависимости родительской темы.
add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() { wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); }
Как правило, файл стилей дочерней темы загружается автоматически. Если это не так, вам также надо будет его поставить в очередь. Настроив “ parent-style ” как зависимость, убедитесь, что стили дочерней темы загружаются после нее.
add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() { wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); wp_enqueue_style("child-style", get_stylesheet_directory_uri() . "/style.css", array("parent-style")); }
add_action ("wp_enqueue_scripts" , "theme_enqueue_styles" ) ; function theme_enqueue_styles () { wp_enqueue_style ("parent-style" , get_template_directory_uri () . "/style.css" ) ; wp_enqueue_style ("child-style" , get_stylesheet_directory_uri () . "/style.css" , array ("parent-style" ) |
Теперь ваша дочерняя тема готова для активации. Войдите в административную панель, далее на страницу Внешний вид > Темы . Вы должны увидеть вашу дочернюю тему в списке тем и готовую к активации. (Если в текущей инсталяции включена мультисайтовость, тогда вам надо переключиться на соответствующую панель, чтобы включить тему. После этого переключитесь обратно и активируйте тему).
Важно : После активации вам потребуется пересохранить ваше меню (Внешний вид > Меню или Внешний вид > Настроить > Меню ) и опции темы, включая фоновое изображение, а также изображение в шапке, если таковые предусмотрены родительской темой.
Файлы шаблонов
Если вы желаете изменить больше, чем стили, существует способ переопределить любые файлы родительской темы. Для этого просто включите файл с таким же названием в папку с дочерней темой. Таким образом, он “перекроет” соответствующий файл в директории родительской темы в процессе загрузки сайта.
К примеру, если вы хотите изменить код PHP для шапки сайта, вы можете включить файл header.php в вашу директорию с дочерней темой, и этот файл будет использован вместо header.php родительской темы.
Вы можете также включить файлы в дочернюю тему, которых изначально не было в родительской. Например, вы можете создать более функциональный шаблон, чем родительский, для какой-то конкретной страницы или категории.
Использование functions.php
В отличии от style.css , файл functions.php дочерней темы не переопределяет родительскую копию. Напротив, он является как бы дополнением к ней (точнее, он загружается перед родительской копией).
Таким образом, functions.php дочерней темы обеспечивает “умный”, беспроблемный способ изменения функциональности родительской темы. Скажем, вы хотите добавить функцию PHP к вашей теме. Самый быстрый способ - открыть файл functions.php темы и поместить функцию туда. Но это не очень умно: когда в следующий раз тема обновится, ваша функция просто исчезнет.
Существует альтернативный путь, который будет более разумным: вы можете создать дочернюю тему, добавить в нее файл functions.php и поместить свою функцию вновь созданный файл. Функция будет делать ту же самую работу и оттуда, с тем преимуществом, что она не будет страдать от будущих обновлений родительской темы. Отсюда важное замечание: не копируйте полностью контент родительского файла functions.php в такой же дочерний файл.
Структура functions.php проста: открывающий тег PHP в начале, а ниже него размещаете свой код PHP. В этот файл вы можете разместить столько кода, сколько необходимо. Пример ниже иллюстрирует элементарный файл functions.php , который делает одну простую вещь: добавляет ссылку на фавиконку в тег
HTML странички." . "\n"; } add_action("wp_head", "favicon_link");
Подсказка для разработчиков тем : тот факт, что functions.php дочерней темы загружается первым означает, что вы можете сделать функции пользователя заменяющими функции разработчика, т.е. если пользователь создал такую же функцию, как и ваша, то она станет основной. Просто добавьте условие:
if (! function_exists("theme_special_nav")) { function theme_special_nav() { // Сделать что-то. } }
В этом случае, дочерняя тема может заменить PHP-функцию родителя, просто объявив ее заранее.
Включение файлов в вашу дочернюю тему
Когда вам нужно включить файл, который должен являться частью структуры дочерней темы, используйте функцию get_stylesheet_directory() . Так как родительский файл стилей style.css заменяется дочерним style.css , и этот дочерний style.css располагается в корневой папке поддиректории дочерней темы, get_stylesheet_directory() будет указывать именно на директорию с дочерней темой, а не родительскую.
Ниже пример использования конструкции require_once , который иллюстрирует, как вы можете использовать get_stylesheet_directory , когда нужно дать ссылку на файл, хранящийся в структуре дочерней темы.
require_once(get_stylesheet_directory() . "/my_included_file.php");
require_once (get_stylesheet_directory () . "/my_included_file.php" ) ; |
Дополнительная полезная информация
Использование форматов постов
Дочерняя тема наследует форматы постов, определенные в родительской. Когда создаете дочернюю тему, знайте, что использование add_theme_support("post-formats") перекроет форматы, определенные в родительской теме, а не добавит к ним.
Поддержка RTL (написание справа-налево)
Для поддержки языков RTL, добавьте файл rtl.css к вашей дочерней теме. Он содержит:
/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */
