Почему вам нужна дочерняя тема и как создать свою собственную

Представьте себе: вы нашли идеальную тему для вашего WordPress блога. Ну, почти идеальную. После того как вы изменили шрифт меню с Times New Roman на Open Sans и цвет фона боковой панели с зеленого на голубой, она полностью соответствует вашему видению. До тех пор, пока через две недели создатель темы не выпускает новую версию с важным обновлением безопасности. Вы обновляете тему, только чтобы заметить, что — бац! — все ваши настройки исчезли.

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

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

Примечание: Это учебник среднего уровня, который предполагает, что вы знаете хотя бы немного HTML и CSS. Не обязательно быть мастером, но мы будем редактировать код темы. Если вы еще не уверены в своих силах, рекомендуем ознакомиться с бесплатным учебником по CSS от W3Schools или записаться на бесплатный курс по HTML/CSS от Codecademy.

WordPress + DreamHost

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

Посмотреть планы

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

Это Twenty Sixteen, тема, которую создал и выпустил WordPress.org в этом году. Если вы ищете базовую тему для внесения изменений, обязательно рассмотрите возможность ознакомления с их ежегодными выпусками, такими как Twenty Fifteen, Twenty Fourteen и так далее.

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

Сначала я открываю Инструменты разработчика Chrome, перейдя в меню браузера Chrome: Просмотр → Разработчик → Инструменты разработчика. (Если вы предпочитаете Firefox, вы можете перейти в Инструменты → Веб-разработчик → Инспектор в меню Firefox.)

Инструменты разработчика позволяют мне проверить тему и увидеть, откуда берутся «правила». Изменяя нужный класс CSS, я могу понять, что мне нужно добавить в мою дочернюю тему для внесения изменений. Например, вы можете видеть, что, изменив цвет фона на #0099ff, я могу изменить рамку с черного на синий. Конечно, Инструменты разработчика предназначены только для временных экспериментов, и когда я обновлю эту страницу, рамка снова станет черной.

2. Создайте папку и файлы вашей дочерней темы

Важно тщательно промаркировать вашу дочернюю тему, начиная с имени папки, в которую вы её помещаете. Таким образом, WordPress автоматически сможет её идентифицировать. Добавление «-child» в конец имени оригинальной темы является лучшей практикой. Так, в моем случае, поскольку Twenty Sixteen находится в папке с именем «twentysixteen», я называю мою папку «twentysixteen-child».

Первый файл, который мне нужно создать, это style.css — файл css, содержащий важную информацию о моей теме и индивидуальное оформление, которое я хочу добавить к её внешнему виду.

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twentysixteen-child/
Description: Моя первая дочерняя тема, на основе Twenty Sixteen
Author: Лорен Орсини
Author URI: http://lorsini.com
Template: twentysixteen
Version: 1.0.0
Tags: две колонки, синий, правая боковая панель
Text Domain: twentysixteen-child
*/

Я начинаю с заполнения необходимых данных. Требуются только «Theme Name» и «Template». WordPress должен знать имя темы, а также какую тему следует считать родительской для этой темы, в данном случае Twenty Sixteen. Остальные данные вы можете заполнить своей информацией или оставить пустыми. Фактически, эта структура стала стандартом для людей, заинтересованных в публикации своих тем на WordPress.org. Если вы создаете дочернюю тему только для личного пользования, вам нужны только имя темы, описание, автор, шаблон и версия.

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

После того как я закончу этот этап, моя дочерняя тема будет функциональной. Я мог бы установить её на этом этапе, но она бы содержала только два стиля, а остальное было бы по умолчанию. Это не то, что мне нужно; я хочу, чтобы тема наследовала стили Twenty Sixteen. Поэтому мне нужен второй файл, названный functions.php.

Просто скопируйте и вставьте следующий код в файл functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

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

Заключительный, необязательный шаг — создать изображение размером 880×660 (рекомендуется тип файла PNG) из снимка экрана вашей дочерней темы. Таким образом, если у вас установлено много тем, вы сможете сразу увидеть, как выглядит эта.

3. Загрузите вашу дочернюю тему в WordPress

Теперь у меня есть папка, названная twentysixteen-child, которая содержит два файла — style.css и functions.php. Пришло время сжать эту папку в zip-файл и загрузить его на мой сайт.

Перейдите в раздел Внешний вид → Темы и выберите «Добавить новую», что позволит вам загрузить zip-файл. WordPress сначала проверит, установлена ли родительская тема, и если она установлена, вам будет разрешено загрузить вашу тему. Если родительская тема не найдена, это не сработает.

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

Нужна ли мне дочерняя тема?

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

Зарегистрироваться

Активируйте вашу тему, и если всё прошло хорошо, вы сможете увидеть ваши завершенные изменения вживую. Вуаля! У меня теперь новый цвет рамки и шрифты заголовков, которые я хотел. Что еще лучше, даже если WordPress обновит тему Twenty Sixteen, мои изменения останутся на месте.

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

Jason Cosper