Как создать дочернюю тему 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

Плагин 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 распознать его, как таблицу стилей дочерней темы. Тэги для Theme Name и Template — самые важные. Вы можете заменить тэг 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/