Настройка полей ACF для Elementor / Gutenberg

264

13:39

31.10.2025 / обновлено: 17.11.2025

В 2025 году сочетание плагина Advanced Custom Fields с визуальным конструктором Elementor и редактором Gutenberg позволяет создавать динамические шаблоны, гибкие дизайны и мощный контент‑менеджмент без постоянного написания PHP‑шаблонов.

1. Подготовка: установка и настройка

Убедитесь, что установлены и активированы плагины ACF (версия 5+) и Elementor Pro (если нужен доступ к динамическим тегам и шаблонам). Также убедитесь, что WordPress работает с версией PHP и темой, поддерживающей шаблоны.

2. Создание полей ACF

В админ‑панели создайте группу полей (например “Информация о проекте”) и добавьте следующие поля:

Название проекта: project_title (текст)
Описание проекта: project_description (текст)

В разделе Правила местонахождения задайте правило: например, Тип записи — равно — Страница. Сохраните группу.

3. Вывод полей в Elementor через динамические теги

Перейдите в раздел редактирования страницы/записи/шаблона с помощью Elementor. В макете добавьте виджет, например Заголовок или Изображение. В настройках этого виджета:

Нажмите иконку Динамические теги.
Выберите “ACF”.
Повторно кликните на этом поле и в параметре Key выберите имя поля, например project_title или project_description.

Настройка полей ACF для Elementor / Gutenberg

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

4. Использование Gutenberg блоков и ACF

Если вы предпочитаете редактор Gutenberg, ACF позволяет регистрировать собственные блоки (ACF Blocks) с выводом данных полей.

// Пример регистрации блока ACF
add_action('acf/init', function() {
    if( function_exists('acf_register_block_type') ) {
        acf_register_block_type(array(
            'name'              => 'project-info',
            'title'             => 'Информация о проекте',
            'render_template'   => 'template-parts/blocks/project-info.php',
            'category'          => 'widgets',
            'icon'              => 'admin-tools',
            'keywords'          => array('project','acf'),
        ));
    }
});

В файле template-parts/blocks/project-info.php выведите поле:

$title = get_field('project_title');
if( $title ){
    echo '<h3><b>' . esc_html($title) . '</b></h3>';
}
$desc = get_field('project_description');
if( $desc ){
    echo '<p>' . esc_html($desc) . '</p>';
}

5. Современные практики и ограничения

Плагин Elementor официально поддерживает ACF‑поля, но некоторые типы данных (например, Повторитель) требуют дополнительных решений или сторонних плагинов.
Для сложных повторяющихся данных (Повторитель, Гибкое содержимое) можно использовать шорткоды или специализированные расширения (например, Dynamic Elementor ACF Repeater).
Убедитесь, что шаблон настроен на вывод данных для правильного пост‑типа и что динамический тег получает корректное поле.
Оптимизируйте изображения, включите кеширование, используйте адаптивный дизайн — всё это важно для SEO.