Вы хотите создать пользовательский блок WordPress для своего сайта?
Хотя WordPress поставляется с большим количеством основных блоков для создания контента, вам может понадобиться что-то более конкретное для вашего сайта.
В этой статье мы покажем вам два способа создания пользовательских блоков Gutenberg для вашего сайта WordPress.
Зачем создавать пользовательский блок WordPress?
WordPress поставляется с интуитивно понятным редактором блоков, который позволяет легко создавать свои сообщения и страницы, добавляя контент и элементы макета в виде блоков.
По умолчанию WordPress поставляется с несколькими часто используемыми блоками. Плагины WordPress также могут добавлять свои собственные блоки, которые вы можете использовать.
Однако иногда вы можете создать свой собственный пользовательский блок, чтобы сделать что-то конкретное на своем сайте WordPress, потому что вы не можете найти подходящий плагин блоков.
С помощью пользовательских блоков вы можете добавить на свой сайт уникальные функции и функциональность, которые могут быть недоступны в готовых блоках. Это может помочь автоматизировать процессы или сделать создание контента для вашего блога WordPress более эффективным.
Например, вы можете создать пользовательский блок для отображения отзывов, а затем легко вставлять и управлять этим блоком без каких-либо знаний о кодировании.
Давайте посмотрим, как легко создать полностью пользовательский блок в WordPress.
Создание пользовательских блоков для WordPress с помощью WPCode
Если вы новичок и неопытны в программировании, то этот метод для вас.
WPCode — это лучший плагин фрагментов кода WordPress на рынке, который позволяет очень легко и безопасно добавлять пользовательский код на ваш сайт.
Он поставляется с функцией фрагментов блоков, которая позволяет легко создавать пользовательские блоки для вашего сайта WordPress без написания кода.
Во-первых, вам нужно установить и активировать плагин WPCode.
После активации вам нужно перейти на страницу Code Snippets » + Add Snippet на боковой панели администратора WordPress.
Как только вы окажетесь там, нажмите кнопку «Использовать фрагмент» под опцией «Добавить пользовательский код (новый фрагмент)».
Вы перейдете на страницу «Создать пользовательский фрагмент», где вы можете начать с ввода имени пользовательского блока, который вы собираетесь создать.
После этого просто выберите опцию "Фрагмент блокировки" в раскрывающемся меню "Тип кода" в правом углу экрана.
В поле "Предварительный просмотр кода" отобразится кнопка "Редактировать с помощью редактора блоков".
Просто нажмите на эту кнопку, чтобы запустить редактор блоков.
Теперь на вашем экране появится запрос с просьбой сохранить фрагмент кода, чтобы загрузить его в редактор блоков. Просто нажмите кнопку "Да", чтобы двигаться вперед.
Теперь, когда вы находитесь в редакторе блоков, вы можете легко создать пользовательский блок, используя готовые блоки, доступные в меню блоков.
Для этого урока мы создам пользовательский блок для добавления отзывов на ваш сайт.
Сначала вам нужно нажать кнопку "+" в верхнем левом углу экрана, чтобы открыть меню блока.
Отсюда перетащите блок заголовка в интерфейс редактора блоков и назовите его "Отзывы".
Затем вы можете использовать абзац, pull-quote или блоки цитат, чтобы добавить отзывы разных клиентов на вашем сайте.
Вы даже можете использовать изображение, логотип сайта, значки социальных сетей или блоки слоганов сайта для дальнейшей настройки блока отзывов.
Вы также можете настроить размер, цвет текста или цвет фона ваших отзывов на панели блоков в правой части экрана.
Как только вы закончите, не забудьте нажать кнопку «Обновить» в верхней части, чтобы сохранить настройки пользовательского блока.
Затем просто нажмите кнопку «Вернуться к фрагменту WPCode» вверху, чтобы перенаправить на страницу «Редактировать фрагмент».
Как только вы будете там, прокрутите вниз до раздела «Вставка» и выберите режим «Автовставка».
После активации фрагмента кода ваш пользовательский блок будет автоматически добавлен туда, куда вы решите вставить его на свой сайт.
Затем вам нужно настроить местоположение созданного вами пользовательского блока.
Для этого просто щелкните раскрывающееся меню «Местоположение» в разделе «Вставить» и перейдите на вкладку «Страница-Специфический». Отсюда вы можете выбрать опцию «Вставить после публикации», если хотите показать свой блок отзывов после окончания сообщения.
После этого вы также можете настроить количество сообщений, после которых должен появиться блок отзывов. Например, если вы введете число 3, то блок отзывов будет отображаться в каждом третьем посте.
Вы также можете отображать блок между различными абзацами, после отрывков из сообщений и многое другое.
Однако, если вы не нашли местоположение блока, которое ищете, вы также можете создать свое собственное правило условной логики, чтобы добавить пользовательский блок в предпочитаемое вами место.
Для этого прокрутите вниз до раздела "Умная условная логика" и включите переключатель "Включить логику".
Затем необходимо нажать кнопку "Добавить новую группу", чтобы начать создание условного логического правила.
Например, если вы хотите показать только пользовательский блок, созданный на определенной странице или сообщении, вам нужно будет выбрать опцию «URL страницы» в раскрывающемся меню справа.
После этого вы можете оставить выпадающее меню посередине, а затем добавить URL-адрес страницы WordPress по вашему выбору в поле слева.
Вы также можете настроить правило условной логики для отображения пользовательского блока только на определенной странице, зарегистрированных пользователях, на страницах магазина WooCommerce, страницах Easy Digital Downloads, определенных датах и многом другом.
Как только вы закончите, прокрутите назад в верхнюю часть страницы и переключите переключатель «Неактивный» на «Активный». Затем нажмите кнопку "Обновить", чтобы сохранить настройки.
Теперь ваш пользовательский блок будет автоматически добавлен во все места, выбранные для фрагмента блока.
Имейте в виду, что созданный вами пользовательский блок не будет отображаться в качестве опции в меню блоков редактора Gutenberg.
Вам нужно будет настроить параметры блока, посетив страницу фрагментов кода на панели управления WordPress и нажав на ссылку «Редактировать» под фрагментом блока.
Откроется страница "Редактировать фрагмент", где вы сможете легко настроить блок или изменить его местоположение и правила условной логики.
Теперь посетите свой сайт, чтобы просмотреть пользовательский блок, который вы создали в действии.
Создание пользовательских блоков для WordPress с помощью плагина Genesis Custom Code
Если вы ищете бесплатное решение, то этот метод для вас. Имейте в виду, что вам нужно будет ознакомиться с HTML и CSS, чтобы следовать инструкциям в этом методе.
Во-первых, вам нужно установить и активировать плагин Genesis Custom Blocks.
Этот плагин предоставляет разработчикам простые инструменты для быстрого создания пользовательских блоков для своих проектов.
Создайте пользовательский блок для WordPress
Вам нужно перейти в Пользовательские блоки » Добавить новую страницу с левой боковой панели панели администратора.
Это приведет вас на страницу редактора блоков, где вы будете создавать пользовательский блок для своего сайта WordPress.
Отсюда вы можете начать с присвоения имени своему блоку.
Теперь в правой части страницы вы найдете свойства блока, которые вы можете настроить.
Здесь вы можете выбрать значок для своего блока, добавить категорию и добавить ключевые слова.
Slug будет автоматически заполнен в зависимости от имени вашего блока, поэтому вам не придется его менять. Тем не менее, вы можете написать до 3 ключевых слов в текстовом поле «Ключевые слова», чтобы ваш блок можно было легко найти.
Теперь пришло время добавить несколько полей в свой блок. Вы можете добавлять различные типы полей, такие как текст, цифры, адреса электронной почты, URL-адреса, цвета, изображения, флажки, переключатели и многое другое.
Мы добавим 3 поля в наш пользовательский блок отзывов: поле изображения для фотографии рецензентов, текстовое поле для имени рецензентов и текстовое поле для текста отзыва.
Просто нажмите кнопку "+", чтобы вставить первое поле.
Это откроет некоторые опции для поля в правом столбце. Давайте посмотрим на каждый из них.
- Метка поля: Вы можете использовать любое имя по вашему выбору для метки поля. Назовем наше первое поле "Образ рецензентера".
- Имя поля: Имя поля будет сгенерировано автоматически на основе метки поля. Мы будем использовать это имя поля на следующем шаге, поэтому убедитесь, что оно уникально для каждого поля.
- Тип поля: Здесь вы можете выбрать тип поля. Мы хотим, чтобы наше первое поле было изображением, поэтому мы выберем «Изображение» из выпадающего меню.
- Расположение поля: Вы можете решить, хотите ли вы добавить поле в редактор или инспектор.
- Текст справки: Вы можете добавить текст для описания поля. Это не требуется, если вы создаете этот блок для личного использования, но может быть полезно для блогов с несколькими авторами.
Вы также можете увидеть некоторые дополнительные опции в зависимости от выбранного типа поля. Например, если вы выберете текстовое поле, вы получите дополнительные опции, такие как текст-заполнитель и ограничение по символам.
Следуя вышеуказанному процессу, давайте добавим 2 других поля для нашего блока отзывов, нажав кнопку "+".
Если вы хотите изменить порядок полей, вы можете сделать это, перетащив их с помощью ручки в левой части каждой метки поля. Чтобы отредактировать или удалить конкретное поле, необходимо щелкнуть метку поля и отредактировать параметры в правом столбце.
Как только вы закончите, просто нажмите кнопку «Опубликовать» в правой части страницы, чтобы сохранить свой собственный блок Гутенберга.
Создание шаблона пользовательского блока
Хотя вы создали пользовательский блок WordPress на последнем шаге, он не будет работать, пока вы не создадите шаблон блока.
Шаблон блока точно определяет, как информация, введенная в блок, отображается на вашем сайте. Вы можете решить, как это выглядит, используя HTML и CSS или даже PHP-код, если вам нужно запускать функции или делать другие продвинутые вещи с данными.
Существует два способа создания шаблона блока. Если вывод вашего блока находится в HTML/CSS, вы можете использовать встроенный редактор шаблонов.
С другой стороны, если вывод блока требует запуска PHP в фоновом режиме, вам нужно будет вручную создать файл шаблона блока и загрузить его в папку темы.
Использование встроенного редактора шаблонов
На экране редактирования пользовательского блока просто переключитесь на вкладку "Редактор шаблонов" и введите HTML на вкладке разметки.
Вы можете написать HTML и использовать двойные фигурные скобки для вставки значений полей блока.
<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>
После этого просто переключитесь на вкладку CSS, чтобы стилизовать разметку вывода блока.
Вот пример CSS, который мы использовали для нашего пользовательского блока:
.reviewer-name {
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}
.reviewer-image {
float: left;
padding: 0px;
border: 5px solid #eee;
max-width: 100px;
max-height: 100px;
border-radius: 50%;
margin: 10px;
}
.testimonial-text {
font-size:14px;
}
.testimonial-item {
margin:10px;
border-bottom:1px solid #eee;
padding:10px;
}
Ручная загрузка пользовательских шаблонов блоков
Этот метод рекомендуется, если вам нужно использовать PHP для взаимодействия с пользовательскими полями блоков. В основном вам нужно будет загрузить шаблон редактора непосредственно в вашу тему.
Во-первых, вам нужно создать папку на своем компьютере и назвать ее, используя имя пользовательского блока.
Например, наш демонстрационный блок называется Отзывы, поэтому мы создадим папку testimonials.
Далее вам нужно создать файл под названием block.php, используя простой текстовый редактор. Здесь вы поместите HTML/PHP часть вашего шаблона блока.
Вот пример шаблона, который мы использовали для нашего примера:
<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>
Мы использовали функцию block_field() для извлечения данных из поля блока.
Мы завернули поля блока в HTML, который мы хотим использовать для отображения блока. Мы также добавили классы CSS, чтобы мы могли правильно стилизовать блок.
Не забудьте сохранить файл в папке, которую вы создали ранее.
Далее вам нужно создать другой файл с помощью обычного текстового редактора на вашем компьютере и сохранить его как block.css внутри созданной вами папки.
Мы будем использовать этот файл для добавления CSS, необходимого для оформления нашего дисплея блоков. Вот пример CSS, который мы использовали для этого примера:
.reviewer-name {
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}
.reviewer-image {
float: left;
padding: 0px;
border: 5px solid #eee;
max-width: 100px;
max-height: 100px;
border-radius: 50%;
margin: 10px;
}
.testimonial-text {
font-size:14px;
}
.testimonial-item {
margin:10px;
border-bottom:1px solid #eee;
padding:10px;
}
Не забудьте сохранить изменения.
В папке шаблонов блоков теперь будет два файла шаблонов.
После этого вам нужно загрузить папку блокировки на свой сайт с помощью FTP-клиента или приложения File Manager на панели управления учетной записью хостинга WordPress.
После подключения перейдите в папку /wp-content/themes/your-current-theme/.
Если в папке темы нет папки с именем «блоки», создайте новый каталог и назовите его blocks.
Затем вам нужно загрузить папку, созданную на вашем компьютере, в папку blocks.
Вы успешно создали файлы шаблонов вручную для пользовательского блока.
Предварительный просмотр пользовательского блока
Прежде чем вы сможете просмотреть HTML/CSS, вам нужно будет предоставить некоторые тестовые данные, которые можно использовать для отображения образца вывода.
В области администрирования WordPress отредактируйте свой блок и перейдите на вкладку "Предварительный просмотр редактора". Здесь вам нужно ввести некоторые фиктивные данные.
Эти данные не будут частью вашего пользовательского блока и будут использоваться только для предварительного просмотра изменений, внесенных с помощью HTML и CSS.
После добавления данных не забудьте нажать кнопку "Обновить", чтобы сохранить изменения.
Если вы не нажмете кнопку «Обновить», вы не сможете увидеть предварительный просмотр пользовательского блока.
Теперь вы можете переключиться на вкладку "Предварительный просмотр", чтобы увидеть, как ваш блок будет выглядеть в интерфейсе вашего сайта WordPress.
Если у вас все хорошо, вы можете снова обновить свой блок, чтобы сохранить любые несохраненные изменения.
Использование пользовательского блока в WordPress
Теперь вы можете использовать свой пользовательский блок в WordPress, как и любой другой блок.
Просто отредактируйте любое сообщение или страницу, где вы хотите использовать этот блок. Затем нажмите кнопку "+" в верхнем левом углу, чтобы открыть меню блока.
Отсюда найдите свой блок, введя его имя или ключевые слова, а затем добавьте его на страницу.
После вставки пользовательского блока в область содержимого вы увидите поля блока, созданные ранее.
Вы можете заполнить поля блока по мере необходимости.
Когда вы перейдете от пользовательского блока WordPress к другому, редактор автоматически покажет предварительный просмотр вашего блока в реальном времени.
Теперь вы можете сохранить свою страницу и просмотреть, чтобы увидеть ваш пользовательский блок в действии на вашем сайте.
Мы надеемся, что эта статья помогла вам узнать, как легко создавать пользовательские блоки Gutenberg для вашего сайта WordPress.
