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

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

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

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

Дочірні теми потрібні для того, щоб розробники тем могли оновлювати/покращувати свої теми, а користувачі могли оновлювати теми та не втрачати при цьому внесених змін.

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

Що можна змінити у дочірній темі?

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

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

Створення дочірньої теми

Створити підтему легко! Нижче створюється дочірня до 20fifteen тема.

1. Створіть папку з будь-якою назвою в каталозі тем: wp-content/themes . Нехай twentyfifteen-child

2. Створіть у новій папці файл style.css . З вмістом:

   /*
   Theme Name: Моя дочірня тема
   Template: twentyfifteen
   
   Не обов'язкові параметри:
   Theme URI: http://example.com/
   Description: Дочірня тема для теми twentyfifteen
   Автор: Kama
   Author URI: http://example.com/about/
   Version: 1.0
   */
   
   /* імпортуємо стилі батьківської теми */
   @import url("../twentyfifteen/style.css");
   
   /* Свої додаткові стилі */
   .foo{color:red; }

3. Зайдіть до Внешний вид › Темыта активуйте нову тему «Моя дочірня тема».

В результаті у нас має вийти така структура:

wp-content
   └── themes
		 ├── twentyfifteen (батьківська тема)
		 └── twentyfifteen-child (підтема; може мати будь-яку назву)
				 └── style.css

twentyfifteen-child може містити й інші файли, серед них:

• style.css — (обов’язковий) повністю замінює такий самий файл батьківської теми.

• functions.php – доповнює functions.php батьківської теми (завантажується перед ним).

• файли шаблону – index.php , home.php і т.д., які є/ні в батьківській темі. Якщо файл є у дочірній темі, цей файл повністю замінить батьківський файл. Наприклад: створивши footer.php і скопіювавши вміст footer.php з батьківської теми, ми можемо змінювати висновок, не змінюючи файл батьківської теми.

• інші файли – будь-які інші файли/папки/що завгодно. Наприклад, підтема може використовувати нові зображення, які підключаються до додаткових правил CSS.

Файл style.css

style.css – єдиний обов’язковий файл у підтемі. Дає інформацію WordPress, щоб упізнати дочірню тему.

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

В інформаційному заголовку, який має бути на початку файлу, є обов’язковим параметр Template:. Саме по ньому WP розуміє, що це дочірня тема та як називається батьківська.

Приклад style.css дочірньої теми.

/*
Theme Name: Моя дочірня тема
Template: twentyfifteen
Theme URI: http://example.com/
Description: Дочірня тема для теми twentyfifteen
Автор: Kama
Author URI: http://example.com/about/
Version: 1.0
*/

// стилі батьківської теми
@import url("../twentyfifteen/style.css");

//додаткові стилі
.foo{color:red; }

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

• Template — (обов’язково) реєстрозалежна назва папки батьківської теми.

  Примітка: при зміні потрібно скинути налаштування, для цього потрібно перейти на іншу тему і повернутися назад.

• Theme URI – адреса сайту дочірньої теми.
• Description – опис дочірньої теми.
• Author URI – адреса сайту автора дочірньої теми.
• Author – ім’я автора дочірньої теми.
• Version – версія дочірньої теми.

Файл functions.php

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

Це означає, що зміни батьківської теми, в functions.php можна використовувати хуки і можна «перевизначати» функції, якщо вони цього розраховані.

Використання хуків

У файлі footer.php у темі twentyfifteen є подія twentyfifteen_credits . Щоб додати свій текст до підвалу, можна використовувати цю подію, для цього додамо наступний код до functions.php дочірньої теми:

add_action( 'twentyfifteen_credits', function() {
	echo 'Компанія © 2015';
} );

Перевизначення функції

У файлі functions.php батьківської теми twentyfifteen є функція twentyfifteen_fonts_url() – реєструє шрифти google. Виглядає вона так:

if( ! function_exists( 'twentyfifteen_fonts_url' ) ){
	function twentyfifteen_fonts_url(){
		// код функції ...
	}
}

Умова ! function_exists('twentyfifteen_fonts_url')– якщо функція немає, дозволяє визначити таку ж функцію в functions.php дочірньої теми.

У цьому випадку спрацьовуватиме тільки наша, певна функція, а не функція з батьківської теми – вона не зареєструється в PHP через умови…

Наприклад, додавши такий код до functions.php дочірньої теми, ми відключимо підключення шрифтів:

function twentyfifteen_fonts_url() {
	return '';
}

if( ! function_exists('theme_function') ){
	function theme_function() {
		// Код.
	}
}

Файли шаблону

У дочірній темі можна використовувати ті самі файли теми, що й у будь-якій темі WP. Повний список читайте у статті «Ієрархія шаблонів теми» .

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

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

#1 Додавання шаблону, який відсутній у батьківській темі

Створимо шаблон для сторінки “картка сайту”. Для цього у підтемі створимо файл page-sitemap.php, а на сайті створимо сторінку з ярликом sitemap . Готово!

#2 Зміна шаблону, який є в батьківській темі

Допустимо, у нас є home.php у батьківській темі і нам потрібно його змінити.

1. Створюємо home.php у підтемі.

2. Скопіюємо код файлу з батьківської теми.

3. Змінимо скопійований код як слід.

Як це працює: крок за кроком

Процес роботи дочірньої теми WordPress:

1. WP відкриває style.css теми встановленої в налаштуваннях системи та зчитує заголовки.

2. Директива Template: оголошує, що тема має батьківську тему і вказує її назву. Тепер WP працює з темою як із дочірньою.

3. Далі всі файли, крім functions.php , підключаються за допомогою locate_template() : перевіряє чи існує файл у підтемі, якщо не існує, то підключається з батьківської теми.

Локалізація підтем

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

Для підключення є спец. функція: load_child_theme_textdomain() . Використовуємо її у functions.php підтеми:

function my_child_theme_setup() {
	load_child_theme_textdomain( 'my_child_theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup');

Також потрібно створити файл перекладу в дочірній темі: languages/en_US.mo .

Тепер можна використовувати функції локалізації WordPress у підтемі:

_e( 'Це потрібно перекласти на англ.', 'my_child_theme');

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

Функції WordPress пов’язані з дочірніми темами

• get_stylesheet_directory_uri() – отримує URL поточної теми (дочірньої, не батьківської).

• get_template_directory_uri() – отримує URL поточної теми (батьківської, не дочірньої).

• get_stylesheet_directory() – отримує шлях до поточної теми (дочірньої, не батьківської).

• get_template_directory() – отримує шлях до поточної теми (батьківської, не дочірньої).

• get_stylesheet() – отримує назву каталогу поточної теми (дочірньої, не батьківської).

• get_template() – отримує назву каталогу поточної теми (батьківської, не дочірньої).

• get_stylesheet_uri() — отримує готову URL-адресу на файл стилів style.css поточної теми. Якщо використовується дочірня тема, отримає посилання на стилі доч. теми. У цьому випадку для батьківської теми такої функції WordPress немає.

Тобто. якщо потрібно отримати посилання на файл теми, але при цьому використовується дочірня тема, то УРЛи від: get_stylesheet_directory_uri() і get_template_directory_uri() відрізнятимуться: перший буде на дочірню тему, а другий на батьківську…

Плагін для швидкого створення дочірніх тем

Щоб не займатися створенням папок і файлів, можна скористатися плагіном One-Click Child Theme .

Він дозволяє створити дочірню тему з поточної в один клік. Після створення теми можна видалити плагін. У плагіна багато хороших відгуків…

нотатки

Формати записів

Функція add_theme_support(‘post-formats’) перевизначить формати, задані батьківською темою, а не доповнить їх.

@import у style.css дочірньої теми

Незважаючи на те, що скрізь пишуть використовувати @import у style.css підтеми. Робити це я не рекомендую. Тому що в цьому випадку браузер не може паралельно завантажити обидва файли стилів: від батьківської теми і від дочірньої… Йому доведеться завантажити їх послідовно: спочатку стилі дочірньої теми, там він побачить @import і тільки потім почне завантажувати стилі батьківської теми. У результаті виходить, що ми втрачаємо швидкість завантаження сторінки порядку 200мс. Стільки йде на завантаження файлу стилів. Під завантаженням мається на увазі відправка запиту на сервер, очікування відповіді, завантаження файлу…

Краще підключити файли стилів окремо в HTML: спочатку стилі батьківської теми, а потім дочірньої, щоб вони були нижче в HTML коді і перебивали батьківські стилі. Робиться це так:

add_action('wp_enqueue_scripts', 'my_theme_styles');
function my_theme_styles() {
	wp_enqueue_style('parent-theme-css', get_template_directory_uri() .'/style.css' );
	// Необов'язково, правильна батьківська тема підключить його сама.
	//wp_enqueue_style('child-theme-css', get_stylesheet_directory_uri() .'/style.css', array('parent-theme-css') );
}

В результаті в HEAD частини HTML документа ми отримаємо два посилання на два файли стилів, які при завантаженні завантажуватимуться паралельно, а не послідовно. Це заощадить час на один запит до сервера від бразуера.

–