Дочірні теми у WordPress

за Ніколаєнко Максим · Опубліковано Лютий 13, 2013 · Оновлено Серпень 27, 2020

Зміст приховати

1 З ТЕОРЕТИЧНОЮ ЧАСТЬЮ ЗАКІНЧИЛИ І ПЕРЕХОДИМО ДО ПРАКТИЧНОЇ

2 Приклад інформаційного заголовка дочірньої теми

5 Приклад імпорту стилів із батьківської теми

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

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

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

Саме тому дочірні теми це рекомендований спосіб внесення змін до теми.

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

Дочірня тема розміщується у власній папці всередині wp-content/themes. Схема нижче показує положення дочірньої теми щодо її батьківської теми (TwentyTwelve) у структурі папок WordPress:

public_html

wp-content

themes (папка з усіма темами)
- twentwelve (папка батьківської теми Twenty Twelve)
- twentwelve-child (папка нашої дочірньої теми; може бути названа як завгодно)
  - style.css (необхідний файл, має бути названий style.css)

Ця папка може містити як основний файл стилів style.css, так і додаткові файли, пов'язані з темою:

style.css (обов'язково)
functions.php (опціонально)
файл до шаблону (опціонально)
інші файли (опціонально)

З ТЕОРЕТИЧНОЮ ЧАСТЬЮ ЗАКІНЧИЛИ І ПЕРЕХОДИМО ДО ПРАКТИЧНОЇ

Обов'язковий у дочірній темі файл style.css

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

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

Приклад інформаційного заголовка дочірньої теми

/*
Theme Name:     twentytwelve-child
Theme URI:      http: //wp-admin.com.ua/
Description:    Дочерняя тема для темы Twenty Twelve
Author:         Ваше имя
Author URI:     https://wp-admin.com.ua/perenos-sayta-wordpress-katalog-stattey/
Template:       twentytwelve
Version:        0.1.0
*/

Theme Name: twentytwelve-child

Theme URI: http: //wp-admin.com.ua/

Description: Дочерняя тема для темы Twenty Twelve

Author: Ваше имя

Author URI: https://wp-admin.com.ua/perenos-sayta-wordpress-katalog-stattey/

Template: twentytwelve

Version: 0.1.0

Коротке пояснення кожного параметра:

Theme Name. (обов'язково) Назва дочірньої теми.

Theme URI. (опціонально) Адреса сайту дочірньої теми.

Description. (опціонально) Опис дочірньої теми. Наприклад: Моя перша дочірня тема, буга!

Author URI. (опціонально) Адреса сайту автора дочірньої теми.

Author. (опціонально) Ім'я автора дочірньої теми.

Template. (обов'язково) Назва папки батьківської теми, залежить від реєстру.

ПРИМІТКА. При зміні параметра Template ви повинні перейти на іншу тему і назад на дочірню тему, щоб ця опція обраної теми оновилась.

Version. (опціонально) Версія дочірньої теми. Наприклад: 0.1, 1.0.

Частина після закриття */ використовується як звичайний файл стилів. Тут ви пишете правила стилів, які будуть застосовані WordPress.

Приклад імпорту теми з батьківської

важливо! Файл стилів дочірньої теми повністю замінює файл стилів батьківської теми. (Файл стилів батьківської теми взагалі не завантажується WordPress). Якщо ви просто хочете внести невеликі зміни до зовнішнього вигляду батьківської теми, а не переписувати її з нуля ви повинні імпортувати файл стилів батьківської теми за допомогою директиви @import, а потім додавати зміни.

Приклад імпорту стилів із батьківської теми

Створюємо нову папку в wp-content/themes, і називаємо її twentwelve-child.
В папці twentwelve-child створюємо файл з ім'ям style.css.

/*
Theme Name: twentytwelve-child
Theme URI:      http: //wp-admin.com.ua/
Description: Дочерняя тема для темы Twenty Twelve
Author: Ваше имя
Template: twentytwelve
*/

@import url("../twentytwelve/style.css");
 
h1.site-title a { color: red; }

Theme Name: twentytwelve-child

Theme URI: http: //wp-admin.com.ua/

Description: Дочерняя тема для темы Twenty Twelve

Author: Ваше имя

Template: twentytwelve

@import url("../twentytwelve/style.css");

h1.site-title a { color: red; }

Переходимо в Зовнішній вигляд › Теми та активуємо нашу нову тему Twenty Twelve Child.

Важливе правило для @import

Не повинно бути жодних інших правил CSS вище директиви @import.

Примітка для мов з листом праворуч наліво

Для підтримки мов з листом справа наліво (іврит або арабська), додайте файл rtl.css, що містить наступний код, у вашу дочірню тему:

 /*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/

@import url("../twentytwelve/rtl.css");

Theme Name: Twenty Twelve Child

Template: twentytwelve

@import url("../twentytwelve/rtl.css");

WordPress автоматично завантажить файл rtl.css тільки якщо is_rtl(). Навіть якщо батьківська тема не містить файлу rtl.css, рекомендується додати rtl.css до вашої дочірньої теми.

Використання functions.php

На відміну від style.css, файл functions.php дочірньої теми не замінює собою відповідний файл батьківської теми. Замість цього, він завантажується на додаток до батьківського файлу functions.php. (А саме, прямо перед батьківським файлом.)

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

Ось правильне рішення: ви створюєте дочірню тему, додаєте до неї файл functions.php, і поміщаєте вашу функцію туди. Функція буде робити те саме, плюс вона не буде торкнутися при майбутніх оновленнях вашої батьківської теми.

Структура файла functions.php: відкриваючий тег PHP на початку, закриває тег PHP в кінці, і між ними ваш код. Тут ви можете писати ваші функції. Приклад нижче показує елементарний файл functions.php, який робить одну просту річ: додає посилання на favicon в елемент HEAD сторінок.

Приклад коду

function favicon_link() {

    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";

}

add_action('wp_head', 'favicon_link');

function favicon_link() {

echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";

}

add_action('wp_head', 'favicon_link');

РАДА ДЛЯ РОЗРОБНИКІВ ТЕМ. Факт, що файл functions.php дочірньої теми завантажується першим, означає, що ви можете виконувати функції своєї теми такими, що розширюються, тобто. замінювані за допомогою дочірньої теми, оголошуючи їх умовно.

if (!function_exists('theme_special_nav')) {
    function theme_special_nav() {
        //  Ваш код.
    }
}

if (!function_exists('theme_special_nav')) {

function theme_special_nav() {

// Ваш код.

}

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

Прив'язка/вставка файлів у вашу дочірню тему

Коли вам потрібно вставити файли, які знаходяться всередині папки вашої дочірньої теми, використовуйте get_stylesheet_directory(). Т.к. файл стилів батьківської теми замінюється файлом style.css вашої дочірньої теми, який знаходиться в кореневій папці дочірньої теми, get_stylesheet_directory() вказує на папку вашої дочірньої теми (а не на папку батьківської теми).

Ось приклад використання require_once, який показує, як можна використовувати get_stylesheet_directory(), коли файл, що підключається, знаходиться в папці дочірньої теми.

require_once( get_stylesheet_directory(). '/my_included_file.php' );

1	require_once( get_stylesheet_directory(). '/my_included_file.php' );

Використання форматів записів

Дочірня тема успадковує формати записів, визначені у батьківській темі. але, при створенні дочірніх тем, Будьте уважні, т.к. функція add_theme_support(«постформати») перевизначить формат, задані батьківською темою, а не додасть до неї.

Файл у шаблон

Шаблони в дочірній темі поводяться так само, як style.css, вони замінюють відповідні файли батьківської теми. Дочірня тема може замінити будь-який батьківський файл шаблону, просто створивши файл з таким же ім'ям. (ПРИМІТКА. Файл index.php може бути замінений тільки в WordPress версії 3.0 і вище.).

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

Ось кілька прикладів використання файлів шаблонів у дочірній темі:

Додавання шаблону, відсутнього у батьківській темі (наприклад, шаблону для сторінки картки посилань, або для одноколоночних сторінок, які можна буде вибрати у властивостях сторінки).
Для додавання більш специфічних шаблонів (см. ієрархію шаблонів), наприклад, шаблон tag.php для сторінок міток замість звичайного archive.php батьківської теми.
Для заміни батьківського шаблону (наприклад, створити свій власний шаблон home.php для заміни батьківського home.php).

Для розуміння принципів роботи ви можете встановити на тестовому майданчику останню версію WordPress та активувати тему Twenty Twelve Child яку створив я, після цього зайдіть і уважно перегляньте всі файли теми.

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