Шаблоны блоков WordPress 101: что это такое? И как их использовать

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

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

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

• Что такое шаблоны блоков WordPress и чем они отличаются от повторно используемых блоков.
• Как использовать шаблоны блоков в редакторе.
• Где найти новые шаблоны блоков и как их использовать.
• Как создать свои собственные шаблоны блоков без кода.

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

Шаблоны блоков WordPress — это, по сути, просто шаблоны, состоящие из блоков.

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

Вы можете найти шаблоны блоков для полностраничных шаблонов. Или, что чаще, вы найдете шаблоны блоков для определенных разделов, которые вы, возможно, захотите использовать на странице. Затем вы можете собрать несколько шаблонов блоков, таких как Lego, для создания своего дизайна.

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

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

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

Шаблоны блоков против повторно используемых блоков

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

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

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

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

Вот пример того, когда вы можете использовать каждый из них:

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

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

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

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

Как использовать шаблоны блоков WordPress

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

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

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

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

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

И это все! Если вы хотите вставить другой шаблон блока, вы можете просто повторить тот же процесс. Шаблон блока будет вставлен туда, куда вы поместили курсор в редакторе.

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

Чтобы помочь вам найти новые шаблоны блоков, команда WordPress создала официальную библиотеку шаблонов блоков в WordPress. Вы можете получить к нему доступ, нажав здесь.

Вы можете использовать фильтры для просмотра всех шаблонов блоков и щелкнуть результат, чтобы просмотреть его. Если вы найдете шаблон блока, который вам нравится, просто нажмите кнопку « Копировать шаблон », чтобы скопировать шаблон в буфер обмена:

Теперь откройте редактор фрагмента содержимого, в который вы хотите добавить шаблон блока, и вставьте его, как если бы вы вставляли обычный текст — либо щелкнув правой кнопкой мыши и выбрав вставку, либо используя сочетание клавиш, например Ctrl + V (или Cmd + V на Mac).

Вот и все — вы должны увидеть полный шаблон блока везде, где вы его вставили:

В дополнение к официальной библиотеке шаблонов блоков на WordPress.org вы также можете найти сторонние каталоги, такие как ShareABlock и библиотеку шаблонов Gutenberg Hub (в которой используется тот же подход копирования/вставки, что и в официальной библиотеке).

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

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

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

К счастью, как и следовало ожидать от WordPress, есть плагины, которые это исправляют.

Мой личный фаворит — бесплатный плагин Block Pattern Builder Джастина Тэдлока. По сути, этот плагин позволяет вам создать свой собственный дизайн с помощью редактора блоков, а затем сохранить его как шаблон блока. Таким образом, вы можете создать свой шаблон с помощью редактора, сохранить его как шаблон, а затем легко вставить его, как любой другой шаблон.

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

Для начала установите и активируйте бесплатный плагин Block Pattern Builder с WordPress.org. Я использую вышеупомянутый плагин от Justin Tadlock, но есть плагин с таким же названием от BlockMeister, который, кажется, предлагает ту же функциональность, но немного больше возможностей.

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

Затем вы можете дать ему имя:

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

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

Начните работу с блочными шаблонами сегодня

Использовать шаблоны блоков довольно просто — вы можете вставлять их так же, как блок. И как только вы их вставите, вы сможете редактировать блоки в шаблоне так же, как если бы вы сами создали дизайн.

Чтобы дать себе больше гибкости, есть несколько способов получить доступ к новым шаблонам блоков:

1. Вы можете использовать официальную библиотеку шаблонов блоков на WordPress.org или один из сторонних веб-сайтов библиотек. Все, что вам нужно сделать, это скопировать и вставить между библиотеками и редактором WordPress.
2. Вы можете использовать один из плагинов для шаблонов Gutenberg, которые мы собрали. Не все эти плагины используют функцию собственных шаблонов блоков, но они служат одной и той же цели и функции.
3. Вы можете создавать свои собственные шаблоны блоков с помощью редактора и плагина, такого как Block Pattern Builder. После того, как вы сохраните свои проекты, вы можете легко использовать их в будущем.

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

У вас остались вопросы о шаблонах блоков WordPress? Дайте нам знать в комментариях, и мы постараемся помочь.