04.04.2022 в 01:03 (ред.)

Блочные темы или новый способ создания тем в WordPress 5.9

В WordPress 5.9 официально представлены блочные темы WordPress, для работы которых ранее требовался плагин Gutenberg. Теперь приоритет отдается работе с новейшими функциями Full Site Editing (полное редактирование сайта).

Новая тема Twenty Twenty-Two идет с WordPress 5.9 и является самой первой блочной темой по умолчанию, что делает ее отличной темой для изучения.

Если вы еще не готовы к блочной теме, не беспокойтесь — классические темы продолжают существовать и работать как обычно. Однако имейте в виду, чтобы использовать новые функции Full Site Editing понадобится блочная тема, которая адаптирована к новым возможностям WordPress. Если вы являетесь автором тем, то оцените, сможете ли вы начать внедрять некоторые из новых функций в свои темы, например, theme.json или редактор шаблонов.

Новая тема WordPress Twenty Twenty-Two

Обзор блочной темы

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

После включения блочной темы в разделе Appearance (Внешний вид) появится новый пункт меню под названием Editor (beta) (Редактор (бета-версия)). Этот редактор открывает возможность визуального редактирования домашней страницы, шаблонов и частей шаблона, позволяя вам создавать больше того, что вы хотите и в большем количестве мест.

Благодаря новым функциям, которые предлагают блочные темы, и возможности редактировать содержимое напрямую, меню Customizer скрыто из панели, если вы не используете плагин, который требует его наличия. На GitHub есть целая тема для дополнительной информации.

Для всех текущих авторов блочных тем, создатели WordPress просят обратить внимание на новые, упрощенные имена каталогов – каталог, содержащий файлы шаблонов, будет называться templates, а каталог, содержащий файлы частей шаблонов, будет называться parts. Префикс block- был удален из обоих названий.

Вы можете отправить свою собственную блочную тему в каталог тем WordPress, используя тег full-site-editing. Найти список доступных блочных тем можно по этой ссылке.

Построение блочных тем

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

Во-первых, WordPress 5.9 поставляется с красивой блочной темой TwentyTwentyTwo. Загляните в каталог тем или просмотрите репозиторий GitHub, чтобы просмотреть исходный код и увидеть, как выглядит блочная тема.

В репозитории theme-experiments есть тема Empty Theme, которая является хорошим шаблоном для создания вашей первой блочной темы. Также есть сценарий командной строки, который поможет сгенерировать блочную тему для начала работы:

git clone https://github.com/WordPress/theme-experiments
cd theme-experiments
php new-empty-theme.php

Следуйте подсказкам для создания темы, а затем скопируйте созданную папку в каталог wp-content/themes.

Документация по блочным темам

Тематические блоки

Изучите построение с помощью тематических блоков – набора специальных блоков для полного редактирования сайта и блочных тем. Тематические блоки – это динамические блоки, которые подтягивают содержимое подобно функциям тегов шаблонов из PHP, например, блок Post Title отражает функцию the_title().

Вот два примера использования тематических блоков в блочных шаблонах. Шаблон одиночной записи (singular.html) загружается вместе с данными записи, поэтому тематические блоки можно использовать отдельно, например:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
​
<!-- wp:post-title /-->
​
<!-- wp:post-content {"layout":{"inherit":true}} /-->

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

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
​
<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
    <!-- wp:post-template -->
        <!-- wp:post-title {"isLink":true} /-->
        <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
<!-- /wp:query -->

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

Wordpress

Подпишитесь на новости

Никакого спама, только новости и полезные материалы