Как создать дочернюю тему 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: WPB 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 в папке недавней дочерней темы. Итак, вы только что создали основную таблицу стилей дочерней темы.

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

 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 вашей дочерней темы.

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

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

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

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

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

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

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

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

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

Скопируйте код из Firefox / Chrome Inspector

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

Чтобы просмотреть файл CSS сообщения или сайта, щелкните правой кнопкой мыши и выберите «Проверить». Ваш экран разделится на две половины, и вы увидите 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. Скопируйте его в папку дочерней темы и откройте в текстовом редакторе. Например, давайте удалим ссылку «Сайт работает на 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 г.)