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

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

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

Динамический текст — это контент, который меняется в зависимости от условий: даты, роли пользователя, параметров URL и других факторов. В Elementor стандартные виджеты позволяют выводить статичный текст или динамический контент из определённых источников (например, поля записей), но зачастую необходимы более гибкие решения.

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

Создание шорткода для динамического текста: базовый пример

Начнём с простого примера шорткода, который выводит приветствие в зависимости от времени суток.

function wpelementor_dynamic_greeting_shortcode() {
    $hour = date('H');
    if ($hour < 12) {
        return 'Доброе утро!';
    } elseif ($hour < 18) {
        return 'Добрый день!';
    } else {
        return 'Добрый вечер!';
    }
}
add_shortcode('wpelementor_greeting', 'wpelementor_dynamic_greeting_shortcode');

Этот код нужно добавить в файл functions.php вашей темы или в плагин для пользовательских функций. После этого в Elementor можно вставить виджет «Текст» и добавить шорткод [wpelementor_greeting], который будет показывать приветствие в зависимости от времени.

Объяснение кода

Функция wpelementor_dynamic_greeting_shortcode получает текущий час и в зависимости от него возвращает нужный текст. Хук add_shortcode регистрирует шорткод wpelementor_greeting.

Расширение шорткода: передача параметров и вывод пользовательских данных

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

function wpelementor_dynamic_greeting_shortcode($atts) {
    $atts = shortcode_atts( array(
        'name' => 'Гость',
        'format' => 'text'
    ), $atts, 'wpelementor_greeting' );

    $hour = date('H');
    if ($hour < 12) {
        $greeting = 'Доброе утро';
    } elseif ($hour < 18) {
        $greeting = 'Добрый день';
    } else {
        $greeting = 'Добрый вечер';
    }

    $output = "$greeting, {$atts['name']}!";

    if ($atts['format'] === 'html') {
        return "<strong>" . esc_html($output) . "</strong>";
    }
    return esc_html($output);
}
add_shortcode('wpelementor_greeting', 'wpelementor_dynamic_greeting_shortcode');

Теперь в шорткод можно передавать имя и формат вывода:

• [wpelementor_greeting name="Иван" format="html"] — выведет приветствие с именем в жирном тексте.
• [wpelementor_greeting] — по умолчанию, без имени и с обычным текстом.

Пример: динамический вывод данных пользователя с проверкой авторизации

Часто нужно показывать персонализированное сообщение, например, имя пользователя, если он авторизован, и приглашение войти, если нет.

function wpelementor_user_greeting_shortcode() {
    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();
        return 'Здравствуйте, ' . esc_html($current_user->display_name) . '! Добро пожаловать на сайт.';
    } else {
        return 'Здравствуйте, гость! Пожалуйста, <a href="' . wp_login_url() . '">войдите</a> для персонализации.';
    }
}
add_shortcode('wpelementor_user_greeting', 'wpelementor_user_greeting_shortcode');

Выводите [wpelementor_user_greeting] в любом виджете Elementor с поддержкой шорткодов, чтобы приветствовать пользователей по имени или предлагать вход.

Интеграция с плагином Clearfy Pro для расширенной оптимизации

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

Clearfy Pro умеет оптимизировать управление шорткодами и динамическими элементами, что позволит избежать лишних запросов и повысить скорость работы сайта.

Советы по использованию динамического текста в Elementor

• Используйте кеширование. Динамический контент может замедлять сайт, если он генерируется на каждой загрузке. Используйте кеширование на уровне сервера или плагинов.
• Проверяйте безопасность. Всегда экранируйте вывод с помощью функций типа esc_html() или esc_attr(), чтобы избежать XSS-уязвимостей.
• Тестируйте на разных устройствах. Убедитесь, что динамический текст корректно отображается и не ломает дизайн.
• Используйте параметры шорткодов. Это позволит гибко менять вывод без правки кода.

Заключение

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

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