Як створити шаблони блокових тем у 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) та обговорює майбутні плани покращення візерунків, які включають візерунки як елементи розрізу, надаючи варіанти вибрати шаблон під час створення сторінки, інтеграція пошуку в каталозі шаблонів тощо.

Передумови

У статті передбачається, що читачі мають базові знання інтерфейсу повного редагування сайту (FSE) і тем блоків WordPress. The Довідник для редактора блоків та Повне редагування сайту Веб-сайт містить найновіші посібники для вивчення всіх функцій FSE, включаючи теми та шаблони блоків, які обговорюються в цій статті.

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

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

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

Приклад використання 1: двадцять двадцять один

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

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

Ось приклад реєстрації простого шаблону абзацу «Hello World». Стаття Theme Shaper:

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 також скористалися шаблонами класичних тем. За замовчуванням Двадцять двадцять і мої улюблені теми Eksell (a демонстраційний сайт тут) є гарними прикладами, які демонструють, як елементи візерунка можна додати до класичних тем.

Приклад використання 2: двадцять двадцять два

Якщо тема включає лише кілька шаблонів, розробкою та підтримкою можна досить керувати. Однак, якщо тема блоку включає багато шаблонів, як у темі TT2, то pattern.php файл стає дуже великим і його важко читати. Тема TT2 за замовчуванням, яка поєднується більше 60 візерунків, демонструє перероблений робочий процес реєстрації шаблону структура що легше читати й підтримувати.

Беручи приклади з теми TT2, давайте коротко обговоримо, як працює цей спрощений робочий процес.

2.1: Реєстрація категорій шаблонів

Для демонстраційних цілей я створив дочірню тему TT2 і налаштував її на своєму локальному тестовому сайті з деяким фіктивним вмістом. Після TT2 я зареєструвався 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 має бути доступним для нашого використання:

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

Тепер, коли шаблони стали невід’ємною частиною блокової теми, багато шаблонів об’єднані в блокові теми, наприклад Майдан, Розсада, Мейленд, Зоолог, Геолог — дотримуючись робочого процесу, розглянутого вище. Ось приклад теми Quadrat /inc/patterns папка з a блокова реєстрація файл і список файлів з джерелом вмісту та необхідним заголовком шаблону в return array() функція.

Розділ 2: Створення та завантаження шаблонів без реєстрації

Зауважте, що для цієї функції потрібно встановити на вашому сайті плагін WordPress 6.0 або Gutenberg 13.0 або новішої версії.

це нова функція WordPress 6.0 дозволяє реєструвати шаблон через стандартні файли та папки – /patterns, приносячи подібні конвенції, як /parts, /templates та /styles.

Процес, як також описано в ця WP Tavern статті, включає в себе три наступні кроки:

• створення папки шаблонів у корені теми
• додавання заголовка шаблону в стилі плагіна
• вихідний вміст шаблону

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

<?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 Gopher Blocks демо-тема, підготовлена ​​до попередня стаття про CSS-Tricks.

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

2.1: Створити a /patterns папку в корені теми

Першим кроком є ​​створення a /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 файл можна переглянути тут на GitHub.

Зверніть увагу, що /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 файл із таким синтаксисом. The 6.0 стан примітки розробника, «поле шаблонів є масивом [візерунок слимаків] з каталогу шаблонів. Шаблони можуть бути вилучені за допомогою [URL] у вигляді одного шаблону в каталозі шаблонів».

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

це коротке відео з функціями WordPress 6.0 демонструє, як шаблони реєструються в /patterns папку (у 3:53) і зареєструвати потрібні шаблони з директора шаблонів у a 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 і брати участь у ньому за посиланнями, наведеними в розділі ресурсів нижче.

Використання каталогу шаблонів для створення сторінки

Шаблони з каталогу також можна використовувати для створення потрібної публікації або макета сторінки, подібно до конструкторів сторінок. The GutenbergHub команда створила експериментальний додаток для створення онлайн-сторінок використовуючи шаблони безпосередньо з каталогу (вступне відео). Потім коди з програми можна скопіювати та вставити на сайт, що значно спрощує процес створення складного макета сторінки без кодування.

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

Підводячи підсумок

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

Справді, блокові шаблони змінять все і напевно це a зміна гри функція в ландшафті теми WordPress. Коли повний потенціал будівля з візерунками Якщо зусилля стають доступними, це змінить те, як ми розробляємо блочні теми та створюємо гарний контент навіть із знанням низького коду. Для багатьох креативних дизайнерів каталог шаблонів також може надати відповідну можливість продемонструвати їх креативність.

---

ресурси

WordPress 6.0

• Посібник WordPress 6.0 (WordPress Core)
• Вивчення WordPress 6.0: варіації стилів, інтерфейс блокування блоків, покращення написання – 22 хв відео (Енн МакКарті)
• Функції WordPress 6.0 за 4 хвилини (Дейв Сміт)
• Що нового в WordPress 6.0: нові блоки, перемикання стилів, редагування шаблонів, API веб-шрифтів та багато іншого (Kinsta)

Створення візерунків

• Знайомство з шаблонами блоків (Повне редагування сайту)
• Відео про введення в шаблони блоків, 14 хвилин (вивчити WordPress)
• Шаблони блоків (Посібник з редактора блоків)
• Отже, ви хочете зробити шаблони блоків? (Блог WordPress)
• Як створювати шаблони блоків з низьким кодом і ділитися ними в WordPress (GoDaddy)

Покращення шаблонів (GitHub)

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

Статті в блогах

• Шаблони Гутенберга: майбутнє створення сторінок у WordPress (Річ Табор)
• Використання шаблонів блоків для прискорення створення сайту WordPress (GoDaddy)
• Шаблони блоків змінять усе (WP Tavern)

---

Як створити шаблони блокових тем у WordPress 6.0 спочатку опубліковано на CSS-трюки. Ти повинен отримати інформаційний бюлетень.

• Coinsmart. Найкраща в Європі біржа біткойн та криптовалют.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. БЕЗКОШТОВНИЙ ДОСТУП.
• CryptoHawk. Альткойн Радар. Безкоштовне випробування.
• Джерело: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/