Дочерние темы

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

В этом уроке подробно поговорим про создание дочерних тем в WordPress – разберёмся, для чего они нужны и как с ними работать.

Также, если вы хотите научиться создавать темы для WordPress с нуля на основе готовой HTML-вёрстки, то рекомендую посмотреть мой видеокурс.

Зачем нужна дочерняя тема?

Прежде всего – для чего?

Две причины:

  1. Если вам когда-нибудь приходилось редактировать темы сторонних разработчиков, то вы наверняка в курсе, что после обновления темы все сделанные изменения в файлах исчезают. Конечно, вы можете просто отключить возможность обновления тем, но использование дочерних шаблонов — более правильный вариант.
  2. Также родительскую тему можно использовать как общий шаблон для нескольких сайтов, а дочернюю – для определённых.

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

В качестве примера давайте возьмём стандартную тему WordPress Twenty Twenty One — для неё и создадим дочернюю тему.

Шаг 1. Создание директории под дочернюю тему

Заходим в директорию /themes и создаём там ещё одну папку

Создание директории дочерней темы
Назвать новую папку можете как угодно, ведь любая тема WordPress может иметь неограниченное количество дочерних тем! Но я решил назвать максимально по красоте – twentytwentyone-child.

Шаг 2. Создаём файл style.css

В директории, которую вы только что добавили, создайте файл style.css. В него закидываем примерно те же самые метаданные, что и при создании обычной темы. Но у вас добавится ещё один параметр, а именно – template. Параметр содержит название директории родительской темы.

Например я добавил в свой файл это:

/*
 Theme Name:   Twenty Twenty-One Child
 Author:       Миша Рудрастых
 Author URI:   https://misha.agency
 Template:     twentytwentyone
*/

На этом этапе тема появляется во Внешний вид > Темы и её можно активировать.

Дочерняя тема WordPress во Внешний вид > Темы

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

Подробнее про структуру файлов

Сама структура файлов будет выглядеть на данном этапе так:

wp-content
   └── themes
	 ├── twentytwentyone (родительская тема)
	 └── twentytwentyone-child (дочерняя тема, кстати может иметь любое название)
		 └── style.css

Дочерние темы могут содержать и другие файлы, давайте вкратце расскажу про них:

  • style.css — обязательный файл, который содержит информацию о дочерней теме. Сам по себе не будет подключаться автоматически, о том, как его правильно подключить, рассказываю чуть ниже.
  • functions.php — если вы создадите в дочерней теме этот файл, то он будет задействовать перед functions.php родительской темы, что например позволит вам перезаписать «pluggable-функции», подробнее об этом.
  • Различные файлы шаблона, как например index.php, archive.php и так далее. Если файл есть в дочерней теме, то этот файл будет использоваться вместо соответствующего файл в в родительской теме. Например, создав footer.php и скопировав в него содержимое footer.php из родительской темы, мы можем изменять спокойно код файла внутри дочерней темы, не меняя файл родительской темы, подробнее тут.
  • Также подтема может использовать новые изображения, новые CSS и JS-файлы.

Дочерняя тема готова и теперь мы можем использовать её для кастомизации сайта! 🎉

Как работать с дочерней темой?

Подключение стилей дочерней темы

Подключить стили дочерней темы – проще простого:

add_action( 'wp_enqueue_scripts', 'true_child_styles' );
 
function true_child_styles() {
 
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array(), null  );
 
}

Вставляем этот код в файл functions.php вашей дочерней темы. Да, сначала создайте его.

Однако в такой ситуации стили дочерней темы могут подключиться до стилей родительской и возможно нам это не нужно, тогда есть несколько вариантов решениея:

  • Можете уменьшить приоритет хука wp_enqueue_scripts, поставить например 25 или 9999.
  • В массив зависимостей функции wp_enqueue_style(), это третий параметр функции, укажите ID style.css родительской темы, его можно подсмотреть прямо в исходном коде сайта, либо сделать поиск по файлам родительской темы.

А вообще про подключение CSS и JavaScript у меня на сайте есть супер-подробный текстовый и видеоурок.

Замена файлов шаблона

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

Например вам нужно сделать изменения в файле single.php:

  1. Открываем родительскую тему и копируем файл single.php.
  2. Вставляем его в дочернюю тему.
  3. Делаем в нём нужные нам изменения.

В дочерних темах поддерживаются все файлы из иерархии шаблонов WordPress и шаблоны страниц тоже.

Работа с functions.php

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

Это также значит, что вы можете переписать некоторые функции из родительского functions.php, которые записаны вместе с условием if( ! functions_exists() ) {. Например вот такая функция из template-tags.php темы Twenty Twenty One.

if ( ! function_exists( 'twenty_twenty_one_posted_on' ) ) {
	/**
	 * Prints HTML with meta information for the current post-date/time.
	 *
	 * @since Twenty Twenty-One 1.0
	 *
	 * @return void
	 */
	function twenty_twenty_one_posted_on() {
		...

И мы в итоге в наш functions.php дочерней темы вставляем заново эту функцию, переписав под себя:

function twenty_twenty_one_posted_on() {
	// тут перезаписываем эту функцию спокойно!
}

Локализация

Процесс перевода дочерних тем по сути ничем не отличается от локализации недочерних тем. Единственный момент – используем функцию load_child_theme_textdomain() для подключения файлов перевода вместо load_theme_textdomain(). Про локализацию читайте подробнее здесь.

Функции

Когда я только начинал работать с WordPress, я не мог понять, почему некоторые авторы для получения URL темы используют get_template_directory_uri(), а некоторые – get_stylesheet_directory_uri(). Теперь-то я понимаю, что они на тот момент, так же, как и я, не понимали никакой разницы между этими функциями.

А в чём отличие этих и некоторых других функций, расскажу в этой таблице:

Родительская темаТекущая (родительская или дочерняя)
get_template_directory_uri() – получает URL папки родительской темы вне зависимости того, задействована ли она в родительской или в дочерней темеget_stylesheet_directory_uri() – всегда получает URL папки текущей темы, если используется в родительской – то родительской, если используется в дочерней – то дочерней.
get_template_directory() – путь к директории родительской темыget_stylesheet_directory() – путь к директории текущей темы
get_template() – название папки родительской темыget_stylesheet() – название папки текущей темы
get_stylesheet_uri() – URL файлы style.css текущей темы.

Видеоурок

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Комментарии — 32

Оставить комментарий

× Отменить ответ

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.