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

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

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

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

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

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

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

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

  2. Следующим шагом — работа со style.css. У меня он начинается с этого: 
    /*
 Theme Name:   Twenty Twelve Child
 Author:       Миша Рудрастых
 Author URI:   https://misha.agency
 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. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

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

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

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

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

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