Как создать дочернюю тему для WordPress

Дочерняя тема WordPress - отличный инструмент кастомизации, т.е. изменения "под себя" любой темы, которую вы скачали с бесплатного репозитория WordPress или приобрели на каких-либо сайтах (например, на themeforest.net или templatemonster.com).

Как правило, на первом этапе в скачанной теме вам все нравится и подходит, но с течением времени возникает необходимость добавить какой-либо блок на главную страницу или поменять футер.

Можно, конечно, это сделать в файлах вашей темы. Но вот беда - если разработчик темы ответственно относится к своему детищу, он будет стараться регулярно обновлять ее. Когда вы обновите тему у себя на сайте, все ваши изменения слетят, т.к. затрутся новыми файлами при обновлении. И, если вы забыли сделать бэкап, то все ваши изменения канут в бездну. Восстанавливать их будет достаточно проблематично.

Этого не произойдет, если вы все изменения поместите внутрь дочерней темы. Эта тема будет за основу брать файлы родительской, т.е. той, на которой вы уже сделали свой сайт, но с нужными вам изменениями. Поэтому стоит разобраться с тем, как ее сделать.

Создание файлов дочерней темы WordPress

Во-первых, вам нужно создать пустую папку в директории wp-contents/themes/ вашего сайта и дать ей какое-либо имя. Популярным подходом является имя папки с приставкой -child. Например, мы создаем сайт-портфолио или сайт о каких-либо событиях и хотим использовать тему Fotografie от Catch Themes. Назовем свою папку fotografie-child. Если вы работаете на локальном сервере (например, OpenServer), то каталог тем у вас будет примерно таким в зависимости от количества загруженных тем.

Основными файлами дочерней темы WordPress являются style.css и functions.php, которые нам нужно будет создать в папке fotografie-child. Также в корне темы необходимо разместить файл screenshot.png, который будет отображаться в меню консоли Внешний вид → Темы, когда вы будете активировать свою тему. Если его нет, WordPress отобразит пустой блок. В принципе, его вполне можно добавить несколько позднее, когда вы уже внесете изменения в родительскую тему и можно будет "сфотографировать" изменения с помощью кнопки PrintScreen.

Код файла style.css

Файл стилей style.css несет очень важную информацию в комментариях, которые нужно разместить в самом верху. Именно в нем мы сообщаем WordPress, что наша тема является дочерней для выбранной, а также указываем версию дочерней темы, автора и ссылку на сайт разработчика (можно указать на тот, который будет использовать вашу дочернюю тему). Делается это с помощью следующего кода:

Обратите внимание на вторую строчку (Template: fotografie). Именно она указывает, какой шаблон (тему) нужно использовать в качестве родительской.

Далее в файле style.css можно записать строку, которая будет импортировать стили из родительской темы:

Очень важно, чтобы импорт был сразу после комментариев, т.к. по правилам css директива @import должна начинать css-файл.

После этой строки вы можете размещать любые стили, в которых у вас есть необходимость. Например, мы хотим уменьшить размер шрифта в заголовке на главной странице. С помощью Инспектора свойств (клавиша F12) в браузере выясним, какие правила для него назначены.

Переопределим эти правила в файле style.css нашей темы:

Получаем другой вид заголовка:

Изменим также цвет фона для body на более темный:

Было:

Получили:

Обратите внимание, что и в первом, и во втором случае стили прописаны в style.css, но на разных строчках и в разных файлах (!!!).

Если вашей целью является изменение css в родительской теме, то больше ничего делать и не надо. Правда, смысла создавать дочернюю тему тоже не было, т.к. в настройках любой темы (меню консоли Внешний вид → Настроить) сейчас можно дописать дополнительные стили:

Ложка дегтя директивы @import

Теперь поговорим о минусах импорта стилей из дочерней темы в родительскую. Дело в том, что простота импорта стилей с помощью директивы @import приводит к тому, что сначала грузятся все стили родительской темы, и только потом - дочерней. Это может довольно сильно замедлить скорость загрузки сайта, особенно, если стилей и в родительской, и в дочерней теме достаточно.

Поэтому использовать такой способ стоит лишь в случае небольшого количества css-правил, что бывает крайне редко. Во всех остальных случаях в style.css нужно оставлять только комментарии и стили дочерней темы, а стили родительской темы стоит загружать в файле functions.php.

Подключение стилей родительской темы в файле functions.php

Правильным способом подключения стилей является использование стандартной функции WordPress wp_enqueue_style с помощью такого кода:

В style.css у нас останется такой код:

Меняем футер в дочерней теме

Достаточно часто в футере нужно вывести данные о годах работы сайта и копирайте. Но создатели темы либо вообще могут не предусмотреть такую возможность, либо предлагают выводить вместо вашего текста ссылку на сайт разработчика темы. С одной стороны, такой подход вполне объясним - темы часто предоставляются для бесплатного скачивания, поэтому авторы получают от вас хотя бы ссылку на свой сайт в качестве бонуса. С другой стороны - вам это может быть абсолютно неинтересно, т.к. есть необходимость разместить в футере свой контент.

Например, внешний вид футера в нашей теме таков:

Здесь перед нами как раз описанная выше ситуация с ссылкой на сайт создателя темы.

Для того чтобы поменять текст, нам необходимо найти в теме файл footer.php и отредактировать его. Обычно этот файл находится в корне папки с родительской темой, так то найти его не составит труда.

Код файла footer.php нашей родительской темы содержит сюрприз в виде функции, загружающей часть кода из другого файла (выделен на скриншоте):

Сама по себе функция WP get_template_part( 'components/footer/site', 'info' ) уже дает нам подсказку, где искать нужный нам файл. Он будет расположен в папке 'components', затем во вложенной в нее папке 'footer' с именем 'site-info.php'. Всю эту вложенность папок и файлов нам необходимо повторить в дочерней теме, тогда WordPress вместо файла из родительской темы загрузит наш измененный.

Код файла site-info.php в родительской теме таков:

Нам нужно изменить текст в переменной $def_footer_text в соответствии с нашими требованиями. А требования были довольно простыми - информация о годах работы сайта и копирайте.

Поэтому текст нашего site-info.php будет таков:

Сниппет для футера был взят из статьи Как динамически обновить дату в футере сайта.

Теперь наш футер выглядит так:

Можем еще немного изменить футер в соответствии с новыми тенденциями в WordPress. Сейчас по умолчанию вы загружаете дистрибутив WP, в котором есть черновик страницы Политики конфиденциальности, описывающей, какие данные собирает WordPress при добавлении комментариев, регистрации пользователей, загрузке картинок и т.п.

Вы можете опубликовать эту страницу и добавить в футер ссылку на нее с помощью такого кода.

Ссылка будет отображаться только после публикации такой страницы:

Частичный перевод текста в футере объясняется тем, что наша родительская тема изначально англоязычная и предполагает создание файла перевода, который можно отредактировать с помощью программы PoEdit, а страница Политики конфиденциальности создана нами с названием на русском языке.

Создание дочерней темы WordPress с помощью плагина

Если вам кажется сложным самостоятельное написание кода или вы столкнулись с какими-либо ошибками в процессе создания  дочерней темы, воспользуйтесь помощью плагина. Отличным инструментом для этого является плагин Child Theme Configurator, который можно бесплатно скачать и установить как на локальном, так и реальном сервере.

Его настройки вы найдете в меню Инструменты → Child Themes.

В настройках плагина Child Theme Configurator можно выбрать как создание новой темы (пункт обведен на скриншоте), так и конфгурирование или дублирование существующей дочерней темы.

Вам понадобится указать, какую тему вы берете в качестве родительской (пункт Select a Parent Theme) и нажать на кнопку Analyze, чтобы проверить, подходит ли она для создания дочерней.

После проверки плагин предложит название папки (Name the new theme direcory), как правило, с приставкой -child. Нужно будет также указать, куда сохранять новые стили (Select where to save new styles) - как правило, это основной файл стилей style.css.

Далее вам нужно заполнить поля атрибутов дочерней темы WordPress, которые затем будут внесены в style.css вашей темы.

Вы можете отметить галочкой пункт Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme для того, чтобы все настройки и меню наследовались вашей дочерней темой.

После всех настроек обязательно нужно нажать кнопку Create New Child Theme.

На вкладке Child Styles вы увидите сформированный на основе всех атрибутов, внесенных вами ранее, файл style.css, который и служит основой для подключения и активации дочерней темы.

После этого вы можете скачать редактировать файлы дочерней темы.