Создание сайта на WordPress — занятие увлекательное, но часто начинающие пользователи задаются вопросом: как изменить тему, не разрушив всю работу? Для этого придумана дочерняя тема. В этом пошаговом руководстве вы узнаете, что такое дочерняя тема, как ее создать, а также получите ответы на самые распространенные вопросы.
Что такое дочерняя тема?
Дочерняя тема в WordPress — это «копия» главной (родительской) темы, которая наследует все её свойства, но позволяет добавлять собственные настройки и изменения. Почему это полезно? Скажем, вы хотите изменить шрифт на вашем сайте, а потом — бабах! — приходит обновление для вашей темы. После обновления ваши изменения исчезают. С дочерней темой такого не случится, ведь она сохранит ваши правки, пока родительская тема обновляется.
Преимущества использования дочерней темы
Вот несколько причин, почему дочерние темы спасают нервы и время:
- Безопасность изменений. Вы не затрагиваете код родительской темы, а значит, все остается в сохранности при обновлениях.
- Простота обновлений. Родительскую тему можно обновлять, не боясь потерять свои изменения.
- Организованность. Весь код и настройки находятся в вашей дочерней теме, что облегчает их поиск и изменение.
Как создать дочернюю тему?
Теперь переходим к практике! Не бойтесь: каждый шаг расписан подробно.
Шаг 1. Создание папки для дочерней темы
- Подключитесь к своему сайту через FTP-клиент или через файловый менеджер в панели управления хостингом.
- Перейдите в директорию
/wp-content/themes/
, где лежат все темы. - Создайте здесь новую папку и назовите её, например,
my-theme-child
(заменитеmy-theme
на название вашей родительской темы).
Шаг 2. Создание файла стилей style.css
Каждая тема WordPress должна иметь файл стилей, и ваша дочерняя тема не исключение.
- В папке дочерней темы создайте файл
style.css
. - Откройте его и добавьте в него следующую информацию:
/*
Theme Name: My Theme Child
Theme URI: http://example.com/my-theme-child
Description: Дочерняя тема для My Theme.
Author: Ваше имя
Author URI: http://example.com
Template: my-theme
Version: 1.0
*/
Важно: Если вы введете неправильное название в строке
Template
, WordPress не сможет найти родительскую тему.
Шаг 3. Подключение стилей родительской темы
Теперь добавим в дочернюю тему стили родительской. В файле style.css
можно подключить родительские стили через @import
, но лучше сделать это через файл functions.php
, чтобы ускорить загрузку.
Шаг 4. Создание файла функций functions.php
Создайте новый файл в вашей дочерней теме и назовите его functions.php
. Вставьте в него следующий код:
<?php
// Подключаем стили родительской темы
function my_theme_child_enqueue_styles() {
wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-theme-style', get_stylesheet_uri(), array('parent-theme-style'));
}
add_action('wp_enqueue_scripts', 'my_theme_child_enqueue_styles');
?>
Этот код загружает стили родительской темы перед стилями дочерней. Теперь ваши изменения в style.css
будут применяться поверх родительских стилей.
Как активировать дочернюю тему?
После создания всех файлов зайдите в админку WordPress и перейдите в раздел Внешний вид > Темы. Вы увидите вашу дочернюю тему — активируйте её, и готово! Теперь вы работаете с дочерней темой, и все изменения будут сохраняться.
Пример: как внести изменения в стили
Теперь, когда ваша дочерняя тема активна, вы можете начать вносить изменения. Например, поменяем цвет фона на странице.
- Откройте файл
style.css
в папке дочерней темы. - Добавьте следующий код:
/* Меняем цвет фона */
body {
background-color: #f4f4f4;
}
Сохраните файл и обновите страницу сайта — теперь фон стал светло-серым. Этот код переопределяет стандартные стили, так как дочерняя тема загружается после родительской.
Ключевые моменты при создании дочерней темы
Важно: Убедитесь, что:
- В строке
Template
указано точное название папки родительской темы. В противном случае WordPress не сможет найти и применить ваши изменения.- После добавления стилей и скриптов в файл
functions.php
они подключаются корректно. Это нужно для правильного отображения вашего сайта.
Часто задаваемые вопросы
- Что произойдет, если я удалю дочернюю тему?
Если вы удалите дочернюю тему, сайт вернется к родительской, но все изменения, сделанные в дочерней теме, будут потеряны. - Можно ли использовать несколько дочерних тем?
WordPress позволяет активировать только одну тему одновременно, так что две дочерние темы для одной родительской темы использовать нельзя. - Как обновить родительскую тему?
Обновление родительской темы никак не повлияет на дочернюю — все изменения, сделанные в дочерней теме, сохранятся. - Можно ли создать дочернюю тему без родительской?
Нет, дочерняя тема всегда зависит от родительской темы, так как наследует её функции и стили. - Почему изменения не отображаются?
Проверьте кэш браузера. Иногда браузер может хранить старую версию стилей. - Какие файлы можно редактировать в дочерней теме?
Можно создать копию любого файла из родительской темы (например,header.php
,footer.php
) и изменить его под свои нужды. - Что делать, если я случайно удалил родительскую тему?
Дочерняя тема перестанет работать, так как не сможет наследовать файлы. Убедитесь, что родительская тема установлена и активна. - Можно ли редактировать файлы родительской темы?
Это не рекомендуется. Все изменения следует вносить через дочернюю тему, чтобы избежать проблем при обновлениях. - Можно ли использовать дочернюю тему для создания уникального дизайна?
Да, с помощью дочерней темы можно настраивать дизайн сайта по вашему вкусу, от шрифтов до цветовой схемы. - Что такое файл functions.php?
functions.php
— это файл, который позволяет добавлять дополнительные функции и изменения на сайт. Вы можете подключать к нему скрипты, виджеты и другие инструменты.
Дополнительные примеры использования дочерней темы
- Изменение шрифтов и их размера. Например, если вам нужно сделать заголовки крупнее, добавьте в
style.css
дочерней темы следующий код:
h1 {
font-size: 36px;
}
Добавление пользовательских стилей для кнопок. Чтобы создать свой стиль для кнопок на сайте, добавьте в style.css
:
.custom-button {
background-color: #0073e6;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
- Затем добавьте класс
custom-button
к нужной кнопке в HTML.
Эти примеры покажут новичкам, как можно настроить внешний вид сайта с помощью дочерней темы, не прибегая к изменению родительской темы.