←Назад к блогу

Создание блоков Gutenberg с помощью Advanced Custom Fields (ACF) и LazyBlocks: Сравнительное руководство

2023-04-02•4 мин чтения

Gutenberg, редактор блоков WordPress, произвел революцию в способах создания и дизайна контента в WordPress. Advanced Custom Fields (ACF) и LazyBlocks — два популярных плагина, которые расширяют функциональность Gutenberg, позволяя пользователям создавать пользовательские блоки. В этой статье мы обсудим процесс создания блоков Gutenberg с помощью обоих плагинов и проанализируем их плюсы и минусы.

1.- Advanced Custom Fields (ACF)

ACF — популярный плагин WordPress, который позволяет пользователям добавлять пользовательские поля к своим записям, страницам и пользовательским типам записей. Он также поддерживает создание пользовательских блоков Gutenberg с помощью удобного интерфейса.

Создание блоков с помощью ACF:

  1. Установите и активируйте плагин ACF.
  2. Добавьте callback-функцию my_acf_block_render_callback() в файл functions.php вашей темы:
/**
 * Callback для сопоставления имени блока с шаблоном.
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // преобразуем имя ("acf/slider") в удобный для пути ярлык ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // включаем часть шаблона из папки "template-parts/block"
    if ( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
    }
}
  1. Зарегистрируйте блок в файле functions.php вашей темы с помощью acf_register_block_type().
/**
 * Пример регистрации блока ACF.
 */
function my_acf_block_init() {
    // Проверяем, существует ли функция, чтобы избежать ошибок.
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-nice-block-name',
            'title'             => __('Это мой первый блок'),
            'description'       => __('Это пользовательский блок, созданный с помощью ACF.'),
            'render_template'   => 'path/to/your/block/template.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array('nice', 'block', 'name'),
        ));
    }
}
add_action('acf/init', 'my_acf_block_init');
  1. В панели управления WordPress перейдите в раздел Пользовательские поля > Добавить новый.
  2. Создайте новую группу полей, добавьте необходимые поля для блока и настройте их параметры.
  3. В настройках группы полей в разделе «Местоположение» выберите «Блок» для правила и установите его значение «равно» заголовку вашего блока (например, «Это мой первый блок»).
  4. Создайте новый PHP-файл в каталоге template-parts/block вашей темы, который будет служить файлом шаблона для вашего пользовательского блока. Используйте соглашение об именовании content-{slug}.php, где {slug} — это удобный для пути ярлык, полученный из имени блока. Например, если имя вашего блока «acf/your-block-name», создайте файл шаблона с именем content-your-block-name.php.
  5. В только что созданном файле шаблона напишите код PHP и HTML, который будет отображать блок. Начните с открывающего тега PHP и используйте функции ACF get_field() или the_field() для получения и отображения значений пользовательских полей, которые вы добавили в блок. Эти функции позволяют получить доступ к данным, хранящимся в ваших пользовательских полях, и вывести их в шаблоне блока.
/**
 * Пример шаблона блока.
 */
<?php
// Получаем значения пользовательских полей
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- Выводим HTML-структуру блока -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

Плюсы ACF:

  • Удобный интерфейс.
  • Широкий выбор типов полей.
  • Интегрируется с другими функциями WordPress, такими как пользовательские типы записей и таксономии.
  • Обширная документация и большое пользовательское сообщество.

Минусы ACF:

  • Может быть сложным для пользователей с ограниченным опытом программирования.
  • Требует PRO-версии для некоторых расширенных функций.
  • Проблемы с производительностью могут возникнуть при большом количестве пользовательских полей.

2.- LazyBlocks

LazyBlocks — это визуальный конструктор блоков Gutenberg, который позволяет создавать пользовательские блоки Gutenberg с помощью простого интерфейса перетаскивания.

Создание блоков с помощью LazyBlocks:

  1. Установите и активируйте плагин LazyBlocks.
  2. В панели управления WordPress перейдите в раздел LazyBlocks > Добавить новый.
  3. Введите имя и ярлык блока, затем начните добавлять элементы управления (поля) с помощью интерфейса перетаскивания.
  4. Настройте вывод блока, выбрав между шаблоном PHP, HTML или Handlebars.
  5. Добавьте код вывода блока в предоставленный редактор или создайте отдельный файл шаблона в вашей теме. Ниже приведены преимущества каждого варианта:
    • PHP: Обеспечивает полную гибкость и контроль над выводом вашего блока, а также позволяет использовать любую функциональность PHP для настройки внешнего вида и поведения вашего блока.
    • HTML: Предлагает простой и понятный способ определения вывода вашего блока без работы с кодом PHP. Идеально подходит для пользователей, которые предпочитают работать только с HTML и CSS.
    • Шаблон Handlebars: Сочетает простоту вывода HTML с мощью условной логики и циклов, что делает его универсальным вариантом для пользователей, которым требуется больший контроль над выводом своего блока без написания PHP.
  6. Сохраните блок, и он будет доступен в редакторе Gutenberg.

Плюсы LazyBlocks:

  • Интуитивно понятный интерфейс перетаскивания.
  • Не требуется программирование для базовых блоков.
  • Работает с пользовательскими типами записей и пользовательскими таксономиями.
  • Доступно приличное количество типов полей.

Минусы LazyBlocks:

  • Менее полная документация по сравнению с ACF.
  • Ограниченное количество типов полей по сравнению с ACF.
  • Меньше функций и опций по сравнению с ACF.

Категории:

WordPressGutenberg