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

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

Дочірня тема 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://petrov.net.ua/
Description:  Astra Child Theme
Author:       Mykhaylo Petrov
Author URI:   https://petrov.net.ua/
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 — текстовий домен. Це рядок, який використовується для перекладу іншими мовами.

Створена тема вже з'явилася у розділі Вигляд > Теми. Можна додати головне зображення для списку тем. Для цього просто скопіюйте файл зображення 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

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