Как создать собственный блок Гутенберга в WordPress (простой способ)

/

Вы хотите создать собственный блок Гутенберга для своего сайта WordPress? После обновления WordPress 5.0 вам необходимо использовать блоки для создания контента в новом редакторе блоков WordPress.

WordPress поставляется с несколькими полезными блоками, которые вы можете использовать при написании контента. Многие плагины WordPress также имеют свои собственные блоки, которые вы можете использовать.

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

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

В этом пошаговом руководстве мы покажем вам простой способ создать собственный блок WordPress для Гутенберга.

Создание настраиваемого блока WordPress для Гутенберга

Примечание. Эта статья предназначена для пользователей среднего уровня. Вам нужно знать HTML и CSS, чтобы создавать собственные блоки Гутенберга.

Шаг 1. Начало работы

Первое, что вам нужно сделать, это установить и активировать плагин Block Lab.

Это плагин WordPress, который позволяет без особых хлопот создавать настраиваемые блоки из панели администратора.

Плагин Block Lab для WordPress

Чтобы установить плагин, вы можете следовать нашему руководству для начинающих о том, как установить плагин WordPress.

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

Шаг 2. Создайте новый блок

Для этого урока мы создадим блок «отзывов».

Сначала перейдите в Block Lab »Добавить новое на левой боковой панели вашей панели администратора.

На этой странице вам нужно дать имя своему блоку. Вы можете написать любое имя по вашему выбору в текстовом поле «Введите здесь имя блока».

Введите имя настраиваемого блока

Назовем наш настраиваемый блок: Testimonials.

В правой части страницы вы найдете свойства блока. Здесь вы можете выбрать значок для своего блока и выбрать категорию блока в раскрывающемся списке Категория.

Слаг будет автоматически заполнен на основе названия вашего блока, поэтому вам не нужно его менять. Однако вы можете написать до 3 ключевых слов в текстовом поле «Ключевые слова», чтобы ваш блок можно было легко найти.

Настраиваемые свойства блока

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

Мы добавим 3 поля в наш настраиваемый блок отзывов: поле изображения для изображения рецензента, текстовое поле для имени рецензента и поле textarea для текста отзыва.

Нажмите кнопку + Добавить поле, чтобы вставить первое поле.

Параметры поля изображения

Это откроет некоторые возможности для поля. Давайте посмотрим на каждую из них.

  • Метка поля: вы можете использовать любое имя по вашему выбору для метки поля. Назовем наше первое поле изображением обозревателя.
  • Имя поля: имя поля будет автоматически создано на основе метки поля. Мы будем использовать это имя поля на следующем шаге, поэтому убедитесь, что оно уникально для каждого поля.
  • Тип поля: Здесь вы можете выбрать тип поля. Мы хотим, чтобы наше первое поле было изображением, поэтому выберем Изображение в раскрывающемся меню.
  • Расположение поля: вы можете решить, хотите ли вы добавить поле в редактор или в инспектор.
  • Текст справки: вы можете добавить текст для описания поля. Это не требуется, если вы создаете этот блок для личного использования.

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

Вы можете нажать кнопку «Закрыть поле», когда закончите с полем изображения.

Следуя описанному выше процессу, давайте добавим еще 2 поля для нашего блока отзывов, нажав кнопку + Добавить поле.

Окончательные поля настраиваемого блока

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

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

Когда вы закончите, нажмите кнопку «Опубликовать» в правой части страницы, чтобы сохранить свой собственный блок Гутенберга.

Шаг 3. Создайте шаблон блока

Хотя вы создали собственный блок WordPress на последнем шаге, он не будет работать, пока вы не создадите шаблон блока с именем block-testimonials.php и не загрузите его в папку с текущей темой.

Создать шаблон блока

Файл шаблона блока сообщит плагину, как отображать поля вашего блока внутри редактора. Плагин будет искать файл шаблона и затем использовать его для отображения содержимого блока.

Если у вас нет этого файла, будет отображаться сообщение об ошибке «Файл шаблона / block-testimonials.php не найден».

Создадим файл шаблона нашего блока.

Сначала создайте папку на рабочем столе и назовите ее блоками. Вы создадите файл шаблона блока внутри этой папки, а затем загрузите его в текущий каталог тем WordPress.

Чтобы создать файл шаблона, вы можете использовать текстовый редактор, например Блокнот.

Каждый раз, когда вы добавляете новое поле в свой настраиваемый блок, вам необходимо добавить следующий PHP-код в файл шаблона блока:

<?php
block_field( 'add-your-field-name-here' );
?>

Просто не забудьте заменить add-your-field-name-here на имя поля.

Например, имя нашего первого поля - изображение-обозреватель, поэтому мы добавим в файл шаблона следующую строку:

<?php
block_field( 'reviewer-image' );
?>

Все просто, не правда ли? Проделаем то же самое с остальными нашими полями:

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

Затем мы добавим несколько HTML-тегов в приведенный выше код для стилизации.

Например, вы можете обернуть изображение рецензента внутри тега img для отображения изображения. В противном случае WordPress будет отображать URL-адрес изображения, который вам не нужен, верно?

Вы также можете добавить имена классов в свои HTML-теги и обернуть свой код внутри контейнера div, чтобы стилизовать содержимое блока (что мы и сделаем на следующем шаге).

Итак, вот наш последний код для нашего шаблона блока:

<div class="testimonial-block clearfix">
    <div class="testimonial-image">
        <img src ="<?php block_field( 'reviewer-image' ); ?>">
    </div>
    <div class="testimonial-box">
        <h4><?php block_field( 'reviewer-name' ); ?></h4>
        <p><?php block_field( 'testimonial-text' ); ?></p>
    </div>
</div>

Наконец, назовите файл block-testimonials.php и сохраните его в папке блоков.

Шаг 4: создайте свой собственный блок

Хотите стилизовать свой собственный блок? Вы можете сделать это с помощью CSS.

Откройте текстовый редактор, например Блокнот, и добавьте следующий код:

.testimonial-block {
    width: 100%;
    margin-bottom: 25px;
}

.testimonial-image {
    float: left;
    width: 25%;
    padding-right: 15px;
}

.testimonial-box {
    float: left;
    width: 75%;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

После этого назовите файл block-testimonials.css и сохраните его в папке блоков.

Шаг 5. Загрузите файл шаблона блока в папку темы

Теперь давайте загрузим папку блоков, содержащую наш файл шаблона пользовательского блока, в папку темы WordPress.

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

После подключения перейдите в папку / wp-content / themes /. Отсюда вам нужно открыть папку с текущей темой.

Войдите в папку с темой через FTP

Теперь загрузите папку блоков, содержащую файл шаблона блока и файл CSS, в каталог вашей темы.

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

Примечание. Плагин Block Lab позволяет создавать блоки для конкретной темы. Если вы измените тему WordPress, вам необходимо скопировать папку блоков в новую папку темы.

Шаг 6: проверьте свой новый блок

Пришло время протестировать наш блок пользовательских отзывов. Вы можете сделать это, перейдя в Pages »Add New, чтобы создать новую страницу.

Затем щелкните значок «Добавить блок» (+) и найдите блок «Отзывы». Найдя его, щелкните по нему, чтобы добавить настраиваемый блок в редактор страницы.

Добавить настраиваемый блок в редактор страницы

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

Как только вы закончите, вы можете просмотреть или опубликовать страницу, чтобы проверить, правильно ли она работает.

Это все! Вы успешно создали свой первый настраиваемый блок WordPress для своего сайта.

Знаете ли вы, что можно сэкономить время с помощью многоразовых блоков в редакторе? Ознакомьтесь с нашим руководством о том, как легко создавать повторно используемые блоки в редакторе блоков WordPress и использовать их на других веб-сайтах.

Вы также можете ознакомиться с нашим руководством о том, как создать собственную тему WordPress без написания кода.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как добавить рамку iframe вокруг встраивания видео

Вы хотите добавить рамку iframe вокруг встраиваемого видео? Недавно пользователь спросил нас, как добавить рамку вокруг своих видео в WordPress. Поскольку

13 способов восстановить продажи брошенных тележек WooCommerce

Вы ищете способы восстановить продажи брошенных тележек WooCommerce? В среднем от 60 до 80% людей, которые «добавляют в корзину», не покупают. Это означает,

Как разбивать комментарии на страницы в WordPress (шаг за шагом)

Вы заметили, что сообщения в вашем блоге с большим количеством комментариев загружаются медленнее, чем другие сообщения? Это потому, что загрузка

Как изменить цвет текста в WordPress (3 простых метода)

Недавно один из наших читателей спросил, есть ли простой способ изменить цвет текста в WordPress? Ответ положительный. Вы можете легко изменить цвет