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

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

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

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

Две причины:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 вашей дочерней темы. Да, сначала создайте его.

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

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

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

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

В дочерних темах поддерживаются все файлы из иерархии шаблонов 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(). Теперь-то я понимаю, что они на тот момент, так же, как и я, не понимали никакой разницы между этими функциями.

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