Шаблоны блоков WordPress

С момента появления блочных шаблонов в экосистеме WordPress наблюдается всплеск интереса к блочным шаблонам.

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

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

Оглавление

Что такое шаблоны блоков

Использование существующих образцов блоков

Шаблоны блоков против многоразовых блоков

Как создать свои собственные шаблоны блоков

• Ручной подход
• Через каталог шаблонов

Как создать собственный плагин шаблонов блоков

Отмена регистрации шаблонов блоков

Отмена регистрации категорий массивов блоков

Вывод

Что такое шаблоны блоков

Шаблоны блоков представляют собой набор блоков, объединенных для создания предварительно разработанных макетов.

Пользователь WordPress, который, например, хочет настроить призыв к действию, может сделать это, добавив на свою страницу несколько блоков, таких как блоки «Заголовок», «Абзац» и «Кнопка». Однако размещение блоков в соответствии с вашим предпочтительным макетом дизайна может быть не таким простым, особенно для начинающих пользователей WordPress. Шаблоны блоков пригодятся в таком случае, поскольку пользователи WordPress могут просто добавить шаблон блока призыва к действию. Затем они могут отредактировать шаблоны блоков в соответствии с желаемым видом.

Использование существующих образцов блоков

В WordPress интегрирован блочный редактор (Gutenberg), который заменяет классический редактор. В редакторе вы можете легко добавлять шаблоны на свои страницы или сообщения. Для начала вам нужно сначала нажать на инструмент вставки блока.

Нажав на нее, перейдите на вкладку Patterns, показанную ниже:

Далее нажмите на кнопку «Исследовать»

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

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

Как только это будет сделано, вы можете дополнительно настроить блоки в шаблоне по своему усмотрению.

Вы также можете найти больше шаблонов в каталоге шаблонов блоков wordpress.org.

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

После этого вам нужно будет вставить шаблон на свою страницу или в сообщение.

Шаблоны блоков против многоразовых блоков

Многоразовый блок — это набор из одного или нескольких блоков, которые вы можете использовать позже в своем посте или на странице.

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

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

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

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

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

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

Как создать свои собственные шаблоны блоков

Существуют различные способы создания собственных шаблонов блоков. В этой статье мы рассмотрим два из этих методов:

• Ручной подход
• Через каталог шаблонов

Ручной подход

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

Создание коллекции блоков

Чтобы настроить коллекцию блоков, вам необходимо выполнить следующее:

i) Сначала создайте новую страницу или сообщение

ii) Добавьте желаемые блоки, которые должны сформировать шаблон или макет в сообщении или на странице. В нашем случае мы добавим медиа и текстовый блок, а также блок кнопок и немного стилей к ним.

Ниже приведен пример отображения блоков:

Регистрация массива блоков

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

i) На странице или в публикации, где у вас есть коллекция блоков, переключитесь в редактор кода:

ii) Скопируйте все обработанные коды и вставьте их в нужный текстовый редактор, например Блокнот или Sublime Text:

iii) Затем добавьте приведенный ниже код в файл functions.php вашей дочерней темы:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );

Вам нужно будет заменить содержимое «Заполните скопированный код здесь» кодом, скопированным в пункте (ii) выше.

Ниже приведен пример окончательного кода с нашей стороны:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );

Как только это будет сделано, вы можете посетить свою страницу или опубликовать и, перейдя в раздел шаблонов, вы увидите новый шаблон в разделе «Рекомендуемые», как показано ниже:

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

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

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

Чтобы зарегистрировать категорию шаблона, вам нужно будет добавить следующий код в файл functions.php вашей дочерней темы.

 function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );

Вы можете изменить название категории на свое усмотрение. В приведенном выше примере кода мы используем метку категории «Пользовательский».

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

 'categories' => array( 'featured' ),

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

 'categories' => array( 'custom' ),

Окончательный код для регистрации шаблона и категории шаблона в нашем случае будет выглядеть так:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

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

Через каталог шаблонов

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

После доступа к каталогу шаблонов вам необходимо выполнить следующее:

i) Войдите в каталог шаблонов.

ii) Щелкните ссылку «Создать новый шаблон».

iii) На следующем экране добавьте название шаблона и начните добавлять нужные блоки. Вам нужно добавить как минимум три блока.

iv) Закончив с добавлением блока, вы можете сохранить рисунок как черновик.

v) Затем убедитесь, что ваш шаблон не нарушает рекомендации, изложенные здесь: Рекомендации по шаблону. Если все в порядке, то можно отправлять выкройку.

Вы можете просмотреть шаблоны, которые у вас есть, нажав на ссылку «мои шаблоны», показанную здесь:

Шаблоны, представленные в разделе «мои шаблоны», являются черновиками, шаблонами, которые вы отправили, и шаблонами, ожидающими проверки.

vi) Затем вы можете скопировать новый блок и вставить его на свою страницу или в сообщение.

Как создать собственный плагин шаблонов блоков

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

i) Получите доступ к файлам вашего веб-сайта через панель хостинга или, альтернативно, через FTP с помощью программного обеспечения FTP, такого как Filezilla.

ii) Перейдите к пути каталога wp-content > plugins

iii) В каталоге плагинов создайте папку с именем «пользовательские шаблоны».

iv) В папке создайте файл с именем custom-patterns.php

v) Добавьте в файл следующий комментарий заголовка:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */

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

vi) Под комментарием заголовка добавьте свой код для регистрации шаблона и категории. В нашем случае здесь мы будем использовать код, который мы ранее создали, чтобы зарегистрировать наш шаблон и пользовательскую категорию. Таким образом, окончательный код будет таким:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

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

viii) После активации вы должны увидеть шаблон блока и пользовательскую категорию в редакторе блоков, как показано ниже:

Отмена регистрации шаблонов блоков

Можно удалить шаблоны блоков, которые вы регистрируете. Если, например, вы хотите удалить шаблон блока «my-plugin/media-text-pattern», который мы ранее зарегистрировали, вам нужно будет добавить следующий код в файл functions.php дочерней темы:

 function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );

В приведенном выше коде вам нужно будет заменить «my-plugin/media-text-pattern» именем шаблона, который вы зарегистрировали.

Отмена регистрации категорий шаблонов блоков

Если вы хотите только отменить регистрацию категории шаблона и сохранить сам шаблон, вам нужно будет добавить следующий код в файл functions.php дочерней темы:

 function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');

Приведенный выше код отменяет регистрацию «пользовательской» категории, которую мы ранее добавили. Вам нужно будет заменить «Пользовательский» на категорию, которую вы зарегистрировали.

Вывод

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

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