Как создать многоуровневую навигацию в WordPress

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

Почему важно использовать многоуровневое меню в WordPress

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

В WordPress уже есть встроенная система меню, но она не всегда подходит под специфические задачи: например, когда нужно вывести меню с уникальным HTML-разметкой, кастомными классами, или динамически менять пункты меню в зависимости от условий.

Поэтому разработчикам часто приходится создавать собственные решения, используя функции WordPress и PHP.

Создание многоуровневого меню через стандартный функционал WordPress

Для начала разберёмся, как создать меню через админку WordPress:

1. Перейдите в «Внешний вид» → «Меню».
2. Создайте новое меню, добавьте в него пункты, перетаскивая их для создания вложенных уровней.
3. Присвойте меню местоположение в теме (например, основное меню).

Чтобы вывести меню в шаблоне, используйте функцию wp_nav_menu(). Например:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'main-menu',
    'container' => 'nav',
    'container_class' => 'main-navigation'
));

WordPress автоматически создаст вложенную структуру <ul> и <li> с корректным вложением.

Кастомизация вывода многоуровневого меню с помощью Walker Nav Menu

Иногда нужно контролировать HTML-разметку меню более детально. Для этого WordPress предоставляет класс Walker_Nav_Menu, который можно расширить.

Например, создадим класс WPCoding_Walker_Nav_Menu, чтобы добавить свои CSS-классы к элементам и добавить иконки к пунктам меню:

class WPCoding_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $submenu_class = ($depth > 0) ? 'sub-sub-menu' : 'sub-menu';
        $output .= "\n$indent<ul class=\"$submenu_class\">\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item';
        if($depth === 0) {
            $classes[] = 'main-menu-item';
        } else {
            $classes[] = 'sub-menu-item';
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $class_names . '>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) . '"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) . '"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) . '"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) . '"' : '';

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . esc_html( $item->title ) . $args->link_after;

        // Добавляем иконку для подменю
        if (in_array('menu-item-has-children', $classes)) {
            $item_output .= '  ↓';
        }

        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Чтобы использовать этот класс, передайте его в аргументы wp_nav_menu:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new WPCoding_Walker_Nav_Menu(),
    'menu_class' => 'custom-menu',
));

Это позволит гибко настраивать HTML каждого пункта меню.

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

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

Пример: скрыть пункты меню с CSS-классом menu-item-private для неавторизованных пользователей.

function wpcoding_filter_menu_items( $items, $args ) {
    if ( ! is_user_logged_in() ) {
        foreach ( $items as $key => $item ) {
            if ( in_array( 'menu-item-private', $item->classes ) ) {
                unset( $items[$key] );
            }
        }
        $items = array_values( $items );
    }
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'wpcoding_filter_menu_items', 10, 2 );

Такой подход помогает создавать персонализированные меню.

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

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

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

Итоги и рекомендации по многоуровневой навигации в WordPress

Создание многоуровневого меню — задача, решаемая как стандартными средствами WordPress, так и с помощью кастомных классов и фильтров. Очень важно:

• Правильно структурировать меню через админку.
• Использовать Walker_Nav_Menu для полной кастомизации HTML и логики.
• Применять фильтры для динамического изменения пунктов меню.
• Обращать внимание на UX — меню должно быть удобным и логичным.

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