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

Опубликовано: 2023-07-14

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

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

Так что ты можешь сделать? Как изменить доступные параметры глобального стиля? Для этого вам понадобится блочная дочерняя тема.

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

Согласно документации разработчика WordPress:

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

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

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

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

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

1. Когда использовать блочную дочернюю тему

Дочерние темы часто являются отличным решением. Однако, если вы хотите добавить немного CSS-кода, создание дочерней темы целиком может оказаться излишним. Рассмотрите плагин, такой как Code Snippets, для добавления небольшого количества настроек.

Настройка клиентских сайтов

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

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

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

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

2. Выберите хорошую тему WordPress

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

3. Создайте тестовую среду

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

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

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

4. Создайте каталог своей темы

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

Вы ищете следующую папку:

 /wp-контент/темы/

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

 /wp-content/themes/ваша-дочерняя-тема/

5. Создайте файлы темы

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

В папке каталога новой дочерней темы вы создадите два новых файла:

 стиль.css
тема.json

Оба этих файла служат определенной цели. Файл style.css используется для предоставления WordPress информации о теме, такой как имя, автор, теги и идентификатор родительской темы.

Файл theme.json используется для определения многих параметров глобальных стилей и других параметров. Узнайте больше о theme.json из руководства разработчика.

В предыдущих темах Classic файл functions.php был необходим в дочерних темах. Блокировка дочерних тем не требует этого шага.

Стиль.css

Что принадлежит вашему файлу style.css ? В документации разработчика сказано:

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

Вам нужно будет включить шаблон в файл style.css , содержащий информацию о заголовке. Имя шаблона: соответствует имени папки (каталога) родительской темы, поверх которой вы строите. Текстовый домен : имя уникально для вашей дочерней темы WordPress.

Ниже приведен пример дочерней темы, использующей Twenty Twenty Two:

 /*
Название темы: Двадцать двадцать два ребенка
URI темы: https://example.com/
Автор: Ваше имя
URI автора: https://example.com/
Описание: Детская тема Twenty Twenty Two
Требуется как минимум: 5.8
Протестировано до: 5,9
Требуется PHP: 5.6
Версия: 0.1
Лицензия: Стандартная общественная лицензия GNU версии 2 или более поздней.
URI лицензии: http://www.gnu.org/licenses/gpl-2.0.html.
Текстовый домен: двадцать двадцать два ребенка
Шаблон: двадцать двадцать два
Теги: пользовательские цвета, пользовательское меню, пользовательский логотип, стиль редактора, избранные изображения, полное редактирование сайта, шаблоны блоков

Детская тема WordPress Twenty Twenty-Two, (C) 2021 WordPress.org
Twenty Twenty Two Child распространяется на условиях GNU GPL.
*/

Theme.json

Подробную информацию о теме theme.json см. в документации для разработчиков. Давайте посмотрим на файл Twenty Twenty Two theme.json:

 {
 "версия": 2,
 "настройки": {},
 "стили": {},
 "пользовательские шаблоны": {},
 "templateParts": {}
}

В каждом из них вам доступны дополнительные стили. Например, в области стиля Twenty Twenty Two использует:

 {
 "настройки": {
 «Внешний вид»: правда,
 "цвет": {
 "дуотон": [
 {
 "цвета": [
 "#000000",
 "#фффффф"
 ],
 "слаг": "передний и задний план",
 "name": "Передний план и фон"
}

Нужна помощь в создании файла theme.json? Ознакомьтесь с themegen.app, чтобы получить руководство по созданию множества вариантов для вашего файла theme.json.

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

Хотя вы можете легко создать файл theme.json и добавить его в свою тему, остается сделать еще несколько вариантов. Дочерние темы и даже блочные темы — это новая область для WordPress. На момент написания этой публикации редактор сайта явно имел статус бета-версии. Вы захотите вернуться, чтобы увидеть, что работает и что еще не работает в дочерних темах, таких как части шаблона.

Кроме того, вы можете найти настройки, которые Global Styles и theme.json еще не поддерживают. Если вы добавляете дополнительный CSS, например границу группового блока с тенью блока, вы можете добавить это в свой файл style.css .

 .has-основной цвет границы {
 box-shadow: .1rem .1rem .05rem #647BAF ;
}

7. Проверьте свою дочернюю тему

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

  • Протестируйте в разных размерах браузера, например, в мобильных окнах просмотра.
  • Протестируйте в разных браузерах или используйте такой инструмент, как BrowserStack.
  • Ознакомьтесь со стандартами доступности. Начать работу с WebAim

8. Подготовьтесь к загрузке дочерней темы блока

Если вы занимаетесь разработкой на промежуточном сайте, ваши файлы находятся именно там, где они должны быть. Вы можете посетить варианты хостинга, чтобы запустить промежуточный сайт. Если вы создавали файлы в локальной среде разработки, пришло время заархивировать файлы style.css и theme.json вместе в один zip-файл и загрузить его на свой сайт.

Резюме по созданию дочерней темы блока

  1. Решите, нужна ли вам блочная дочерняя тема
  2. Выберите родительскую тему
  3. Настройте среду тестирования
  4. Создайте папку с темой
  5. Создайте свои файлы темы
  6. Настройте дочернюю тему блока
  7. Протестируйте свою дочернюю тему
  8. Загрузите их на живой сайт

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