Запись

Как создать дочернюю тему WordPress: пошаговый гайд для новичков

Пошаговая инструкция по созданию дочерней темы WordPress: структура файлов, подключение стилей родительской темы, настройка functions.php и переопределение шаблонов. С примерами кода и чек-листом.

дочерняя тема Wordpress

Дочерняя тема (child theme) - это отдельная тема WordPress, которая наследует стили, шаблоны и функции родительской темы, позволяя безопасно вносить изменения без потери правок при обновлении. В этой инструкции разберём создание дочерней темы с нуля: от структуры файлов до подключения functions.php, переопределения шаблонов и типичных ошибок, из-за которых сайт ломается.

Что такое дочерняя тема WordPress

Когда вы меняете файлы активной темы напрямую - правки в style.css, functions.php, шаблонах - первое же обновление перезапишет их. Дочерняя тема WordPress решает эту проблему: она лежит в отдельной папке, ссылается на родительскую и перехватывает нужные файлы, не затрагивая оригинал.

Принцип работы строится на приоритете загрузки:

  1. WordPress сначала ищет файл в папке дочерней темы (get_stylesheet_directory()).
  2. Если файл не найден - обращается к родительской (get_template_directory()).
  3. Стили подключаются явно через wp_enqueue_style(), поэтому порядок загрузки контролируется.
Важно: дочерняя тема не дублирует родительскую, а наследует её. Это значит, что все шаблоны, функции и стили родителя остаются доступными, пока вы не переопределите их явно.

Зачем нужна дочерняя тема: сравнение подходов

Ниже - таблица, которая показывает, чем отличается работа с родительской темой напрямую от использования дочерней. Это ключевой аргумент, когда вы решаете, стоит ли тратить 10 минут на настройку.

Критерий Правки в родительской теме Дочерняя тема (child theme)
Обновление темы Все изменения удаляются Изменения сохраняются
Скорость правки Быстро, но рискованно Быстро и безопасно
Откат изменений Только из бэкапа Достаточно удалить файл из дочерней
Перенос на другой сайт Нужно патчить родительскую Копируете одну папку
Совместимость с плагинами Конфликты при обновлении Конфликты минимальны
SEO и скорость Одинаково Одинаково (нет оверхеда)
Вывод: создание дочерней темы WordPress - обязательный шаг, если вы планируете менять стили, шаблоны или код темы. Это бесплатно, занимает 10 минут и защищает от потери данных.

Создание дочерней темы WordPress: пошаговая инструкция

1 Создайте папку темы

Подключитесь к серверу по FTP или откройте файловый менеджер хостинга. Перейдите в каталог:

/wp-content/themes/

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

  • twentytwentyfive-child
  • flavor-child
  • myproject-child
Ошибка: не используйте пробелы, кириллицу и заглавные буквы в имени папки. WordPress ожидает строчные латинские символы и дефисы.

2 Создайте style.css

Внутри папки создайте файл style.css и вставьте заголовок. Это единственный обязательный файл дочерней темы.

/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0.0
Description: Дочерняя тема для Twenty Twenty-Five
Author: Ваше имя
Text Domain: twentytwentyfive-child
*/

Разбор обязательных полей:

Поле Назначение Обязательное
Theme Name Отображаемое название в админке Да
Template Имя папки родительской темы (точно как на сервере) Да
Version Версия для кэширования и обновлений Рекомендуется
Description Краткое описание, видно в «Внешний вид → Темы» Нет
Author Автор темы Нет
Text Domain Домен локализации для перевода строк Рекомендуется
Совет: поле Template должно совпадать с именем папки родительской темы побуквенно. Если родитель называется flavor-developer, а вы напишете flavor, WordPress не найдёт родителя и выдаст ошибку «parent theme missing».

3 Создайте functions.php

В той же папке создайте functions.php. Через него подключаются стили родителя и добавляется собственная логика.

<?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’,
array(),
wp_get_theme()->get( ‘Version’ )
);
1234567
}

Что здесь происходит:

  1. get_template_directory_uri() - URL папки родительской темы.
  2. get_stylesheet_directory_uri() - URL папки дочерней темы.
  3. Зависимость array( 'parent-style' ) гарантирует, что дочерний style.css загрузится после родительского и переопределит нужные правила.

4 Активируйте дочернюю тему

Перейдите в админку WordPress: Внешний вид → Темы. Найдите карточку с названием дочерней темы и нажмите «Активировать».

Готово. Теперь все правки в style.css и functions.php дочерней папки применяются к сайту, а родительская тема остаётся нетронутой.

Подключение стилей: три рабочих способа

В зависимости от темы и ваших задач используйте один из вариантов.

Способ 1. wp_enqueue_style() (рекомендуемый)

Описан в шаге 3. Контролирует порядок загрузки, версии и зависимости. Подходит для 95 % случаев.

Способ 2. @import в CSS

Быстрый вариант для простых тем. В начало style.css дочерней темы добавляется строка:

@import url(«../twentytwentyfive/style.css»);

Минус: лишний HTTP-запрос и невозможность управлять порядком через зависимости.

Способ 3. Подключение через хук after_setup_theme

Используется, когда нужно дождаться инициализации темы и добавить стили условно (например, только на определённых страницах).

Для блочных тем (FSE / Gutenberg): начиная с WordPress 6.1 стили хранятся в theme.json. Чтобы переопределить переменные, создайте theme.json в дочерней папке и укажите только изменённые значения. Полное копирование родительского файла не требуется.

Дочерняя тема и functions.php: как не сломать сайт

Главное правило: functions.php дочерней темы не заменяет родительский, а дополняет его. WordPress подключает оба файла. Это значит:

  • Функции родителя остаются активными.
  • Ваши функции выполняются до функций родителя (дочерний файл грузится первым).
  • Переопределить функцию родителя можно только через remove_action() / remove_filter() или через механизм pluggable functions (если родитель это предусматривает).

Пример удаления родительского действия и добавления своего:

add_action( ‘after_setup_theme’, ‘remove_parent_actions’, 20 );
function remove_parent_actions() {
// Удаляем хук, зарегистрированный родительской темой
remove_action( ‘wp_head’, ‘parent_custom_header_code’ );
}
// Добавляем свой хук
add_action( ‘wp_head’, ‘child_custom_header_code’ );
function child_custom_header_code() {
echo ‘<meta name=»custom» content=»child-theme»>’;
}
Частая ошибка: объявление функции с тем же именем, что и в родительской теме, без проверки function_exists() вызывает Fatal error: Cannot redeclare function. Всегда оборачивайте в условие или используйте уникальные префиксы.

Переопределение шаблонов

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

Файл Что контролирует Когда переопределять
header.php Шапку сайта Нужно изменить логотип, меню, мета-теги
footer.php Подвал сайта Добавить счётчики, изменить копирайт
single.php Одиночную запись Изменить структуру статьи
page.php Статическую страницу Добавить кастомные блоки
archive.php Страницу архива Изменить вывод списка записей
woocommerce.php Обёртку WooCommerce Изменить сетку магазина

Чтобы переопределить шаблон:

  1. Скопируйте нужный файл из папки родителя в папку дочерней темы.
  2. Внесите изменения.
  3. Сохраните. WordPress подхватит файл автоматически, без дополнительных регистраций.
Совет: не копируйте все файлы подряд. Переопределяйте только те шаблоны, которые действительно меняете. Лишние копии усложняют обновления: если родитель исправит баг в header.php, ваша копия не получит исправление.

Типичные ошибки при создании дочерней темы

  1. Неверное поле Template. Опечатка в имени папки родителя → тема не активируется, ошибка «parent theme missing».
  2. Отсутствие подключения стилей родителя. Сайт выглядит «сломанным», потому что загружается только пустой style.css дочерней темы.
  3. Копирование functions.php родителя целиком. Приводит к дублированию функций и фатальной ошибке. В дочерний файл добавляйте только свой код.
  4. Использование @import вместе с wp_enqueue_style(). Стили загружаются дважды, растёт время отрисовки страницы.
  5. Правка theme.json без понимания структуры. В блочных темах некорректный JSON может отключить все стили. Валидируйте файл перед загрузкой.
  6. Игнорирование кэша. После активации дочерней темы очистите кэш браузера и плагинов кэширования (WP Rocket, LiteSpeed Cache).

Чек-лист: проверка дочерней темы перед публикацией

Убедитесь, что всё готово

  • Папка дочерней темы создана в /wp-content/themes/
  • Файл style.css содержит поля Theme Name и Template
  • Поле Template точно совпадает с именем папки родителя
  • Файл functions.php начинается с <?php без пробелов до него
  • Стили родителя подключены через wp_enqueue_style()
  • Дочерний style.css загружается после родительского (зависимость указана)
  • Тема активирована в админке без ошибок
  • Визуально сайт не отличается от исходного (до правок)
  • Кэш браузера и плагинов очищен
  • Проверена адаптивность на мобильном разрешении
2 файла
минимум для создания дочерней темы
10 мин
среднее время настройки с нуля
0
влияние на скорость загрузки сайта
100 %
правок сохраняются при обновлении родителя

FAQ: частые вопросы о дочерних темах WordPress

Ответы на популярные вопросы

Можно ли создать дочернюю тему без functions.php?

Да, технически достаточно одного style.css с заголовком. Но без functions.php стили родительской темы не подключатся автоматически. Вам придётся использовать @import в CSS, что менее надёжно и добавляет лишний запрос. Рекомендуем создавать оба файла.

Что делать, если после активации дочерней темы сайт выглядит сломанным?

В 90 % случаев причина - стили родителя не подключены. Проверьте, что в functions.php вызывается wp_enqueue_style() с путём к родительскому style.css. Также очистите кэш браузера и плагинов кэширования. Если тема блочная (FSE), убедитесь, что theme.json не содержит синтаксических ошибок.

Как обновить родительскую тему, если используется дочерняя?

Обновляйте родительскую тему как обычно - через «Внешний вид → Обновления» или автоматически. Дочерняя тема не затрагивается. Единственный риск: если разработчик родителя изменил структуру шаблона, который вы переопределили, проверьте этот файл вручную после обновления.

Нужна ли дочерняя тема для блочных тем (Gutenberg / FSE)?

Да, нужна. Начиная с WordPress 6.1, блочные темы хранят стили в theme.json. Если вы редактируете стили через «Редактор сайта», изменения могут сброситься при обновлении. Дочерняя тема с собственным theme.json позволяет переопределять переменные и блоки безопасно.

Как перенести дочернюю тему на другой сайт?

Скопируйте папку дочерней темы в /wp-content/themes/ на целевом сайте. Убедитесь, что родительская тема той же версии установлена и активна (или хотя бы присутствует в папке). Активируйте дочернюю тему в админке.

Влияет ли дочерняя тема на скорость загрузки сайта?

Нет. Дочерняя тема добавляет один дополнительный CSS-файл (иногда functions.php), что увеличивает объём на 1–3 КБ. Это незаметно на фоне общего веса страницы. Если вы используете @import вместо wp_enqueue_style(), появляется лишний HTTP-запрос - поэтому рекомендуется именно wp_enqueue_style().

Можно ли использовать плагины вместо дочерней темы?

Частично. Плагины вроде Code Snippets или WPCode позволяют добавлять PHP-код без functions.php. Но переопределение шаблонов и стилей через плагины неудобно и не является стандартной практикой. Для кастомизации темы дочерняя тема остаётся правильным решением.

Итог

Дочерняя тема WordPress - это два файла и десять минут работы, которые защищают ваши правки при любом обновлении. Создайте папку, добавьте style.css с заголовком и functions.php с подключением стилей, активируйте тему - и вносите изменения безопасно. Если вы работаете с клиентскими сайтами или поддерживаете собственный проект, дочерняя тема должна быть первым шагом перед любой кастомизацией.

Нужна помощь с похожей задачей?

Пришлите ссылку на сайт и кратко опишите задачу — я посмотрю и предложу следующий шаг.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *