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

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

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

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

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

Создание многоуровневого меню через админ-панель WordPress

Первый шаг — создать меню в разделе Внешний вид > Меню. Здесь можно создавать пункты меню и вкладывать одни пункты внутрь других, формируя многоуровневую структуру.

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

Однако для корректного отображения многоуровневого меню в теме нужно убедиться, что вызов функции wp_nav_menu() поддерживает вложенность.

Вывод многоуровневого меню в теме WordPress

Для вывода меню в шаблоне используется функция:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'main-menu',
));

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

Если тема не поддерживает многоуровневое меню, можно добавить поддержку с помощью кастомного Walker-класса.

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

WordPress позволяет переопределять вывод меню с помощью класса, унаследованного от Walker_Nav_Menu. Рассмотрим пример, как создать свой класс для добавления дополнительных атрибутов и классов для каждого уровня вложенности.

class wpcontrol_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-menu' : 'sub-sub-menu';
        $output .= "\n$indent<ul class=\"$submenu_class menu-depth-$depth\">\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-depth-' . $depth;

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

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $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 . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

Для использования этого класса в вашем шаблоне подключите меню так:

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

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

Подключение стилей и JavaScript для многоуровневого меню

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

.main-menu ul.sub-menu {
    display: none;
    position: absolute;
    background: #fff;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid #ccc;
}

.main-menu li:hover > ul.sub-menu {
    display: block;
}

.main-menu li {
    position: relative;
    float: left;
    margin-right: 10px;
}

.main-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.main-menu ul.sub-menu li {
    float: none;
}

Для адаптивности и поддержки кликов на мобильных устройствах можно добавить JavaScript, который будет раскрывать подменю по нажатию:

document.querySelectorAll('.main-menu li.menu-item-has-children > a').forEach(function(anchor) {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        var submenu = this.nextElementSibling;
        if (submenu.style.display === 'block') {
            submenu.style.display = 'none';
        } else {
            submenu.style.display = 'block';
        }
    });
});

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

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

• Max Mega Menu — мощный плагин для создания многоуровневых, полностью кастомизируемых меню с поддержкой виджетов внутри пунктов.
• WP Mega Menu — простой и удобный плагин с drag-and-drop редактором для создания красивых и функциональных меню.
• Responsive Menu — позволяет легко сделать адаптивное многоуровневое меню с большим количеством настроек.

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

Заключение по созданию многоуровневого меню в WordPress

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

Используйте приведённые примеры кода и рекомендации для реализации удобного, красивого и функционального меню на вашем сайте wpcontrol.ru.