Як зробити налаштування за допомогою дочірньої теми
Цей підручник не для всіх.
Вам не потрібно бути досвідченим розробником, щоб слідкувати за цим, але вам потрібен справжній інтерес до того, щоб дізнатися більше про WordPress і принцип роботи тем.
Якщо ви не боїтеся працювати з невеликою кількістю коду і забруднити руки деякими файлами тем, то ласкаво просимо!
У цьому посібнику ви дізнаєтеся, як налаштувати свій сайт WordPress відповідно до душі за допомогою дочірньої теми, але спочатку…
Давайте розглянемо, чому ви взагалі повинні використовувати цю дивну річ, яка називається «дитяча тема».
Повторюйте за мною:
Я урочисто присягаюся ніколи не редагувати файл теми.
Нові користувачі WordPress, які зацікавлені в налаштуваннях коду, часто безпосередньо редагують файли в своїй темі. Це велике ні-ні.
Чому?
Одна з причин: коли ви оновлюєте свою тему, WordPress замінить вашу існуючу тему новою версією теми.
Так чому це має значення?
Уявіть, що ви використовуєте версію 1.04 теми Challenger. Ви перемістили меню у файлі header.php і додали новий CSS до style.css. Потім виходить версія 1.05, і ви бачите сповіщення на інформаційній панелі.
Після оновлення до версії 1.05 обидва файли header.php і style.css будуть замінені файлами версії 1.05 Challenger. Вони не міститимуть тих самих змін, які ви зробили, тому ваша робота буде втрачена, і її неможливо буде повернути. Це може бути дуже неприємним, якщо ви годинами поглинаєте свої налаштування.
Однак, якщо ви внесете свої налаштування в дочірню тему Challenger, ви можете безпечно оновлюватися до версії 1.05, не втрачаючи жодних налаштувань, оскільки вони безпечно зберігаються в дочірній темі.
Це стане трохи зрозумілішим, коли ми перейдемо до реального прикладу, тож давайте зараз створимо дочірню тему.
Як створити дитячу тему
Хоча я не збираюся детально пояснювати, як тут працює весь код, це основні ідеї та фрагменти, які вам потрібні, щоб почати.
Базове налаштування
Почніть зі створення порожньої папки на робочому столі. Ви можете називати її як завгодно, але стандартна конвенція щодо імен полягає у використанні назви теми в нижньому регістрі, за якими слідує «дочірня» та заміна пробілів дефісами.
Наприклад, дочірня тема для теми Challenger матиме назву папки «challenger-child». Ця папка міститиме всі файли дочірньої теми.
Вам потрібен лише один файл, щоб створити технічно дійсну дочірню тему, style.css.
Створіть файл style.css
Використовуючи редактор коду на ваш вибір, створіть новий файл у папці дочірньої теми та назвіть його style.css.
Файл style.css, звичайно, куди ви додасте весь свій CSS, щоб налаштувати свій сайт. Щоб WordPress розпізнав вашу дочірню тему як дійсну тему, вам потрібно додати такий заголовок таблиці стилів у верхній частині style.css:
/*
Theme Name: Challenger Child
Template: challenger
Author: Compete Themes
Version: 1.0
Author URI: https://www.competethemes.com
Description: This is a child theme used to customize the Challenger WordPress theme.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/Ви можете скопіювати цей точний заголовок і використовувати його для власних дочірніх тем. Просто змініть назву теми на будь-яку тему, яку ви налаштовуєте.
Найважливішою частиною є значення «Шаблон», яке має бути встановлено на назву батьківської теми. Зокрема, ім’я, яке використовується для папки, що містить батьківську тему.
Після цього ви вже можете активувати дочірню тему через меню «Вигляд» і використовувати її. Однак ваш сайт буде зовсім не стилізованим!
Коли дочірню тему активовано, WordPress більше не завантажуватиме файл style.css батьківської теми, а натомість залежить від вашої дочірньої теми.
Ось як ви можете завантажити обидві таблиці стилів…
Створіть файл functions.php
У редакторі коду створіть другий файл у дочірній темі та назвіть його functions.php.
Далі додайте до файлу наступний код:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );Ця функція повідомляє WordPress завантажити файл style.css батьківської теми, а потім завантажити файл style.css дочірньої теми. Після завантаження таблиці стилів дочірньої теми легше замінити селектори CSS батьківської теми.
Як я вже згадував раніше, я не збираюся розкривати цей код рядок за рядком, але ви можете знайти більш детальне пояснення цього фрагмента в Кодексі WordPress.
Налаштування з вашою новою дочірньою темою
Це все, що вам потрібно зробити, щоб створити функціонуючу дочірню тему!
За допомогою налаштування дочірньої теми є три способи налаштувати свій сайт за допомогою неї.
Додавати та змінювати стилі
Ви можете додати стільки нового CSS у файл style.css дочірньої теми, скільки забажаєте.
Знаходячи селектори для використання у вашому CSS, не перевіряйте файл style.css батьківської теми. Усі наші теми використовують «попередній процесор CSS», тому ми навіть не дивимося на цей файл! Натомість дотримуйтесь цього розумнішого процесу, щоб знайти селектори CSS, і я думаю, що ви матимете набагато більший успіх у налаштуваннях свого сайту.
Перевизначення функцій
За допомогою добре закодованої батьківської теми ви можете замінити будь-яку з функцій, знайдених у її файлі functions.php.
Наприклад, кожна функція в News Mission обернена [function_exists()](https://php.net/manual/en/function.function-exists.php)перевіркою. Це означає, що ви можете скопіювати функцію у файл functions.php вашої дочірньої теми. Потім ви можете внести будь-які зміни до функції там.
Замінити шаблони
Поширеним налаштуванням, що вимагає дочірньої теми, є зміна порядку елементів. Наприклад, ви можете перемістити назву публікації після пропонованого зображення, а не перед ним.
Ви можете взяти будь-який із файлів шаблонів, знайдених у батьківській темі, і помістити копію у дочірню тему. Замість цього буде завантажена версія дочірньої теми. Це дозволяє додавати, змінювати порядок та видаляти будь-які елементи, які ви хочете, у будь-якій частині сайту.
Встановлення дочірньої теми
Коли ви задоволені своїми змінами, ви можете встановити дочірню тему на свій сайт.
Дочірні теми можна завантажувати так само, як і звичайні теми WordPress, тому їх активація на вашому сайті займає лише хвилину або дві. Дотримуйтесь цього посібника, щоб встановити дочірню тему:
Як встановити дочірню тему WordPress
Якщо ви зовсім новачок у всьому цьому, ось пара безкоштовних інструментів, які допоможуть вам у цьому.
По-перше, якщо у вас немає редактора коду, перегляньте код Visual Studio. Він простий, але гнучкий. Він також є абсолютно безкоштовним і з його допомогою створено багато професійного програмного забезпечення. Це те, що я використовую для створення тем тут, на Compete Themes.
По-друге, створення локального сайту WordPress (офлайн) — це чудовий спосіб спробувати код, не впливаючи на ваш реальний веб-сайт. Хоча я використовував і рекомендував MAMP в минулому, Local від Flywheel настільки простий і простий у використанні, що мені подобається. Це те, що я використовую для розробки теми, і це також безкоштовно.
Ваші оновлення в безпеці
Повертаючись до попереднього прикладу…
Під час оновлення теми Challenger (або будь-якої теми) весь каталог «challenger» замінюється, що не вплине на дочірню тему, оскільки тепер у неї є власний каталог у папці «challenger-child».
Маючи дочірню тему, ви можете безпечно вносити будь-які налаштування, які забажаєте, і підтримувати свою батьківську тему в актуальному стані.
Якщо ви новачок у CSS і PHP, у вас може знадобитися деякий час, щоб отримати свої налаштування, як ви хочете, але з дочірньою темою у вас є чудова основа для роботи. Не забудьте виконати ці дії, щоб знайти селектори CSS для використання, і будь-які налаштування стилю, які ви зробите, будуть досить простими.