Как создавать шаблоны блочных тем в WordPress 6.0

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

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

С момента запуска WordPress 5.9 и Двадцать двадцать два (TT2) тема по умолчанию, использование блочных шаблонов в блочных темах получило широкое распространение. Я был большим поклонником блочные шаблоны и создал и использовал их в своих блочных темах.

Новый WordPress 6.0 предложения три основных шаблона содержат улучшения для авторов:

• Разрешение регистрации шаблона через /patterns папка (аналогично /parts, /templatesи /styles Регистрация).
• Регистрация паттернов из общедоступного каталога паттернов с помощью theme.json.
• Добавление шаблонов, которые можно предложить пользователю при создании новой страницы.

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

Предпосылки

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

Раздел 1: Развитие подходов к созданию шаблонов блоков

Первоначальный подход к созданию блочных паттернов требовал использования API блочных паттернов либо в виде специального плагина, либо непосредственно зарегистрированного в functions.php файл для объединения с темой блока. Недавно выпущенный WordPress 6.0 представил несколько новых и улучшенных функций, работающих с шаблонами и темами, включая регистрацию шаблонов через /patterns папка и модальный шаблон создания страницы.

Для начала давайте кратко рассмотрим, как рабочий процесс регистрации шаблона эволюционировал от использования API шаблона регистрации до прямой загрузки без регистрации.

Пример использования 1: Двадцать двадцать один

По умолчанию Двадцать двадцать одна тема (ТТ1) и Тема блоков TT1 (близнец TT1) демонстрирует, как шаблоны блоков могут быть зарегистрированы в теме functions.php. В экспериментальной теме TT1 Blocks этот сингл блок-pattern.php файл, содержащий 8 шаблоны блоков добавляются в functions.php как include как показано здесь.

Пользовательский шаблон блока необходимо зарегистрироваться используя register_block_pattern функция, которая получает два аргумента — title (название узоров) и properties (массив, описывающий свойства шаблона).

Вот пример регистрации простого шаблона абзаца «Hello World» из этого Статья о создателе темы:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

После регистрации, register_block_pattern() функция должна вызываться из обработчика, прикрепленного к init крючок, как описано здесь.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

После регистрации шаблонов блоков они отображаются в редакторе блоков. Более подробная документация находится в этом Регистрация шаблона блока.

Свойства шаблона блока

В дополнение к требуемому title и content свойства, руководство по блочному редактору перечисляет следующие необязательные свойства шаблона:

• title (обязательный): Удобочитаемое название шаблона.
• content (обязательный): Блокировка HTML-разметки для шаблона.
• description (опционально): Визуально скрытый текст, используемый для описания шаблона в средстве вставки. Описание является необязательным, но настоятельно рекомендуется, если заголовок не полностью описывает, что делает шаблон. Описание поможет пользователям обнаружить шаблон во время поиска.
• categories (опционально): Массив зарегистрированных категорий шаблонов, используемый для группировки блочных шаблонов. Шаблоны блоков могут отображаться в нескольких категориях. Категория должна быть зарегистрирована отдельно, чтобы ее можно было использовать здесь.
• keywords (опционально): массив псевдонимов или ключевых слов, которые помогают пользователям обнаруживать шаблон во время поиска.
• viewportWidth (опционально): целое число, указывающее предполагаемую ширину рисунка, позволяющую масштабировать предварительный просмотр рисунка в средстве вставки.
• blockTypes (опционально): Массив типов блоков, с которыми должен использоваться шаблон. Каждое значение должно быть объявленным блоком name.
• inserter (опционально): по умолчанию все шаблоны отображаются в средстве вставки. Чтобы скрыть шаблон, чтобы его можно было вставить только программно, установите inserter в false.

Ниже приведен пример фрагментов кода плагина шаблона котировок, взятых из WordPress блог.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

Использование шаблонов в файле шаблона

После создания шаблонов их можно использовать в файле шаблона темы со следующей разметкой блока:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

Пример из этот репозиторий GitHub показывает использование «footer-with-background” слизняк шаблона с “tt2gopherПрефикс в теме блоков TT2 Gopher.

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

Пример использования 2: Двадцать двадцать два

Если тема включает в себя только несколько шаблонов, разработка и обслуживание вполне управляемы. Однако, если блочная тема включает в себя множество паттернов, как в теме TT2, то pattern.php файл становится очень большим и трудночитаемым. Тема TT2 по умолчанию, которая объединяет более 60 моделей, демонстрирует измененный рабочий процесс регистрации шаблона Структура это легче читать и поддерживать.

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

2.1: Регистрация категорий паттернов

В демонстрационных целях я создал дочернюю тему TT2 и установил ее на своем локальном тестовом сайте с некоторым фиктивным контентом. После ТТ2 я зарегистрировался footer-with-background и добавлен в следующий список массивов категорий шаблонов в его block-patterns.php .

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

В этом примере кода каждый шаблон, указанный в $block_patterns = array() называется foreach() функция, которая requireс patterns файл каталога с указанным именем шаблона в массиве, который мы добавим на следующем шаге.

2.2: Добавление файла шаблона в /inc/patterns папку.

Далее у нас должны быть все перечисленные файлы паттернов в папке $block_patterns = array(). Вот пример одного из файлов шаблонов, footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

Давайте сошлемся на шаблон в footer.html часть шаблона:

<!-- wp:template-part {"slug":"footer"} /-->

Это похоже на добавление частей заголовка или нижнего колонтитула в файл шаблона.

Подобным образом шаблоны могут быть добавлены в parts/footer.html шаблон, изменив его так, чтобы он ссылался на slug файла шаблона темы (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Теперь, если мы посетим средство вставки шаблонов редактора блоков, Footer with background должны быть доступны для нашего использования:

На следующем снимке экрана показан только что созданный нижний колонтитул с фоновым узором в интерфейсе.

Теперь, когда шаблоны стали неотъемлемой частью блочной темы, многие шаблоны объединены в блочные темы, например Площадь, Семя, Mayland, Зоолог, Геолог — следуя описанному выше рабочему процессу. Вот пример темы Quadrat /inc/patterns папка с регистрация блочного шаблона файлов и список файлов с источником контента и требуемым заголовком шаблона в return array() функция.

Раздел 2: Создание и загрузка паттернов без регистрации

Обратите внимание, что эта функция требует установки WordPress 6.0 или плагина Gutenberg 13.0 или выше на вашем сайте.

Эта новая функция WordPress 6.0 позволяет регистрировать паттерны через стандартные файлы и папки – /patterns, принося аналогичные соглашения, такие как /parts, /templatesи /styles.

Процесс, также описанный в это таверна WP статьи, включает в себя следующие три шага:

• создание папки Patterns в корне темы
• добавление заголовка шаблона в стиле плагина
• исходное содержимое паттерна

Типичная разметка заголовка шаблона, взятая из статьи, показана ниже:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

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

Ссылаясь на примеры из недавно выпущенных тем, я реорганизовал регистрацию паттернов в это блоки суслика TT2 демо-тема, подготовленная для предыдущая статья о CSS-трюках.

В следующих шагах давайте рассмотрим, как footer-with-background.php описания зарегистрирован в PHP и используется в footer.html шаблон рефакторинг.

2.1. Создайте /patterns папка в корне темы

Первый шаг - создать /patterns папку в корне темы TT2 Gopher и переместите footer-with-background.php файл шаблона в /patterns папку и рефакторинг.

2.2: Добавить данные шаблона в заголовок файла

Затем создайте следующие поля регистрации заголовка шаблона.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

Файл шаблона имеет верхнее поле заголовка, написанное в виде комментариев PHP. Вслед за блок-контент написан в формате HTML.

2.3: Добавьте содержимое шаблона в файл

Для раздела контента давайте скопируем фрагменты кода внутри одинарные кавычки (например, '...') из раздела содержания footer-with-background и заменить <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

Весь фрагмент кода patterns/footer-with-background.php файл можно посмотреть здесь на гитхабе.

Обратите внимание, что /inc/patterns и block-patterns.php Он экстракт, не требуется в WordPress 6.0 и включен только в демонстрационных целях.

2.4: Ссылка на шаблон шаблона в шаблоне

Добавление вышеперечисленного рефакторинга footer-with-background.php образец для footer.html шаблон точно такой же, как описано в предыдущем разделе (раздел 1, 2.2).

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

Категории и типы узоров Регистрация (необязательно)

Чтобы классифицировать шаблоны блоков, категории и типы шаблонов должны быть зарегистрированы в теме. functions.php .

Рассмотрим пример регистрация категорий шаблонов блоков из темы TT2 Gopher.

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

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

Ассоциация footer-with-background паттерн виден во вставленных паттернах с его предварительным просмотром (если он выбран):

Этот процесс значительно упрощает создание и отображение шаблонов блоков в темах блоков. Он доступен в WordPress 6.0 без использования плагина Gutenberg.

Примеры тем без оформления шаблонов

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

• Архео – 12 узоров
• Кулон – 13 узоров
• Удаленный – 11 узоров
• Скейтпарка – 10 узоров
• Стюарт – 17 узоров
• Книга – 16 узоров
• Авангард – 14 узоров

Раздел 3: Создание и использование паттернов с низким кодом

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

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

Добавление и настройка паттернов из каталога паттернов

3.1: Скопируйте шаблон из каталога на страницу

Здесь я использую этот шаблон раздела нижнего колонтитула от FirstWebGeek из каталога шаблонов. Скопировал шаблон, нажав кнопку «Копировать шаблон», и сразу вставил его на новую страницу.

3.2: Сделайте желаемую настройкуs

Я сделал лишь несколько изменений в цвете шрифтов и фона кнопок. Затем скопировал весь код из редактор кода в буфер обмена.

Если вы не знакомы с использованием редактора кода, перейдите к параметрам (с тремя точками вверху справа), нажмите кнопку «Редактор кода» и скопируйте отсюда весь код.

3.3: Создайте новый файл в папке /patterns

Сначала создадим новый /patterns/footer-pattern-test.php файл и добавьте необходимый раздел заголовка шаблона. Затем вставьте весь код (шаг 3 выше). Шаблон классифицируется в области нижнего колонтитула (строк: 5), мы можем просмотреть недавно добавленные в инструменте вставки шаблона.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Просмотр нового шаблона в устройстве вставки

Для просмотра только что добавленных Footer pattern from patterns library шаблон, перейдите к любому сообщению или странице и выберите значок вставки (синий символ плюса в левом верхнем углу), а затем выберите категории «TT2 Gopher — Footer». Недавно добавленный шаблон отображается на левой панели вместе с другими шаблонами нижнего колонтитула и его предварительным просмотром справа (если он выбран):

Регистрация шаблонов непосредственно в theme.json файл

В WordPress 6.0 можно зарегистрировать любые желаемые шаблоны из каталога шаблонов с помощью theme.json файл со следующим синтаксисом. В примечаниях разработчиков версии 6.0 указано, «поле Patterns представляет собой массив [шаблонные слизни] из каталога шаблонов. Слаги шаблонов можно извлечь по [URL] в представлении одного шаблона в каталоге шаблонов».

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

Эта короткое видео о возможностях WordPress 6.0 демонстрирует, как паттерны регистрируются в /patterns папку (на 3:53) и зарегистрировать нужные паттерны в директоре паттернов в theme.json файл (в 3:13).

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

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

В этом примере слаг шаблона footer-section-design-with-3-column-description-social-media-contact-and-newsletter из предыдущий пример зарегистрирован через theme.json.

Модель шаблона создания страницы

Как часть "здание с узорамиинициативы, WordPress 6.0 предлагает модальный вариант шаблона авторам тем добавлять шаблоны макетов страниц в блочную тему, позволяя пользователям сайта выбирать шаблоны макетов страниц (например, страницу с информацией, страницу контактов, страницу группы и т. д.) при создании страницы. Ниже приведен пример, взятый из заметка разработчика:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

Эта функция в настоящее время ограничено типом публикации страницы только, а не для «Типа сообщений».

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

Вы можете следить за обсуждением на GitHub и участвовать в нем по ссылкам, указанным в разделе ресурсов ниже.

Использование каталога шаблонов для создания страницы

Шаблоны из каталога также можно использовать для создания желаемого макета поста или страницы, аналогично компоновщикам страниц. ГутенбергХаб команда создала экспериментальное онлайн-приложение для создания страниц используя паттерны прямо из каталога (вступительный ролик). Затем коды из приложения можно скопировать и вставить на сайт, что значительно упрощает процесс создания сложной компоновки страниц без написания кода.

In это короткое видео, Джейми Марсланд демонстрирует (в 1:30), как приложение можно использовать для создания всего макета страницы, аналогичного компоновщику страниц, с использованием нужных разделов страниц каталога.

Подведение итогов

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

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

---

Полезные ресурсы

WordPress 6.0

• Полевое руководство по WordPress 6.0 (ядро WordPress)
• Знакомство с WordPress 6.0: вариации стилей, блокировка пользовательского интерфейса, написание улучшений - 22-минутное видео (Энн Маккарти)
• Возможности WordPress 6.0 за 4 минуты (Дэйв Смит)
• Что нового в WordPress 6.0: новые блоки, переключение стилей, редактирование шаблонов, API веб-шрифтов и многое другое (Кинста)

Создание выкройки

• Введение в шаблоны блоков (Полное редактирование сайта)
• Видео «Введение в шаблоны блоков», 14 минут (Изучайте WordPress)
• Блочные шаблоны (Руководство по редактору блоков)
• Итак, вы хотите сделать блочные узоры? (Блог WordPress)
• Как создавать и делиться шаблонами блоков с низким кодом в WordPress (ГоДэдди)

Улучшение шаблонов (GitHub)

• Здание с узорами #38529
• Узоры как элементы сечения #39281
• Добавить: Возможность выбора шаблона при создании страницы. #40034
• Шаблоны блоков для создания страницы. №38787
• Добавлено: Параметры начала страницы (шаблоны и узоры) #39147

Статьи блога

• Шаблоны Гутенберга: будущее создания страниц в WordPress (Богатый Табор)
• Использование шаблонов блоков для ускорения сборки сайта WordPress (ГоДэдди)
• Шаблоны блоков изменят все (Таверна WP)

---

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

• Коинсмарт. Лучшая в Европе биржа биткойнов и криптовалют.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. БЕСПЛАТНЫЙ ДОСТУП.
• КриптоХок. Альткоин Радар. Бесплатная пробная версия.
• Источник: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/