На сайтах WordPress есть возможность генерации пользовательских блоков без использования JavaScript. Как следствие, была придумана специальная технология для Гутенберг, которая разбивает содержимое публикаций на отдельные блоки. Пользовательский блок Gutenberg – это отдельная деталь, которую можно легко редактировать и менять ее местоположение. Также редактор предназначен для генерации владельцами собственных блоков. В нашей сегодняшней статье мы рассмотрим основные способы и инструменты для реализации подобных задач.
Полезно: Обзор редактора блоков Gutenberg
Пользовательские блоки
Существует ряд плагинов WordPress, которые предназначены для реализации данной задачи. Они позволяют создавать блоки самостоятельно. Большинство из них опираются на произвольные поля, благодаря чему можно добиться гибкости в типе публикуемого контента.
Произвольные поля в WordPress разрешают авторам постов назначать для выкладки любые типы информации, которая также известна как метаданные. В них можно указывать настроение сообщения, погоду, музыку и другие подобные. Метаданные обрабатываются парами ключей и значений. Работать с ними можно напрямую, либо с помощью специальных плагинов.
Первым рассматриваемым нами плагином для генерации пользовательских блоков Gutenberg будет Advanced Custom Fields PRO. Это коммерческая версия модуля, лицензия которой обойдется вам в 49$. Она позволяет генерировать пользовательские блоки, используемые далее в редакторе Gutenberg. Особый набор опций позволяет владельцам сайтов формировать уникальный набор полей, а затем встраивать его в блоки.
Плагин предусматривает сразу несколько вариантов управления для блоков. Также в нем предусмотрено специальное API, с которым удобнее создавать данные поля. Еще одной особенностью модуля является возможность ограничить размещение блоков одним типом записей. С ним вы сможете использовать готовые шаблоны и импортировать информация через JSON.
Advanced Custom Fields дает полный контроль над элементами редактирования WordPress и настраиваемыми полями. Достаточно нажатия пары кнопок, чтобы конструктор полей добавил новые на экран. Вставлять их можно куда угодно на сайте, будь то сообщения, пользователи, таксономии, мультимедийный контент и полноценные страницы. Показывать их можно повсюду, в любом файле шаблона.
Плагин обладает интуитивно понятным интерфейсом, мощным функционалом, а также включает в свой состав более 30 вариантов полей.
Следующий плагин, который поможет сформировать пользовательский блок Gutenberg, называется Block Lab. Он разделяет процесс создания блоков на насколько этапов. Сначала нужно добавить блоки через панель администратора WordPress, затем прописать набор произвольных полей и настроить всевозможные параметры. Только после этого можно переходить к этапу создания шаблона блока для темы и выполнения его оформления в определенном стиле.
Block Lab представляет собой бесплатную систему для создания пользовательских блоков Гутенберг. Он обладает простой системой настроек и удобным функционалом, который по силам освоить каждому.
Полезно: JavaScript и Flash – что лучше?
Создания простого блока
Пользовательский блок Gutenberg для сайта WordPress сделают его более интересным и привлекательным для посетителей. Вам не нужно знать программирование и разбираться в JavaScript, чтобы сделать их самостоятельно. В нашей статье подробно описан процесс в простом формате.
Для примера рассмотрим создание простого пользовательского блока, используя плагин Block Lab. Сгенерируем блок уведомлений, который будет отображать важную информацию пользователям сайта. Для этого нужно установить и активировать плагин в админке WordPress, а затем перейти в меню модуля и нажать «Добавить новый». Делается это аналогично добавления любого другого элемента сайта, будь то пост или страница.
Создание пользовательского блока начинается с написания заголовка. Так будет называться ваш будущий элемент для использования на сайте. Далее потребуется определить значения полей:
- оттенок фона, который будет иметь будущая панель уведомлений;
- цвет текста, который будет публиковаться на панели;
- текстовое поле для сообщения, то есть область, которая будет размещаться в редакторе Гутенберг.
Диапазон полей в модуле достаточно обширный, поэтому вы сможете найти именно те, которые подходят для ваших целей. Также можно настроить способ их отображения. Помимо этого, данный плагин позволяет задавать собственную иконку и классифицировать новый блок, что позволит быстрее его найти в момент добавления на страницу.
Актуально: Как стать профессионалом в мире спортивных ставок
Когда все поля настроены, кликаем «Опубликовать» и сохраняем наш элемент. Теперь на экране высветится уведомление с URL-адресом, где следует расположить шаблон в теле выбранного макета. Далее генерируем шаблон блока, для чего создаем файл в редакторе, который вам больше по душе, и сохраняем его в папке «blocks» в каталоге с темой оформления сайта.
Плагин Block Lab обладает развернутой документацией по созданию шаблонов блоков, так как их нужно писать с нуля.
В нашей ситуации предусмотрено только два типа блоков с цветом и сообщением, которые добавляются следующим фрагментом кода:
<div style=”margin:30px auto; padding:5px 10px; background:
hp block_field( ‘background-color’ );
<?php block_field( ‘background-color’ );
// Цвет фона
?>”>
<span style=”color:<?php block_field( ‘text-color’ );
// Цвет текста
?>”><?php block_field( ‘message’ );
// Сообщение
?></span>
</div>
Достаточно записать его в новой файле, который затем закинуть на свой сервер. Пользовательский блок Gutenberg будет сгенерировать и можно добавлять его на страницу. Теперь на вашем ресурсе есть блок уведомлений, которому по силам привлечь внимание посетителей.
Полезно: Как сделать отложенную загрузку JavaScript для ускорения страницы?
Заключение
В нашей статье мы рассмотрели способы, которыми можно сгенерировать пользовательский блок Gutenberg. Теперь вы можете творить их по собственному желанию, воплощая в жизнь все свои фантазии. Устанавливайте один из плагинов и улучшайте свой сайт новыми элементами. А редактор Гутенберг поможет вам в этом.
