Как создать динамический контент в Elementor с помощью WPRemark

В современных проектах на WordPress часто возникает необходимость создавать динамический контент, который меняется в зависимости от условий, пользователя или других параметров. Elementor отлично подходит для визуального построения страниц, но для реализации сложной динамики потребуется дополнительный инструмент. В этой статье расскажу, как с помощью плагина WPRemark и кастомных функций создавать гибкий динамический контент прямо в Elementor.

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

Динамический контент — это контент, который меняется в зависимости от состояния сайта, пользователя, даты, условий и других факторов. Elementor поддерживает динамические поля (например, ACF, кастомные поля), но иногда этого недостаточно. Тут на помощь приходит WPRemark — плагин, который расширяет возможности динамических данных, позволяя создавать условные блоки, выводить данные из пользовательских полей и API, а также использовать короткие коды прямо в Elementor.

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

Установка и базовая настройка WPRemark для работы с Elementor

Для начала нужно установить плагин WPRemark. Это можно сделать через админку WordPress либо скачав с официального сайта WPSHOP.

После активации перейдите в настройки плагина и убедитесь, что интеграция с Elementor включена. Это позволит использовать созданные шорткоды и динамические теги внутри редактора без дополнительных усилий.

WPRemark автоматически регистрирует шорткоды, которые можно добавлять в элементы Elementor через виджет «Текст» или «HTML», а также использовать в динамических полях.

Пример: создание динамического блока с приветствием пользователя

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

Добавим в файл functions.php вашей темы следующий код:

function wpelementor_dynamic_greeting() {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        return 'Привет, ' . esc_html( $current_user->display_name ) . '! Добро пожаловать на наш сайт.';
    } else {
        return 'Здравствуйте! Пожалуйста, войдите, чтобы получить персональное приветствие.';
    }
}
add_shortcode('wpelementor_greeting', 'wpelementor_dynamic_greeting');

Этот шорткод [wpelementor_greeting] теперь можно вставлять в любой текстовый или HTML-виджет Elementor, и он будет отображать разное приветствие в зависимости от статуса пользователя.

Добавление шорткода в Elementor

1. Создайте или отредактируйте страницу в Elementor.
2. Добавьте виджет «Текстовый редактор».
3. Вставьте [wpelementor_greeting] в содержимое.
4. Сохраните и посмотрите на результат.

Использование условных блоков WPRemark для сложной логики отображения

WPRemark позволяет создавать условные блоки, которые показываются или скрываются в зависимости от заданных условий. Например, можно показывать определённый контент только авторизованным пользователям с ролью «подписчик».

Для этого в настройках WPRemark создайте условие с названием, например, is_subscriber и добавьте код:

function wpelementor_is_subscriber() {
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        return in_array( 'subscriber', (array) $user->roles );
    }
    return false;
}
add_shortcode('is_subscriber', 'wpelementor_is_subscriber');

В Elementor можно использовать этот шорткод для условного отображения блоков: в виджете WPRemark или в динамических тегах укажите условие [is_subscriber]. Если условие выполняется, блок будет виден, иначе — скрыт.

Пример использования условного блока

Добавьте два текстовых блока:
— с приветствием для подписчиков внутри условия [is_subscriber];
— с предложением подписаться — вне условия.

Таким образом, вы сможете легко управлять видимостью контента, не прибегая к сложному программированию.

Вывод кастомных полей и данных из API в динамические блоки Elementor с WPRemark

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

Например, если у вас есть кастомное поле с названием promo_text в записи, то можно создать шорткод для его вывода:

function wpelementor_promo_text() {
    global $post;
    $promo = get_post_meta( $post->ID, 'promo_text', true );
    return $promo ? esc_html( $promo ) : '';
}
add_shortcode('wpelementor_promo', 'wpelementor_promo_text');

В Elementor вставьте [wpelementor_promo] в нужный блок — и текст из метаполя автоматически отобразится на странице.

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

Советы по оптимизации и безопасности при использовании динамического контента

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

Обязательно экранируйте выводимые данные, чтобы избежать XSS-уязвимостей (используйте esc_html и подобные функции). Не давайте возможность пользователям напрямую управлять параметрами, которые влияют на логику отображения.

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

Заключение

Использование WPRemark вместе с Elementor дает мощный инструмент для создания динамического, персонализированного и адаптивного контента на WordPress. Благодаря простому созданию шорткодов и условных блоков, вы сможете значительно расширить функциональность вашего сайта без сложного программирования.

Рекомендую ознакомиться с документацией плагина на WPSHOP для более глубокого понимания и примеров.