Як створити дочірню тему WordPress — Правильний спосіб

Підніміть руку ті, хто налаштовував більше 5 сайтів WordPress. Не опускайте руку, якщо ви налаштовували більше 10. Якщо ж ви налаштували більше 20, то, напевно, знаєте про дочірні теми. Робота з дочірньою темою – це чудовий спосіб змінити батьківську тему WordPress. За ці роки теми WordPress стали дуже різноманітними, але все одно вимагають налаштування.

Припустимо, що ви встановили одну із стандартних тем, наприклад, TwentySixteen або TwentyFifteen. Ви налаштували її стилі та додали кілька PHP функцій. Але що станеться, коли розробники випустять нову версію? У вас є лише два шляхи: завантажити оновлення та втратити всі налаштування, або залишити стару версію та зробити сайт вразливим.

Дивіться також:

• Налаштування тем WordPress із використанням дочірньої теми
• 7 плагінів та дочірніх тем для покращення теми Twenty Fourteen
• Перевизначення функцій батьківської теми дочірньої на WordPress
• Як створити просту WordPress-тему на основі Twenty Eleven
• Як встановити тему оформлення WordPress

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

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

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

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

Згідно з WordPress Codex:

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

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

Відмінності дочірньої теми від батьківської

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

Ну а зараз давайте розглянемо відмінності дочірньої та батьківської теми:

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

Переваги використання дочірньої теми

Сама концепція дочірньої теми — чудова. Ми пропонуємо використовувати дочірні теми з усіма преміум-темами, а професійним розробникам варто включити їх у пакет зі своїми темами.

У дочірніх тем є безліч переваг:

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

Компоненти дочірньої теми

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

• Директорія дочірньої теми: Це корінь папки, де знаходяться файли дочірньої теми
• Файл style.css: Цей файл містить всі властивості стилів вашої дочірньої теми.
• Файл functions.php: Містить визначення функцій, які викликані у вашій дочірній темі

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

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

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

1. Конфігуратор дитячої теми

Плагін Child Theme Configurator створює дочірні теми за кілька кліків. З його потужним редактором CSS ви можете налаштувати розширений рівень функціональності. Плагін не лише ідентифікує, а й змінює потрібні атрибути CSS.

2. Child Themify

Для створення дочірніх тем ми можемо порекомендувати плагін Child Themify. Він дуже легкий і створює дочірню тему лише натисканням кнопки.

3. _child Theme Boilerplate

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

Цей шаблон надає інтуїтивну дочірню тему, де для її створення вам потрібно тільки вставити посилання на батьківську тему. Шаблон _child допоміг створити професійну дочірню тему. Ви можете знайти цей шаблон на GitHub. А зараз дозвольте нам розповісти про два готові файли в цьому шаблоні.

• style.css
• functions.php

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

Код для style.css:

/**
 * Theme Name: Themename Child
 * Description: Themename Child Theme
 * Theme URI: https://labs.ahmadawais.com/_child/
 * Author: mrahmadawais, WPTie
 * Author URI: http://ahmadawais.com/
 * Template: themename
 * Version: 1.0.0
 */

/* ----------------------------------------------------------------------------
 * Child Theme Style.css styles begin here!
 * ------------------------------------------------------------------------- */

У файлі functions.php є функція, яка називається aa_enqueue_styles(). Вона ставить у чергу таблиці стилів спочатку для батьківської теми, та був дочірньої. Таким чином, стиль дочірньої теми завжди залежатиме від батьківської.

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

Код для functions.php:

<?php
/**
 * Child theme functions
 *
 * Functions file for child theme, enqueues parent and child stylesheets by default.
 *
 * @since 	1.0.0
 * @package aa
 */
 
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
if ( ! function_exists( 'aa_enqueue_styles' ) ) {
	// Add enqueue function to the desired action.
	add_action( 'wp_enqueue_scripts', 'aa_enqueue_styles' );
	
	/**
	 * Enqueue Styles.
	 *
	 * Enqueue parent style and child styles where parent are the dependency
	 * for child styles so that parent styles always get enqueued first.
	 *
	 * @since 1.0.0
	 */
	function aa_enqueue_styles() {
		// Parent style variable.
		$parent_style = 'parent-style';
		
		// Enqueue Parent theme's stylesheet.
		wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
		
		// Enqueue Child theme's stylesheet.
		// Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it.
		wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );
	}
}

Підсумки

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

Джерело: wplift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/