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

Вы знаете, как сделать дочерняя тема WordPress ?

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

Давайте рассмотрим процесс создания дочерней темы WordPress.

Почему вы должны использовать дочерние темы для WordPress?

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

Примечания перед созданием дочерней темы

Чтобы сделать дочернюю тему WordPress , необходимы навыки кодирования, так как вы будете работать с HTML и CSS. Очень важно знать, что нужно изменить. Кроме того, вам потребуются базовые знания PHP, как минимум копирование/вставка фрагментов кода из других источников.

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

Еще один момент: родительская тема должна соответствовать вашим целям по внешнему виду и функциям. Действительно, чем меньше изменений вы сделаете, тем лучше станет ваш сайт.

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

Создание первой дочерней темы

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

Теперь приступим к настройке.

Использование кода

Для начала вы откроете /wp-content/themes/ в программе установки WordPress и создадите новую папку для своей дочерней темы. Назовите его, как вам нравится.

Затем вам нужно создать первые 2 файла для вашей дочерней темы. Откройте текстовый редактор и вставьте приведенный ниже код в пустой документ:

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

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

Далее вы ^{создадите} второй файл для импорта таблиц стилей из родительской темы. Создайте новый документ в текстовом редакторе и скопируйте этот код:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Когда вы используете LearnPress в качестве родительской темы, этот код начнет работать. Таким образом, большинство тем будут работать так. Сохраните этот файл, и он станет папкой functions.php вашей дочерней темы.

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

Использование плагинов

Мы предлагаем вам использовать плагин Child Theme Configurator. Поскольку он не требует кодирования, вы можете легко вносить изменения и настройки.

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

При активации вы переходите в «Инструменты» -> «Дочерние темы» и выбираете «LearnPress» во всплывающем окне с запросом родительской темы. Выберите «Анализ», чтобы проверить совместимость с родительской темой. Далее вам нужно будет указать папку дочерней темы для сохранения файлов и место их сохранения. В настройках по умолчанию выберите «Нажмите, чтобы изменить атрибуты дочерней темы». Затем вы заполните информацию дочерней темы.

При создании дочерней темы вручную ваша дочерняя тема не будет наследовать меню и инструменты от родительской темы. Для ее решения используйте Конфигуратор дочерних тем. Наконец, выберите «Создать новую дочернюю тему», чтобы закончить. На этом этапе ваша дочерняя тема будет иметь functions.php и style.css для дальнейшего развития. По-видимому, не забудьте предварительно просмотреть свой дочерний плагин. После этого вы выбираете «Активировать и опубликовать», чтобы опубликовать свою дочернюю тему.

Теперь мы начнем настраивать вашу дочернюю тему.

Настройка дочерней темы WordPress

Мы создадим дочернюю тему WordPress , немного отличающуюся от родительской темы, добавив код в файл «style.css».

Скопируйте код из инспектора Firefox/Chrome.

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

Чтобы просмотреть файл CSS публикации или сайта, щелкните правой кнопкой мыши и выберите «Проверить». Ваш экран разделится на 2 половины, и вы сможете увидеть CSS и HTML страницы. Когда вы наводите указатель мыши на строки HTML, инструмент инспектора показывает вас в верхнем верхнем окне. Также делает правила CSS.

Сзади будет временное изменение цвета. Чтобы сделать его постоянным, скопируйте эту строку правила CSS и вставьте в файл style.css дочерней темы:

 1 body { 2 background-color: #fdf8ef; 3 )

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

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Скопируйте код из файла style.css родительской темы.

Как видите, можно скопировать файл style.css родительской темы, вставить его в дочернюю тему и настроить.

Например, код для цвета фона страницы:

 1 background-color: var(--global--color-background);

'-global-color-background' — это переменная, используемая в разных местах темы. Вам придется изменить значение переменной, если вам нужно одновременно изменить цвет в этих местах. Перейдите в /wp-content/themes/learnpress в папке установки WordPress и откройте файл style.css в текстовом редакторе, чтобы найти место –global–color-background. Эту переменную можно заменить другой переменной. Вы можете найти большое количество цветовых переменных в файле style.css родительской темы. После выбора подходящих параметров цвета вы копируете и вставляете эту строку кода в файл style.css дочерней темы и заменяете старые выбранными новыми для вашей цветовой тенденции. Затем цвета будут разделены на основе запланированных цветовых схем. Этот процесс сделает ваши цветовые схемы согласованными и быстро отредактированными.

Настройка файлов шаблонов

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

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

Мы покажем вам учебник для этого процесса с файлом footer.php. Скопируйте его в папку дочерней темы и откройте в текстовом редакторе. Например, давайте удалим ссылку «Proudly powered by WordPress» в нижнем колонтитуле и добавим уведомление об авторских правах. Для начала удалите все между тегами <div class="powered-by">.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Затем вы вставите код, который вы найдете под этими тегами в приведенном ниже примере.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

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

Добавление функций в дочернюю тему WordPress

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

Обычно вам предлагается копировать и вставлять фрагменты кода в файл function.php, но они будут удалены при обновлении PHP или вашей темы. Поэтому мы предлагаем вам использовать дочернюю тему для добавления фрагментов кода. Что ж, давайте перейдем к процессу добавления виджетов. Добавьте фрагмент кода в файл functions.php дочерней темы.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Сохраните и перейдите в «Внешний вид» -> «Виджеты», чтобы увидеть новый инструмент. Кроме того, вы можете найти дополнительную информацию о добавлении функциональной области. Вы можете добавить множество функций, добавив фрагменты кода в файл functions.php вашего сайта.

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

Исправление ошибок

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

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

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

Мы надеемся, что вы сможете получить знания о создании дочерней темы из нашей статьи. Спасибо за ваши чтения!

Подробнее: Как исправить ошибку HTTP 500 WordPress (2021)