Java, UX, HTML, CSS, WEB-design

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

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

Название: Создание пользовательских блоков WordPress Gutenberg без JavaScript . Краткое описание: [ad_1] ⭐ Когда редактор блоков Gutenberg был выпущен как . Дата публикации: 22.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

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

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

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

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

К счастью, сообщество разработчиков WordPress активизировалось с помощью инструментов, которые позволяют обойти требование React/JavaScript. Они позволяют вам визуально создавать собственные настраиваемые блоки и внедрять их в существующую тему WordPress.

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

НЕОГРАНИЧЕННЫЕ ЗАГРУЗКИ: более 500 000 ресурсов WordPress и дизайна

Подпишитесь на Envato Elements и получите неограниченное количество загрузок, начиная всего с $16,50 в месяц!

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

На рынке появился ряд инструментов, которые позволяют веб-дизайнерам создавать собственные блоки Gutenberg без JavaScript. Имейте в виду, они все еще требуют, по крайней мере, немного знание кода (HTML, CSS и PHP) или, по крайней мере, того, как работает тема WordPress. Это связано с тем, что каждый вариант требует, чтобы вы создали файл PHP с блочным кодом и, при желании, добавили некоторые стили, соответствующие вашему веб-сайту.

Тем не менее, каждый из приведенных ниже плагинов WordPress использует настраиваемые поля для создания контента. Пользовательские поля существовали задолго до появления Гутенберга. На самом деле, уже давно стало обычной практикой использовать их как способ обойти ограничения старого классического редактора.

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

Расширенные настраиваемые поля PRO

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

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

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

Расширенные настраиваемые поля PRO

Ленивые блоки — конструктор блоков Гутенберга

Lazy Blocks — это бесплатный плагин WordPress, который предлагает визуальный способ создания пользовательских блоков. Как и ACF, плагин включает в себя ряд настраиваемых типов полей (называемых «элементами управления») для вашего блока. Текст, изображение, файл, классический редактор, палитра цветов и поля повторителя — это лишь часть того, что доступно. Также есть API для создания собственных настраиваемых элементов управления.

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

Ленивые блоки

Блок Лаборатория

С Block Lab создание пользовательских блоков — это трехэтапный процесс. Во-первых, это добавление блока в админку, что аналогично добавлению любой другой страницы или публикации. Затем добавьте желаемое сочетание настраиваемых полей (текст, изображение, переключатели/флажки, URL-адреса и т. д.) и настройте параметры, такие как собственный значок. В-третьих, создайте шаблон блока для своей темы и настройте его по своему вкусу. Оттуда ваш пользовательский блок готов к использованию.

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

Блок Лаборатория

Простой пользовательский блок с использованием Block Lab

Для простоты проведем тест-драйв с помощью Block Lab. Однако не позволяйте этому помешать вам попробовать другие варианты, поскольку они могут многое предложить.

Теперь о нашем примере. Предположим, у вас есть веб-сайт WordPress с установленным и активированным плагином Block Lab.

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

1. Перейдите к Лаборатория блоков > Добавить новый для создания нашего нового блока.

2. Начнем с добавления заголовка (Панель уведомлений) и трех полей:

  • Фоновый цвет — Поле цвета, которое позволит нам выбрать фон для нашей панели уведомлений. Мы назначим его для отображения в области инспектора редактора блоков, которая находится на правой боковой панели.
  • Цвет текста — Еще одно поле Color, на этот раз для нашего текста. Это также будет отображаться в Инспекторе.
  • Сообщение – Текстовое поле, в котором будет отображаться наше пользовательское сообщение. Это поле будет размещено в главной области редактора Гутенберга.

Пользовательское поле в Block Lab.

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

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

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

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

Уведомление в Block Lab.

4. Далее нам нужно создать шаблон блока. Итак, запустите редактор кода по вашему выбору и создайте новый файл с именем block-notification-bar.php и сохранить в новый /blocks/ папка в вашей теме.

Шаблоны блоков должны быть написаны с нуля. Но не волнуйтесь, это не слишком сложно! Block Lab задокументировала, как это сделать, с большим количеством примеров.

В нашем случае у нас всего два типа блоков: Цвет (background-color; text-color) и Текст (message). Используя документацию в качестве руководства, мы добавим этот код в наш собственный шаблон блока:

Убедитесь, что сохранить файл и загрузить на свой веб-сервер когда сделано.

5. Наш пользовательский блок создан! Вот и все. Теперь мы можем добавить его на страницу.

Блок панели уведомлений в Gutenberg.

Редактирование блока панели уведомлений.

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

Блок панели уведомлений на передней панели веб-сайта.

Идти дальше

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

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

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

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

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

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»