Как добавить динамические данные в Elementor для WordPress

Сегодня мы разберем, как добавить динамические данные в конструктор страниц Elementor на WordPress. Эта тема часто вызывает вопросы, особенно когда необходимо вывести на страницу не просто статический контент, а данные из различных источников: поля записи, пользовательские поля, данные из внешних API и пр. Рассмотрим, как это сделать с помощью готовых инструментов и кастомного кода.

Что такое динамические данные в Elementor и зачем они нужны

Динамические данные – это информация, которая меняется в зависимости от контекста. Например, заголовок поста, дата публикации, пользовательские метки, данные профиля пользователя и многое другое. В Elementor по умолчанию можно вывести такие данные через базовые динамические теги, но возможности часто ограничены.

Добавление динамических данных расширяет возможности сайта, делая его более интерактивным и персонализированным. Это особенно полезно для блогов, интернет-магазинов, каталогов и корпоративных сайтов.

Динамические данные позволяют:

• Автоматизировать вывод информации без ручного редактирования страниц.
• Создавать шаблоны, которые подстраиваются под разные записи.
• Подключать внешние источники данных и API.

Использование плагинов для динамических данных в Elementor

Существует несколько популярных плагинов, которые добавляют динамические возможности в Elementor без необходимости писать код:

1. Dynamic Content for Elementor

Один из самых мощных плагинов, который расширяет стандартные динамические теги и добавляет новые виджеты и возможности:

• Динамические поля из ACF (Advanced Custom Fields), Pods, Meta Box.
• Условные отображения элементов.
• Подключение пользовательских API через визуальный интерфейс.

После установки и активации вы сможете добавлять динамические поля просто выбирая их из списка при редактировании виджета.

2. JetEngine от Crocoblock

JetEngine идеально подходит для создания кастомных типов записей и вывода их динамического контента в Elementor. Он позволяет:

• Создавать кастомные поля и таксономии.
• Выводить списки записей с фильтрами и пагинацией.
• Использовать динамические ссылки и изображения.

Этот плагин часто используется для создания каталогов, портфолио и сайтов с большим объемом контента.

Кастомные динамические теги в Elementor через код

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

Пример: создадим динамический тег, который выводит текущее время на сайте.

add_action('elementor/dynamic_tags/register', function(\Elementor\Core\DynamicTags\Manager $manager) {
    class WpElementor_CurrentTime_Tag extends \Elementor\Core\DynamicTags\Tag {
        public function get_name() {
            return 'wp-elementor-current-time';
        }
        public function get_title() {
            return 'Текущее время (wpElementor)';
        }
        public function get_group() {
            return 'site';
        }
        public function get_categories() {
            return [\Elementor\Core\DynamicTags\Module::TEXT_CATEGORY];
        }
        public function render() {
            echo date('H:i:s');
        }
    }
    $manager->register_tag('WpElementor_CurrentTime_Tag');
});

Добавьте этот код в файл functions.php вашей темы или в отдельный плагин. После этого в Elementor появится новый динамический тег «Текущее время (wpElementor)», который можно использовать в любом текстовом поле.

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

Если вы используете плагин Advanced Custom Fields (ACF), интеграция с Elementor очень проста. Для вывода кастомных полей:

1. Создайте нужное поле в ACF и привяжите к нужному типу записи.
2. В редакторе Elementor выберите виджет «Текст» или «Заголовок».
3. В настройках контента нажмите на значок динамического тега (значок базы данных).
4. Выберите тег «ACF поле» и укажите имя вашего поля.

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

Пример кастомного динамического тега для сложного поля ACF

Допустим, у вас есть повторяющееся поле «services» с названием и описанием. Мы можем вывести их списком:

add_action('elementor/dynamic_tags/register', function(\Elementor\Core\DynamicTags\Manager $manager) {
    class WpElementor_ACF_Services_Tag extends \Elementor\Core\DynamicTags\Tag {
        public function get_name() {
            return 'wp-elementor-acf-services';
        }
        public function get_title() {
            return 'Список услуг (wpElementor)';
        }
        public function get_group() {
            return 'site';
        }
        public function get_categories() {
            return [\Elementor\Core\DynamicTags\Module::TEXT_CATEGORY];
        }
        public function render() {
            $services = get_field('services');
            if (!$services) {
                echo 'Услуги не заданы';
                return;
            }
            echo '<ul>';
            foreach ($services as $service) {
                echo '<li><strong>' . esc_html($service['title']) . '</strong>: ' . esc_html($service['description']) . '</li>';
            }
            echo '</ul>';
        }
    }
    $manager->register_tag('WpElementor_ACF_Services_Tag');
});

Использование API WordPress для динамических данных в Elementor

Иногда необходимо вывести данные, которые не хранятся в метаполях, а доступны через API WordPress, например, количество комментариев, автор поста, последние записи и т.д.

Можно создать динамический тег, который будет использовать WP_Query:

add_action('elementor/dynamic_tags/register', function(\Elementor\Core\DynamicTags\Manager $manager) {
    class WpElementor_Recent_Posts_Count_Tag extends \Elementor\Core\DynamicTags\Tag {
        public function get_name() {
            return 'wp-elementor-recent-posts-count';
        }
        public function get_title() {
            return 'Количество последних постов (wpElementor)';
        }
        public function get_group() {
            return 'site';
        }
        public function get_categories() {
            return [\Elementor\Core\DynamicTags\Module::NUMBER_CATEGORY];
        }
        public function render() {
            $query = new WP_Query(['posts_per_page' => 5]);
            echo intval($query->found_posts);
        }
    }
    $manager->register_tag('WpElementor_Recent_Posts_Count_Tag');
});

Этот тег выводит количество последних 5 записей. Используйте подобные подходы для вывода любых динамических данных.

Вывод данных из внешних API в Elementor

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

Например, вы хотите вывести текущую погоду из публичного API:

add_action('elementor/dynamic_tags/register', function(\Elementor\Core\DynamicTags\Manager $manager) {
    class WpElementor_Weather_Tag extends \Elementor\Core\DynamicTags\Tag {
        public function get_name() {
            return 'wp-elementor-weather';
        }
        public function get_title() {
            return 'Погода (wpElementor)';
        }
        public function get_group() {
            return 'site';
        }
        public function get_categories() {
            return [\Elementor\Core\DynamicTags\Module::TEXT_CATEGORY];
        }
        public function render() {
            $response = wp_remote_get('https://api.openweathermap.org/data/2.5/weather?q=Moscow&appid=YOUR_API_KEY&units=metric&lang=ru');
            if (is_wp_error($response)) {
                echo 'Ошибка получения данных';
                return;
            }
            $data = json_decode(wp_remote_retrieve_body($response), true);
            if (empty($data) || !isset($data['main']['temp'])) {
                echo 'Данные не найдены';
                return;
            }
            echo 'Температура в Москве: ' . esc_html($data['main']['temp']) . ' °C';
        }
    }
    $manager->register_tag('WpElementor_Weather_Tag');
});

Не забудьте заменить YOUR_API_KEY на ваш ключ от OpenWeatherMap или другого сервиса.

Рекомендации по оптимизации и безопасности

При работе с динамическими данными стоит учитывать производительность сайта. Частые запросы к базе или внешним API могут замедлить загрузку. Используйте кэширование, например, через Transients API WordPress.

Пример использования кэша для вышеуказанного погодного тега:

public function render() {
    $cache_key = 'wp_elementor_weather_cache';
    $weather = get_transient($cache_key);
    if ($weather === false) {
        $response = wp_remote_get('https://api.openweathermap.org/data/2.5/weather?q=Moscow&appid=YOUR_API_KEY&units=metric&lang=ru');
        if (is_wp_error($response)) {
            echo 'Ошибка получения данных';
            return;
        }
        $data = json_decode(wp_remote_retrieve_body($response), true);
        if (empty($data) || !isset($data['main']['temp'])) {
            echo 'Данные не найдены';
            return;
        }
        $weather = 'Температура в Москве: ' . esc_html($data['main']['temp']) . ' °C';
        set_transient($cache_key, $weather, 15 * MINUTE_IN_SECONDS);
    }
    echo $weather;
}

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