Вы здесь: Главная » Wordpress » Как создать дочернюю тему для WordPress

Как создать дочернюю тему для 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 на более темный:

 

Было:

Цвет фона body родительской темыпуть к файлу style.css родительской темы

Получили:

Цвет фона body дочерней темыпуть к файлу style.css дочерней темы

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

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

Дополнительные стили в настройках темы

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

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

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

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

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

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

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

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

footer в родительской теме

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

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

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

Код файла footer.php

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

Папки в дочерней теме

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

Код файла site-info.php

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

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

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

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

Новый футер

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

ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ

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

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

Футер с сылкой на страницу политики конфиденциальности

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

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

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

Плагин Child Theme Configurator

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

Настройки плагина Child Theme Configurator

 

В настройках плагина 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 вашей темы.

Атрибуты дочерней темы WordPress

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

Еще атрибуты дочерней темы WordPress

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

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

Стили дочерней темы

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

2 комментария

  1. Подскажи, вот создал дочернюю тему, теперь хочу изменить форму постов - вывод анонсов, добавить блок.  С чего начать? как научиться изменить тему

    • Если вы хотите изменять вывод постов, то первым делом нужно смотреть код файла index.php родительской темы. Именно в нем обычно прописан цикл WordPress, который отвечает за вывод постов (записей). Например,

      Функция get_template_part() подключает нужный файл из папки template_parts родительской темы. В приведенном коде он будет находится в файле content.php. Если контент не найден (например, в категории нет постов), будет подтянут код из файла template_parts/content-none.php Нужно смотреть, как в этих файлах реализован вывод постов.
      Кроме того, нужно смотреть код файла single.php родительской темы, в котором описано, как будет выведен отдельный пост (запись) при переходе на него по ссылке "Читать далее" ("Read More").

      Т.е. необходимо научиться читать код родительской темы и тогда можно переопределять его в дочерней, создав свою папку template_parts и добавив в нее файлы content.php и content-none.php, а возможно, и другие. Можно для начала скопировать их из родительской темы в дочернюю, а потом уже вносить свои правки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *