Как создать дочернюю тему WordPress: пошаговое руководство. Часть 1

С помощью дочерней темы WordPress вы можете безопасно настроить код вашей темы. Если вы хотите напрямую редактировать CSS, HTML или PHP темы, мы рекомендуем вам обязательно использовать дочернюю тему WordPress — в противном случае вы можете потерять свои изменения при обновлении темы.

В этом подробном руководстве по дочерним темам WordPress вы узнаете все самое необходимое для работы с этими темами, в том числе мы расскажем вам, как их создать. 

Что такое родительская тема в WordPress?

Родительская тема — это главная тема WordPress, которая включает в себя файлы шаблонов WordPress и ресурсы, необходимые для работы темы.

Файлы index.php и style.css являются единственными необходимыми файлами шаблонов. Однако большинство тем также состоят из файлов PHP, файлов локализации, графики, JavaScript или текстовых файлов.

Любая тема, кроме дочерней, является родительской. Давайте подробнее рассмотрим, в чем их отличие.

Что такое дочерняя тема в WordPress?

Дочерняя тема — это подтема, которая наследует внешний вид и функции родительской темы. При внесении изменений в дочернюю тему, они хранятся отдельно от файлов родительской темы. Более того, любые изменения, которые вы вносите в дочернюю тему, будут иметь приоритет над поведением в родительской теме.

Дочерняя тема не будет работать сама по себе — она должна быть установлена ​​вместе с родительской темой.

Преимущества создания дочерней темы

1. Создание дочерней темы позволяет изменять родительскую тему без потери настроек. Без дочерней темы вам пришлось бы изменять файлы родительской темы напрямую всякий раз, когда вы захотите внести изменения. 
2. Хранение этих изменений в отдельной папке от вашей темы позволяет легко копировать или перемещать их с одного сайта на другой.
3. Вы можете начать заниматься разработкой тем в среде с низким уровнем риска. Если вы начнете настраивать дочернюю тему и что-то пойдет не так, вы можете просто отключить дочернюю тему. Это восстановит родительскую тему и ваш сайт в прежнем виде.

Как создать дочернюю тему в WordPress

Ниже мы подробно рассмотрим шаги по созданию дочерней темы в WordPress. Для создания базовой дочерней темы необходимо всего два файла для создания:

1. style.css;
2. functions.php.

В этом разделе мы покажем вам, как создать дочернюю тему в WordPress вручную. Однако вы можете использовать специальные инструменты для автоматизации процесса.

Шаг 1: Создайте папку дочерней темы.

Нужно создать папку, в которую вы сможете поместить все файлы шаблонов и активы вашей дочерней темы, например на локальном компьютере. 

Назовите эту папку, используя имя папки родительской темы, и добавьте «-child» в конец. Если бы вы создавали дочернюю тему Twenty Twenty-One, вы бы назвали папку «twentytwentyone-child».

Шаг 2: Создайте таблицу стилей для дочерней темы.

Затем нужно создать файл «style.css» внутри папки дочерней темы, который будет содержать все правила CSS для вашей дочерней темы. Этот файл также используется, чтобы сообщить WordPress, какая родительская тема нужна.

Для создания файла вы можете использовать любой простой текстовый редактор или редактор кода, например Sublime Text.

Самое главное, вам необходимо добавить обязательный комментарий к заголовку в самом верху файла, чтобы таблица стилей действительно работала. Вот что необходимо включить:

1. Название темы. Это имя вашей дочерней темы. В нашем примере — «HubSpot Twenty Twenty-One».
2. Шаблон. Это имя каталога, в котором находится ваша родительская тема. Это то, что связывает дочернюю тему с родительской. Для темы Twenty Twenty One это «twentytwentyone».

Однако вы можете добавить и другую информацию, например описание, имя автора, версию и теги. Они повлияют на то, как ваша дочерняя тема будет отображаться на панели инструментов «Внешний вид» > «Темы».

Ниже пример полного комментария заголовка дочерней темы Twenty Twenty-One:

/*

Theme Name: HubSpot Twenty Twenty-One

Theme URI: https://example.com/twenty-twenty-one-child/

Description: Twenty Twenty-One Child Theme

Author: Anna Fitzgerald

Author URI: https://example.com

Template: twentytwentyone

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: two-column, responsive-layout

Text Domain: twentytwentyonechild

*/

Обратите внимание на косые черты и звездочки. Они означают, что этот код будет «закомментирован» в CSS, поэтому WordPress не пытается его выполнить. Вы можете добавить собственный CSS позже, когда будете готовы приступить к настройке дочерней темы.

Теперь необходимо нажать «Сохранить», чтобы эта таблица стилей сохранилась в каталоге вашей дочерней темы.

Шаг 3: Поставьте в очередь таблицы стилей родительской и дочерней тем.

Это обеспечит следующее:

1. Дочерняя тема будет наследовать стиль своей родительской темы. 
2. Таблица стилей дочерней темы будет загружаться раньше таблицы стилей родительской темы, не переопределяя ее. Таким образом, как только вы добавите пользовательский CSS и измените свою дочернюю тему, эти изменения дополнят или заменят определенные стили и функции родительской темы.

Для большинства тем вы сможете использовать этот код:

<?php

add_action(‘wp_enqueue_scripts’, ‘hubspot_blog_theme_enqueue_styles’ );

function hubspot_blog_theme_enqueue_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

?>

Шаг 4: Установите и активируйте дочернюю тему.

После того, как вы создали два необходимых файла — «style.css» и «functions.php» — у вас есть все, что необходимо для базовой дочерней темы.

Чтобы упаковать дочернюю тему в файл, который вы можете установить через панель управления WordPress, вам необходимо сжать папку дочерней темы в виде Zip-файла.

Как в Windows, так и в macOS вы сможете сделать это, щелкнув правой кнопкой мыши папку на локальном компьютере и выбрав параметр для сжатия в виде Zip-файла.

Вот как это выглядит в macOS:

Теперь вы можете установить этот Zip-файл так же, как и любую другую тему WordPress.

Чтобы загрузить файл, перейдите на панель управления WordPress и нажмите «Внешний вид» > «Темы» > «Загрузить тему». Затем используйте средство выбора файлов, чтобы выбрать Zip-файл, который вы только что создали, и нажмите «Установить сейчас».

Как только вы загрузите его, вы должны увидеть сообщение от WordPress о том, что для него требуется родительская тема, и подтверждение того, что родительская тема установлена. Далее нажмите кнопку «Активировать».

^{Источник: hubspot.com}