Как создать собственный блок Гутенберга в 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, весь контент, изображения и авторство принадлежит автору

Как использовать SMTP-сервер для отправки электронных писем WordPress

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

Как установить WordPress на других языках

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

Как добавить новый плагин страницы Facebook в WordPress

Facebook Like Box, также известный как фан-бокс Facebook, стал обязательным элементом для многих веб-сайтов. Недавно Facebook заменил этот виджет новым плагином

Ускорение WordPress: как мы оптимизировали производительность List25 на 256%

Вы хотите ускорить работу своего сайта WordPress? Хотите узнать о приемах оптимизации WordPress, которые помогут вам сократить время загрузки вашего сайта?