Розробка дочірньої теми (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 дозволяє бачити зміни в передпросмотрі без перезавантаження.

Додаткові 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 днів.