Создание в WordPress пользовательских блоков Gutenberg без JavaScript
Создание пользовательских блоков в редакторе Gutenberg – это возможность расширить функциональность вашего сайта WordPress без сложных настроек и написания кода. В статье подробно объясняется, как добавлять кастомизированные блоки с помощью стандартных инструментов редактора, избавляясь от необходимости в JavaScript.
Вы узнаете, как легко адаптировать Gutenberg под свои нужды, повысив удобство работы и улучшив пользовательский опыт. Пошаговые инструкции и примеры помогут вам создать блоки с минимальными усилиями.
Пользовательские блоки Gutenberg: инструменты
Каждый из плагинов WordPress, рассматриваемый в этой статье, использует произвольные поля. Их использование обеспечивают гибкость относительно типов контента, который можно создавать.
Advanced Custom Fields PRO
Коммерческая PRO-версия этого плагина (стоимость которой начинается от 49$ в год) позволяет создавать пользовательские блоки для редактора Gutenberg. Функционал блоков ACF позволяет разработчикам создавать уникальный набор полей и назначать его для пользовательского блока.
Этот бесплатный плагин включает в себя сразу несколько пользовательских типов полей (называемых «элементами управления») для блока. Также есть API, предназначенный для создания пользовательских элементов управления.
Плагин также позволяет ограничить размещение блоков определенным типов записей, импортировать данные через JSON и включает в себя пользовательские шаблоны.
Block Lab
В плагине Block Lab создание пользовательских блоков происходит в несколько этапов. Сначала вы добавляете блок в панели администрирования WordPress. Затем нужный набор произвольных полей и настраиваете различные параметры. После чего создайте шаблон блока для темы оформления и задаете его стили.
Создание простого пользовательского блока с помощью плагина Block Lab
Для простоты мы рассмотрим создание блока уведомлений с помощью плагина Block Lab. Его можно использовать для отображения важной информации посетителям сайта. Для этого:
- После установки и активации плагина в панели администрирования WordPress перейдите в меню Block Lab> Добавить новый,чтобы создать новый блок.
- Начнем с добавления заголовка (панели уведомлений) и трех полей:
- Цвет фона – поле выбора цвета фона для панели уведомлений.
- Цвет текста - еще одно поле цвета, на этот раз для текста. Оно также будет отображаться в инспекторе блока.
- Сообщение – текстовое поле, в котором будет отображаться пользовательское сообщение. Это поле будет размещено в редакторе Gutenberg.
Используемый нами плагин позволяет выбирать пользовательскую иконку и классифицировать создаваемый блок. Это поможет найти его, когда нужно будет добавить его на страницу сайта.
- После настройки полей нажмите кнопку «Опубликовать», чтобы сохранить созданный блок. После чего появится сообщение с URL, по которому необходимо разместить шаблон в используемой теме оформления:
/wp-content/themes/YOURTHEME/blocks/block-notification-bar.php
- Далее нужно создать шаблон блока. Для этого в любом редакторе кода создайте файл block-notification-bar.php и сохраните его в новой папке /blocks/ в каталоге используемой темы оформления.
Шаблоны блоков должны быть написаны с нуля. Плагин Block Lab предоставляетдокументацию по их созданию.
В данном случае есть только два типа блоков: Color (background-color; text-color) и Text (message). Добавим приведенный ниже код в шаблон пользовательского блока:
<div style="margin:30px auto; padding:5px 10px; background:<?php block_field( 'background-color' ); // Цвет фона (Поле цвета) ?>">
<span style="color:<?php block_field( 'text-color' ); // Text Color (Color Field) ?>"><?php block_field( 'message' ); // Сообщение (Поле текста) ?></span>
</div>Сохраните файл и загрузите его на свой сервер.
- Пользовательский блок уже создан. Теперь можно добавить его на страницу сайта.
- После этого на сайте отобразится панель уведомлений, которая обязательно привлечет внимание пользователя.
Что дальше?
Теперь, когда мы рассмотрели процесс создания пользовательских блоков, пришло время поэкспериментировать! Установите один из плагинов, описанных в этой статье, и улучшите свой WordPress-сайт.
Комментарии