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

Многоуровневая навигация – важный элемент удобного и структурированного сайта на WordPress. В этой статье мы разберём, как создать многоуровневое меню без плагинов, используя встроенные возможности WordPress и собственный PHP-код. Такой подход даёт гибкость в настройке и минимизирует нагрузку на сайт.

Почему стоит создавать меню через код, а не через плагины

Плагины для меню часто функциональны, но могут замедлять сайт и создавать лишние зависимости. Кодовое решение позволяет:

• Точно контролировать структуру HTML и CSS;
• Легко интегрироваться в любую тему;
• Избежать конфликтов и избыточных функций;
• Оптимизировать производительность.

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

Создание и регистрация меню в functions.php

Сначала регистрируем меню в файле functions.php вашей темы. Добавьте следующий код:

function wpcource_register_my_menu() {
    register_nav_menu('primary-menu', __('Primary Menu'));
}
add_action('after_setup_theme', 'wpcource_register_my_menu');

Это создаст точку для подключения меню в админке WordPress в разделе Внешний вид → Меню.

Вывод меню с поддержкой многоуровневости

Чтобы вывести многоуровневое меню с кастомной HTML-разметкой, используем функцию wp_nav_menu() с параметром walker. Для этого создадим собственный класс-наследник Walker_Nav_Menu. Ниже пример реализации класса для многоуровневого меню с поддержкой выпадающих подменю:

class Wpcource_Walker_Nav_Menu extends Walker_Nav_Menu {
    // Открытие уровня подменю
    function start_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class='sub-menu'>\n";
    }

    // Закрытие уровня подменю
    function end_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\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 (in_array('menu-item-has-children', $classes)) {
            $classes[] = 'has-submenu';
        }

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

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

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

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

    // Закрытие элемента меню
    function end_el( &$output, $item, $depth = 0, $args = null ) {
        $output .= "</li>\n";
    }
}

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

Вывод меню в шаблоне

В файле шаблона, например, header.php, добавьте следующий код для вывода меню с кастомным walker:

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

Это выведет меню с многоуровневой структурой в теге nav и классами для дальнейшей стилизации.

Стилизация многоуровневого меню

Для корректной работы меню добавьте CSS с поддержкой выпадающих подменю. Пример базовых стилей:

.primary-navigation {
    background: #333;
}
.primary-navigation .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.primary-navigation .menu-item {
    position: relative;
}
.primary-navigation .menu-item a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
}
.primary-navigation .menu-item:hover > a {
    background: #555;
}
.primary-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #444;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 180px;
    z-index: 1000;
}
.primary-navigation .menu-item:hover > .sub-menu {
    display: block;
}
.primary-navigation .sub-menu .menu-item a {
    padding: 8px 12px;
    color: #ddd;
}
.primary-navigation .sub-menu .menu-item a:hover {
    background: #666;
    color: #fff;
}

Эти стили обеспечивают базовое отображение основного меню и выпадающих подменю при наведении.

Расширение функционала: добавление иконок в меню

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

Пример добавления иконки через CSS-класс:

function wpcource_add_menu_icons($item_output, $item, $depth, $args) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $icon = ' <span class="submenu-icon">▾</span>';
        $item_output = str_replace('</a>', $icon . '</a>', $item_output);
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'wpcource_add_menu_icons', 10, 4);

Этот фильтр добавит стрелочку ▼ к пунктам с подменю.

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

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

Итог

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

Используйте приведённые примеры кода и стили, чтобы сделать своё меню максимально удобным и красивым.