Создание в WordPress пользовательских блоков Gutenberg без JavaScript - webOK - Бесплатная биржа фриланса, онлайн-школа, складчина.

Создание в WordPress пользовательских блоков Gutenberg без JavaScript

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

Пользовательские блоки Gutenberg: инструменты

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

Advanced Custom Fields PRO

Коммерческая PRO-версия этого плагина (стоимость которой начинается от 49$ в год) позволяет создавать пользовательские блоки для редактора Gutenberg. Функционал блоков ACF позволяет разработчикам создавать уникальный набор полей и назначать его для пользовательского блока.

Создание в WordPress пользовательских блоков Gutenberg без JavaScript

Этот бесплатный плагин включает в себя сразу несколько пользовательских типов полей (называемых «элементами управления») для блока. Также есть API, предназначенный для создания пользовательских элементов управления.

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

Создание в WordPress пользовательских блоков Gutenberg без JavaScript

Block Lab

В плагине Block Lab создание пользовательских блоков происходит в несколько этапов. Сначала вы добавляете блок в панели администрирования WordPress. Затем нужный набор произвольных полей и настраиваете различные параметры. После чего создайте шаблон блока для темы оформления и задаете его стили.

Создание в WordPress пользовательских блоков Gutenberg без JavaScript

Создание простого пользовательского блока с помощью плагина Block Lab

Для простоты мы рассмотрим создание блока уведомлений с помощью плагина Block Lab. Его можно использовать для отображения важной информации посетителям сайта. Для этого:

  • После установки и активации плагина в панели администрирования WordPress перейдите в меню Block Lab> Добавить новый,чтобы создать новый блок.
  • Начнем с добавления заголовка (панели уведомлений) и трех полей:
  1. Цвет фона – поле выбора цвета фона для панели уведомлений.
  2. Цвет текста — еще одно поле цвета, на этот раз для текста. Оно также будет отображаться в инспекторе блока.
  3. Сообщение – текстовое поле, в котором будет отображаться пользовательское сообщение. Это поле будет размещено в редакторе Gutenberg.

Создание в WordPress пользовательских блоков Gutenberg без JavaScript

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

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

/wp-content/themes/YOURTHEME/blocks/block-notification-bar.php

Создание в WordPress пользовательских блоков Gutenberg без JavaScript

  • Далее нужно создать шаблон блока. Для этого в любом редакторе кода создайте файл 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 пользовательских блоков Gutenberg без JavaScript

Создание в WordPress пользовательских блоков Gutenberg без JavaScript

  • После этого на сайте отобразится панель уведомлений, которая обязательно привлечет внимание пользователя.

Создание в WordPress пользовательских блоков Gutenberg без JavaScript

Что дальше?

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *