Как создать дочернюю тему WordPress и не потерять правки: простая инструкция

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

Настройка выбранной темы — один из способов обойти эту проблему. Однако темы WordPress необходимо периодически обновлять. Когда разработчик вашей темы выпускает новую версию, все ваши настройки могут быть сброшены.

Решение?

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

В этой статье мы подробно рассмотрим дочерние темы WordPress — от того, зачем они нужны, до того, как создать свою собственную. Давайте погрузимся!

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

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

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

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

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

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

Различия между дочерней и родительской темами

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

• Файл style.css, определяющий внешний вид вашего сайта.
• Файл functions.php, который позволяет добавлять функции или изменять стандартное поведение WordPress.
• Несколько файлов шаблонов, определяющих, как отображаются разные страницы вашего сайта.

Напротив, папка дочерней темы содержит только два обязательных файла: style.css и functions.php. Вы должны добавить эти файлы в каталог /wp-content/themes/.

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

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

body {

background-color:#fff;

}

h1 {

color: #000

}

В приведённом выше коде мы изменили цвет фона и цвет заголовка H1. Эти правки переопределят стили родительской темы и обновят цвета на вашем сайте. Вы можете вносить столько изменений, сколько необходимо, в файле style.css дочерней темы.

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

Почему стоит использовать дочернюю тему

Использование дочерней темы на вашем сайте WordPress имеет несколько преимуществ, включая:

• Защита изменений темы от автоматических обновлений.
• Настройка визуальных элементов вашей темы.
• Изучение того, как редактировать темы, что является шагом к разработке собственной темы.

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

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

Как создать дочернюю тему WordPress с помощью плагина

Использование плагина — это, вероятно, самый простой способ создать дочернюю тему WordPress. Плагин проведёт вас через весь процесс простыми шагами, то есть вам не понадобятся технические знания.

Одно предупреждение перед началом: Child Theme Configurator создан для классических тем. Он с радостью создаст каркас дочерней темы для блочной темы, такой как Twenty Twenty-Four, но такая дочерняя тема в основном помогает с пользовательским CSS — для более глубокой настройки блочных тем смотрите примечание о Create Block Theme в FAQ ниже.

В этом руководстве мы будем работать с плагином Child Theme Configurator. Этот удобный инструмент поможет вам проанализировать тему на наличие проблем, создать дочернюю тему и отредактировать её в соответствии с вашими требованиями к веб-дизайну и стилю.

Шаг 1: Скачайте и установите плагин Child Theme Configurator

Для начала вам нужно скачать и установить Child Theme Configurator. Вы можете сделать это, перейдя на страницу плагина и нажав кнопку Download:

Ваш компьютер загрузит файлы темы в ZIP-архиве. Затем перейдите в панель управления WordPress и выберите Плагины > Добавить новый, чтобы загрузить файлы.

Нажмите Загрузить плагин > Выберите файл и выберите скачанную папку:

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

Шаг 2: Проанализируйте родительскую тему

Затем перейдите в Инструменты > Дочерние темы:

Плагин проведёт вас через шаги создания дочерней темы. Просто выберите СОЗДАТЬ новую дочернюю тему, чтобы начать:

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

Теперь нажмите Анализировать, чтобы проверить родительскую тему на наличие потенциальных проблем с кодом:

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

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

Шаг 3: Назовите каталог дочерней темы

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

Вы можете назвать его как угодно, если оно уникально для вашего сайта и содержит допустимые символы. Для простоты мы используем «twentytwentyfour-child»:

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

Шаг 4: Выберите таблицы стилей дочерней и родительской темы

Далее вам нужно будет выбрать новую таблицу стилей для вашей дочерней темы. Если вы выберете основную таблицу стилей (style.css), ваши пользовательские стили CSS переопределят существующее содержимое темы.

Это вариант по умолчанию, и мы рекомендуем выбрать его, если вы новичок в дочерних темах:

Теперь вам будет предложено выбрать метод обработки таблицы стилей родительской темы. Есть различные варианты, но для большинства случаев мы рекомендуем придерживаться Use the WordPress style queue (использовать очередь стилей WordPress):

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

Шаг 5: Назовите дочернюю тему

Следующий шаг — назвать вашу дочернюю тему и написать для нее описание.

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

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

Шаг 6: Скопируйте настройки родительской темы в дочернюю

Теперь плагин попросит вас подтвердить, что он может скопировать настройки родительской темы в вашу дочернюю тему:

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

Шаг 7: Создайте новую дочернюю тему и просмотрите ее

Последний шаг — создание дочерней темы. Нажмите кнопку Create New Child Theme (Создать новую дочернюю тему) и дождитесь, пока плагин выполнит свою работу:

Вы должны получить уведомление, что ваша дочерняя тема успешно создана:

Всегда просматривайте свою дочернюю тему перед ее активацией на сайте. Этот шаг поможет убедиться, что все работает как надо. Затем нажмите Activate & Publish (Активировать и опубликовать), чтобы начать работу с дочерней темой.

Как создать дочернюю тему WordPress вручную

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

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

Вот пошаговое руководство:

Шаг 1: Разработайте план изменений

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

Чтобы открыть инструменты разработчика, щелкните правой кнопкой мыши в любом месте вашего сайта, пока работает тема, и выберите Inspect Element (Просмотреть код). Затем вы увидите страницу с данными, которая выглядит примерно так:

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

Шаг 2: Сделайте резервную копию сайта

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

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

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

Шаг 3: Создайте папку для дочерней темы

Вам нужно будет создать папку для хранения файлов дочерней темы. Для этого сначала получите доступ к файлам через клиент SFTP (Secure File Transfer Protocol), например Filezilla, и перейдите в папку themes (темы):

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

Например, если каталог вашей родительской темы называется «twentytwentyfour», то каталог дочерней темы будет называться «twentytwentyfour-child».

Шаг 4: Создайте таблицу стилей для дочерней темы

Теперь вам нужно создать новый текстовый файл и назвать его «style.css». Этот файл станет основой вашей дочерней темы. Он должен содержать базовую информацию заголовка, включая имя, URL, описание и другое:

Теперь сохраните и добавьте файл style.css в созданную вами папку каталога.

Шаг 5: Подключите таблицы стилей

Далее вам нужно будет подключить (enqueue) таблицы стилей родительской и дочерней темы.

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

Создайте новый файл функций в каталоге дочерней темы и назовите его «functions.php». Затем вы можете указать дочерней теме ссылаться на базовую тему, добавив следующий код:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

?>

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

Шаг 6: Активируйте дочернюю тему

Наконец, пришло время активировать вашу дочернюю тему. Вы можете загрузить ее вручную, перейдя в Appearance > Themes (Внешний вид > Темы) > Upload (Загрузить). Затем выберите .zip-версию вашего каталога дочерней темы:

Активируйте дочернюю тему. Теперь она должна работать!

Как настроить дочернюю тему

После активации новой дочерней темы пришло время ее протестировать. Существует несколько различных способов настройки дизайна и функциональности.

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

Система «дочерняя-перед-родительской» даёт нам множество возможностей.

Создание пользовательских стилей

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

Лучший способ найти CSS, который вы хотите изменить, — использовать Инструменты разработчика в вашем браузере. Вы можете просмотреть CSS и HTML любой веб-страницы, щёлкнув по ней правой кнопкой мыши и выбрав Просмотреть код элемента.

В нижней или правой части экрана вы увидите код страницы. Наведите курсор на код и выделите HTML по частям:

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

В этом примере мы изменили цвет фона с «#9888fd» на «#9888fe», чтобы посмотреть, как это будет выглядеть. Цвет фона изменится мгновенно, но это изменение непостоянно.

Теперь вам нужно скопировать правило CSS и добавить его в файл style.css вашей дочерней темы следующим образом:

body {

Background-color: #9888fe;

}

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

Переопределение родительских шаблонов

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

Важный момент: описанный ниже подход с переопределением файлов применим к классическим темам. Блочные темы — включая все темы WordPress по умолчанию, начиная с Twenty Twenty-Two, например Twenty Twenty-Four — используют HTML-шаблоны и файл theme.json вместо PHP-файлов шаблонов. Для таких тем вносите изменения в Редакторе сайта (Внешний вид > Редактор) или используйте официальный плагин Create Block Theme, чтобы сохранить изменения из Редактора сайта в тему (он также может сгенерировать дочернюю тему для вас).

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

Этот раздел вашего сайта управляется файлом шаблона content.php, который находится в папке родительской темы template-parts/content. Чтобы начать вносить изменения, скачайте копию этого файла оттуда через SFTP.

Затем откройте дочерний шаблон в текстовом редакторе. Вы можете увидеть что-то вроде этого:

twenty_twenty_one_post_thumbnail();

<header>
<!-- Заголовок и другая информация заголовка здесь -->
</header>

Чтобы изменить макет заголовка, вы можете изменить код на следующий:

<header>
<!-- Заголовок и другая информация заголовка здесь -->
</header>

// Миниатюра записи
twenty_twenty_one_post_thumbnail();

Наконец, сохраните файл и загрузите его в дочернюю тему, воссоздав тот же путь к папке template-parts/content. WordPress использует ваше переопределение только в том случае, если имя файла и относительный путь совпадают с родительскими.

Пользовательские шаблоны страниц

Хотите чего-то совершенно другого? Вы также можете добавлять совершенно новые шаблоны в дочернюю тему.

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

Создание новых PHP-функций

Если вы хотите добавить новые функции в дочернюю тему, вы можете создать файл functions.php дочерней темы. Он работает совместно с родительским файлом функций, а не заменяет его.

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

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

• Зарегистрировать новые виджеты и шорткоды.
• Добавить пользовательские типы записей и таксономии.
• Создать новые настройки темы.
• Подключить внешние таблицы стилей и JavaScript-файлы.
• Заложить основу для перевода и локализации контента.
• Переопределить некоторые функции родительской темы.

Вы можете узнать больше о создании этих функций в нашем полном руководстве по functions.php.

Использование хуков темы

Самый эффективный способ добавления функций в ваш новый файл функций — использование хуков.

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

Вместо этого вы просто назначаете свой код соответствующему хуку в файле функций. WordPress автоматически применит этот код к соответствующим элементам в родительской теме.

В WordPress хуки бывают двух видов:

• Хуки действий (Action Hooks): Используются для «привязки» пользовательского кода к определённым частям вашей темы WordPress, например, для создания новой области виджетов или вывода пользовательского сообщения после каждой записи блога.
• Хуки фильтров (Filter Hooks): Используются для изменения контента, созданного WordPress или родительской темой, перед его отправкой в браузер или сохранением в базе данных. В контексте дочерних тем они чаще всего используются для настройки длины отрывков.

Большинство хуков требуют лишь небольшого фрагмента кода. Например, вот код, который вам понадобится для добавления некоторого контента в подвал вашего сайта:

function my_custom_footer_content() {
echo '<div>Пользовательский контент подвала здесь</div>';
}
add_action('wp_footer', 'my_custom_footer_content');

Видите эту часть «wp_footer»? Это и есть хук, и он указывает WordPress, куда должен быть помещён этот код. В данном случае ваша пользовательская функция должна идти сразу после шаблона подвала — где бы он ни вызывался в вашей теме. Аккуратно, правда?

Часто задаваемые вопросы о дочерних темах WordPress

Хочется верить, что это руководство было довольно исчерпывающим. Но если у вас всё ещё остались вопросы, вот ответы:

Какую тему активировать в WordPress: родительскую или дочернюю?

Здесь действует простое правило: активируйте ту тему, которую хотите использовать.

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

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

У использования дочерней темы не так много недостатков. Это немного более технически сложно, чем настройка сайта через панель управления. Для внесения серьёзных изменений вам потребуются хотя бы базовые знания HTML, CSS и PHP.

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

Может ли дочерняя тема существовать без родительской?

Нет, дочерняя тема не работает без родительской.

Концепция дочерней темы по своей сути зависит от родительской темы. Помните, что родительская тема предоставляет всё, кроме пользовательских стилей и шаблонов, которые вы добавляете. Более того, вся структура папок вашего сайта будет нарушена, если вы удалите родительскую папку.

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

Вот переведённый HTML-контент с сохранением всех тегов:

Можно ли создать несколько дочерних тем для одной родительской темы?

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

Какие лучшие плагины для создания дочерних тем WordPress?

Помимо Child Theme Configurator, с которым мы работали ранее, обратите внимание на WP Child Theme Generator и Child Theme Wizard.

На WordPress.org есть и собственный официальный плагин для этого: Create Block Theme, созданный командой тем WordPress. Это подходящий инструмент, если ваша родительская тема является блочной.

В чём разница между дочерней темой и пользовательской темой?

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

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

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

Защитите свои настройки темы и обновления

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

Вот краткий обзор того, как создать дочернюю тему вручную:

• Составьте план.
• Создайте резервную копию текущего сайта.
• Создайте папку для дочерней темы с помощью SFTP-клиента.
• Создайте таблицу стилей и загрузите её на сайт.
• Подключите таблицы стилей дочерней и родительской тем.
• Активируйте и просмотрите дочернюю тему.
• Внесите изменения с помощью CSS.

Красивая тема — это лишь часть успешного веб-сайта. Вам также понадобится хостинг-провайдер, который соответствует вашим потребностям. Ознакомьтесь с тарифами веб-хостинга DreamHost — доступными вариантами, которые ставят во главу угла производительность сайта с гарантированной 100% доступностью!