WordPress – это мощный инструмент онлайн-публикации, который позволяет любому человеку легко создавать и распространять текстовый и/или мультимедийный контент. Но помимо этого, это еще и отличный профессиональный инструмент для дизайнеров, маркетологов и разработчиков, независимо от их опыта и навыков. Одним словом, WordPress может стать вашим самым ценным коллегой по работе и помочь вам добиться успеха в самых разных профессиях. Пользователи WordPress могут воспользоваться мощными функциями, которые позволяют им легко создавать продвинутые блочные макеты без особых усилий. В этом посте мы сосредоточим наше внимание на блочных шаблонах.
Блочные шаблоны против многоразовых блоков против частей шаблона
Блочные шаблоны были впервые представлены в WordPress 5.5, чтобы позволить пользователям WordPress включать сложные готовые к использованию структуры вложенных блоков в свой контент всего несколькими щелчками мыши. Из коробки WordPress предоставляет несколько встроенных блочных шаблонов, из которых вы можете выбирать при создании своего контента. Кроме того, темы блоков обычно предоставляют больше шаблонов блоков, которые вы можете добавить в свой контент непосредственно из вставки блока.
Например, текущая тема по умолчанию, Twenty Twenty-Three, предоставляет следующие шаблоны блоков:
И вы не ограничены шаблонами, предоставляемыми WordPress или вашей темой, потому что каталог Patterns предоставляет тонны готовых к использованию блочных шаблонов.
Шаблоны блоков
Шаблоны блоков – это предопределенные группы блоков, которые можно добавлять в контент и настраивать с помощью тех же инструментов дизайна, которые доступны для всех блоков. Изменения, внесенные в шаблон блока, повлияют только на конкретный редактируемый экземпляр и не будут применены к другим экземплярам, которые вы добавили в другие посты или страницы вашего сайта.
Вы можете использовать блочные шаблоны для включения готовых макетов, которые вам нужно настроить на месте, изменяя изображения, текст, стили или добавляя/удаляя элементы. Блочные шаблоны являются многоразовыми, то есть, создав свой собственный блочный шаблон, вы можете добавить его в любое место на своем сайте и настроить его всего несколькими щелчками мыши с помощью встроенных элементов управления редактора.
Вы можете просматривать и вставлять шаблоны блоков на вкладке “Шаблоны” в редакторе “Вставка блоков” или изучать шаблоны, доступные в каталоге “Шаблоны”, с помощью проводника шаблонов, который появляется при нажатии на кнопку “Изучить все шаблоны” в “Вставке блоков”.
Вы найдете множество шаблонов на вкладке Patterns вставки блока или изучите библиотеку Block Pattern прямо из интерфейса редактора. Вы также можете посетить веб-сайт Block Pattern, выбрать узор и нажать кнопку Copy.
После того как вы скопировали шаблон, вставьте его в свой контент, и все готово.
Теперь вы можете изменить группу блоков, входящих в шаблон, не затрагивая зарегистрированный шаблон или любой его дополнительный экземпляр на вашем сайте.
Многоразовые блоки
Многоразовый блок – это готовый блок или группа блоков, которые можно добавить в любой пост или страницу вашего сайта. Вы также можете экспортировать многоразовые блоки на другие сайты. Многоразовые блоки особенно полезны для создания элементов, которые вы можете включить на нескольких страницах вашего сайта и/или на разных сайтах. Подумайте о призывах к действию, рекламных баннерах, таблицах цен и так далее. В приведенном ниже примере мы создаем многоразовый блок из блока Columns, изображения, абзаца и кнопки.
Создав блок многократного использования, вы можете добавить его на любую страницу вашего сайта из вставки блока.
WordPress считает блоки многократного использования типом поста wp_block и, как таковой, хранит их в таблице wp_posts.
После создания многоразовых блоков вы можете управлять ими с экрана администратора многоразовых блоков. Вы можете получить доступ к этой странице несколькими способами:
- Добавив /wp-admin/edit.php?post_type=wp_block к URL WordPress вашего сайта.
- Нажав на кнопку Manage Reusable blocks в Block inserter.
- Нажав на кнопку Manage Reusable blocks в выпадающем меню Block settings.
Попав туда, вы можете
- редактировать, разделывать или экспортировать свой блок в формате JSON,
- импортировать многоразовые блоки из JSON,
- создавать новые многоразовые блоки.
Все изменения в многоразовом блоке будут применены к каждому появлению этого блока на всем вашем сайте, независимо от страницы администратора, на которой были сделаны изменения. Если вы интенсивно используете многоразовые блоки, не пропустите этот замечательный плагин от J. B. Audras.
Части шаблона
До эпохи Gutenberg темы и шаблоны WordPress в основном создавались на PHP. Уверенное знание дочерних тем, иерархии шаблонов и основных языков front-end разработки было основным требованием для создания или настройки шаблонов. Но все изменилось с появлением блочных тем. В блочных темах и классических темах, которые воспользовались этой функцией, вы можете легко создать или настроить шаблон или часть шаблона в интерфейсе редактора сайта. Никаких навыков разработки не требуется, если, конечно, вы не решите стать разработчиком темы.
Шаблон блока – это список элементов блока. Примерами блочных элементов являются заголовок сайта, логотип и навигация. Части шаблона – это определенные разделы страницы, которые могут быть визуализированы в нескольких местах, таких как верхний и нижний колонтитулы, и могут отображаться на каждой странице вашего сайта WordPress. Вы можете создавать и редактировать части шаблона через интерфейс редактора сайта, где вы можете использовать все инструменты редактирования, доступные для блоков.
Но в отличие от шаблонов блоков и многоразовых блоков, шаблонные части предназначены для областей сайта, которые не меняются часто.
Различия между шаблонами блоков, повторно используемыми блоками и шаблонными частями
Подводя итог, вот основные различия между этими тремя понятиями:
Шаблоны блоков
- Шаблоны блоков – это предопределенные макеты блоков, которые вы можете добавлять в свой контент и настраивать с помощью тех же инструментов, что и включенные блоки. Изменения, вносимые в блочный шаблон, затрагивают только этот отдельный экземпляр блочного шаблона.
- Вы можете копировать и вставлять шаблоны блоков из каталога Шаблоны.
- Вы можете создавать новые шаблоны и публиковать их в каталоге Pattern.
Многоразовые блоки
- Многоразовые блоки – это группы блоков, которые вы можете использовать в любом посте или странице вашего сайта. Все изменения, внесенные в блок многоразового использования, будут применены к каждой позиции этого блока на всем сайте, независимо от страницы администратора, на которой были внесены изменения.
- Многоразовые блоки хранятся в таблице wp_posts как тип поста wp_block.
- Вы можете импортировать и экспортировать многоразовые блоки с других сайтов и на другие сайты.
Части шаблона
- Части шаблона – это определенные области страницы, которые могут отображаться в нескольких местах, включая верхний колонтитул, нижний колонтитул и боковую панель, повторяясь на нескольких страницах вашего сайта WordPress.
- Вы можете создавать и редактировать части шаблона через интерфейс редактора сайта.
- Шаблонные части предназначены для областей сайта, которые не меняются часто.
Как создавать шаблоны блоков
Наряду с функцией шаблонов блоков, в WordPress 5.5 появился новый API для разработчиков, позволяющий “создавать заранее разработанные блоки контента, которые можно легко вставлять в посты, страницы, пользовательские типы постов и шаблоны”. Новый API предоставляет функции register_block_pattern и register_block_pattern_category для регистрации шаблонов блоков и категорий шаблонов. Начиная с WordPress 6.0, вы также можете регистрировать шаблоны блоков с помощью PHP-файла. Таким образом, на момент написания этой статьи у вас есть два способа создать блочный шаблон.
- С помощью вспомогательной функции register_block_pattern,
- добавление PHP-файла в вашу тему в папку patterns.
Создание блочного шаблона с помощью плагина
Первый метод предназначен в основном для разработчиков WordPress, но он достаточно прост, чтобы его могли использовать и не продвинутые разработчики. Если вы решили использовать первый метод, вы можете создать блочный шаблон с помощью двух новых функций register_block_pattern и register_block_pattern_category в PHP-файле плагина или в functions.php вашей темы.
Выбор или регистрация категории шаблона
Во-первых, вы, возможно, захотите выбрать категорию для своего шаблона. В версии WordPress 6.2 были добавлены новые категории шаблонов, а некоторые существующие категории были изменены. На момент написания этой статьи вы можете использовать следующие встроенные категории:
- Featured (тематические)
- Posts (посты)
- Text (текст)
- Gallery (галерея)
- Call to action (призыв к действию)
- Banners (баннер)
- Headers (заголовки)
- Footers (нижний колонтитул)
- Team (команда)
- Testimonials (отзывы)
- Services (услуги)
- Portfolio (портфолио)
- Media (медиа)
Если ваш шаблон блока не попадает ни в одну из категорий по умолчанию, вы также можете зарегистрировать новую категорию с помощью функции register_block_pattern_category.
Эта функция принимает два аргумента:
- $category_name: имя категории шаблона, включая пространство имен.
- $category_properties: Массив свойств категории.
Пример поможет вам лучше понять, как зарегистрировать новую категорию шаблонов:
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_plugin_register_pattern_category() {
register_block_pattern_category(
'my-pattern-category',
array(
'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
)
);
}
add_action( 'init', 'my_plugin_register_pattern_category' );
}Регистрация блочного узора
После регистрации категории деталей следующим шагом будет регистрация самой блочной детали. Для регистрации блочной детали используется вспомогательная функция register_block_pattern:
function my_plugin_register_block_pattern() {
register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );Эта функция принимает два аргумента:
- $pattern_name: машиночитаемое имя в форме namespace/pattern-name.
- $pattern_properties: Массив свойств для шаблона.
Ниже приведен список доступных на данный момент свойств шаблона:
- title (требуется): Человекочитаемый заголовок для шаблона.
- content (требуется): HTML-разметка для детали.
- description: Текст, описывающий деталь в инсертере. Описание необязательно, но рекомендуется, так как оно помогает пользователям найти деталь.
- categories: Массив из одной или нескольких зарегистрированных категорий шаблонов. Вы должны зарегистрировать категорию, прежде чем сможете использовать ее здесь (см. предыдущий раздел).
- keywords: Массив ключевых слов, которые помогают пользователям найти шаблон.
- viewportWidth: целое число, определяющее ширину детали в окне предварительного просмотра.
- blockTypes: Необязательный массив типов блоков, которые будут использоваться с деталью.
- postTypes: Массив типов постов, которым будет разрешено использовать данный шаблон.
- templateTypes: Массив типов шаблонов, в которых шаблон имеет смысл (доступно с версии WordPress 6.2).
- inserter: Булево значение, определяющее, должен ли шаблон быть видимым в блоке inserter. Установите значение false, чтобы скрыть шаблон. По умолчанию все шаблоны будут отображаться в блочном инсерте.
Вот пример использования функции register_block_pattern:
if ( function_exists( 'register_block_pattern' ) ) {
function my_plugin_register_block_pattern() {
register_block_pattern(
'my-plugin/my-block-pattern',
array(
'title' => _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
'categories' => array( 'my-pattern-category' ),
'postTypes' => array( 'post' ),
'content' => '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
)
);
}
add_action( 'init', 'my_plugin_register_block_pattern' );
}В этом коде мы использовали свойство postTypes, чтобы шаблон был доступен только для обычных записей блога. Вы также можете задать другое значение для postTypes, чтобы сделать его доступным для разных типов постов. Если у вас есть тип поста product и вы решили сделать шаблон доступным только для этого типа поста, вы напишете:
'postTypes' => array( 'product' ),Теперь создайте новый пост (или пользовательский тип поста), откройте вставку блоков и нажмите на ярлык Patterns. Вы должны найти новую категорию шаблонов (My Pattern Category) с вашим пользовательским шаблоном блока. Не стесняйтесь играть со свойствами шаблонов, чтобы настроить шаблоны блоков. Теперь давайте погрузимся немного глубже и попробуем построить реальный блочный узор.
Реальный пример блочного шаблона
Предположим, вы хотите создать блочный шаблон, включающий заголовок, изображение, абзац и кнопку. В редакторе создайте макет блочного шаблона, затем переключитесь в редактор кода и скопируйте разметку.
В нашем примере мы имеем следующий код:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->Теперь вы можете оптимизировать этот код. Если вы регистрируете шаблон блока с помощью плагина, вам необходимо изменить URL изображения следующим образом:
esc_url( plugin_dir_url( __FILE__ ) . 'images' )Таким образом, WordPress будет искать изображение не в uploads, а в папке images вашего плагина. Затем вы можете использовать свойство viewportWidth, чтобы обеспечить лучший предварительный просмотр шаблона в блочном инсерте:
'viewportWidth' => 800,
Вы также можете включить массив ключевых слов, чтобы помочь пользователям найти ваш шаблон блока:
'keywords' => array( 'cta', 'demo', 'kinsta' ),
Другой вариант, помогающий пользователям найти блок в поиске, – добавление массива типов блоков:
'blockTypes' => array( 'core/button' ),Таким образом, шаблон блока будет появляться в предложениях, когда пользователь будет искать один из указанных блоков. Свойство postTypes позволяет сделать шаблон блока доступным только для определенных типов постов. Например, вы можете сделать шаблон видимым только для поста типа “продукт”:
'postTypes' => array( 'product' ),Наконец, вы можете добавить CSS-класс в обертку вашего блочного шаблона. Для этого нужно создать новую группу с атрибутом className:
<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
<!-- Your blocks -->
</div>
<!-- /wp:group -->Обратите внимание, что вам нужно добавить то же имя класса в следующий элемент div. Для более детального рассмотрения блочных шаблонов и большего количества примеров кода, смотрите также Блочные шаблоны в Руководстве по темам WordPress.org.
Создание блочного шаблона с помощью файла
Как упоминалось выше, в WordPress 6.0 появился новый и более простой способ добавления блочных шаблонов в ваши темы WordPress. Теперь вы можете неявно регистрировать блочные шаблоны, объявляя их как PHP-файлы в папке /patterns в корне вашей темы. Допустим, вы хотите неявно зарегистрировать в своей блочной теме тот же блочный шаблон, который был создан в предыдущем разделе. В этом примере мы будем использовать тему Twenty Twenty-Three.
Вы можете задать те же параметры, что и в предыдущем методе, но включить их в комментарий в заголовке файла. Кроме того, вместо использования имен параметров в верблюжьем регистре, вы будете разделять слова пробелом, а вместо массивов – использовать элементы списка, разделенные запятыми. Сначала деактивируйте плагин, который вы использовали для регистрации шаблона в предыдущем примере. Затем создайте новый файл my-block-pattern.php и включите в него следующий заголовок:
<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my-block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, kinsta
* Block Types: core/buttons
*/
?>Далее вы добавите содержимое в шаблон блока. Вы можете использовать ту же разметку, что и в нашем предыдущем примере, но сначала вам нужно немного изменить ее:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->Разметка практически не изменилась по сравнению с предыдущим примером. Мы сделали только два изменения. URL-адрес изображения-заполнителя теперь генерируется функцией get_theme_file_uri:
<?php echo esc_url( get_theme_file_uri( 'assets/images' ) ); ?>Конечно, сначала вы должны поместить изображение placeholder.jpg в папку /assets/images вашей темы. Следующая инструкция генерирует текст, который вы хотите перевести.
<?php echo __( 'View plans', 'text-domain' ); ?>Теперь сохраните файл и создайте новый пост. Ваш шаблон блока должен появиться в категориях Featured и Banners.
Обратите внимание, что PHP-код, который вы добавляете к шаблону, выполняется только тогда, когда шаблон добавлен в контент. После размещения в посте блочные шаблоны ведут себя как статические блоки.
Удаление поддержки, снятие с регистрации и скрытие шаблонов блоков
В некоторых сценариях вы можете захотеть выполнить специальные действия с шаблонами блоков. Например, вы можете заменить основной блочный шаблон на собственный блочный шаблон или снять категорию с регистрации при определенных условиях. Ниже перечислены операции, которые можно выполнить.
Удалить поддержку всех основных блочных шаблонов
Во-первых, разработчики тем могут удалить поддержку основных блочных шаблонов и предоставить свой собственный набор шаблонов. Чтобы удалить поддержку основных шаблонов, вы можете использовать функцию remove_theme_support следующим образом:
remove_theme_support( 'core-block-patterns' );Рекомендуется прикрепить функцию remove_theme_support к хуку after_setup_theme.
Снятие с регистрации отдельного шаблона блока
Вы также можете отменить регистрацию определенного шаблона блока в случае, если вы хотите предоставить альтернативу или не хотите, чтобы он использовался в вашей теме. API Patterns API предоставляет для этого функцию unregister_block_pattern:
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );В случае, если вы также можете снять с регистрации шаблон основного блока, вы будете использовать следующее:
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );Вы будете использовать unregister_block_pattern с хуком init.
Снятие с регистрации категории шаблонов блоков
Вы также можете снять регистрацию категории шаблонов, подключив функцию unregister_block_pattern_category к хуку init:
function my_theme_unregister_block_pattern_categories() {
unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );Построение и обмен шаблонами блоков с помощью создателя шаблонов
Вы также можете создавать свои шаблоны и делиться ими с сообществом с помощью бесплатного онлайн-инструмента: The Pattern Creator. Если у вас есть учетная запись WordPress.org, вы можете получить доступ к создателю шаблонов из каталога шаблонов.
Там нажмите “Создать новую деталь”. После этого откроется версия редактора блоков, предназначенная для создания деталей.
Вы также можете использовать бесплатные изображения, размещенные в библиотеке Openverse.
Когда вы будете удовлетворены своими изменениями, вы можете сохранить черновик или отправить деталь на доработку.
Затем можно вернуться в каталог “Узоры” и выбрать “Мои узоры”. Там вы найдете все свои детали на трех вкладках: Все, Черновики и На рассмотрении.
Когда вы закончите редактирование, вы можете поделиться своей выкройкой с сообществом. Просто нажмите кнопку “Отправить” в правом верхнем углу редактора, чтобы отправить выкройку на доработку (перед отправкой выкройки обязательно соблюдайте правила работы с выкройками).
Заключение
WordPress исполнилось 20 лет, и статистика говорит нам, что он по-прежнему является самой распространенной CMS в мире, с 63,3% долей рынка по состоянию на май 2023 года. Эти цифры доказывают, что WordPress – отличный инструмент для публикации, которым пользуются тысячи профессионалов, разработчиков и простых блоггеров по всему миру. Выделение времени и ресурсов на приобретение новых навыков в разработке WordPress и изучение таких продвинутых функций, как пользовательские блоки, блоки многократного использования и шаблоны блоков, может стать отличной инвестицией в вашу карьеру маркетолога, веб-дизайнера или издателя. А теперь все зависит от вас.
