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

Опубликовано: 2020-09-29

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

Дочерняя тема WordPress

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

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

Если вам интересно, почему бы не внести изменения непосредственно в родительскую тему, мы объясним это прямо сейчас. Основная причина, по которой это делать не рекомендуется, — это обновления темы. Чтобы ваш веб-сайт функционировал должным образом, вы должны применять обновления . Однако, если вы настроите родительскую тему, вы потеряете все свои изменения при каждом обновлении темы, так как изменения будут перезаписаны.

Обновлять.
Обновления важны для безопасности вашего сайта

Как работают дочерние темы WordPress

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

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

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

WordPress, код — это поэзия.
Без плагинов потребуется некоторое кодирование

Вручную

Чтобы вручную создать дочернюю тему, вам потребуется использовать FTP-клиент или файловый менеджер. Также обратите внимание, что здесь мы создадим файл style.css на основе темы Twenty Seventeen.

  • Через FTP-клиент или файловый менеджер откройте папку public_html > wp-content > themes .
  • Здесь вы должны создать новую папку. Условные обозначения говорят, что вы должны назвать эту папку именем родительской темы, но добавить -child в качестве суффикса. Здесь имя новой папки будет двадцать семнадцать дочерних.
  • Создайте файл style.css внутри папки и добавьте в него этот код: 
 /* Theme Name: Twenty Twenty Child Theme URL: http://yourdomain.com Description: Twenty Twenty Child Theme Author: Your Name Author URL: http://yourdomain.com Template: twentytwenty Version: 1.0.0 Text Domain: twentytwenty-child */
  • При необходимости отрегулируйте значения. Обратите особое внимание на строку «Шаблон», так как она сообщает WordPress, к какой родительской теме относится ваша дочерняя тема. Когда закончите, сохраните изменения и закройте.
  • С помощью текстового редактора создайте еще один файл с именем 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' ); } ?>
  • После того, как вы сохраните и закроете этот файл, зайдите на свой веб-сайт и выберите «Внешний вид»> «Тема». Активируйте дочернюю тему, и вы заметите, что она выглядит так же, как и ее родительская тема.

Использование плагина дочерней темы

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

Использование онлайн-генератора

Использование онлайн-генератора дочерних тем делает этот процесс еще проще. Вам просто нужно перейти на https://childtheme-generator.com и следовать инструкциям. Когда вы создадите и загрузите тему, перейдите в «Внешний вид»> «Тема» и загрузите и активируйте свою дочернюю тему.

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

Чтобы настроить дочернюю тему, вам нужно знать, как проверять элементы на веб-странице, и понимать основные правила CSS. Чтобы персонализировать дочернюю тему, в активной дочерней теме перейдите в «Настройка»> «Дополнительный CSS».

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

Изменить цвет фона

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

.сайт-контент-содержат {

цвет фона: #DEF0F5;

положение: родственник;

}

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

Изменить цвет боковой панели

Это правило CSS, которое вы должны вставить, чтобы изменить цвет боковой панели:

.виджет {

фон: #B9EBFA;

отступ: 25 пикселей;

Настройте типы, размер и цвет шрифта

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

р {

цвет: бирюзовый;

}

р {

семейство шрифтов: Грузия;

размер шрифта: 18px;

}

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

Заключение

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