Создание дочерней темы – это первый и важный шаг при работе с любой темой оформления. В этом обзоре мы подробно рассмотрим, зачем нужна дочерняя тема, как в ней работать и, самое главное, как создать дочернюю тему в WordPress.
Начнем с разбора нескольких ключевых терминов, которые помогут лучше понять тему статьи. Это необходимо для быстрого усвоения материала и для дальнейшей работы.
Что такое родительская тема?
Родительская тема определяет основной дизайн, структуру и функциональность вашего сайта. В ней содержатся все необходимые файлы шаблонов WordPress.
Понятие дочерней темы
Дочерняя тема (Child Theme) создается на основе родительской темы, наследуя её структуру и функциональность. Она используется для внесения изменений в дизайн и функциональность вашего сайта, не затрагивая основные файлы родительской темы. Это позволяет кастомизировать сайт, сохраняя возможность обновления родительской темы без потери ваших настроек и изменений.
Для чего нужна дочерняя тема?
На этот вопрос я ответил выше, но давайте повторим, чтобы закрепить и углубить понимание.
Когда необходимо внести изменения в родительскую тему (редактирование файлов, изменение стилей оформления, создание шаблонов для страниц или записей в WordPress), все это выполняется через дочернюю тему.
Но если изменения будут внесены в родительской теме, то при первом же её обновлении правки будут утрачены. Все ваши редактирования файлов и добавленные шаблоны будут удалены. Именно поэтому дочерняя тема так нужна.
Создаём дочернюю тему WordPress
Как всегда, существует несколько способов решения одной и той же задачи. Один – более простой и быстрый, он включает использование плагина. Другой вариант предполагает самостоятельную работу, то есть создание с нуля. Мы рассмотрим оба, чтобы каждый мог выбрать наиболее подходящий для себя.
Первый способ: создаем дочернюю тему вручную
Шаг 1: Сначала создаёте папку с названием будущей дочерней темы. Вы можете использовать название родительской и просто добавить слово «Child». Например, «mytheme-child».
Шаг 2: Затем в этой же папке создайте файл с названием style.css. Чтобы распознать дочернюю тему в самом начале файла добавляем следующий код:
/* Theme Name: Тема блога Template: twentyfifteen Description: Моя дочерняя тема для блога Author: Имя автора Author URI: https://domain.ru Version: 1.0.0 */
Самое важное
- Theme Name (Имя Темы): уникальное название вашей дочерней темы (будет показано в админке).
- Template (Шаблон): здесь указывается название родительской темы, от которой вы создаете дочернюю.
Шаг 3: Основная часть работы выполнена. Теперь необходимо импортировать стили из родительской темы в дочернюю. Ранее для этой задачи использовалось свойство @import в файле стилей. Однако это замедляет работу сайта и рекомендуется другой метод.
Для этого создаем файл в нашей папке с названием functions.php. В начале этого файла добавляем код (открывающий тег <?php обязательно должен быть в начале), который добавит стили родительской темы в дочернюю.
<?php
function ws_enqueue_parent_styles() {
// Подключаем стили родительской темы
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'ws_enqueue_parent_styles');
Шаг 4: Теперь загрузите эту папку на ваш хостинг в папку с темами wp-content/themes/. В админке перейдите в раздел «Внешний вид – Темы». Найдите только что созданную нами дочернюю тему, которая будет называться так, как вы указали в файле стилей CSS, и активируйте её.
Второй способ: создаем дочернюю тему с плагином WP Child Theme Generator
После установки и активации плагина, перейдите в раздел «Внешний вид — Child Theme Gen». В этом разделе вы найдете выпадающий список, в котором будут перечислены все установленные на вашем сайте темы. Вам нужно выбрать ту тему, на основе которой вы хотите создать дочернюю.
После выбора откроется страница для заполнения полей, описывающих тему. По умолчанию поля будут содержать информацию, взятую из родительской темы. Эту информацию вы можете свободно изменить и дополнить собственными данными, такими как автор и версия.
После чего нажмите кнопку «Create Child Theme». В результате дочерняя тема будет автоматически создана и активирована.
Принцип работы с дочерней темой
Давайте начнем знакомство с работой дочерней темы. Несмотря на то, что на этот момент суть её должна вам быть уже понятна, всё же могут возникнуть некоторые вопросы по работе с файлами (шаблоны) и стилями темы.
Работа с файлами (шаблонами) темы
Допустим, нам необходимо добавить свою область виджета в header (шапку) WordPress. Как это сделать?
Сначала скопируйте файл header.php из родительской темы и вставьте его в дочернюю. Это позволит вам изменять этот файл без изменения оригинального файла в родительской теме.
Теперь WordPress будет использовать шаблон header.php из дочерней темы. Это означает, что мы можем настраивать и расширять функциональность темы, не нарушая ее исходные файлы, так как все изменения производятся в дочерней теме.
Принцип работы, который я описал, применим ко всем остальным файлам. Если вам необходимо внести изменения в какую-либо часть сайта (к примеру, footer.php, sidebar.php и т.д.) вы начинаете с копирования файлов, отвечающих за эту конкретную область, и затем переносите их в дочернюю тему. Все последующие изменения и настройки уже выполняются внутри этой дочерней темы.
Файлы в подпапках
И ещё важно учитывать директорию файлов. Обратите внимание, что в родительской теме многие файлы располагаться в папке с переменным названием. Чаще всего шаблоны для записей, страниц и контента могут находиться в папке «template-parts» или с похожим названием.
Если вы планируете внести изменения в эти файлы, вам нужно создать аналогичную структуру в вашей дочерней теме. В частности, вы должны создать папку с тем же именем, что и в родительской теме (например, «template-parts»), а затем скопировать тот файл, который вы хотите изменить, в эту новую папку.
Работа со стилями темы
В дочерней теме стили имеют более высокий приоритет, чем стили своего «родителя». Это происходит потому, что они по факту замещают стили родительской темы.
Для примера представьте, что нам нужно изменить цвет футера WordPress. Мы можем воспользоваться инспектором браузера (это инструмент веб-разработчика) для того, чтобы найти стили, применяемые к нужному элементу на странице. Вот пример кода:
footer.site-footer .footer-wrapper {
background: rgba(255, 255, 255, 0.9); /* цвет фона*/
border-radius: 10px;
padding: 30px;
}
Чтобы изменить цвет фона футера, вам нужно переписать только те свойства, которые вы хотите изменить. В данном случае это цвет фона.
footer.site-footer .footer-wrapper {
background: red;/* цвет фона*/
}
В остальных ситуациях процесс остается неизменным. То есть таким путем переопределяем все стили к нужным элементам.
Как перенести функции из родительской в дочернюю тему WordPress
Эта возможность зависит от разработчиков родительской темы. Если они учли все детали при кодировании, то изменения можно будет внести без особых трудностей. Однако если разработчики родительской темы не учли это, то перенос функций может оказаться сложным, а в некоторых случаях – невозможным.
Эта часть работы основана на использовании файла function.php. Дочерний файл дополняет родительский, то есть он загружается вместе с ним. Если хотя бы одна функция в дочернем файле будет иметь такое же название, как в родительском файле, это обязательно вызовет ошибку.
Чтобы этого не случилось, существует специальная функция в родительской теме, которая позволяет переносить функции из неё в дочернюю. Этот метод основан на условии, которое гласит: если функция не подключена, то её следует подключить.
Все доступные функции, которые вы хотите переопределить, должны начинаться с проверки на их подключение с использованием конструкции if ( ! function_exists. Вот как это обычно выглядит:
if ( ! function_exists( 'theme_name_more_link' ) ) :
function theme_name_more_link() {
$read_more = theme_name_get_option( 'read_more_text' );
if ( '' !== $read_more || is_customize_preview() ) :
?>
<a href="<?php echo esc_url( get_permalink() ) ?>" class="more-link"><?php echo esc_html( $read_more ); ?></a>
<?php
endif;
}
endif;
Если необходимо внести изменения в данную функцию, следует скопировать содержимое условной функции.
function theme_name_more_link() {
$read_more = theme_name_get_option( 'read_more_text' );
if ( '' !== $read_more || is_customize_preview() ) :
?>
<a href="<?php echo esc_url( get_permalink() ) ?>" class="more-link"><?php echo esc_html( $read_more ); ?></a>
<?php
endif;
}
Затем вставьте этот код в файл function.php дочерней темы. Это позволит вам вносить изменения без опасения вызова ошибки.
Полезные функции для дочерней темы
Рассмотрим несколько полезных примеров, как в дочерней теме WordPress можно включать стили, скрипты и импортировать файлы. Эти методы пригодятся, когда нужно будет добавить новую функциональность к вашей теме.
Подключение стилей (CSS)
Для подключения пользовательских стилей вставьте следующий код в файл functions.php:
//Подлючение своих стилей из дечерней темы
function ws_custom_styles() {
wp_enqueue_style('custom-styles', get_stylesheet_directory_uri() . '/custom.css');
}
add_action('wp_enqueue_scripts', 'ws_custom_styles');
Подключение скриптов (JavaScript)
Для включения пользовательских скриптов используйте следующий код:
//Подлючение своего скрипта из дечерней темы
function ws_enqueue_scripts() {
wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'ws_enqueue_scripts');
Импорт файлов
Импорт файлов может оказаться очень полезным, особенно когда вам нужно внедрить большой объем кода. Это можно сделать через создания нового файла php. В него добавляете нужный код, например, собственный виджет или хлебные крошки. Загружаете этот файл в тему и подключаете его через файл functions.php:
//Импорт файла из дечерней темы require_once( get_stylesheet_directory() . '/file.php' );
Вывод изображения
Для вывода изображения на сайте вы можете использовать такой код:
//Вывод картинки из дочерней темы <a href="#"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/logo.png">Ссылка</a>
Заключение
Отказ от использования дочерней темы может вызвать неудобства в будущем. Веб-сайт представляет собой динамическую среду, где часто что-то меняется или добавляется. Поэтому лучше разберитесь в этом вопросе и стартуйте правильно.
Полезная информация, а главное доходчиво, спасибо, воспользуюсь вашими знаниями
Спасибо за комментарий)