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

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

Возможно, вы изменили код CSS, PHP или добавили новые функции самостоятельно. А потом, через некоторое время, выкатилось обновление для вашей темы, так что вы нажали «Обновлять». И все сделанные вами изменения будут перезаписаны. Вы потратили все это время на настройку и совершенствование дизайна и функций своего сайта, а теперь все это пропало.

Это так расстраивает.

Ну, не больше. Весь ваш сайт только что был сброшен без какой-либо точки резервного копирования. Спасибо дочерним темам WordPress, но что это такое?

Оглавление

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

Тема WordPress, которая наследует свою функциональность от другой (родительской) темы, называется дочерняя тема.

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

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

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

Создание дочерней темы для классической темы

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

Вручную

Когда все настроено, начните выполнять следующие шаги:

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

Шаг 2: Идти к public_html > wp-контент > темы.

Шаг 3: Создайте новый каталог (папку) с названием вашей темы и добавьте «-child» в конце имени папки (как показано ниже).

Шаг 4: Войдите в эту новую папку, которую вы только что создали, создайте новый файл и назовите его «style.css».

Шаг 5: Добавьте следующий код в этот файл CSS (для темы Kava):

/*
Theme Name: Kava
Theme URI: https://example.com/twenty-twenty-two-child/
Description: Kava Child Theme
Author: Example
Author URI: https://example.com
Template: kava
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-column, responsive-layout
Text Domain: kavachild
*/

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

Шаг 6: Создайте еще один файл с шагом, показанным в шаге 4, но на этот раз назовите файл «functions.php» и скопируйте и вставьте приведенный ниже код в этот файл.

/* enqueue scripts and style from parent theme */
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Чтобы добавить изображение темы, просто добавьте файл PNG в папку дочерней темы.

Шаг 7: Теперь перейдите к Внешний вид > Темы > Активировать.

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

Шаг 8: Чтобы добавить хуки или другой PHP-код, измените functions.php файл; и добавьте пользовательский CSS в стиль.css файл этой дочерней темы.

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

Метод плагина

Я буду использовать плагин Child Theme Configurator для создания дочерней темы.

Шаг 1: Установите и активируйте плагин.

Шаг 2: Идти к Инструменты > Дочерние темы в панели инструментов WordPress после активации.

Шаг 3: На вкладке «Родительский/дочерний» появятся различные родительские темы. Я выберу Каву.

Шаг 4: Чтобы убедиться, что тема подходит для использования в качестве родительской темы, щелкните значок «Анализ» кнопка.

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

Шаг 5: Оставьте все настройки по умолчанию, прокрутите вниз и нажмите «Создать новую дочернюю тему».Шаг 6: Идти к Внешний вид > Темы > Активировать и начните использовать дочернюю тему на своем сайте.

Создание дочерней темы для блочной темы

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

Если вы предпочитаете ручной метод, просто повторите шаги для классических тем. Отличие в том, что вам не нужно создавать functions.php файл. Итак, создайте стиль.css файл с тем же кодом, что и для классической темы (указана выше) и скопируйте тема.json файл из родительской темы. Вот и все, и у вас будет два файла в вашей дочерней теме: тема.json и стиль.css.Если вы хотите сделать это с помощью плагина, попробуйте создать тему блока.

8 причин, по которым дочерняя тема WordPress не работает

Наконец, вы создали и активировали дочернюю тему WordPress.

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

• Недопустимые имена файлов или расширения

Иногда вы ошибаетесь в имени файла или забываете указать правильное расширение (.css или .php). Кроме того, вы могли ошибиться в написании style.css или functions.php.

Возможно, вы разместили файлы темы вашего ребенка не в том месте. Путь к папке для дочерней темы должен быть wp-content > темы > дочерняя тема.

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

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

• Несовместимые версии родительской темы и дочерней темы

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

• Ваш код CSS имеет низкий приоритет

Если родительская тема по-прежнему перезаписывает CSS дочерней темы, добавьте !важный к элементам, которые вы изменили. Все, что написано на листе CSS родительской темы, будет насильственно переопределено. Так:

a { color: blue !important; }

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

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

4 преимущества использования дочерней темы

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

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

• Сохраняйте изменения даже после обновлений

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

• Внесение изменений без риска для исходной темы

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

• Создание подобных сайтов

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

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

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

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

Часто задаваемые вопросы

Заключение

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

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