Как использовать плагин конфигуратора дочерних тем WordPress?

В нашей предыдущей статье мы объяснили, как вручную создать дочернюю тему в WordPress. Если вы устали от всех этих ручных действий – не волнуйтесь, вы не одиноки. В частности, настройка родительской темы путем поиска отдельных классов CSS из родительского style.css более сложна для новичка в WordPress. К счастью, существует множество полезных плагинов, которые упрощают весь процесс и в то же время позволяют вам настраивать его дальше. Конфигуратор дочерних тем – один из таких плагинов, который помогает создавать и настраивать дочерние темы в WordPress. В этой статье мы обсудим пошаговый процесс использования плагина Child Theme Configurator.

Почему плагин конфигуратора дочерних тем?

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

  • Плагин постоянно обновляется и поддерживается.
  • Хорошие отзывы пользователей с более чем 70 тысячами активных установок.
  • Очень удобный интерфейс.
  • Хорошая документация доступна на панели администратора.
  • Создание дочерней темы в один клик.
  • Легко настраивать CSS и изменять файлы шаблонов.
Плагин конфигуратора дочерних тем для WordPress

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

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

Перейдите к “Плагины> Добавить новый»И выполните поиск« Дочерняя тема », чтобы найти плагин« Конфигуратор дочерней темы ». Установите и активируйте плагин; он добавит меню администратора “Инструменты> Дочерние темы»На панели администратора WordPress. Нажав на меню «Дочерние темы», вы увидите следующие варианты:

Анализ родительской темы
Анализ родительской темы

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

Вам будет показано сообщение об успешном выполнении, а также загружены дополнительные параметры (от 4 до 9), которые можно настроить в соответствии с вашими потребностями.

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

Назовите новый каталог тем

Плагин автоматически создаст имя каталога дочерней темы, добавив «-child» к имени родительской темы. В нашем примере это «двадцать шестнадцать детей», и мы оставляем его как есть. Вы можете дать любое имя, если хотите изменить имя каталога вашей дочерней темы. Обратите внимание, что это не имя дочерней темы; это каталог, в котором будет храниться дочерняя тема. Плагин создаст этот каталог в папке «wp-content» как «/ wp-content / twentysixteen-child /».

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

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

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

Выберите обработку таблицы стилей родительской темы

Рекомендуемый метод – выбрать опцию «использовать очередь стилей WordPress», чтобы использовать файл functions.php вашей дочерней темы для включения стиля родительской темы в дочернюю тему. Вы также можете использовать параметр «Использовать @import» для импорта style.css родительской темы в style.css дочерней темы (это не рекомендуется).

Включение родительской темы
Включение родительской темы

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

Настройте имя дочерней темы, описание, автора, версию и т. Д.

В этом разделе определите необходимые детали, такие как имя вашей дочерней темы, описание, имя автора и т. Д.

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

Здесь вы можете указать фактическое имя дочерней темы, которое будет отображаться в разделе «Внешний вид> Темы»Для активации позже.

Предложение SEO: Оптимизируйте свой сайт с помощью специальной 14-дневной бесплатной пробной версии SEMrush Pro.

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

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

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

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

Параметры конфигуратора дочерней темы
Параметры конфигуратора дочерней темы

Style.css – единственный файл, необходимый для вашей дочерней темы, если вы выбрали метод @import. Если вы выбрали рекомендуемый метод постановки в очередь, будет два файла style.css и functions.php. Подобно ручным модификациям, многое можно сделать с помощью плагина Child Theme Configurator.

Редактирование файлов шаблонов

Все изменяемые файлы шаблонов будут перечислены на вкладке «Файлы». Хотя файл functions.php будет доступен в файлах дочерней темы, по умолчанию вы можете скопировать другие файлы шаблона в свою дочернюю тему для модификации. Некоторые из доступных файлов шаблонов, которые можно изменить: 404.php, archive.php, page.php, single.php, header.php и т. Д.

Копирование файлов шаблонов родительской темы для дочерней темы
Копирование файлов шаблонов родительской темы для дочерней темы

Выберите файл в разделе «Файлы дочерних тем» и отредактируйте его с помощью редактора тем WordPress по умолчанию. На вкладке «Файлы» также доступны следующие параметры:

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

Изображения тем хранятся в папке «/ twentysixteen-child / images /» и могут использоваться только в таблице стилей дочерней темы. Все остальные изображения, загруженные в пост / страницу, будут доступны в медиатеке.

  • Загрузите собственный снимок экрана для дочерней темы, который можно увидеть в разделе «Внешний вид> Темы».
  • Экспортируйте zip-архив полной дочерней темы в локальное хранилище.

Одна из ошибок, которую делают пользователи в процессе ручного создания дочерней темы, – это не заботиться о структуре каталогов. Плагин очень хорошо справляется с этой задачей, делая это автоматически при копировании файлов типа «/template-parts/content.php». Он автоматически создает такую ​​же структуру в дочерней теме, как «twentysixteen-child / template-parts / content.php», и обеспечивает работу этого шаблона из дочерней темы.

Настройка CSS

Поиск свойства и селектора CSS является основной проблемой при использовании ручных дочерних тем, и плагин Child Theme Configurator помогает легко решить эту проблему. Есть две вкладки «Запрос / Выбор» и «Свойство / Значение», которые можно использовать для определения требуемого стиля из родительской темы и его изменения.

Вкладка «Запрос / Селектор» помогает найти определенный селектор для любого запроса @media и изменить его. Например, если вы хотите изменить цвет фона тела родительской темы, оставьте поле «@media Query» как «base» и введите «body» для селектора. Вы увидите все значения свойств для тела и щелкните тело, чтобы просмотреть экран, как показано ниже:

Изменение CSS на основе Media Query и Selector
Изменение CSS на основе Media Query и Selector

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

Подобно «Query / Selector», вы можете использовать «Property / Value» для изменения родительского CSS. Например, введите «фон» в значение свойства и выберите «цвет фона» из раскрывающегося списка, чтобы изменить цвет фона всего сайта.

Настройка CSS родительской темы с помощью свойства / значения
Настройка CSS родительской темы с помощью свойства / значения

Просмотр таблиц стилей родительской / дочерней темы

Вкладки «Базовые стили» и «Дочерние стили» отображают соответствующие таблицы стилей из родительской и дочерней тем соответственно.

Таблица стилей дочерней темы
Таблица стилей дочерней темы

Импорт пользовательских шрифтов

Вы можете импортировать любые веб-шрифты, например шрифты Google, на вкладке «Веб-шрифты» с помощью запроса @import.

Наконец, вы можете удалить, продублировать и проанализировать дочернюю тему на вкладке «Родительский / дочерний». Эти параметры будут отображаться только после того, как у вас будет действующая дочерняя тема, созданная с помощью этого плагина.

Активация дочерней темы

Недавно созданную дочернюю тему можно увидеть на панели администратора WordPress в разделе «Внешний вид> Темы». Настоятельно рекомендуется предварительно просмотреть сайт с дочерней темой перед активацией, чтобы убедиться, что все в порядке, как вы ожидали.

Активация дочерней темы в WordPress
Активация дочерней темы в WordPress

Параметр «Отладка», доступный в правом верхнем углу, когда он включен, показывает действия внизу страницы. Это можно использовать для устранения неполадок в случае, если у вас возникнут проблемы при создании дочерней темы. Нажмите кнопку «Справка», чтобы просмотреть чрезвычайно полезную документацию прямо из панели администратора.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *