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

Обычно найти идеальную тему практически невозможно; всегда есть некоторые модификации, которые необходимо сделать. Итак, почему бы просто не взять красивую тему WordPress по умолчанию, например, Twenty Fifteen, и не сделать ее своей собственной, чтобы она выглядела и функционировала именно так, как вы хотите? Создание дочерней темы сэкономит вам много времени и избавит от головной боли в будущем (поверьте мне).

Могу сказать из личного опыта. Я «унаследовал» сайт WordPress, на котором разработчик только что взломал родительскую тему, и я до сих пор помню, как меня расстраивало то, что я не мог обновить тему, опасаясь, что она переопределит настройки, обеспечивающие функциональность сайта. Я не знал, что такое исходный код, а что — пользовательский, так что он остался без возможности обновления.

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

Дочерняя тема позволяет вам работать в отдельном месте, и ваша работа не будет перезаписана будущим обновлением родительской темы. С технической точки зрения, когда вы создаете дочернюю тему, вы создаете отдельный набор файлов, которые можно использовать для настройки темы, не затрагивая исходную родительскую тему. Если вы внесете изменения в файлы родительской темы, эти изменения будут перезаписаны при следующем обновлении темы. Это очень важно, поскольку обновления могут включать модификации функций, исправления ошибок и важные меры безопасности. Очень важно поддерживать родительскую тему в актуальном состоянии и использовать дочернюю тему для любых настроек.

Основы дочерней темы

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

Чтобы копнуть глубже, вот как дочерние темы работают на уровне файлов. WordPress проверяет, включен ли нужный файл в дочернюю тему. Если он включен, этот файл дочерней темы загружается. Если в дочерней теме его нет, загружается файл в родительской теме. Единственным исключением является файл functions.php, в котором загружаются как родительская, так и дочерняя версии. Как правило, важная информация содержится в файле functions.php. Если бы WordPress загружал только версию дочерней темы (если вы не скопировали все заново), сайт не работал бы правильно. К счастью, WordPress загружает оба файла, поэтому вам не нужно беспокоиться о копировании всего файла functions.php в вашу дочернюю тему.

Помните, что вы всегда можете отключить дочернюю тему и при необходимости вернуться к исходной. Однако это улица с односторонним движением; вы не можете отключить родительскую тему и полагаться на дочернюю тему.

Если вы добавляете настройки в тему WordPress, лучше всего использовать дочернюю тему. Готовы создать свой собственный? Теперь мы рассмотрим процесс шаг за шагом.

Создание дочерней темы

Создать его не так сложно, как может показаться. На самом деле технически все, что вам нужно, это всего два файла: style.css и functions.php . В большинстве дочерних тем их больше, но с технической точки зрения нужны только эти два.

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

Создайте каталог темы

Сначала перейдите в каталог вашей темы и создайте папку для новой темы. Дайте ему узнаваемое имя. Для этого примера я назову свою тему child-example , чтобы ее было легко найти.

Сделать таблицу стилей дочерней темы

Следующий, очень важный шаг — создание таблицы стилей дочерней темы. Создайте файл style.css . Имейте в виду, что для правильной работы он должен называться style.css .

Далее вам нужно будет включить некоторую информацию о вашей теме.

Скопируйте и вставьте это в style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Это может показаться большим, но на самом деле необходимы только два: Theme Name и Template . Имя Theme Name сообщает WordPress имя дочерней темы. Template сообщает WordPress, какую тему следует считать родительской, что очень важно.

Большинство других довольно очевидны, но есть пара, которые, возможно, нуждаются в небольшом пояснении. Text Domain и Tags могут немного сбивать с толку. Text Domain используется для перевода строк в целях интернационализации. Это уникально для вашей темы и должно использоваться всякий раз, когда вы используете функции перевода. В Кодексе содержится гораздо больше информации, которую можно найти в теме I18n для разработчиков WordPress. Раздел « Tags » представляет собой список тегов, относящихся к конкретной теме WordPress. Для этого примера я посмотрел на родительский style.css Twenty Fifteen, взял оттуда теги и поместил их в дочернюю тему.

Используйте родительские стили

Помните, как WordPress сначала ищет файлы дочерней темы? На данный момент дочерняя тема работает, но выглядит не очень хорошо, потому что вы еще не выполнили никаких стилей. Если вы активируете его и перезагрузите страницу, она будет выглядеть немного грязной. Вероятно, это будет выглядеть примерно так:

Давайте исправим это, чтобы он возвращался к родительской теме и к нему применялись хотя бы некоторые стили. Вы по-прежнему будете использовать свою дочернюю тему для своего пользовательского стиля, но сначала давайте отобразим родительский стиль.

Чтобы убедиться, что вы загрузили таблицу стилей родительского файла, нам нужно поставить ее в очередь в дочерней теме. Вам понадобится файл functions.php в дочерней теме, чтобы вставить следующий фрагмент.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Выполнение настройки CSS

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

Если вы являетесь пользователем Chrome, инструменты разработчика очень полезны для просмотра стилей и экспериментов в браузере. Перейдите в «Вид» > «Разработчик» > «Просмотреть исходный код» и выберите элементы страницы. Стили будут показаны справа. Я просмотрел статью, в которой был класс .hentry с белым фоном. Я вставил шестнадцатеричное значение, чтобы сначала проверить его в браузере.

Чтобы внести это изменение, откройте файл CSS в дочерней теме и добавьте информацию CSS.

Как видите, в дочерней теме можно легко изменить стиль.

Изменение функциональности вашей дочерней темы

Настроить стиль довольно просто, но как насчет других вещей, таких как верхний и нижний колонтитулы, боковая панель и т. д.? Допустим, нужно внести некоторые изменения в нижний колонтитул. Скопируйте и вставьте нижний колонтитул из родительской темы в дочернюю. Файл footer.php можно открыть в текстовом редакторе по вашему выбору и изменить. Я решил удалить строку «Proudly powered by WordPress», поэтому я удалил ее из файла в своей дочерней теме. Теперь это файл, который WordPress загрузит первым, поэтому эта строка текста не будет отображаться.

Создание дочерней темы — хорошая привычка при создании тем WordPress. Всего за несколько простых шагов их легко создать и поддерживать. Хранение настроек отдельно от родительских тем полезно как для целей организации, так и для постоянного обновления всего, что избавит вас от головной боли в будущем.