Разработка дочерней темы (Child Theme) WordPress

Разработка дочерней темы (Child Theme) WordPress

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

Структура дочерней темы

Минимальная дочерняя тема состоит из двух файлов:

wp-content/themes/my-child/
├── style.css
└── functions.php

style.css обязан содержать заголовок с указанием Template:

/*
Theme Name: My Site Child
Template: twentytwentyfour
Version: 1.0.0
*/

functions.php подключает стили родительской темы:

<?php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        ['parent-style']
    );
});

Важно: get_template_directory_uri() указывает на родительскую тему, get_stylesheet_directory_uri() — на дочернюю. Путаница здесь — источник половины багов при работе с дочерними темами.

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

WordPress ищет файл шаблона сначала в дочерней теме, затем в родительской. Это означает: чтобы изменить, например, шаблон архива, достаточно создать archive.php в папке дочерней темы с нужными изменениями.

Иерархия шаблонов WordPress (упрощённо):

single-{post-type}.php → single.php → singular.php → index.php
category-{slug}.php → category-{id}.php → category.php → archive.php → index.php
page-{slug}.php → page-{id}.php → page.php → singular.php → index.php

Практический пример: нужно изменить шаблон страниц определённой рубрики. Создаём category-news.php в дочерней теме, родительский файл категорий трогать не нужно.

Переопределение функций через pluggable functions

Часть функций в родительских темах объявлена через if (!function_exists(...)). Такие функции можно полностью заменить в functions.php дочерней темы:

// Родительская тема делает так:
if (!function_exists('mytheme_header_logo')) {
    function mytheme_header_logo() {
        echo '<img src="' . get_template_directory_uri() . '/logo.svg">';
    }
}

// В дочерней теме переопределяем:
function mytheme_header_logo() {
    $custom_logo_id = get_theme_mod('custom_logo');
    echo wp_get_attachment_image($custom_logo_id, 'full', false, ['class' => 'site-logo']);
}

Если функция объявлена без проверки function_exists, переопределить её через дочернюю тему нельзя — нужно использовать хуки.

Работа с хуками: add_action и add_filter

Хуки — основной инструмент модификации поведения темы без замены файлов. remove_action и remove_filter позволяют отключить логику родительской темы и заменить своей:

// Убираем вывод даты из родительской темы
remove_action('mytheme_entry_meta', 'mytheme_posted_on', 10);

// Добавляем свой вывод с другим форматом
add_action('mytheme_entry_meta', function () {
    echo '<time>' . get_the_date('d.m.Y') . '</time>';
}, 10);

Для remove_action критично совпадение приоритета (третий параметр) с тем, что использовался при регистрации оригинального хука.

Кастомизация через Customizer

В дочерней теме удобно добавлять собственные настройки в WordPress Customizer:

add_action('customize_register', function (WP_Customize_Manager $wp_customize) {
    $wp_customize->add_section('child_theme_options', [
        'title'    => 'Настройки сайта',
        'priority' => 30,
    ]);

    $wp_customize->add_setting('hero_background_color', [
        'default'   => '#1a1a2e',
        'transport' => 'postMessage',
        'sanitize_callback' => 'sanitize_hex_color',
    ]);

    $wp_customize->add_control(
        new WP_Customize_Color_Control($wp_customize, 'hero_background_color', [
            'label'   => 'Цвет фона hero-секции',
            'section' => 'child_theme_options',
        ])
    );
});

transport => postMessage позволяет видеть изменения в предпросмотре без перезагрузки — реализуется через отдельный customizer.js.

Дополнительные CSS и скрипты

Стили дочерней темы подключаются после родительских — порядок важен. Для скриптов:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'child-main',
        get_stylesheet_directory_uri() . '/assets/js/main.js',
        ['jquery'],
        wp_get_theme()->get('Version'),
        true
    );

    // Передаём данные из PHP в JS
    wp_localize_script('child-main', 'childTheme', [
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'nonce'   => wp_create_nonce('child_theme_nonce'),
    ]);
}, 20); // Приоритет 20 — после родительских скриптов

Версионирование через wp_get_theme()->get('Version') позволяет сбрасывать кеш браузера обновлением версии в style.css.

Типичные сроки

Создание базовой дочерней темы с переопределением нескольких шаблонов и добавлением кастомных стилей занимает 4–8 часов. Если нужна замена значительной части шаблонов и добавление Customizer-настроек — 1–2 рабочих дня. Глубокая кастомизация с переработкой структуры шаблонов и написанием дополнительных модулей — 3–5 дней.