Главная страница » Статьи » Динамический контент: как выводить данные из произвольных полей (ACF) в Elementor

Динамический контент: как выводить данные из произвольных полей (ACF) в Elementor

В современной разработке сайтов на WordPress статичных страниц уже давно недостаточно для решения сложных задач управления контентом. Будь то каталог недвижимости, страница команды, карточки товаров или календарь мероприятий — вам нужен инструмент, который позволяет гибко управлять данными и при этом эффективно их отображать. Сочетание Advanced Custom Fields (ACF) и Elementor — это золотой стандарт для достижения этой цели. ACF даёт вам возможность добавлять к записям, страницам и пользовательским типам записей любые произвольные поля, а Elementor предоставляет интуитивно понятный визуальный конструктор. Оба инструмента интегрируются нативно, и вам не придётся писать ни строчки PHP‑кода, чтобы выводить данные ACF‑полей прямо в макетах Elementor. В этой статье мы подробно разберём, как отображать поля ACF всех типов — от простых текстовых до сложных повторителей (Repeater) — и создадим полноценный рабочий процесс для динамического контента.

1. Что такое динамический контент и зачем он нужен?

1.1 Понятие динамического контента

Динамический контент (Dynamic Content) — это такой способ заполнения элементов страницы, при котором их содержимое не вводится вручную, а подтягивается из базы данных сайта или из текущей просматриваемой записи в реальном времени. В Elementor за эту возможность отвечают динамические теги (Dynamic Tags). Когда вы нажимаете на значок базы данных рядом с полем и выбираете нужный динамический тег, это поле перестаёт быть статичным текстом, который вы напечатали, и становится «умным» – оно будет автоматически подставлять актуальные данные из указанного источника.

1.2 Динамический контент против ручного ввода

Если вы вводите текст вручную, он остаётся неизменным, пока вы его не отредактируете. При использовании динамического тега данные синхронизируются: измените заголовок записи — и все элементы, которые используют тег «Post Title», обновятся сами собой. Наибольшую пользу динамический контент приносит на страницах с повторяющейся структурой — блоги, карточки товаров, страницы авторов, события и т.п. Все эти страницы имеют одинаковый макет, но разное содержание. Вам достаточно один раз спроектировать шаблон и привязать к нему динамические теги, а затем любое новое содержание будет автоматически вписываться в этот шаблон без дополнительной правки.

1.3 Необходимые условия

Прежде чем начать, убедитесь, что у вас установлено:

Elementor Pro – динамические теги доступны только в платной версии; в бесплатной версии значка базы данных не будет.
Плагин ACF – рекомендуется версия 5 и выше.
Созданная группа полей ACF – вы должны заранее создать хотя бы одну группу полей и добавить в неё нужные поля.

2. Базовая операция вывода ACF‑полей в Elementor

2.1 Создание полей в ACF

Зайдите в админке WordPress в раздел ACF → Группы полей → Добавить новую. Дайте группе название. Затем добавьте поля — текст, изображение, число, URL, визуальный редактор и т.д. Настройте каждое поле, а в разделе Правила отображения (Location) укажите, на каких типах записей или страницах должна появляться эта группа. После этого опубликуйте группу полей.

2.2 Вызов ACF‑поля в шаблоне Elementor

Теперь перейдём к самому важному — как именно вывести данные поля в макете. Шаг 1. Создание шаблона Перейдите в Elementor → Шаблоны → Добавить новый. В выпадающем списке выберите тип шаблона (например, «Одиночная запись» (Single Post), «Страница» (Page) или «Архив» (Archive)). Дайте шаблону имя и нажмите «Создать». Шаг 2. Настройка превью В верхней панели нажмите на иконку Настройки страницы, в боковой панели откройте раздел Настройки превью (Preview Settings). В поле «Превью динамического контента» выберите запись того типа, который вы будете использовать (например, «Запись»). Это критически важно — Elementor будет знать, откуда брать данные для предпросмотра, и вы увидите реальные значения полей прямо во время редактирования. Шаг 3. Добавление и привязка динамического тега Выберите любой виджет, поддерживающий динамический контент (например, «Заголовок», «Текстовый редактор», «Изображение», «Кнопка»). В настройках виджета найдите поле, у которого есть значок базы данных, и нажмите на него. В списке динамических тегов выберите ACF Field. После этого в появившемся разделе Настройки → Key выберите нужное ACF‑поле из выпадающего списка. Шаг 4. Настройка запасного содержимого (опционально) Во вкладке Дополнительно (Advanced) вы можете задать:

Before – текст, который будет автоматически добавляться перед значением поля.
After – текст после значения поля.
Fallback – текст, который будет показан, если поле не заполнено.

Шаг 5. Оформление Как обычно, используйте вкладку Стиль (Style) виджета, чтобы настроить внешний вид динамического контента — шрифты, цвета, отступы и т.д.

3. Вывод разных типов ACF‑полей в Elementor

Elementor из коробки поддерживает большинство типов полей ACF и автоматически подбирает подходящий динамический тег.

3.1 Текстовые поля

К текстовым относятся: text, textarea, number, email, password, wysiwyg, select, checkbox, radio, true_false и т.п. Как вывести:

Добавьте виджет Заголовок (Heading) или Текстовый редактор (Text Editor).
Нажмите на значок динамики и выберите ACF Field, затем укажите нужное текстовое поле.
Для полей WYSIWYG (визуальный редактор) лучше использовать виджет «Текстовый редактор», чтобы сохранить форматирование (жирный, курсив, списки и т.д.).

3.2 Поля с изображениями

Изображения (image) и галереи (gallery) также легко выводятся. Как вывести:

Добавьте виджет Изображение (Image).
Нажмите на значок динамики рядом с полем URL изображения и выберите ACF Field → ваше поле с картинкой.
Изображение автоматически подтянется из ACF.

Кроме того, вы можете использовать ACF‑изображение как фоновое изображение: в настройках стиля секции (Section) или колонки (Column) нажмите на динамическую иконку рядом с фоном и выберите своё ACF‑поле.

3.3 Поля с URL и ссылками

Сюда относятся: email, url, file, page_link, post_object, relationship, taxonomy и др. Как вывести:

В виджете Кнопка (Button) нажмите на динамическую иконку рядом с полем «Ссылка».
Выберите ACF Field → поле, содержащее ссылку.
Кнопка будет вести на адрес, указанный в этом поле.

3.4 Поля с датой и временем

Типы date_picker, time_picker, date_time_picker тоже поддерживаются. Как вывести:

Используйте виджет «Текст» или «Заголовок».
Привяжите динамический тег ACF Field с вашим полем даты.
В настройках виджета вы можете задать собственный формат отображения даты.

4. Продвинутое: вывод полей повторителя (Repeater)

4.1 Почему повторитель требует особого подхода

Важно: Elementor не поддерживает поля-повторители (Repeater) из ACF «из коробки». Это означает, что вы не сможете просто выбрать динамический тег и вывести все строки повторителя. Однако существуют проверенные решения, позволяющие обойти это ограничение.

4.2 Решение первое: использование пользовательского шорткода

Это самый гибкий способ, если вы готовы написать немного кода. Инструкция:

Убедитесь, что у вас есть повторитель с данными, и запомните его имя.
Добавьте следующий код в файл functions.php вашей дочерней темы или создайте отдельный плагин для этого кода:

function display_acf_repeater_data() {
    // Проверяем, есть ли строки в повторителе
    if( have_rows('your_repeater_field_name') ):
        $output = '<ul>';
        // Перебираем все строки
        while( have_rows('your_repeater_field_name') ): the_row();
            $sub_field_1 = get_sub_field('sub_field_1');
            $sub_field_2 = get_sub_field('sub_field_2');
            $output .= '<li>' . esc_html($sub_field_1) . ' — ' . esc_html($sub_field_2) . '</li>';
        endwhile;
        $output .= '</ul>';
        return $output;
    else:
        return 'Нет данных';
    endif;
}
add_shortcode('acf_repeater_display', 'display_acf_repeater_data');

В Elementor добавьте виджет Шорткод (Shortcode) и вставьте [acf_repeater_display].

4.3 Решение второе: использование сторонних плагинов

Если вы не хотите писать код, есть несколько плагинов, которые решают эту задачу:

Repeaterly – бесплатная версия включает динамические теги, которые позволяют использовать поля повторителя, связи и гибкого контента без необходимости в Elementor Pro. Вы сможете выбирать повторитель и его подполя прямо в интерфейсе.
Dynamic Elementor ACF Repeater – даёт возможность использовать динамические теги для повторителей в виджетах «Цикл» (Loop) и «Сетка циклов».
Sympl Repeater for ACF and Elementor – добавляет выбор повторителя прямо в настройках виджетов или секций.

Общий порядок работы с плагинами:

Установите и активируйте плагин.
Создайте повторитель в ACF и заполните его подполями.
В Elementor выберите виджет, поддерживающий динамику, и в списке тегов найдите новую группу, добавленную плагином (например, «ACF Connector» или «Repeater Tags»).
Выберите нужное подполе повторителя.

5. Продвинутое: вывод полей связи (Relationship)

Поля связи (Relationship) позволяют связывать текущую запись с другими записями (например, «похожие товары» или «связанные статьи»). Как и повторители, они не поддерживаются нативно в Elementor.

5.1 Использование сторонних плагинов

Repeaterly и аналогичные плагины предоставляют специальные виджеты для вывода полей связи в виде сеток или каруселей. Шаги:

Создайте поле связи в ACF и свяжите с ним нужные записи.
В Elementor добавьте виджет Сетка циклов (Loop Grid) или Карусель циклов.
В настройках запроса (Query) выберите Источник → ACF Relationship.
Укажите название вашего поля связи.
Настройте шаблон элемента цикла, используя динамические теги для вывода заголовков, изображений и других полей связанных записей.

5.2 Обратная связь

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

6. Частые проблемы и их решение

6.1 ACF‑поле не отображается в списке динамических тегов

Возможные причины и решения:

Не совпадают правила отображения – проверьте, что группа полей ACF применяется к тому типу записей, который вы сейчас редактируете в шаблоне Elementor.
Кеширование – перейдите в Elementor → Инструменты → Перегенерировать файлы и данные, чтобы принудительно обновить конфигурацию.
В поле нет данных – убедитесь, что в текущей записи (используемой для предпросмотра) сохранено значение для этого поля.

6.2 Динамическое поле показывает «—» (два тире)

Это означает, что Elementor нашёл поле, но в выбранной записи для предпросмотра оно пустое. Решение:

Откройте нужную запись в редакторе и заполните ACF‑поле.
Если вы уже заполнили, проверьте настройки превью в Elementor – возможно, выбрана не та запись.

6.3 Поля группы (Group) не отображаются

Встроенная поддержка полей типа «Группа» в Elementor ограничена. Если вы не видите подполя внутри группы, попробуйте пересоздать эти поля как отдельные (не групповые) поля.

6.4 Поля страницы опций (Options Page)

ACF‑поля, созданные на странице опций, тоже доступны в Elementor. Обычно они помечены в списке как «(Options)». Для полей внутри группы на странице опций действует то же ограничение, что и для обычных групп.

7. Практический пример: сайт недвижимости

Чтобы лучше понять весь процесс, рассмотрим сквозной пример. Сценарий: нужно создать сайт с объявлениями о недвижимости, где у каждого объекта есть: цена, количество спален, количество ванных, площадь и фотография. Пошаговая инструкция:

Создаём пользовательский тип записи (например, с помощью CPT UI или встроенных средств ACF) — «Объекты недвижимости» (Properties).
Создаём группу полей ACF:
- Цена (Number)
- Количество спален (Number)
- Количество ванных (Number)
- Площадь (Text)
- Фото объекта (Image)
- Правила отображения: применяется к типу записи «Объекты недвижимости».
Заполняем данные – для каждого объекта создаём запись и заполняем все эти поля.
Создаём шаблон одиночной записи в Elementor:
- Шаблоны → Добавить новый → «Одиночная запись» → выбираем «Объекты недвижимости».
- Проектируем макет страницы.
- В каждом нужном виджете привязываем соответствующие ACF‑поля через динамические теги.
Публикуем шаблон – теперь все объекты будут автоматически отображаться по этому шаблону, подставляя свои данные.

Никакого ручного кодирования!

8. Динамический контент и SEO

Динамический контент не только ускоряет разработку, но и положительно влияет на поисковую оптимизацию:

Единообразие данных – информация хранится в одном месте, что исключает дублирование и ошибки.
Структурированные данные – в связке с ACF и Elementor вы можете выводить разметку JSON‑LD, что помогает поисковым системам лучше понимать содержимое страниц.
Доступность – единая структура всех страниц улучшает доступность, а это косвенный фактор ранжирования.

Для прямого вывода структурированных данных из ACF можно использовать плагин SEO Help Flow for ACF and Elementor, который позволяет сопоставлять ACF‑поля со схемами schema.org.

9. Заключение

Интеграция Elementor и ACF открывает перед разработчиками и владельцами сайтов невероятную гибкость. Вот сводная таблица поддержки различных типов полей:

Тип поля	Нативная поддержка	Рекомендуемый способ
Текст, изображение, URL, дата и другие базовые	Да	Прямое использование динамических тегов
Повторитель (Repeater)	Нет	Пользовательский шорткод или сторонний плагин
Связь (Relationship)	Нет	Сторонние плагины (например, Repeaterly)
Страница опций (Options Page)	Ограниченная	Динамические теги, но избегайте групп внутри неё
Группа (Group)	Ограниченная	Используйте отдельные поля вместо групповых

Основной рабочий процесс остаётся неизменным: создаёте поля в ACF → в шаблоне Elementor привязываете их через динамические теги → публикуете шаблон → всё содержимое заполняется автоматически. Освоив эти приёмы, вы сможете создавать по‑настоящему динамичные и масштабируемые сайты на WordPress, где макет разрабатывается один раз, а данные управляются централизованно.