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

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

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

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

function wpapp_register_menus() {
    register_nav_menus([
        'primary-menu' => 'Основное меню',
        'footer-menu' => 'Меню в футере'
    ]);
}
add_action('after_setup_theme', 'wpapp_register_menus');

Вызов функции register_nav_menus регистрирует места для меню. В данном случае мы создаем основное меню и меню в футере. Это позволит гибко управлять навигацией.

Добавление меню в шаблон темы

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

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

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

Создание многоуровневого меню в админке WordPress

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

Важно правильно структурировать пункты — дочерние элементы должны быть сдвинуты вправо относительно родительских. Таким образом формируется иерархия.

Кастомизация вывода многоуровневого меню

Для управления HTML-разметкой и классами можно использовать кастомный walker. Это класс, который отвечает за генерацию HTML меню.

Пример базового класса-воркера для многоуровневого меню:

class WPAPP_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 (in_array('menu-item-has-children', $classes)) {
            $classes[] = 'has-dropdown';
        }
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        $output .= "$indent<li$class_names>";
        $attributes  = '';
        !empty( $item->attr_title ) and $attributes .= ' title="' . esc_attr($item->attr_title) . '"';
        !empty( $item->target ) and $attributes .= ' target="' . esc_attr($item->target) . '"';
        !empty( $item->xfn ) and $attributes .= ' rel="' . esc_attr($item->xfn) . '"';
        !empty( $item->url ) and $attributes .= ' href="' . esc_attr($item->url) . '"';
        $item_output = sprintf('%s<a%s>%s</a>', $args->before, $attributes, apply_filters('the_title', $item->title, $item->ID));
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}

Далее при выводе меню передаем наш воркер:

wp_nav_menu([
    'theme_location' => 'primary-menu',
    'walker' => new WPAPP_Walker_Nav_Menu(),
    'menu_class' => 'wpapp-main-menu'
]);

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

Стилизация многоуровневого меню с помощью CSS

Чтобы меню выглядело как выпадающее с несколькими уровнями, необходимо прописать стили:

.wpapp-main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.wpapp-main-menu > li {
    position: relative;
    margin-right: 20px;
}
.wpapp-main-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 9999;
}
.wpapp-main-menu li:hover > ul {
    display: block;
}
.wpapp-main-menu li ul li {
    margin: 0;
    padding: 0 20px;
    white-space: nowrap;
}
.wpapp-main-menu li ul li ul {
    left: 100%;
    top: 0;
}
.wpapp-main-menu li.has-dropdown > a::after {
    content: '\25BC';
    margin-left: 5px;
    font-size: 0.6em;
}

Этот CSS код создаст классическое горизонтальное меню с раскрывающимися подменю и стрелочками у пунктов с вложенными элементами.

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

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

Вывод

Создание многоуровневого меню в WordPress с помощью кода — задача вполне решаемая без плагинов. Регистрация меню, правильное построение структуры в админке, кастомный воркер для управления HTML и стилизация CSS дадут вам полный контроль над навигацией. Такой подход повышает скорость сайта и позволяет реализовать любые дизайнерские решения.