Как создать динамическое меню в Elementor для WordPress: пошаговое руководство

Автор: Алина Тарасова | Опубликовано: 10.01.2026

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

Почему динамическое меню важно для сайта на WordPress

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

Кроме того, динамическое меню помогает:

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

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

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

1. Создаем несколько меню в WordPress

Перейдите в Внешний вид > Меню и создайте несколько меню, например, «Меню для блога», «Меню для магазина», «Меню для главной». Это позволит переключать меню в зависимости от условий.

2. Добавляем меню в Elementor через виджет «Навигационное меню»

Создайте или отредактируйте шаблон header в Elementor. Добавьте виджет «Навигационное меню» и выберите в настройках одно из созданных меню.

3. Используем PHP для динамической смены меню

Чтобы менять меню автоматически, добавим код в functions.php вашей темы или в плагин для кастомных функций. Ниже пример функции wpelementor_dynamic_menu_location, которая меняет меню в зависимости от типа страницы:

function wpelementor_dynamic_menu_location($args) {
    if (is_shop() || is_product_category()) {
        $args['menu'] = 'menu-shop'; // ID или название меню для магазина
    } elseif (is_home() || is_single()) {
        $args['menu'] = 'menu-blog'; // Меню для блога
    } else {
        $args['menu'] = 'menu-main'; // Основное меню
    }
    return $args;
}
add_filter('wp_nav_menu_args', 'wpelementor_dynamic_menu_location');

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

Использование плагина Clearfy Pro для расширенного управления меню

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

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

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

Вывод категорий WooCommerce в меню

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

Пример кода функции wpelementor_woocommerce_menu:

function wpelementor_woocommerce_menu() {
    $args = array(
        'taxonomy' => 'product_cat',
        'orderby' => 'name',
        'order' => 'ASC',
        'hide_empty' => true,
        'parent' => 0
    );
    $product_categories = get_terms($args);

    if (!empty($product_categories) && !is_wp_error($product_categories)) {
        echo '<ul class="woo-categories-menu">';
        foreach ($product_categories as $category) {
            echo '<li>';
            echo '<a href="' . esc_url(get_term_link($category)) . '">' . esc_html($category->name) . '</a>';

            // Вывод подкатегорий
            $sub_args = array(
                'taxonomy' => 'product_cat',
                'parent' => $category->term_id,
                'hide_empty' => true
            );
            $sub_categories = get_terms($sub_args);
            if (!empty($sub_categories)) {
                echo '<ul class="sub-menu">';
                foreach ($sub_categories as $sub_category) {
                    echo '<li><a href="' . esc_url(get_term_link($sub_category)) . '">' . esc_html($sub_category->name) . '</a></li>';
                }
                echo '</ul>';
            }
            echo '</li>';
        }
        echo '</ul>';
    }
}

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

Динамическое меню на основе пользовательских ролей и условий

Иногда надо выводить меню с разным набором пунктов в зависимости от роли пользователя (например, гостям показывать одно меню, а администраторам — другое). Для этого можно использовать следующий фильтр:

function wpelementor_menu_by_user_role($args) {
    if (is_user_logged_in()) {
        $user = wp_get_current_user();
        if (in_array('administrator', (array) $user->roles)) {
            $args['menu'] = 'menu-admin';
        } else {
            $args['menu'] = 'menu-registered';
        }
    } else {
        $args['menu'] = 'menu-guest';
    }
    return $args;
}
add_filter('wp_nav_menu_args', 'wpelementor_menu_by_user_role');

Создайте соответствующие меню в админке и назначьте их в коде. Этот подход избавляет от необходимости вручную менять меню.

Полезные советы по работе с меню в Elementor

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

Заключение

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