Як створити дочірню тему WordPress (Посібник)

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

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

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

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

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

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

• Ви можете безпечно оновлювати свої теми. Коли ви оновлюєте тему, ви також втрачаєте всі зміни, які ви внесли до її коду в цьому процесі. Однак, якщо ви використовуєте дочірню тему та оновлюєте її батьківську, ви уникаєте цієї проблеми.
• Легше стежити за змінами, які ви вносите до теми. Багато тем WordPress включають десятки файлів і сотні рядків коду. Це означає, що будь-які зміни до них — незалежно від того, наскільки вони малі — можуть бути хитромудрими, оскільки легко втратити контроль над цими налаштуваннями. З дочірньою темою ви можете вносити зміни на свій розсуд і все ще тримати речі організованими.

Підсумуємо, що ми досі вивчили, на прикладі.

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

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

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

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

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

Якщо ви все ще сумніваєтеся, чи варто використовувати дочірню тему, ось кілька прикладів ситуацій, коли це має сенс:

• Якщо ви збираєтеся вносити будь-які зміни — постійні або тимчасові — до функціональності або стилю вашої активної теми.
• Коли ви використовуєте тему, яка постійно оновлюється (це добре!) і ви не хочете втрачати свої налаштування під час процесу.
• Щоб тестувати зміни, які ви хочете впровадити у вашу активну тему, використовуючи безпечне середовище.

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

Як створити дочірню тему WordPress (за 5 кроків)

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

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

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

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

Існує багато способів взаємодії зі структурою файлів вашого сайту — наприклад, через вашу панель — але ми віддаємо перевагу Протоколу безпечної передачі файлів (SFTP) через його зручність у використанні. Для доступу до вашого сайту через FTP вам буде потрібен спеціальний клієнт. Ми рекомендуємо використовувати FileZilla, оскільки вона легка у освоєнні навіть для початківців і постійно розвивається. Якщо ви не знайомі з використанням FTP, вам також потрібно буде покращити свої навички перед тим, як приступити до цих кроків.

Після встановлення, отримайте доступ до директорії вашого вебсайту за допомогою ваших SFTP-даних. Ця директорія найчастіше відображається як public_html, але в DreamHost за замовчуванням це домен, який ви додали (example.com).

Увійдіть в директорію та перейдіть до wp-content/themes/. Всередині ви знайдете унікальну папку для кожної з ваших тем WordPress.

Тепер клацніть правою кнопкою миші будь-де у директорії themes, оберіть опцію Create directory, а потім встановіть назву для вашої нової папки:

Папка вашої дочірньої теми може мати будь-яке ім’я, яке ви захочете. Однак, з практичних міркувань, ми рекомендуємо давати їй назву, яку ви легко впізнаєте, таку як twentytwentytwo-child (або щось інше, залежно від того, яка у неї батьківська тема).

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

2. Створіть стилі для теми

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

Хоча файл style.css вашої дочірньої теми стане в нагоді в майбутньому, наразі він виконує також важливу функцію. Він просто каже WordPress: “Привіт, я теж тема, завантаж мене разом із рештою!”

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

Нарешті, нам потрібно додати короткий фрагмент коду до цього файлу. Клацніть правою кнопкою миші на ньому та виберіть Перегляд/Редагування. Ця опція завантажить копію файлу на ваш комп’ютер та відкриє його за допомогою локального редактора. Коли файл буде відкритий, вам потрібно буде вставити наступний текст:

/*
Theme Name: Twenty Twenty-Two Child
Theme URI: http://example.com/twenty-twenty-two-child/
Description: Ваша перша дочірня тема!
Author: John Doe
Author URI: http://example.com
Template: twentytwentytwo
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: дочірня тема
Text Domain: twenty-twenty-two-child
*/

На перший погляд, це може здатися багатою інформацією, але для роботи дочірньої теми потрібно правильно вказати лише одне поле: Template. У наведеному вище прикладі, ви можете побачити, що ми використовували twentytwentytwo, що є назвою директорії теми Twenty Twenty-Two. Якщо ви використовуєте іншу тему як батьківську, вам потрібно замінити це значення на назву її папки (а не повну назву теми).

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

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

3. Налаштуйте вашу дочірню тему, щоб вона успадковувала стиль батьківської теми

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

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

Для початку поверніться до директорії вашої дочірньої теми. Усередині створіть новий файл під назвою functions.php, як ви зробили з style.css під час другого кроку.

Тепер відкрийте файл, використовуючи опцію перегляду/редагування FileZilla, та вставте наступний код всередину:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

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

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

Тепер збережіть зміни до вашого файлу functions.php і закрийте його. Обов’язково погодьтеся, коли FileZilla запитає вас, чи хочете ви замінити файл functions.php вашого сайту, і все готово! Тепер ваша дочірня тема готова до свого урочистого дебюту.

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

Щоб використати вашу дочірню тему, поверніться до панелі керування WordPress і перейдіть до вкладки Appearance > Themes. Всередині має бути одна тема без вибраного зображення — ваша дочірня тема.

Клікніть на кнопку Активувати поруч з назвою теми та відкрийте ваш сайт, як зазвичай. Якщо ви точно дотримувалися попередніх трьох кроків, ваш сайт повинен виглядати точно так, як до того, як ми почали.

Не соромтеся швидко оглянути все, щоб втретє переконатися, що все працює правильно. Якщо відповідь “Так” (а вона має бути такою), ви готові перейти до другої частини цього навчального посібника, де ми поговоримо про те, як використовувати вашу нову дочірню тему.

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

5. Додайте зображення до вашої дочірньої теми

Тільки щоб було зрозуміло — коли ми говоримо про зображення, яке використовується в темі, ми маємо на увазі графіку, яка з’являється над її назвою вкладці Themes . Ось кілька прикладів.

Новостворені дочірні теми не містять цих зображень, тому вам потрібно надати одне для завантаження WordPress. На щастя, це дуже простий процес. Все, що вам потрібно зробити, це додати зображення у форматі PNG під назвою screenshot.png в директорію вашої дочірньої теми.

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

Тепер, коли це позаду, ваша вкладка Теми повинна знову виглядати чудово, тож настав час повертатися до справ.

Як налаштувати вашу дочірню тему WordPress (4 поради)

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

1. Додати власні стилі

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

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

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

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

2. Навчіться заміщувати файли вашої батьківської теми

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

Уявіть, наприклад, що ви вирішили створити дочірню тему для Twenty Twenty-Two. Батьківська тема, у цьому випадку, має файл footer.php у своїй тематичній папці:

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

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

3. Створіть шаблони користувацьких сторінок

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

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

4. Використовуйте хуки теми

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

Навчитися створювати хуки трохи виходить за межі цієї статті.

Скорочено, ви можете додати хуки до вашої дочірньої теми, використовуючи її власний файл functions.php. Таким чином, будь-які зміни, які ви робите, залишаються незалежними від її батьківської теми.

Розкрийте переваги дочірніх тем WordPress

Дочірні теми WordPress можуть здаватися складними на перший погляд. Щоб створити одну, вам доведеться згорнути рукава, але після того, як ви це зробите, ви зрозумієте, що процес не такий вже й складний. Крім того, додавання налаштувань до вашої дочірньої теми повинно допомогти вам краще зрозуміти, як працює WordPress, що може відкрити багато дверей. Хто знає? Можливо, в якийсь момент ви навіть зможете створити власну тему.