Хотите создать простой плагин Gutenberg block для WordPress?
Разве мы все не любим WordPress? Платформа добилась огромного успеха с момента своего создания, и разработчики постоянно добавляли новые функции. Одной из выдающихся особенностей последнего времени является Редактор блоков WordPress, кодовое название Гутенберг.
Gutenberg предлагает пользователям WordPress новый захватывающий способ публикации контента и настройки своего веб-сайта. Он невероятно прост в использовании, что является отличной новостью как для новичков, так и для разработчиков. Если вы используете последнюю версию WordPress, вы уже знакомы с редактором блоков и концепцией блоков.
По умолчанию блочный редактор WordPress включает в себя определенные блоки, позволяющие добавлять текст, изображения, цитаты, аудио, видео, интеграции и т.д. Кроме того, существует множество дополнений для Gutenberg, позволяющих без особых усилий расширить возможности редактора.
Однако у вас может быть особая потребность, которая побуждает вас создавать собственные настраиваемые блоки. В этой статье мы за несколько абзацев покажем вам, как создавать собственные блоки Гутенберга для удовлетворения ваших конкретных потребностей.
Без дальнейших церемоний, давайте начнем, потому что есть чему поучиться.
Но сначала, если вы никогда не устанавливали WordPress, узнайте... Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге
Тогда вернемся к тому, почему мы здесь.
Что вообще такое блоки?
Блоки обрабатывают абзацы, заголовки, мультимедиа и встраивания как компоненты, которые, будучи соединены вместе, составляют контент, хранящийся в базе данных WordPress, заменяя традиционную концепцию текста мультимедиа и встроенными шорткодами.
В прошлом пользователи WordPress полагались на текст и шорткоды для добавления контента. Гутенберг использует блоки. Новый редактор позволяет использовать блочные блоки для создания богатых и гибких макетов, которыми легко управлять. В настоящее время вы можете использовать редактор блоков для постов и страниц, но есть активные планы поддержка полного редактирования сайта в будущем.
Работа с блоками делает создание контента в WordPress весьма освежающим. Кроме того, многие существующие плагины поддерживают новый редактор и поставляются с готовыми к использованию блоками, которые упрощают добавление контента из указанных плагинов. Редактор позволяет перетаскивать блоки на страницу, чтобы вы могли быстрее нажать кнопку публикации.
Так же, как конструктор страниц, интегрированный непосредственно в WordPress.
Если вы знакомы с конструкторы страниц, такие как Elementor, вы, вероятно, знакомы с концепцией создания страниц методом перетаскивания. Gutenberg — это попытка полностью интегрировать создание веб-сайтов с помощью перетаскивания в ядро WordPress.
Итак, давайте перейдем к лучшей части сегодняшней статьи. Давайте узнаем, как создать простой блок. Вы можете сделать это вручную или с помощью плагинов, таких как Пользовательские блоки Genesis (ранее БлокЛаб), Ленивые блоки ou ACF. Создание пользовательских блоков немного технически сложно, поэтому для целей сегодняшней статьи мы будем использовать плагин.
Как создать пользовательский блок (используя genesis Custom Blocks)
Проще пойти по пути плагинов, потому что создание пользовательских блоков Gutenberg с нуля требует хорошего понимания HTML, CSS, PHP и, что наиболее важно, javaScript. Вам также необходимо понимать React.
В следующем разделе мы будем использовать пользовательские блоки Genesis. Его бесплатная версия доступна в официальном репозитории WordPress, что означает, что мы можем установить его в панели администратора WordPress.
Установите пользовательские блоки Genesis
Войдите в панель администратора WordPress и перейдите к Расширения> Добавить, как показано ниже.
Затем введите " Пользовательские блоки Genesis в поле поиска ключевых слов и щелчок на кнопке установить сейчас
После этого, выбрать плагин для начала
Далее давайте создадим новый пользовательский блок. Для наглядности давайте создадим пользовательский призыв к действию (CTA), который будем добавлять в конец каждой статьи, которую мы публикуем. Самое приятное то, что вы можете повторно использовать блоки, чтобы избавить вас от создания одних и тех же блоков снова и снова.
В меню администратора WordPress перейдите к Пользовательские блоки > Добавить новый, как мы подчеркнем ниже.
Это приведет вас на следующую страницу, где вы найдете все варианты создания пользовательского блока (в нашем случае CTA):
Вот несколько слов, чтобы объяснить, что вы видите на скриншоте выше. Начиная сверху, у вас есть это.
Основная область редактирования:
- строитель – Вероятно, вы потратите здесь много времени на разработку своего пользовательского блока. в Конструктор позволяет добавлять заголовок, поля, слаг, ключевые слова, категорию и предварительно просматривать свой пользовательский блок. Вы научитесь добавлять поля.
- Редактор шаблонов – После разработки пользовательского блока (т. е. добавления различных полей) вам нужно будет создать шаблон блока (читай, добавить код) в редактор моделей. Мы узнаем больше, когда будем разрабатывать CTA.
- Предварительный просмотр редактора — Это позволяет предварительно просмотреть пользовательский блок в редакторе блоков WordPress.
- Предварительный просмотр интерфейса - Здесь вы можете просмотреть, как пользовательский блок будет выглядеть на вашем сайте.
- EditorField - Поля будут отображаться в основной области редактирования записи или страницы (точно так же, как вы видите свои обычные записи в редакторе WordPress).
- ИнспекторФилд – Отображает поле на правой боковой панели под Инспектором блоков.
Параметры боковой панели
- Слизняк - Он заполняется автоматически на основе заголовка, который вы даете своему пользовательскому блоку. Это важно при создании блочной модели.
- Значок – Эта опция позволяет добавить значок в ваш пользовательский блок.
- Категория - Это позволяет вам назначить категорию для вашего пользовательского блока. Вы можете классифицировать свой пользовательский блок, используя одну из встроенных категорий, или вы можете создать совершенно новую категорию.
- Ключевые слова - Добавьте до трех связанных ключевых слов в свой пользовательский блок, чтобы люди могли легко найти его в средстве выбора блоков.
- Открывайте поля блока в модальном окне вместо рендеринга на месте – Включите, если хотите открывать поля в модальном режиме. Это полезно, если у вас есть пользовательский блок с большим количеством полей.
- Подать Типы - Установите флажок (я), чтобы ваш пользовательский блок отображался для каждого типа сообщений. Например, если вы снимите флажок «Сообщения», блокировка не будет отображаться ни для каких сообщений.
Создать пользовательский блок
Теперь, когда вы лучше понимаете пользовательский интерфейс и то, что делает каждая его часть, давайте приступим к работе.
В Строитель - Строитель -, дайте своему пользовательскому блоку соответствующий заголовок. Мы собираемся выбрать CTA для этого, как показано ниже.
Прежде чем добавлять новые поля, давайте добавим значок, ключевые слова и выберем категорию для пользовательского блока, как показано ниже.
Для этого давайте добавим несколько полей в наш пользовательский блок. В нашем примере CTA-блока мы добавим всего три поля в следующем порядке: изображение, некоторый текст и поле файла, которое позволяет людям загружать электронную книгу.
Читайте также: 5 WooCommerce плагины для массового редактирования ваших продуктов
Добавление полей блока
В разделе Поля редактора, Cliquez сюр значок плюса (+) чтобы добавить первое поле, как показано ниже.
Далее добавим поле изображения. На боковой панели установите Тип поля включен Фото товара и установите другие параметры. Также обратите внимание на слаг, так как мы будем использовать его при создании блочной модели.
После этого таким же образом добавьте текстовое и файловое поля.
Переключить на Редактор шаблонов > Разметка.
Здесь мы разработаем, как наш пользовательский блок будет выглядеть на вашем сайте. Редактор моделей принимает HTML, CSS и слаги полей (которые вы должны поместить между двумя квадратными скобками). Если вам нужно использовать язык PHP, вы можете создать шаблон, используя Метод моделирования PHP
Не волнуйтесь, это легко.
В редактор моделей, под вкладка разметки, добавьте следующий код:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Когда вы будете писать свой код, вы заметите, что редактор моделей Автозаполнение слагов полей (например, {{image-field}} ) для вас.
Затем перейдите в раздел CSS чтобы добавить простые стили с помощью следующего кода:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
Вы можете настроить эти стили по своему усмотрению,
Cliquez-сюр- публиковать :
Чтобы увидеть свой новый пользовательский блок в действии, вернитесь в панель администратора WordPress и создайте запись, как обычно, нажмите кнопку Плюс (+) чтобы добавить новый блок и выбрать новый пользовательский блок, как показано ниже.
Затем заполните свой пользовательский блок по желанию и опубликуйте свое сообщение:
Теперь, если мы проверим наш новый пользовательский блок CTA во внешнем интерфейсе, это то, что мы увидим.
Наш собственный призыв к действию находится прямо здесь! Не беспокойтесь о наших возможностях в области дизайна — конечно, в реальной жизни вам потребуется немного больше времени на настройку блока. Но мы надеемся, что вы узнали что-то полезное из этого.
Другие рекомендуемые ресурсы
Мы также приглашаем вас ознакомиться с указанными ниже ресурсами, чтобы получить дополнительную информацию о вашем веб-сайте и блоге.
- 10 партнерских плагинов WordPress для создания программы
- Как добавить несколько столбцов в WordPress
- Как добавить несколько столбцов в WordPress
- Использование различных фонов WordPress
- Elementor: как создать анимацию при наведении
Заключение
Создание пользовательских блоков — непростая задача. Но с плагинами WordPress, такими как Genesis Custom Blocks и Lazy Blocks, среди прочих, вы можете создавать их, независимо от того, новичок вы или нет. От самых простых до самых сложных, в зависимости от ваших потребностей.
На этом всё в этой статье, посвящённой добавлению пользовательских шрифтов на сайт WordPress. Мы рекомендуем вам попробовать. Если у вас есть какие-либо вопросы или предложения, пожалуйста, сообщите нам об этом в комментариях. Комментарии.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
В то же время, поделитесь этой статьей в разных социальных сетях.
...