Дочерние темы являются расширениями родительской темы. Они позволяют изменять существующую тему без прямого редактирования кода этой темы. Часто это всего лишь несколько незначительных изменений цвета, но они также могут быть сложными и включать пользовательские переопределения родительской темы.
В этой статье вы узнаете, что такое родительские и дочерние темы, как создавать свои собственные модификации с помощью дочерних тем и какие части родительской темы можно переопределить.
Что такое родительские и дочерние темы?
Родительские темы
Все темы, кроме тех, которые являются дочерними, можно назвать основными темами. Это означает, что они полноценные темы, которые можно установить и использовать в WordPress.
Родительские темы должны содержать все необходимые файлы, как указано в документации по Структуре темы. Помимо этого, вам не нужно делать ничего особенного, чтобы ваша тема стала родительской.
Дочерние темы
Дочерняя тема по умолчанию включает в себя все, что относится к родительской теме. Сюда входит дизайн и любая его функциональность. Но ее также можно использовать для настройки родительской темы без прямого изменения файлов родительской темы. Это означает, что вы (или пользователи вашей дочерней темы) по-прежнему можете получать обновления родительской темы без потери этих изменений.
Дочерние темы:
- Сделайте ваши изменения переносимыми и воспроизводимыми.
- Сохраняйте настройки отдельно от родительской темы.
- Разрешите обновлять родительские темы без потери внесенных изменений.
- Экономьте время разработки, поскольку вы пишете только необходимый вам код.
- Это отличный способ начать свой путь к разработке полноценных тем.
Стоит отметить, что выполнение обширных настроек внутри дочерней темы может в конечном итоге стать головной болью руководства. Для этих более масштабных проектов часто лучше развить исходную тему и создать полную / родительскую тему самостоятельно. Это то, что вам нужно будет решать в каждом конкретном случае.
Как насчет тем для внуков?
В настоящее время это невозможно. В стандартной иерархии тем есть только два уровня: родительская и дочерняя тема.
Однако при создании блочных тем существуют другие уровни по сравнению с тем, что представлено во внешнем интерфейсе сайта (они просто не являются частью тематического слоя):
- Сам WordPress (по умолчанию
theme.json) - Родительская тема
- Дочерняя тема
- Пользовательские настройки (могут переопределять
theme.jsonшаблоны и паттерны)
В некотором смысле уровень пользовательских настроек работает как своего рода “дочерняя” тема. Большая разница в том, что изменения хранятся в базе данных, а не в файловой системе.
Помимо этого, не существует стандартного метода создания устанавливаемой дочерней темы.
Как создать дочернюю тему
Давайте попробуем создать дочернюю тему для темы по умолчанию Twenty Twenty-Four, поставляемой в комплекте с WordPress.
Создайте папку дочерних тем
Во-первых, вашей дочерней теме нужно название. Это может быть любое название, которое вы хотите, чтобы ваша тема называлась, но для данного руководства давайте назовем ее “Grand Sunrise”.
Теперь создайте новую папку в своем wp-content/themes каталоге с версией названия вашей темы для шашлыка: grand-sunrise.
Создание стиля.css
Теперь вам нужно создать файл с именем style.css. Это единственный абсолютно необходимый файл для существования дочерней темы. Все style.css файлы должны содержать заголовок файла и обязательные поля заголовка, как описано в документации по основной таблице стилей (пожалуйста, ознакомьтесь с этим документом, если вы еще этого не сделали).
Как указано в документации по основной таблице стилей, для объявления темы в качестве дочерней необходимо дополнительное поле. Вы должны добавить Template поле заголовка к style.css заголовку файла.:
/**
* Theme Name: Grand Sunrise
* Template: twentytwentyfour
* ...other header fields
*/В Template поле есть одно предостережение. Оно должно на 100% совпадать с названием папки родительской темы относительно wp-content/themes папки. В данном случае мы знаем, что папка Twenty Twenty-Four theme расположена по адресу wp-content/themes/twentytwentyfour. Следовательно, Template значение должно быть twentytwentyfour.
Установите и активируйте дочернюю тему
Если вы еще не работаете в среде разработки со своей темой в wp-content/themes папке, вам нужно переместить ее туда прямо сейчас. В зависимости от ваших настроек у вас есть несколько вариантов, но самый простой — создать ZIP-файл вашей темы и загрузить его на свой тестовый сайт через Внешний вид> Темы> Добавить новый в вашем WordPress admin.
Для получения дополнительной информации о том, как добавить тему в WordPress, прочитайте о Добавлении новых тем на сайте документации WordPress.
После установки темы перейдите в раздел Внешний вид> Темы в разделе администратора WordPress и найдите нужную тему. Нажмите на ссылку Активировать, как показано на этом скриншоте:
Сейчас это не будет выглядеть иначе, чем ваша родительская тема, потому что вы еще не настроили ее. Но вы успешно создали дочернюю тему.
Настройка вашей дочерней темы
При настройке дочерней темы вам полностью доступны все функциональные возможности, описанные в этом руководстве. Но есть несколько соображений, которые вам следует иметь в виду, о которых вы узнаете в следующих разделах.
Стиль загрузки.css
Это необязательный шаг, который часто не требуется для блочных тем, поскольку обработка их стилей обычно выполняется через theme.json. Но часто это необходимо, если вы создаете классическую тему. В любом случае, вам нужно выполнить этот шаг, только если вы хотите убедиться, что любой CSS-код в style.css загружен.
Прежде чем приступить к работе с этим разделом, обязательно ознакомьтесь с документацией, включающей ресурсы, в которой более подробно описывается загрузка style.css. В этой документации вы узнаете, как ставить таблицы стилей в очередь с помощью wp_enqueue_style() функции соответствующего хука (обратите внимание, что дочерние темы загружаются раньше родительских).
Идеальный метод постановки таблиц стилей в очередь — это когда родительская тема загружает как свою style.css, так и дочернюю style.css тему. Но не все темы делают это. Поэтому вы должны изучить код родительской темы, чтобы увидеть, какие таблицы стилей она ставит в очередь. Для каждой темы это по-разному, и жестких правил не существует.
Если родительская тема загружает обе таблицы стилей, дочерней теме ничего не нужно делать. Ее таблица стилей будет загружена автоматически.
В случае темы Twenty Twenty-Four таблица стилей вообще не загружается. Таким образом, вам придется загружать свой style.css через functions.php, как показано в этом фрагменте кода:
add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );
function grand_sunrise_enqueue_styles() {
wp_enqueue_style(
'grand-sunrise-style',
get_stylesheet_uri()
);
}Если родительская тема, которую вы используете, загружает только свою собственную таблицу стилей, вы также должны использовать приведенный выше код для загрузки вашей дочерней темы style.css.
Если родительская тема загружает только таблицу стилей активной темы, например, через get_stylesheet_uri(), то она загрузит таблицу стилей дочерней темы. В этом случае вы можете также захотеть поставить в очередь таблицу стилей родительской темы через functions.php, и ваш код будет выглядеть следующим образом:
add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );
function grand_sunrise_enqueue_styles() {
wp_enqueue_style(
'grand-sunrise-parent-style',
get_parent_theme_file_uri( 'style.css' )
);
}Шаблоны, детали и паттерны
При создании дочерней темы у вас есть возможность перезаписать любой шаблон, деталь или шаблон, существующий в родительской теме, добавив файл с таким же именем в вашу дочернюю тему. Примечание: шаблоны также должны иметь то же зарегистрированное Slug поле.
Вы также можете добавлять совершенно новые шаблоны, детали и выкройки в свою дочернюю тему, даже если они не существуют в родительской. Чтобы узнать больше об этих функциях, обратитесь к этим статьям в справочнике:
Использование functions.php
В отличие от шаблонов, functions.php файл дочерней темы не заменяет functions.php файл родительской темы. Фактически, они загружаются оба, причем дочерний файл загружается непосредственно перед родительским.
Таким образом, functions.php дочерней темы предоставляет умный и безотказный метод изменения функциональности родительской темы или WordPress.
Предположим, что вы хотите добавить функцию PHP в свою тему. Самым быстрым способом было бы открыть ее functions.php файл и поместить туда функцию. Но это не считается хорошей практикой — при следующем обновлении вашей темы ваша функция исчезнет!
Гораздо лучше создать дочернюю тему и добавить свой пользовательский код в functions.php файл дочерней темы. Функция будет выполнять точно такую же работу и оттуда, с тем преимуществом, что на нее не повлияют будущие обновления родительской темы.
Не копируйте код непосредственно из functions.php родительской темы в дочернюю тему. Это, вероятно, приведет к фатальным ошибкам из-за дублирования имен функций.
Чтобы узнать больше о functions.php, ознакомьтесь с документацией по пользовательской функциональности.
Ссылающиеся или включающие другие файлы
Иногда вам необходимо включить или использовать пользовательские файлы в вашей теме. При этом вам нужно убедиться, что вы используете функцию, которая предоставит вам правильный путь к каталогу или URI на основе каталога вашей дочерней темы.
Например, если вы хотите включить другой PHP-файл через свой functions.php, вы бы использовали get_theme_file_path() функцию. Вот фрагмент кода, показывающий включение functions-helpers.php файла из /inc папки в вашу дочернюю тему:
require_once get_theme_file_path( 'inc/functions-helpers.php' );Чтобы узнать больше о включении файлов, прочитайте документацию по пользовательской функциональности.
Когда вам нужно сослаться на файл по его URL, например на изображение или таблицу стилей, вы должны использовать другую функцию: get_theme_file_uri(). Давайте рассмотрим пример использования файла с именем bunny.jpg из /assets/images папки вашей темы в <img> HTML-теге:
<?php $image = get_theme_file_uri( 'assets/images/bunny.jpg' ); ?>
<img src="<?php echo esc_url( $image ); ?>" alt="" />Вы можете узнать больше о включении сценариев, стилей, изображений и других ресурсов из документации по включению ресурсов.
Интернационализация
Как и родительские темы, дочерние темы также можно интернационализировать и заставить работать на любом языке. Чтобы узнать больше, прочтите документацию по интернационализации в справочнике по темам.
Самые большие изменения, как отмечено в документации по интернационализации, заключаются в том, что вы должны создать уникальный текстовый домен и использовать load_child_theme_textdomain() вместо load_theme_textdomain() при ручной загрузке переводов.
Добавить комментарий