Що таке дочірня тема і як її створити в WordPress

Вступ

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

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

Коли слід використовувати дочірню тему WordPress?

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

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

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

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

Як працює дочірня тема WordPress?

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

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

Кожна дочірня тема повинна мати два необхідних файли: файл таблиці стилів (style.css) і файл функцій (functions.php). Файл таблиці стилів містить відкоментований текст, який повідомляє WordPress, що це дочірня тема, а що батьківська. Файл функцій містить функцію, яка відображає файл таблиці стилів батьківської теми так, щоб таблиця стилів дочірньої теми завантажувалася першою. Він також використовується для додавання певних функцій шляхом вставки необхідного коду у файл.

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

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

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

Створення підпорядкованої теми

Щоб створити базову дочірню тему WordPress, вам потрібно створити два необхідні файли, згадані вище (таблицю стилів і файл функцій), у новій, незалежній папці.

У цьому посібнику наведено приклад з використанням стандартної теми WordPress Twenty Twenty.

Створіть папку для дочірньої теми

По-перше, необхідно створити нову папку для файлів дочірньої теми. Ця папка повинна знаходитися в каталозі тем WordPress (wp-content/themes). Рекомендується назвати папку іменем батьківської теми з додаванням "-child", наприклад, "twentytwenty-child".

Ви можете створити нову папку з ім'ям, введеним у полі Інтегрований файловий менеджер cPanel або за допомогою вашого улюбленого FTP-клієнта.

Створення файлу таблиці стилів

Після того, як ви створили нову папку, ви повинні створити в ній файл з назвою style.css.

Цей файл містить правила CSS, які керують зовнішнім виглядом вашої теми. Ви повинні включити наступний коментар заголовка, який містить основну інформацію про тему і повідомляє WordPress, що вона є дочірньою темою визначеної батьківської теми.

/*
Назва теми: Двадцять двадцять дитина
Тема URI: http://meinewebseite.ch
Опис: Twenty Twenty Child Theme
Автор: Джон Сміт
Автор URI: http://meinewebseite.ch
Шаблон: twentytwenty
Версія: 1.4
Ліцензія: GPLv2 або новіша
URI ліцензії: http://www.gnu.org/licenses/gpl-2.0.html
Теги: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

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

Найважливіші деталі, на які варто звернути увагу, такі:

Назва теми - Ви повинні дати підпорядкованій темі унікальну назву.
Шаблон - Ви повинні ввести назву каталогу батьківської теми. Цей рядок існує лише у підпорядкованих темах і без нього вони не працюватимуть належним чином. У нашому випадку каталог тем буде "twentytwenty". Якщо ви використовуєте іншу тему, будь ласка, переконайтеся, що ви замінили цей рядок відповідно. Ви можете перевірити це в wp-content/themes.

Решту деталей ви знайдете у вашому Панель адміністратора WordPress > Перегляд > Теми > Інформація про тему.

Якщо ви змінили дані, будь ласка, не забудьте зберегти файл.

Створення файлу функції

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

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

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

get('Version') // це працює тільки якщо у вас є Version в заголовку стилю
    );
}

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

parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // це працює тільки якщо у вас є Version в заголовку стилю
    );
}

Якщо ви введете відповідний код у файлі functions.php не забудьте зберегти файл.

На цьому створення дитячої теми завершено. Тепер її потрібно лише активувати.

Активувати дитячу тему

Останній крок - активувати дочірню тему. Для цього, будь ласка, увійдіть до адміністративної панелі WordPress і перейдіть до пункту "Зовнішній вигляд" > "Теми" через меню ліворуч.

На сторінці "Теми" ви знайдете вашу нову підпорядковану тему серед інших Теми WordPress. Наведіть на нього вказівник миші та натисніть кнопку "Активувати".

Щойно ви це зробите, ваша нова дитяча тема запрацює.

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

Тепер ви можете почати вносити будь-які зміни, не турбуючись про те, що ваша робота буде втрачена при оновленні дизайну.

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