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

от автора

в

С выпуском WordPress версии 5.9 (в январе 2022 года) появилась совершенно новая парадигма в разработки тем — разработка блочной темы. Этот урок посвящен процессу установки и настройки базовой дочерней темы для блочных тем.

Дочерняя тема — это просто часть темы, которая зависит от родительской темы и без неё она работать не будет.

Обычно дочерние темы создают чтобы сэкономить время на разработке. Выбор делается на понравившемся шаблоне оформления и сразу создается на его основе дочерняя тема (или тема-ребёнок).

Такой подход является хорошим тоном и позволяет вам избежать в будущем массу проблем и неожиданностей, основная неожиданность из которых — правка в родительской теме файлов. Так делать не надо! Ведь, после обновления темы (обновления регулярно выходят) вы затрёте ваши правки и как следствие — потеряете их. А в случае, если вы вносите правки в тему-ребенка (дочернюю тему), то даже после обновления темы-родителя ваши правки не будут затронуты и останутся работать, выполняя свои функции.

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

Как предотвратить это? Использовать блочную дочернюю тему! Дочерняя тема — это тема, которая переопределяет и добавляет элементы в другую блочную тему («Родительская» блочная тема), не затрагивая какой-либо код родительской темы. При обновлении родительской темы ваша дочерняя тема сохранит все внесенные в неё правки.

https://learn.wordpress.org/lesson-plan/create-a-basic-child-theme-for-block-themes/

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

Это правило хорошего тона при разработке.

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

  1. Создайте пустую папку (директорию) для вашей будущей темы-ребёнка

Чтобы не запутаться, я рекомендую добавлять просто постфикс -child к названию той директории, тема которой выступает в качестве родительской.

Например, мы создаем дочернюю тему на основе twentytwentyfour, соответственно, название директории для темы-ребёнка будет twentytwentyfour-child

Такой подход позволит вам не запутаться в связях дочерних тем и родительских.

  1. Создайте в этой папке файл style.css

В файле стилей (style.css) внесите следующие необходимые данные:

/*
 Theme Name: [ИМЯ ВАШЕЙ ТЕМЫ]
 Description: Это дочерняя тема. В качестве родительской выступает тема Twenty Twenty-Four.
 Author: [ВАШЕ ИМЯ]
 Author URI: [ВАШ АДРЕС САЙТА/URL]
 Template: twentytwentyfour
 */

Важно! В строке Template обязательно укажите название папки темы-родителя, чтобы WordPress понимал из какой директории ему наследовать файлы.

директория дочерней темы

Пример моего файла:

Пример файла CSS

В панели управления мы можем наблюдать уже первые изменения:

панель управления сайтом
  1. Добавьте скриншот

Наверняка вы заметили как некрасиво и безлико выглядит квадратик с нашей темой. Чтобы это исправить, мы можем позаимствовать из родительской темы специальный файл для заполнения этого квадратика — screenshot.png

Скопируйте этот файлик из родительской темы в свою дочернюю. Если файл отсутствует — создайте его (размер 1200 на 900 пикселей).

Результат моей творческой фантазии можно увидеть ниже:

Скриншот дочерней темы

Теперь в нашей папке уже два файла: style.css и screenshot.png и раздел с доступными темами для активации тоже преобразился 🙂

Скриншот дочерней темы
  1. Создайте файл 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

Буду признателен за Share 🙏


Комментарии

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

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