Дочерняя тема WordPress: зачем она нужна и как её создать

Дочерняя тема WordPress собирается из двух файлов и занимает 10–15 минут. После этого вы правите стили и шаблоны своего сайта и не боитесь, что обновление родительской темы сотрёт всё сделанное. Ниже: что нужно иметь до начала, шесть шагов с проверкой каждого и разбор типичных ошибок. Инструкция написана для WordPress 6.x и классических тем с PHP-шаблонами.

Что понадобится до начала

• WordPress 6.x и учётная запись администратора.
• Доступ к файлам сайта: SFTP или файловый менеджер на хостинге.
• Установленная родительская тема. Нужно знать точное имя её папки в wp-content/themes, регистр букв важен.
• Свежая резервная копия файлов и базы данных.
• Редактор, который сохраняет файлы в UTF-8 без BOM. Блокнот Windows для этого не подходит.

Зачем это нужно

Обновление темы заменяет её папку целиком. Правки в style.css, header.php или functions.php родителя исчезнут без предупреждения. Дочерняя тема лежит в отдельной папке. WordPress берёт файл шаблона из неё, если он там есть, а всё остальное достаёт из родителя[1].

Всё, что вы меняете в родительской теме, живёт до ближайшего обновления. Всё, что в дочерней, живёт столько же, сколько сам сайт.

Цена у этого решения есть. Появляется вторая папка, которую нужно поддерживать. Шаблон, скопированный в дочернюю тему, больше не обновляется вместе с родителем, поэтому после крупных обновлений его придётся сверять вручную. Файл functions.php дочерней темы работает иначе: он загружается в дополнение к родительскому и раньше него, а не вместо.

Пошаговая инструкция

1. Найдите папку родительской темы. Подключитесь по SFTP и откройте wp-content/themes. Запишите имя нужной папки буква в букву, например twentytwentyone.

   Проверка: в списке есть папка с именем, которое вы записали.

2. Создайте папку дочерней темы. Рядом с родителем создайте папку с именем родителя и суффиксом -child: twentytwentyone-child.

   Проверка: в wp-content/themes лежат две папки, родительская и дочерняя.

3. Создайте в ней файл style.css. Значение в строке Template должно совпадать с именем папки родителя. Эта строка превращает обычную тему в дочернюю.

   /*
    Theme Name:   Моя дочерняя тема
    Template:     twentytwentyone
    Version:      1.0.0
    Description:  Дочерняя тема для правок поверх twentytwentyone
    Text Domain:  my-child-theme
   */

   Проверка: в разделе «Внешний вид» → «Темы» появилась карточка «Моя дочерняя тема». Без скриншота она выглядит пустой, это нормально.

4. Создайте файл functions.php. Он подключает стили родителя и затем стили дочерней темы через хук[1] wp_enqueue_scripts. Закрывающий тег ?> в конце файла не нужен.

   <?php
   // Подключаем стили: сначала родительские, затем свои.
   add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
   
   function child_theme_enqueue_styles() {
       // Стили родительской темы
       wp_enqueue_style(
           'parent-style',
           get_template_directory_uri() . '/style.css'
       );
   
       // Стили дочерней темы. Зависят от родительских, поэтому идут после них.
       // Версия берётся из шапки style.css и сбрасывает кеш браузера при её смене.
       wp_enqueue_style(
           'child-style',
           get_stylesheet_uri(),
           array( 'parent-style' ),
           wp_get_theme()->get( 'Version' )
       );
   }

   Проверка: файл лежит в корне папки дочерней темы, перед <?php нет пробелов и пустых строк.

5. Активируйте тему. «Внешний вид» → «Темы» → «Активировать» на карточке дочерней темы. Часть настроек настройщика хранится отдельно для каждой темы, поэтому после переключения проверьте логотип, цвета и привязку меню к местам вывода.

   Проверка: главная страница выглядит так же, как до переключения. Если оформление пропало, смотрите раздел «Если не получилось».

6. Проверьте, что правки действуют. Добавьте в конец style.css временное правило:

   body {
       border-top: 6px solid #d63638;
   }

   Проверка 1: после обновления страницы (Ctrl+F5) сверху появилась красная полоса. Затем удалите правило.

   Теперь проверьте шаблоны. Скопируйте footer.php из родителя в папку дочерней темы и добавьте самой первой строкой комментарий <!-- child-theme-check -->.

   Проверка 2: в исходном коде страницы (Ctrl+U) виден этот комментарий. Это значит, что WordPress берёт шаблон из дочерней темы. Комментарий после проверки удалите.

Что значат поля в шапке style.css

Если не получилось

• «The parent theme is missing. Please install the "twentytwentyone" parent theme.» В русском интерфейсе текст переведён. Значение Template не совпадает с именем папки родителя: опечатка, другой регистр или родитель удалён. Сверьте строку с реальным названием папки.

• «Stylesheet is missing.» Файл style.css лежит не в корне папки дочерней темы или назван иначе, например Style.css. На Linux-хостингах регистр имеет значение.

• Тема активна, но сайт без оформления. Родительские стили не подключились. Откройте инструменты разработчика браузера, вкладку «Сеть», и найдите запрос к style.css со статусом 404. Проверьте, что functions.php лежит в корне дочерней темы и код скопирован целиком.

• Белый экран или «Parse error: syntax error, unexpected ...». В functions.php опечатка: пропущена точка с запятой или скобка. Исправьте файл по SFTP. Если быстро не найти ошибку, переименуйте папку дочерней темы. WordPress переключится на тему по умолчанию, и админка снова откроется.

• «Warning: Cannot modify header information - headers already sent by ...». Перед <?php стоит пробел, пустая строка или BOM. Пересохраните файл в UTF-8 без BOM и уберите всё, что стоит перед открывающим тегом.

Что делать дальше

Переносите в дочернюю тему только те файлы, которые действительно правите. Копировать тему целиком не нужно: каждый лишний файл перестанет обновляться вместе с родителем. После каждого обновления родительской темы сравнивайте скопированные шаблоны с оригиналами любым инструментом сравнения файлов. В инструментах разработчика проверьте, что оба style.css загружаются по одному разу и родительский идёт первым.

Если у вас блочная тема (в ней есть файл theme.json и папки templates и parts), шаблоны тоже переопределяются одноимённым файлом в дочерней теме. Нужна ли там строка подключения стилей через functions.php, проверьте в Theme Handbook для вашей версии WordPress, ссылка ниже. Вложенные цепочки вроде дочерней темы от дочерней WordPress не поддерживает: уровень только один.

[1] Хук (hook) в WordPress: точка в коде ядра, к которой можно подключить свою функцию. Функция add_action регистрирует вашу функцию на такой точке, и WordPress вызывает её в нужный момент.