Skip to content

Все для WordPress, веб-розробки — і не тільки

🧩 Дочірня тема WordPress: повне керівництво зі створення та налаштування

🧩 Дочірня тема WordPress: повне керівництво зі створення та налаштування

Ви довели тему до пуття, налаштували сайт, кольори, шрифти, кілька кастомних шаблонів. А потім прилітає оновлення теми й стирає все під нуль. Знайомо?

Дочірня тема WordPress — це той самий механізм, який розділяє ваші правки та код розробника. Ви змінюєте що завгодно, а батьківська тема оновлюється без наслідків. Звучить як магія, але за цим стоїть лише один рядок у style.css.

У цьому посібнику, від ідеї до робочої дочірньої теми: навіщо вона потрібна, як створити вручну, як підключити стилі та functions.php, і що робити, якщо щось пішло не так. Без води, з перевіреними сніпетами.

💡 Швидкий огляд:

  • Створіть папку дочірньої теми в /wp-content/themes/, назва довільна, наприклад mytheme-child
  • Додайте style.css із заголовком теми та рядком Template:, що вказує на папку батьківської теми
  • Підключіть батьківські стилі через functions.php, функція wp_enqueue_style() на хуку wp_enqueue_scripts
  • Скопіюйте будь-який файл шаблону батьківської теми в дочірню та редагуйте без страху перед оновленнями
  • Усе інше (functions.php, кастомні поля, нові шаблони) розширюйте, не чіпаючи батьківську тему

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

Дочірня тема — це тема WordPress, яка успадковує всю функціональність, стилі та шаблони іншої теми. Та, від якої успадковують, називається батьківською. Сама по собі дочірня тема може складатися з одного-єдиного файлу style.css і при цьому повноцінно працювати.

Код теми WordPress на екрані монітора

Механізм успадкування простий. Коли WordPress завантажує сторінку, він спочатку шукає потрібний файл шаблону в дочірній темі. Знайшов, використовує його. Не знайшов, бере з батьківської. Саме тому ви можете перевизначити лише те, що хочете змінити, а все інше «підтягнеться» з батьківської теми автоматично.

Ключовий елемент, без якого дочірня тема не існує,, рядок Template: у заголовку style.css. Він вказує на назву папки батьківської теми (наприклад, twentytwentyfour) і створює той самий зв’язок «батько → дитина». Рядок має збігатися з назвою папки батьківської теми один в один, включно з регістром.

Батьківською темою може бути БУДЬ-ЯКА встановлена тема WordPress, від стандартної Twenty Twenty-Five до комерційної, як-от Total чи Kadence. Дочірня тема «запозичує» її файли та функції, але не копіює їх фізично.

Можна взагалі не перейматися й правити батьківську тему напряму. Багато хто так і робить. Але ось що відбувається потім.

Безпечні оновлення

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

Ізоляція експериментів

Хочете спробувати нову структуру шаблону або нестандартний CSS-хак? У дочірній темі можна експериментувати вільно. Щось пішло не так, деактивували дочірню тему, і сайт знову на батьківській, у початковому стані.

Чиста кодова база

Дочірня тема містить лише ваші зміни. Кілька шаблонів, functions.php з хуками, style.css із перевизначеннями. Жодної мішанини з оригінального коду та ваших правок. Коли за пів року знадобиться щось виправити, ви не копаєтеся в чужому коді в пошуках свого.

Швидкий старт розробки

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

Які мінуси в дочірніх тем

Недоліки теж є. Вони не критичні, але краще знати про них заздалегідь.

Потрібне базове знання коду

Налаштування дочірньої теми — це HTML, CSS і трохи PHP. Якщо ви ніколи не відкривали редактор коду, доведеться освоїти основи. Хороша новина: для типових завдань (підключення стилів, додавання хука) код уже написаний, його потрібно скопіювати та підставити свої значення.

Перенесення налаштувань кастомізатора

Деякі теми прив’язують налаштування кастомізатора (кольори, шрифти, макет) до назви активної теми. При перемиканні на дочірню ці налаштування «зникають». Вони не втрачені, лежать у базі даних, прив’язані до назви батьківської теми. Рішення: перед активацією дочірньої теми експортуйте налаштування кастомізатора (багато тем, наприклад Total, дають вбудований інструмент імпорту/експорту) або перенесіть їх вручну після активації.

Залежність від батьківської теми

Дочірня тема без батьківської, просто папка з файлами. Якщо ви вирішите повністю змінити тему, дочірню доведеться створювати заново. Функції, зашиті в functions.php дочірньої теми, можуть виявитися прив’язаними до хуків конкретної батьківської теми, їх теж потрібно буде адаптувати.

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

Найпряміший шлях, без плагінів, чистими руками. Вам знадобиться доступ до файлів сайту (FTP, файловий менеджер хостингу або cPanel) і текстовий редактор.

Крок 1. Створіть папку дочірньої теми

Відкрийте каталог тем WordPress: /wp-content/themes/. Створіть нову папку. Назва довільна, але прийнято додавати суфікс -child до назви батьківської теми: наприклад, для twentytwentyfive дочірня папка буде twentytwentyfive-child.

Для роботи з файлами через FTP підійде FileZilla. Через хостинг, вбудований файловий менеджер у cPanel або панелі хостингу.

Крок 2. Створіть style.css із заголовком теми

У папці дочірньої теми створіть файл style.css. Це єдиний обов’язковий файл. Вставте в нього заголовок теми:

1/*
2Theme Name: Twenty Twenty-Five Child
3Theme URI: https://example.com/
4Description: Дочерняя тема для Twenty Twenty-Five
5Author: Ваше имя
6Template: twentytwentyfive
7Version: 1.0.0
8*/

Рядок Template:, той самий, що пов’язує дочірню тему з батьківською. Значення має СТРОГО збігатися з назвою папки батьківської теми. Для Twenty Twenty-Five папка називається twentytwentyfive, саме це значення й пишемо. Друкарська помилка або невірний регістр, і тема не визначиться як дочірня.

Крок 3. Підключіть стилі батьківської теми

На цьому етапі дочірня тема вже працює, її можна активувати в «Зовнішній вигляд → Теми». Але виглядати сайт буде без стилів: адже ваш style.css поки порожній (крім заголовка).

Створіть у папці дочірньої теми файл functions.php і додайте код для підключення батьківських стилів:

1add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
2
3function my_theme_enqueue_styles() {
4 $theme = wp_get_theme( 'twentytwentyfive' );
5 $version = $theme->get( 'Version' );
6
7 wp_enqueue_style(
8 'parent-style',
9 get_template_directory_uri() . '/style.css',
10 array(),
11 $version
12 );
13}

Цей код динамічно підхоплює версію батьківської теми та додає її як параметр до URL стилів. При оновленні теми версія зміниться, браузер скине кеш, і користувачі побачать актуальні стилі без проблем із CSS.

Замініть twentytwentyfive на назву вашої батьківської теми. Використовуйте саме wp_get_theme(), а не жорстко зашитий номер версії, так ви захиститеся від кеш-проблем при оновленнях.

Програмний код і файли дочірньої теми

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

В адмінці WordPress: «Зовнішній вигляд → Теми» → знайдіть створену дочірню тему → «Активувати». Зовні сайт не зміниться — це нормально. Ви на дочірній темі, і вона працює.

Як налаштовувати дочірню тему

Тему активовано, тепер до кастомізації. Ось що можна й потрібно робити.

Додавання своїх стилів

Усі ваші CSS-правила пишіть У ФАЙЛ style.css дочірньої теми, після секції із заголовком. Вони автоматично перевизначать стилі батьківської теми з тією самою специфічністю. Хочете змінити колір заголовків, пишіть правило в дочірній style.css, і воно застосується.

Редагування файлів шаблонів

Хочете змінити структуру single.php або footer.php? Скопіюйте потрібний файл із батьківської теми в папку дочірньої, зберігши ту саму структуру підпапок (наприклад, /template-parts/). Редагуйте копію в дочірній темі, WordPress при завантаженні візьме її, а не батьківський оригінал.

Важливий нюанс: копіювати можна лише ФАЙЛИ ШАБЛОНІВ (ті, що лежать у корені теми та папці template-parts/). Файли з підпапок inc/, functions/ і classes/ не копіюються. Для зміни логіки з цих файлів використовуйте хуки та фільтри WordPress.

Розширення через functions.php

functions.php дочірньої теми завантажується ДО батьківського. Це означає, що ви можете:

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

Приклад: додаємо підтримку SVG у завантаження через дочірній functions.php:

1function my_child_allow_svg( $mimes ) {
2 $mimes['svg'] = 'image/svg+xml';
3 return $mimes;
4}
5add_filter( 'upload_mimes', 'my_child_allow_svg' );

Ніколи не копіюйте ВЕСЬ functions.php батьківської теми в дочірню. Це викличе фатальну помилку через повторне оголошення функцій. Дочірній functions.php розширює батьківський, а не замінює його.

Додавання нових файлів шаблонів

Дочірня тема може містити шаблони, яких немає в батьківській. Наприклад, ви можете створити template-full-width.php для сторінок без бічної панелі, WordPress виявить його в дочірній темі та запропонує вибрати при редагуванні сторінки.

Інструменти та текстові редактори

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

  • VS Code, безплатний, із розширеннями для PHP і WordPress;
  • Notepad++, легкий редактор для Windows, справляється з CSS/PHP/JS;
  • Sublime Text, швидкий і мінімалістичний, платний після пробного періоду.

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

Розробник за роботою над сайтом WordPress

Типові помилки та їх вирішення

За роки роботи з дочірніми темами ми зібрали список того, об що спотикаються найчастіше.

«Дочірня тема не визначається». Майже завжди помилка в рядку Template:. Перевірте: назва папки батьківської теми збігається посимвольно, включно з регістром і дефісами. TwentyTwentyFive і twentytwentyfive, різні назви.

«Сайт показує чистий HTML без стилів». Дочірню тему активовано, але стилі не підключено. Додайте wp_enqueue_style() у functions.php дочірньої теми (див. Крок 3).

«Фатальна помилка PHP після активації». Швидше за все, ви скопіювали functions.php батьківської теми в дочірню, і тепер функції оголошено двічі. Видаліть дублікати з дочірнього functions.php, залиште лише СВОЇ функції.

«Налаштування кастомізатора зникли». Вони прив’язані до назви теми. Тимчасово перемкніться назад на батьківську, експортуйте налаштування (через плагін або вбудований інструмент теми), потім активуйте дочірню та імпортуйте.

«Оновлення батьківської теми зламало верстку». Розробник змінив HTML-структуру шаблону, який ви скопіювали в дочірню тему. Ваша копія шаблону тепер несумісна з новими стилями. Рішення: порівняйте новий батьківський шаблон зі своєю копією та адаптуйте зміни.

Покрокове відео (EN) зі створення дочірньої теми: від створення папки до фінальної активації та налаштування стилів. Канал WPEstate, 2025 рік, наочно й без зайвого.

⁉️🤔 Часті запитання

Чи обов’язково створювати дочірню тему для кожного сайту на WordPress?

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

Що буде, якщо видалити батьківську тему, але залишити дочірню?

Сайт впаде з критичною помилкою. Дочірня тема без батьківської не працює, вона не містить повного набору файлів і успадковує все від батька. Перед видаленням батьківської теми спочатку видаліть (або деактивуйте) дочірню та активуйте іншу тему.

Чи можна створити «онукову» тему, дочірню від дочірньої?

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

Чи працює дочірня тема з блоковими темами (FSE, Full Site Editing)?

Так, але механізм дещо відрізняється. У блокових темах theme.json дочірньої теми зливається з батьківським (merge), а не замінює його. Шаблони та частини шаблонів перевизначаються так само, створенням файлу з тією самою назвою в дочірній темі. Детальніше, в офіційній документації Developer Resources на wordpress.org.

Як перенести вже зроблені правки з батьківської теми в дочірню?

Визначте, що саме ви змінювали: CSS, шаблони чи functions.php. CSS-правила скопіюйте в дочірній style.css. Змінені шаблони, скопіюйте файли в дочірню тему й залиште там свої правки. Код із functions.php батьківської теми переносьте вибірково: лише свої функції, а не весь файл. Після перенесення видаліть свої правки з батьківської теми, інакше при її оновленні вони загубляться.

Чи варто створювати дочірню тему прямо зараз

Якщо ви дочитали до цього місця, відповідь, швидше за все, «так». Дочірня тема не ускладнює сайт і не сповільнює його. Вона розділяє ваш код і код розробника теми — це як коментувати код: спочатку здається зайвим, а через місяць рятує.

Для тих, хто править тему вперше: почніть із пісочниці. Локальний сервер (LocalWP, XAMPP) або staging-сайт на хостингу. Створіть дочірню тему за кроками вище, додайте кілька CSS-правил, скопіюйте один шаблон. Коли побачите, що все працює, повторіть на бойовому сайті.

Питання не в тому, чи потрібна дочірня тема. Питання в тому, коли ви про неї згадаєте: до оновлення теми чи після того, як ваші правки зникли.