Дочерние темы — для чего нужны и как с ними работать

И сразу же постараюсь ответить на вопрос из заголовка — для чего нужны дочерние темы?

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

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

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

  1. Первым шагом создаем директорию дочерней темы:
    Директория дочерней темы

    Я назвал её twentytwelve-child, но это совсем не обязательно — можете называть как угодно, главное, чтобы название темы не содержало пробелов и русских букв.

  2. Следующим шагом — работа со style.css. У меня он начинается с этого:
    /*
     Theme Name:   Twenty Twelve Child
     Author:       Misha Rudrastyh
     Author URI:   https://misha.blog
     Template:     twentytwelve
    */

    Самым важным в данном случае является параметр Template — он и определяет то, что эта тема дочерняя. Параметр содержит название директории родительской темы.

  3. На этом этапе дочерняя тема появится в админке вашего сайта.
    Дочерняя тема в админке сайта

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

  4. Создаём в папке с дочерней темой functions.php и добавляет туда хук, который будет подключать таблицу стилей родительской темы на сайт и сразу же за ней — таблицу стилей дочерней темы.
    function true_enqueue_styles() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    }
     
    add_action( 'wp_enqueue_scripts', 'true_enqueue_styles' );

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

  5. Также иногда бывает нужно пересохранить меню Внешний вид > Меню и настройки темы.

Как работают дочерние темы?

На самом деле всё очень и очень просто — файлы, которые вы создаёте в директории дочерней темы, будут заменять эквивалентные им файлы из родительской темы.

style.css и functions.php

Исключение составляют эти два файла.

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

Функции

Родительская тема Дочерняя тема
get_template_directory_uri() — возвращает URL родительского шаблона. get_stylesheet_directory_uri() — возвращает URL текущего шаблона (т е, если функция используется в дочерней теме, то выведен будет URL дочерней темы).
get_template_directory() — возвращает абсолютный путь к директории родительской темы на сервере. get_stylesheet_directory() — возвращает абсолютный путь к директории текущей темы на сервере.

Локализация

Процесс перевода дочерних тем по сути ничем не отличается от локализации недочерних тем. Про локализацию читайте подробнее здесь.

Миша Рудрастых Разработчик WordPress WooCommerce

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Смотрите также