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

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

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

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

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

В Elementor можно добавить динамический текст через шорткоды и PHP-функции, зарегистрированные в functions.php вашей темы или через плагины-помощники.

Регистрация собственного динамического тега для заголовков в Elementor

Elementor поддерживает расширение динамических тегов, что позволяет создавать свои собственные. Ниже приведён пример, как в functions.php вашей темы добавить динамический тег, который выводит приветствие с именем пользователя или дефолтный текст для гостей.

function wpelementor_register_dynamic_tag(\Elementor\Plugin $plugin) {
    require_once __DIR__ . '/dynamic-tags/class-wpelementor-greeting-tag.php';
    $plugin->dynamic_tags->register_tag( 'Wpelementor_Greeting_Tag' );
}
add_action( 'elementor/dynamic_tags/register', 'wpelementor_register_dynamic_tag' );

// В файле dynamic-tags/class-wpelementor-greeting-tag.php
class Wpelementor_Greeting_Tag extends \Elementor\Core\DynamicTags\Tag {
    public function get_name() {
        return 'wpelementor-greeting-tag';
    }
    public function get_title() {
        return 'Приветствие пользователя';
    }
    public function get_group() {
        return 'wpelementor-group';
    }
    public function get_categories() {
        return [ \Elementor\Core\DynamicTags\Module::TEXT_CATEGORY ];
    }
    public function render() {
        if ( is_user_logged_in() ) {
            $current_user = wp_get_current_user();
            echo 'Привет, ' . esc_html( $current_user->display_name ) . '!';
        } else {
            echo 'Добро пожаловать на наш сайт!';
        }
    }
}

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

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

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

function wpelementor_current_date_shortcode() {
    return date_i18n( get_option( 'date_format' ) );
}
add_shortcode( 'wpelementor_current_date', 'wpelementor_current_date_shortcode' );

В Elementor в текстовом редакторе или виджете заголовка просто вставьте [wpelementor_current_date], и он выведет дату согласно настройкам сайта. Это особенно полезно для заголовков новостей, событий и блогов.

Как подгружать динамические заголовки по AJAX в Elementor

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

Пример AJAX-функции, которая возвращает приветствие с именем пользователя:

add_action( 'wp_ajax_wpelementor_get_greeting', 'wpelementor_get_greeting_callback' );
add_action( 'wp_ajax_nopriv_wpelementor_get_greeting', 'wpelementor_get_greeting_callback' );

function wpelementor_get_greeting_callback() {
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        wp_send_json_success( 'Привет, ' . esc_html( $user->display_name ) . '!' );
    } else {
        wp_send_json_success( 'Добро пожаловать на наш сайт!' );
    }
}

На стороне клиента в JavaScript добавьте запрос:

jQuery(document).ready(function($){
    $.post(ajaxurl, { action: 'wpelementor_get_greeting' }, function(response) {
        if(response.success) {
            $('#dynamic-header').text(response.data);
        }
    });
});

Этот код подставит текст в элемент с ID dynamic-header без перезагрузки страницы.

Используем плагины для расширения динамических возможностей Elementor

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

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

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

Советы по производительности и безопасности

При работе с динамическим контентом важно не забывать о производительности. Кэширование динамических данных поможет снизить нагрузку на сервер. Для этого можно использовать transient API WordPress.

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

Итог

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