Основы создания дочерней темы WordPress

Этой статьей открывается небольшой курс по созданию дочерних тем в WordPress. Курс будет состоять из нескольких глав:

  1. Основы создания дочерней темы WordPress
  2. Модульная CSS-стилизация в дочерних темах WordPress.
  3. Использование хуков фильтров в дочерних темах WordPress.
  4. Использование хуков действий в дочерних темах WordPress.

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

Файловая структура дочерней темы

Дочерние темы в WordPress располагаются в папке /wp-content/themes/, как и все другие темы для WP. Они активируются через панель администратора, как и любые другие темы. У них всегда есть свой файл style.css. Также они часто включают в себя файл functions.php. Они могут содержать каталог изображений, каталог скриптов, каталог вложений. Словом, это обычные темы WordPress.

С одной лишь разницей. Они не имеют файлов темы. Никаких. Ноль. Вам не понадобится знать PHP, чтобы создать свою дочернюю тему для WP.

Ключом к пониманию того, как работают дочерние темы для WordPress, выступает… простая строка файла style.css!

Давайте взглянем на простой пример заголовка стилевой таблицы, взятый из Кодекса:

/*   
Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
.
General comments/License Statement if any.
.
*/

Нас будет интересовать только одна строка из данного примера:

Template: use-this-to-define-a-parent-theme--optional

Согласно Кодексу,

«самая простая тема должна включать в себя только файл style.css, плюс изображения, если они имеются. Чтобы создать такую тему, вы должны определить набор наследуемых шаблонов, которые будут использоваться в новой теме. Делается это с помощью редактирования строки Template: line в заголовке файла style.css».

Это означает, что мы должны просто заменить строку use-this-to-define-a-parent-theme-optional на название директории, в которой находится наша основная тема (родительская тема). В итоге мы получим дочернюю тему, которая будет наследовать все шаблоны нашей родительской темы.

Чистый фреймворк, готовый к CSS-стилизации

Давайте сделаем дочернюю тему для WordPress, взяв за основу одну из популярных в прошлом тем Fusion. Мы назовем нашу новую дочернюю тему Fission.

Нам понадобится создать папку для нашей дочерней темы (с соответствующим названием) по адресу /wp-content/themes/. В итоге мы получим /wp-content/themes/fission/.

В этой папке /fission/ создаем новый файл под названием style.css. Открываем его в любом текстовом редакторе.

Копируем следующий заголовок, состоящий из пяти строк, в файл style.css, после чего сохраняем файл. Обратите пристальное внимание на строку под номером 4.

/*   
Theme Name: Fission
Description: A Child Theme of Fusion
Template: fusion
*/

Все! Мы сделали дочернюю тему Fission из темы Fusion. Активируем Fission из раздела с темами в панели администратора. Если все было сделано верно… вы должны получить новый, валидный HTML-документ, в котором отсутствует какая бы то ни было стилизация. На данном этапе все это смотрится не очень привлекательно.

fusion-html

Если взглянуть на существующий HTML-каркас темы в Firebug, то можно отметить для себя, что CSS-стилизация – это вопрос настройки вложенных div-элементов и элементов блочного уровня.

fusion-structure

Теперь вы можете использовать HTML-представление своей родительской темы – темы, в которой есть 19 PHP-шаблонов – в качестве фреймворка, т.е. фундамента для вашего будущего дизайна.

Вы только что сделали полностью функциональную, чистую тему WordPress, готовую к дальнейшей работе. Вам не нужно знать PHP. Только CSS и HTML.

Импорт стилей родительской темы

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

/*   
Theme Name: Fission
Description: A Child Theme of Fusion
Template: fusion
*/
@import url(../fusion/style.css);

В итоге наш сайт будет выглядеть точно так же, как и в случае с родительской темой Fusion. Таким образом, вы можете вносить изменения в родительскую тему, не трогая ее оригинальных файлов.

Переопределение стилей родительской темы

Хорошо, давайте теперь посмотрим, как внести некоторые простые изменения в нашу родительскую тему. С помощью Firebug можно быстро найти, какие стили отвечают за отображение тех или иных элементов в родительской теме.

firebug-copy

Скопируйте и вставьте в файл style.css дочерней темы следующий код (убедитесь в том, что Firebug обнаружил стили для h2, как на рисунке выше):

/* Overriding the h2 styles from the Parent Theme */
h2 {
    font-family:"Palatino Linotype",Georgia,"Tahoma","Century Schoolbook L",Arial,Helvetica;
    font-size:250%; /* Increasing the font size */
    font-weight:bold; /* Making the titles bold */
    margin:0.6em 0 0.3em;
}

Теперь, даже если вы обновите версию родительской темы, все ваши стили будут сохранены в дочерней теме.

Перезапись шаблонов родительской темы

Как мы уже успели с вами убедиться, редактирование стилей дочерней темы – безопасный способ поменять внешний вид родительской темы. Однако что делать, если нам нужно внести изменения в файлы шаблонов?

Все очень просто. Скопируйте необходимый файл шаблонов родительской темы в папку с дочерней темой, после чего внесите в него любые изменения. В процессе формирования темы, WordPress отдает предпочтение файлам шаблонов дочерних тем. Если существует альтернативная версия файлов, скажем, footer.php или single.php, то WordPress будет использовать их вместо аналогичных файлов родительской темы. Файлы дочерней темы всегда имеют больший приоритет, чем аналогичные файлы родительской темы. Также важно помнить о существующей иерархии шаблонов WordPress.

Источник: themeshaper.com

Блог про WordPress
Комментарии: 5
  1. Public

    Отличная серия статей. Большое спасибо. Только немного отвлекает разношерстность. ИМХО куда удобнее было бы, если б все показывалось на примере какой-то одной девелопмент темы.

    Не планируется продолжения этой серии ? Т.к. меня мучает один вопрос, а именно использование файла functions.php из родительской темы. Т.к. если я правильно понял, если я в дочерней сделаю такой же файл, допустим с одной единственной функцией, то он заменит родительский ? Или он будет к нему добавлен ? Т.е. хочется иметь возможность переопределять родительские функции на свои, при этом не пострадать после обновления родительской темы.

  2. Дмитрий (автор)

    Продолжение, к сожалению, не планируется.
    Файл functions.php дочерней темы не перезаписывает собой основной файл темы. Он просто загружается в дополнение к основному (еще перед загрузкой основного).
    Функция (или несколько функций), стоящая в файле functions.php дочерней темы, не будет зависеть от обновлений основной темы и никуда не пропадет.

  3. Public

    Верно, это если дописывать свой функционал, но если захочется изменить работу уже написанной функции в теме, то после загрузки материнского functions.php она по идее перекроет дочернюю, если конечно она не обернута в if ( ! function_exists( ‘func_name’ ) ) :.

    1. Дмитрий (автор)

      Да, должна перекрывать.

  4. Public

    Это не критика к статье, она и так раскрывает много полезного материала для начинающего темостроителя. Просто дополнение :) Получается что если захочется изменить функционал, или исправить баг, чтоб при обновлении темы это все не слетело, надо будет перекроить половину темы (т.е. написать свои функции, написать свои шаблоны, в которых будут уже новые функции и т.д.), т.к. даже премиум темы не сильно заморачиваются в вопросе обертки if function_exists.

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

Получать новые комментарии по электронной почте.