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

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

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

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

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

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

Две причины:

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

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

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

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

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

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

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

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

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

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

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

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

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

Дочерняя тема готова! 🎉

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

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

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

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 в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

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

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

Комментирование этого поста более не доступно.