Black Friday! Даруємо до 3 місяців вашого тарифу VPS!

Детальніше

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

post thumbnail

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

Для чого потрібні дочірні теми?

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

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

Ми покажемо процес створення дочірньої теми для версій WP до 5.9 (тобто для тем Twenty Twenty і старіше).

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

Створюємо папку в каталозі тем: wp-content/themes. Називаємо, наприклад twentytwenty-child

Створення дочірньої теми WordPress | Wiki HostPro

Крок 2. Створюємо файл style.css

Створюємо в новій папці файл style.css. Він має включати наступне: 

/*
Theme Name:   Twenty Twenty Child
Author:       Hostpro
Template:     twentytwenty
*/
  • Theme Name (обовʼязково) – назва дочірньої теми;
  • Template (обовʼязково) – назва папки батьківської теми (регістрозалежна);
  • Theme URI (необовʼязково) – адреса сайту дочірньої теми;
  • Description (необовʼязково) – опис дочірньої теми;
  • Author URI (необовʼязково) – адреса сайту автора дочірньої теми;
  • Author (необовʼязково) – імʼя автора дочірньої теми;
  • Version (необовʼязково) – версія дочірньої теми.

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

Крок 3. Створюємо файл functions.php

Створюємо новий файл functions.php на тому ж рівні, що й style.css – в папці twentytwenty-child (будь ласка, зверніть увагу, що файл має називатися саме functions.php, а не function.php). 

На початку обовʼязково відкриваємо тег <?php.

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

<?php
function child_theme_enqueue() {


// Parent styles
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );


}


add_action( 'wp_enqueue_scripts', 'child_theme_enqueue' );

Є ще варіант за допомогою директиви @import у файлі style.css. 



/*
Theme Name:   Twenty Twenty Child
Author:       Hostpro
Template:     twentytwenty
*/
@import url("../twentytwenty/style.css");


#site-title a {
    color: #009900;
}

Але оскільки браузер не може паралельно завантажувати обидва файли стилів (тобто спочатку він побачить стилі дочірньої теми, далі @import, а вже потім стилі батьківської теми), цей варіант буде повільнішим і ми його не рекомендуємо.

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

Повертаємося в адмінку WP і активуємо нашу дочірню тему. 

Створення дочірньої теми WordPress | Wiki HostPro

Щоб перевірити, чи правильно ми підключили стилі, заходимо на сайт, тиснемо правою кнопкою миші → “Перегляд коду сторінки” → шукаємо в <head> наступне:

<link rel='stylesheet' id='twentytwenty-style-css' href='https://hostpro.fun/wp123/wp-content/themes/twentytwenty-child/style.css?ver=6.1.1' media='all' />

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

Висновок

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

Швидкий WordPress Хостинг

З прискорювачем сайтів LiteSpeed

Telegram Hostpro

Наш телеграм

з важливими анонсами, розіграшами й мемами

Приєднатися

Можливо, вас зацікавить

Плагін AllinOneSEOPack Частина 2. Продуктивність та налаштування модулів

Плагін AllinOneSEOPack Частина 2. Продуктивність та налаштування модулів

Нагадаємо, що ми розбираємо налаштування плагіну «All in One SEO», який стане для вас...

Ruslan Holovatiuk | Оновлено: 22.07.2024

Плагін AllinOneSEOPack Частина 1. Основні налаштування

Плагін AllinOneSEOPack Частина 1. Основні налаштування

Якщо ви створюєте свій сайт не тільки для «краси» і розумієте, що органічний трафік...

Diana Honcharenko | Оновлено: 04.07.2024

Огляд преміумтеми Divi

Огляд преміумтеми Divi

"Divi від Elegant Themes – один з кращих преміумшаблонів WordPress", – у такій думці...

Diana Honcharenko | Оновлено: 11.06.2024

Як виправити код мови в URL з uk на ua у WPML? 

Як виправити код мови в URL з uk на ua у WPML? 

Загальноприйнято, що для URL української версії сайту використовується код “ua”. Однак у налаштуваннях WPML...

Diana Honcharenko | Оновлено: 05.05.2023