С выпуском WordPress версии 5.9 (в январе 2022 года) появилась совершенно новая парадигма в разработки тем — разработка блочной темы. Этот урок посвящен процессу установки и настройки базовой дочерней темы для блочных тем.
Дочерняя тема — это просто часть темы, которая зависит от родительской темы и без неё она работать не будет.
Обычно дочерние темы создают чтобы сэкономить время на разработке. Выбор делается на понравившемся шаблоне оформления и сразу создается на его основе дочерняя тема (или тема-ребёнок).
Такой подход является хорошим тоном и позволяет вам избежать в будущем массу проблем и неожиданностей, основная неожиданность из которых — правка в родительской теме файлов. Так делать не надо! Ведь, после обновления темы (обновления регулярно выходят) вы затрёте ваши правки и как следствие — потеряете их. А в случае, если вы вносите правки в тему-ребенка (дочернюю тему), то даже после обновления темы-родителя ваши правки не будут затронуты и останутся работать, выполняя свои функции.
Случай с дочерними темами: после небольшого исследования исходных файлов WordPress некоторые люди обнаруживают, где находятся файлы темы, а затем напрямую редактируют их. После следующего обновления темы они с ужасом обнаруживают, что обновление полностью стерло все их внесенные изменения. Многие владельцы сайтов, дизайнеры усвоили этот урок на собственном горьком опыте.
Как предотвратить это? Использовать блочную дочернюю тему! Дочерняя тема — это тема, которая переопределяет и добавляет элементы в другую блочную тему («Родительская» блочная тема), не затрагивая какой-либо код родительской темы. При обновлении родительской темы ваша дочерняя тема сохранит все внесенные в неё правки.
https://learn.wordpress.org/lesson-plan/create-a-basic-child-theme-for-block-themes/
Поэтому, стоит уяснить, что после выбора темы и её активации необходимо создать дочернюю тему и активировать следом.
Это правило хорошего тона при разработке.
Создание простой дочерней блочной темы
- Создайте пустую папку (директорию) для вашей будущей темы-ребёнка
Чтобы не запутаться, я рекомендую добавлять просто постфикс -child к названию той директории, тема которой выступает в качестве родительской.
Например, мы создаем дочернюю тему на основе twentytwentyfour, соответственно, название директории для темы-ребёнка будет twentytwentyfour-child
Такой подход позволит вам не запутаться в связях дочерних тем и родительских.
- Создайте в этой папке файл style.css
В файле стилей (style.css) внесите следующие необходимые данные:
/*
Theme Name: [ИМЯ ВАШЕЙ ТЕМЫ]
Description: Это дочерняя тема. В качестве родительской выступает тема Twenty Twenty-Four.
Author: [ВАШЕ ИМЯ]
Author URI: [ВАШ АДРЕС САЙТА/URL]
Template: twentytwentyfour
*/Важно! В строке Template обязательно укажите название папки темы-родителя, чтобы WordPress понимал из какой директории ему наследовать файлы.
Пример моего файла:
В панели управления мы можем наблюдать уже первые изменения:
- Добавьте скриншот
Наверняка вы заметили как некрасиво и безлико выглядит квадратик с нашей темой. Чтобы это исправить, мы можем позаимствовать из родительской темы специальный файл для заполнения этого квадратика — screenshot.png
Скопируйте этот файлик из родительской темы в свою дочернюю. Если файл отсутствует — создайте его (размер 1200 на 900 пикселей).
Результат моей творческой фантазии можно увидеть ниже:
Теперь в нашей папке уже два файла: style.css и screenshot.png и раздел с доступными темами для активации тоже преобразился 🙂
- Создайте файл theme.json
В завершении, создайте файл с названием theme.json и скопируйте в него всё что есть в одноименном файле родительской темы.
theme.json— это файл конфигурации, который позволяет вам определять глобальные настройки, стили и многое другое для вашей темы (для визуального редактора, который называется Gutenberg).Файл работает как с блочными, так и с классическими темами.
https://developer.wordpress.org/themes/global-settings-and-styles/introduction-to-theme-json/
Теперь вы можете смело активировать вашу дочернюю тему. После этого зайдите в редактирование страницы и обратите внимание на заготовки цветовых схем, шрифтов.
Всё это тянется из файла theme.json. Попробуйте найти взаимосвязь. Откройте этот файл вашей дочерней темы и попробуйте удалить первые три, четыре блока в фигурных скобках раздела palette:
"palette": [
{
"color": "#f9f9f9",
"name": "Base",
"slug": "base"
},
{
"color": "#ffffff",
"name": "Base / Two",
"slug": "base-2"
},
{
"color": "#111111",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#636363",
"name": "Contrast / Two",
"slug": "contrast-2"
},
После сохранения вернитесь в редактор Гутенберг и исследуйте область цветовых схем для текста и фона при редактировании текста:
Вы непременно обнаружите, что число цветовых кружков уменьшилось.
Ну вот и всё!
Мы создали дочернюю тему на основе блочной темы и разобрались в минимальном количестве файлов и их назначения.
Создание при помощи плагина
Отмечу, что существует официальный плагин от разработчиков WordPress, который позволяет через визуальный интерфейс создавать свои блочные темы, как родительские, так и дочерние.
Страница плагина Create Block Theme
