Дочірня тема WordPress: що таке та як створити

Привіт:) У цьому пості детально розповім, що таке, навіщо потрібна і коли використовується дочірня тема WordPress. На прикладах опишу всі способи як її створити і встановити на сайті.

📌 Дочірня тема (child theme) WordPress: що це і навіщо потрібна

Зазвичай з поняттям дочірніх тем стикаються тоді, коли потрібно щось змінити або додати на ВордПрес-сайті, що вже працює. Наприклад, змінити колір якогось елементу, встановити інший шрифт, змінити сортування публікацій на головній сторінці, вивести схожі записи або блок автора в статтях.

Щоб додати нову функцію, можна скористатися плагіном. Для цього достатньо знайти та встановити відповідний модуль. Але це не завжди виправдано, якщо потрібно змінити поведінку чи зовнішній вигляд якогось блоку самої теми. Наприклад, у плані продуктивності та подальшого нарощування функціоналу немає сенсу, наприклад, для задання нового шрифту, встановлювати додатковий плагін. Це можна зробити засобами активної теми, навіть якщо в її налаштуваннях немає такої опції.

Щоб зрозуміти, як працюють дочірні теми, розберу їхній взаємозв'язок із батьківськими.

Батьківська тема включає всі необхідні файли шаблонів WordPress і ресурси для роботи. Вона основна та самодостатня для встановлення та налаштування на сайті.

Дочірня тема успадковує зовнішній вигляд батьківської та всіх її функцій, але може використовуватися щоб внести зміни до будь-якої частини теми. Налаштування бази даних та файли дочірньої зберігаються окремо від батьківської. А тому редагування у дочірній зберігаються після оновлення основної.

Дочірні — це окремі теми, але більшість їх функціональних можливостей залежить від батьківської. Якщо ви використовуєте дочірню, ВордПрес спочатку перевірить її, щоб дізнатися, чи існує в ній конкретна функція. В іншому випадку буде використано батьківську. Це дозволяє змінювати лише те, що вам потрібно.

Наприклад, ви хочете змінити текст копірайту у підвалі, але в налаштуваннях основної теми немає такої опції. Правки в коді батьківської робити не можна, оскільки після оновлення вони зітруться. Щоб вирішити задачу, достатньо створити та активувати дочірню тему, з батьківської скопіювати до папки дочірньої файл footer.php і в ньому зробити правки. У результаті всі опції та налаштування будуть успадковані від головної теми, за винятком підвалу.

✅ Коли використовувати (переваги)

Якщо потрібно:

• редагувати один або декілька файлів шаблону (наприклад header.php, footer.php);
• додати нові функції, пов'язані із зовнішнім виглядом (наприклад, змінити кількість та розмір карток постів на головній);
• перевизначити одну або декілька PHP-функцій із основної теми;
• додати новий файл шаблону;
• застосувати інший шрифт.

Переваги:

1. Легке розширення та налаштування. Дочірня тема розширює функціональність батьківської. Ви вже маєте повноцінний робочий інструмент, готовий до додавання нових функцій.
2. Безпроблемні оновлення. Розробники WordPress рекомендують постійно оновлювати теми і плагіни. Якщо ви який-небудь файл основної теми зміните, то ці редагування пропадуть як тільки її оновите. Для цього рекомендується змінювати саме дочірню тему, щоби нічого не втратити.

❌ Коли не варто (недоліки)

У деяких випадках краще використовувати основну тему або інші способи налаштування:

• якщо тему ви створили самі (або хтось розробив для вас), і вам не потрібно використовувати її деінде. Просто відредагуйте її;
• якщо хочете додати опції, не пов'язані із зовнішнім виглядом сайту (наприклад, створити тип запису користувача, встановити кешування або створення резервних копій). Для цього використовуйте плагін.

Мінуси:

1. Вибір ідеальної батьківської теми. Не всі шаблони для цього підійдуть. Деякі регулярно не оновлюються своїми розробниками, а тому не відповідають стандартам. У результаті можуть бути помилки у роботі та порушена безпека. Інші теми не створюються з урахуванням дочірніх тем. В обох випадках це будуть погані "батьки".
2. Додаткові зусилля для налаштування. Дочірня тема переважно спрямована на розширення існуючого дизайну шаблону. Після її створення вам доведеться знову налаштувати виведення таких елементів, як меню, віджети, логотип.

🛠 Створення дочірньої теми WordPress

Розгляну на прикладі безкоштовної теми Astra.

1. Перейдіть у каталог

wp-content/themes

2. Створіть папку для дочірньої теми. Зазвичай її назва складається з імені основної та закінчення "-child". Наприклад, для теми

wp-content/themes/astra-child

3. Всередині створіть файл style.css із таким змістом:

/*
Theme Name:   Astra Child
Theme URI:    https://thepetrov.com/
Description:  Astra Child Theme
Author:       Mykhailo Petrov
Author URI:   https://thepetrov.com/
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  astra-child
*/

Цей коментар на початку файлу повідомляє WordPress всю інформацію про тему. Поясню кожен рядок.

• Theme Name — унікальна назва теми.
• Theme URI — URL, за яким користувачі можуть знайти код або документацію до теми.
• Description — опис, який допомагає користувачам зрозуміти можливості шаблону.
• Author — автор теми.
• Author URI — веб-сайт автора.
• Template — папка, де зберігається батьківська тема. Використовуйте ім'я папки, а не назву теми. Без цього рядка ваша тема не працюватиме як дочірня.
• Version — номер версії.
• Ліцензія — ліцензія використання.
• License URI — посилання на сторінку сайту з текстом ліцензії.
• Tags — теги з можливостями теми (потрібні для сортування та швидкого пошуку теми).
• Text Domain — текстовий домен. Це рядок, який використовується для перекладу іншими мовами.

Ще один спосіб зробити дочірню тему — імпортувати таблицю батьківських стилів за допомогою @import всередині style.css. Розробники ВордПрес не рекомендують використовувати цю директиву, оскільки вона збільшує час, необхідний для завантаження CSS-стилів. Крім того, батьківські стилі можуть завантажуватись двічі.

Створена тема вже з'явилася у розділі Вигляд > Теми. Можна додати головне зображення для списку тем. Для цього просто скопіюйте файл зображення screenshot.jpg з батьківської папки.

4. У цьому ж каталозі створіть файл functions.php.

Для цього файлу є деякі особливості. Якщо батьківська тема завантажує свій стиль за допомогою функції, що починається з get_template, наприклад get_template_directory() і get_template_directory_uri(), дочірній темі потрібно завантажити лише дочірні стилі, використовуючи дескриптор батьківського елемента в параметрі залежності:

<?php

/** 
 * https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet
 */

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // це працює, лише якщо у заголовку стилю є версія
    );
}

Якщо батьківська тема використовує функції get_stylesheet_directory() або get_stylesheet_directory_uri(), дочірній темі потрібно завантажити як батьківську, так і дочірню таблиці стилів. Обов’язково використовуйте ту саму назву маркера, що й батьківський елемент для батьківських стилів.

<?php

/** 
 * https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet
 */

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // 'twentyfifteen-style' для теми Twenty Fifteen
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // якщо код батьківської теми має залежність, скопіюйте її сюди
         $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // це працює, лише якщо у заголовку стилю є версія
    );
}

У випадку теми Atra у файл functions.php додайте наступний код:

<?php

/**
 * Define Constants
 */
define( 'CHILD_THEME_ASTRA_CHILD_VERSION', '1.0.0' );

/**
 * Enqueue styles
 */
function child_enqueue_styles() {
	wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_ASTRA_CHILD_VERSION, 'all' );

}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

Для багатьох шаблонів вже є готові варіанти дочірніх тем. Зазвичай їх можна завантажити з офіційного сайту розробника та використати спосіб встановлення теми через адмін-панель.

Дочірня тема готова до роботи.

Плюси:

• не потрібно шукати та встановлювати додаткові плагіни.

⚙️ Як встановити і активувати дочірню тему WordPress

Встановлення та активація проходять як із звичайною темою. В адмін-частині сайту просто натисніть Активувати.

Перед активацією обов'язково перевірте наявність батьківської теми.

🔥 Завантажити готові дочірні WordPress теми

У списку готові дочірні теми популярних WordPress-тем.

• Astra Child Theme,
• Blocksy Child Theme,
• Colormag Child Theme,
• GeneratePress Child Theme,
• Hello Elementor Child Theme,
• Storefront Child Theme,
• Twenty Twenty-One Child Theme,
• Zakra Child Theme.

🧩 Що можна змінювати в дочірній темі WordPress

Дочірня тема дає змогу не лише змінювати кольори або шрифти. Залежно від структури батьківської теми через child theme можна змінювати шаблони, стилі, окремі частини сторінок і додавати власний PHP-код.

Найчастіше використовують такі можливості:

• змінюють header.php або footer.php;
• створюють власні шаблони сторінок;
• змінюють виведення записів і архівів;
• додають власні CSS-стилі;
• додають JavaScript;
• підключають власні шрифти та інші ресурси;
• додають або змінюють функції через functions.php;
• змінюють окремі шаблони WooCommerce;
• налаштовують зовнішній вигляд блоків WordPress.

Важливо розуміти, що дочірня тема не є копією батьківської. Не потрібно копіювати до неї всі файли. Зазвичай достатньо створити тільки ті файли, які ви збираєтеся змінювати.

WordPress використовує файл із дочірньої теми, якщо він існує, а для інших компонентів продовжує використовувати файли батьківської теми. Саме завдяки цьому child theme залишається компактною та зручною для підтримки.

🛠️ Як перевизначити шаблон батьківської теми

Одне з найпоширеніших завдань — змінити структуру певної сторінки без редагування оригінальної теми.

Наприклад, якщо потрібно змінити single.php, можна створити в дочірній темі файл:

wp-content/themes/astra-child/single.php

Після цього у файл можна скопіювати необхідну структуру з батьківської теми та внести власні зміни.

Аналогічним способом можна працювати з іншими шаблонами, якщо конкретна тема підтримує таку структуру.

Наприклад:

astra/
├── header.php
├── footer.php
├── single.php
└── archive.php

astra-child/
├── style.css
├── functions.php
├── single.php
└── footer.php

У цьому прикладі single.php і footer.php дочірньої теми можуть замінити відповідні файли батьківської, а всі інші файли продовжать використовуватися з Astra.

Перед копіюванням шаблону варто перевірити актуальну версію файлу в батьківській темі. Якщо розробник теми суттєво змінив його під час оновлення, старий файл у child theme може перестати коректно працювати.

🎨 CSS у дочірній темі: що важливо знати

Одна з найпоширеніших причин створення child theme — додавання власного CSS.

Наприклад, у style.css дочірньої теми можна додати:

.site-title { 
  font-size: 32px;
}

.custom-button {
  border-radius: 8px;
}

Однак недостатньо просто створити style.css. Потрібно переконатися, що таблиця стилів дочірньої теми дійсно підключається на сайті.

Спосіб підключення залежить від того, як побудована батьківська тема. Для класичних тем WordPress рекомендує використовувати wp_enqueue_style(), а не старий підхід із @import.

Тому перед копіюванням готового коду для Astra, GeneratePress, Blocksy або іншої теми варто перевірити документацію саме цієї теми.

⚙️ functions.php дочірньої теми: важлива особливість

Файл functions.php дочірньої теми працює не так, як шаблон single.php або footer.php.

Його не потрібно копіювати з батьківської теми.

Код із functions.php дочірньої теми підключається додатково до коду батьківської теми. Тому копіювання всього functions.php батьківської теми в child theme може призвести до помилок, зокрема до повторного оголошення функцій.

У дочірній functions.php краще додавати лише власний код:

add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
    // Власні налаштування дочірньої теми.
} 

Якщо потрібно змінити поведінку батьківської теми, зазвичай правильніше використовувати її доступні хуки — actions і filters, а не переписувати весь функціонал.

Це дозволяє зменшити кількість перевизначених файлів і спростити подальше оновлення сайту.

🧱 Child theme для сучасних Block Themes

Сучасний WordPress використовує не лише класичні теми з PHP-шаблонами. Існують також block themes — теми, у яких шаблони та частини сайту побудовані переважно на блоках.

Для таких тем підхід до дочірньої теми дещо відрізняється.

Замість великої кількості PHP-файлів важливу роль може відігравати theme.json. За його допомогою можна налаштовувати кольори, типографіку, відступи, розміри та інші параметри редактора блоків.

Наприклад, структура дочірньої block theme може виглядати приблизно так:

my-child-theme/
├── style.css
├── theme.json
├── templates/
│ └── single.html
└── parts/
└── header.html

У цьому випадку не обов'язково створювати PHP-шаблони на кшталт single.php. Block themes використовують HTML-шаблони та блокову структуру.

Це важливий момент для тих, хто створює child theme для сучасної теми WordPress: інструкції, написані виключно для класичних тем, не завжди можна застосувати без змін.

🎛️ Чи завжди потрібна дочірня тема для зміни дизайну

Ні.

У сучасному WordPress частину змін можна зробити без child theme — безпосередньо через налаштування теми, Site Editor або Global Styles.

Для block themes деякі зміни можна виконати через інтерфейс редактора сайту. Якщо потрібно змінити лише кольори, шрифти, відступи або інші візуальні параметри, створення дочірньої теми може бути зайвим.

Для більш складних змін, наприклад власних шаблонів, додаткового PHP-коду або системних налаштувань теми, child theme залишається корисним інструментом.

Також існують style variations, які можуть бути зручнішими для певних сценаріїв, коли потрібно створити альтернативний набір стилів для block theme. На відміну від child theme, style variation призначена насамперед для зміни стилів через JSON.

🔄 Що відбувається після оновлення батьківської теми

Саме захист власних змін від оновлень є однією з головних причин використання child theme.

Наприклад, уявімо, що ви безпосередньо змінили:

wp-content/themes/astra/footer.php

Після оновлення Astra цей файл може бути замінений новою версією, і ваші зміни зникнуть.

Якщо ж змінений файл знаходиться тут:

wp-content/themes/astra-child/footer.php

оновлення Astra не повинно видалити файл дочірньої теми.

Проте це не означає, що child theme повністю захищає сайт від проблем після оновлення.

Якщо розробник батьківської теми змінив структуру шаблону, функції або CSS-класи, ваші перевизначення можуть стати несумісними з новою версією.

Тому після великих оновлень батьківської теми бажано перевіряти:

• головну сторінку;
• записи та сторінки;
• меню;
• мобільну версію;
• форми;
• WooCommerce;
• шаблони, які були перевизначені в child theme;
• JavaScript-функції;
• власні CSS-стилі.

⚠️ Типові помилки при створенні WordPress Child Theme

1. Неправильне значення Template

У style.css рядок:

Template: astra

повинен містити назву папки батьківської теми, а не обов'язково її назву, яку ви бачите в адмін-панелі.

Якщо папка батьківської теми називається astra, потрібно використовувати саме:

Template: astra

Помилка в цьому значенні може призвести до того, що WordPress не розпізнає тему як дочірню.

2. Копіювання всіх файлів батьківської теми

Копіювати всю тему в дочірню не потрібно.

Це ускладнює підтримку та збільшує кількість файлів, які доведеться контролювати після оновлень.

Краще створювати лише ті файли, які дійсно потрібно змінити.

3. Повне копіювання functions.php

functions.php дочірньої теми не є заміною аналогічного файлу батьківської теми.

Не варто просто копіювати його в child theme. Додавайте лише власні функції та необхідні хуки.

4. Використання @import для CSS

Старий варіант:

@import url("../astra/style.css");

не є рекомендованим способом підключення стилів.

Для класичних тем краще використовувати механізм WordPress wp_enqueue_style().

5. Відсутність резервної копії

Перед змінами в functions.php, шаблонах або theme.json бажано зробити резервну копію сайту.

Помилка в PHP-коді може призвести не лише до некоректного відображення сторінки, а й до помилки виконання WordPress.

6. Редагування child theme без тестового середовища

Якщо сайт уже працює та має відвідувачів, краще спочатку перевірити зміни на staging-копії або локальному сайті.

Особливо це актуально для WooCommerce, складних тем та сайтів із великою кількістю плагінів.

🧪 Як перевірити, чи правильно працює дочірня тема

Після активації child theme можна виконати простий тест.

1. Додайте до style.css дочірньої теми тимчасову зміну.
2. Очистіть кеш сайту та браузера.
3. Відкрийте сторінку в режимі інкогніто.
4. Перевірте, чи застосувався новий стиль.
5. Якщо стиль не працює — перевірте підключення CSS та залежності батьківської теми.

Для перевірки PHP-змін бажано використовувати staging-середовище.

Також корисно перевірити консоль браузера на наявність JavaScript-помилок і журнал помилок WordPress/PHP.

💻 Як створити Child Theme через WP-CLI

Якщо ви працюєте з WordPress через командний рядок, дочірню тему можна створити за допомогою WP-CLI.

Наприклад:

wp scaffold child-theme my-child-theme --parent_theme=twentytwentysix

WP-CLI має окрему команду wp scaffold child-theme, яка створює базову структуру дочірньої теми на основі вказаної батьківської.

Для веб-розробника це може бути зручніше, ніж щоразу створювати файли вручну.

🔐 Чи впливає дочірня тема на безпеку та швидкість сайту

Сама по собі child theme не робить WordPress-сайт автоматично швидшим або безпечнішим.

Її основна перевага — правильна організація власних змін і можливість безпечніше оновлювати батьківську тему.

Швидкодія залежить насамперед від кількості та якості коду, CSS і JavaScript, плагінів, кешування, хостингу, зображень та інших факторів.

Безпека також залежить від актуальності WordPress, тем, плагінів, PHP та якості власного коду.

Тому не варто створювати child theme лише з думкою, що вона сама по собі покращить SEO, швидкість або безпеку сайту.

❓ FAQ: поширені запитання про Child Theme WordPress

📌 Висновок: чи варто використовувати Child Theme у WordPress

Дочірня тема залишається зручним способом безпечно розширювати існуючу WordPress-тему, особливо коли потрібно вносити зміни до її коду.

Вона особливо корисна для:

• власного CSS;
• зміни шаблонів;
• додавання PHP-функцій;
• кастомізації WooCommerce;
• створення власних шаблонів;
• збереження змін після оновлення батьківської теми.

Водночас child theme не потрібна для кожного WordPress-сайту. Якщо сайт використовує сучасну block theme і всі необхідні зміни можна виконати через Site Editor, Global Styles або theme.json, створення дочірньої теми може бути зайвим.

Головне правило просте: не змінюйте файли батьківської теми без необхідності. Якщо вам потрібно регулярно модифікувати її код, краще винести власні зміни в child theme або окремий функціональний плагін.

Саме такий підхід спрощує подальше оновлення WordPress-сайту та зменшує ризик втрати власних доробок.