Краткое руководство по созданию и настройке дочерней темы WordPress

Опубликовано: 2018-10-09

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

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

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

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

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

Если на вашем сайте WordPress есть одна активная тема со всеми необходимыми шаблонами и активами, нет разницы между родительской и дочерней темами.

Страница каталога тем WordPress — Вы можете найти темы в каталоге тем WordPress или у стороннего поставщика тем.

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

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

Таким образом, когда ваш сайт загружается для посетителя, загружается исходный дизайн темы, но с внесенными в него изменениями.

Дети в реальной жизни, а не в онлайн-мире, зависят как минимум от одного родителя. Точно так же дочерняя тема зависит от исходной темы.

Вот почему при использовании дочерней темы исходная тема называется родительской.

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

Идеальная детская тема и когда ее использовать

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

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

Например, тема Perfect Magazine использовалась в качестве родительской темы для создания дочерней темы Newsliner, чтобы не только изменить некоторые цвета в дизайне, но и удалить рекламный баннер при добавлении карусели сообщений в блоге вверху страницы.

Такого рода настройки недоступны в опциях Perfect Magazine, но они недостаточно масштабны, чтобы гарантировать создание совершенно новой темы с нуля.

Пример дочерней темы WordPress — Perfect Magazine (на фото слева) является родительской темой Newsliner (справа).

Зачем создавать дочернюю тему?

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

Вот почему многие владельцы веб-сайтов предпочитают вообще не обновлять свою родительскую тему. Но это серьезная проблема с безопасностью, поскольку 54% взломанных сайтов WordPress имели устаревшее программное обеспечение, которое хакеры и вредоносное ПО часто сканируют, чтобы найти.

Кроме того, обновления часто содержат исправления уязвимостей, поэтому игнорирование обновления означает, что ваш сайт остается открытым для атак.

Кроме того, вы можете создать дочернюю тему, чтобы избежать этих ловушек.

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

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

Начало работы с дочерней темой WordPress

Есть несколько ключевых элементов, необходимых для создания дочерней темы:

Папка каталога темы
Файл style.css
Файл functions.php

Хотя единственным обязательным файлом в дочерней теме является style.css , файл functions.php необходим для правильной постановки в очередь таблицы стилей родительской темы.

Поэтому настоятельно рекомендуется создать файл functions.php в дочерней теме, чтобы избежать ошибок.

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

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

Создание папки каталога

Все темы находятся в папке /wp-content/themes/ вашей установки WordPress.

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

Как правило, тема переименовывается с использованием имени родительской темы, но с добавлением -child в конце.

Например, два пути к файлам будут /wp-content/themes/yourtheme/ и /wp-content/themes/yourtheme-child/ .

Также не должно быть пробелов в названии дочерней темы.

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

Создание таблицы стилей

Дочерние темы WordPress часто используются для довольно обширных изменений дизайна, поэтому необходим отдельный файл style.css .

Файл будет содержать все правила и объявления CSS, влияющие на внешний вид вашей темы.

Создайте файл style.css в корне папки новой дочерней темы. Затем введите этот заголовок вверху страницы:

 /*
 Название темы: Двадцать семнадцать детей
 URI темы: http://example.com/twenty-seventeen-child/
 Описание: Детская тема Twenty Seventeen
 Автор: Джейн Доу
 URI автора: http://example.com
 Шаблон: двадцать семнадцать
 Версия: 1.0.0
 Лицензия: Стандартная общественная лицензия GNU версии 2 или более поздней.
 URI лицензии: http://www.gnu.org/licenses/gpl-2.0.html.
 Теги: светлый, темный, две колонки, правая боковая панель, адаптивный макет, доступность
 Текстовый домен: двадцать семнадцать-ребенок
*/

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

Единственными требованиями к заголовку являются имя темы и шаблон . Но лучше всего заполнить остальные.

Не забудьте также изменить все необходимые данные, чтобы они были точными. Например, Author и URI автора , а также ссылки на Twenty Seventeen, если вы используете другую родительскую тему.

Раздел « Теги » относится к каталогу тем WordPress. Если вы хотите загрузить туда свою тему, обязательно выберите теги, относящиеся к вашей теме.

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

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

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

Если бы вы пропустили постановку в очередь, ваш сайт использовал бы только таблицу стилей дочерней темы и не использовал бы какие-либо стили, предоставляемые родительской темой.

Также может быть важно отметить, что родительский файл style.css можно поставить в очередь с помощью метода @import . Но это больше не рекомендуется из-за проблем с производительностью.

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

Это можно сделать, создав новый файл и назвав его functions.php . Потом. поместите этот код в самый верх:

 &lt;?php

Убедитесь, что перед строкой выше нет пробелов, иначе это приведет к ошибке.

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

 add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

функция my_theme_enqueue_styles() {

    $родитель_; // Это стиль 'twentyseventeen' для темы Twenty Seventeen.

    wp_enqueue_style($parent_style, get_template_directory_uri(). '/style.css');
    wp_enqueue_style('детский стиль',
        get_stylesheet_directory_uri() . '/style.css',
        массив ($parent_style),
        wp_get_theme()->get('Версия')
    );
}
?&gt;

Убедитесь, что вы изменили родительский стиль , хранящийся в переменной $parent-style , чтобы включить имя вашей темы.

Согласно рекомендациям Кодекса WordPress, этот код обеспечит загрузку родительского файла style.css в качестве зависимости, то есть он необходим для загрузки файла style.css дочерней темы.

Активация дочерней темы

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

Вам также не нужно будет активировать родительскую тему. Хотя он все равно должен быть установлен и оставаться в папке /wp-content/themes/ .

Текст заголовка в файле style.css вашей дочерней темы соединит их вместе и прояснит взаимосвязь для вашей установки WordPress.

Страница администратора темы на сайте WordPress — Когда вы активируете дочернюю тему, родительская тема все еще должна оставаться в папке тем.

После того, как вы активировали свою дочернюю тему, вам может потребоваться повторно сохранить свое меню в « Внешний вид»> «Меню» , а также некоторый другой контент в « Параметры темы » настройщика, если у вас возникнут проблемы с вашим дизайном.

Советы по быстрой настройке

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

Изображение темы

На странице « Внешний вид» > «Темы » вы должны добавить собственное изображение для темы.

Если вы хотите вставить что-то вместо клетчатого поля, вы можете загрузить файл изображения PNG размером 880 x 660 с именем screenshot.png .

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

Переопределение файлов родительской темы

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

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

Деревня не нужна

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

Какую дочернюю тему вы хотите сделать? Удалось ли вам успешно его создать? Сталкивались ли вы с проблемами в процессе? Не стесняйтесь делиться своим опытом в комментариях ниже.