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

Автор: Татьяна Романова | Опубликовано: 25.02.2026

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

Почему важно использовать динамические значки в меню Elementor

Меню — ключевой элемент любого сайта. Статичные иконки часто не отражают актуальное состояние сайта или взаимодействие пользователя. Динамические значки помогают:

Отобразить текущий статус пункта меню (например, активен, есть новые уведомления);
Показывать количество товаров в корзине;
Добавлять индикаторы новых разделов или акций;
Улучшить UX за счёт визуальных подсказок.

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

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

Для начала создадим меню в WordPress и привяжем его к Elementor Nav Menu. Затем реализуем динамическое добавление значков с помощью фильтров и JavaScript.

1. Создаём меню и внедряем в Elementor

В админке WordPress перейдите в Внешний вид > Меню, создайте меню с нужными пунктами. В редакторе Elementor добавьте виджет Nav Menu, выберите созданное меню.

2. Добавляем кастомные поля для значков

Чтобы задать иконки для пунктов меню, используем плагин Clearfy Pro или Advanced Custom Fields (ACF). Создайте поле для иконки (например, класс иконки из библиотеки FontAwesome).

3. Фильтр для вывода иконок в меню (пример кода)

function wpelementor_add_dynamic_icons_to_menu( $item_output, $item, $depth, $args ) {
    $icon_class = get_post_meta( $item->ID, '_wpelementor_menu_icon', true );
    if ( $icon_class ) {
        $icon_html = '<i class="' . esc_attr( $icon_class ) . '"></i> ';
        $item_output = $icon_html . $item_output;
    }
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'wpelementor_add_dynamic_icons_to_menu', 10, 4 );

Этот код добавляет иконку перед текстом пункта меню. Класс иконки хранится в мета-данных пункта.

4. Добавление динамических значков по условиям

Например, добавим значок корзины с количеством товаров к пункту «Корзина» меню:

function wpelementor_add_cart_icon_count( $item_output, $item, $depth, $args ) {
    if ( $item->title === 'Корзина' ) {
        $count = WC()->cart->get_cart_contents_count();
        $icon_html = '<i class="fas fa-shopping-cart"></i>';
        $count_html = $count > 0 ? '<span class="cart-count">' . esc_html( $count ) . '</span>' : '';
        $item_output = $icon_html . ' ' . $item_output . ' ' . $count_html;
    }
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'wpelementor_add_cart_icon_count', 20, 4 );

Таким образом, количество товаров в корзине будет отображаться рядом с иконкой в меню, обновляться в реальном времени при AJAX-обновлениях WooCommerce.

Использование плагина WPRemark для улучшения меню с динамическими значками

Плагин WPRemark позволяет создавать динамические блоки контента и легко интегрируется с Elementor. Можно использовать его для условного показа значков в меню.

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

Советы по оптимизации и кроссбраузерности динамических значков

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

Используйте SVG или шрифтовые иконки (FontAwesome, Material Icons) — они масштабируются без потери качества.
Минимизируйте количество HTTP-запросов, объединяйте CSS и JS.
Обеспечьте поддержку клавиатурной навигации и доступность для screen reader.
Проверяйте отображение значков на мобильных устройствах и в разных браузерах.

К тому же, если динамические данные (например, счётчик товаров) обновляются AJAX, нужно реализовать соответствующие JavaScript-обработчики, чтобы обновлять иконки без перезагрузки страницы.

Пример JavaScript для обновления счётчика в меню

jQuery(document).on('updated_wc_div', function() {
    var count = jQuery('.woocommerce-mini-cart .cart_list').length;
    if(count > 0) {
        jQuery('.cart-count').text(count);
    } else {
        jQuery('.cart-count').text('0');
    }
});

Этот скрипт слушает событие обновления мини-корзины WooCommerce и обновляет число в значке.

Заключение

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