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

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

Регистрация области меню в WordPress

Первым шагом будет регистрация области для меню в файле functions.php вашей темы. Это позволит администратору сайта назначать меню через админпанель, а нам — выводить его программно.

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

В данном коде мы регистрируем одну позицию меню с идентификатором primary-menu. Вы можете зарегистрировать несколько областей, если нужно.

Создание кастомного Walker класса для многоуровневого меню

Чтобы вывести многоуровневое меню с кастомной HTML-разметкой, нужно создать собственный класс, наследующий Walker_Nav_Menu. Это позволит нам управлять генерацией тегов <ul> и <li> для всех уровней вложенности.

class WPConsult_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 . "'>\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-children';
        }

        $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 );
    }
}

Этот класс выводит вложенные списки с классами sub-menu для первого уровня вложенности и sub-sub-menu для более глубоких уровней. Также добавляет класс has-children для пунктов с подменю, что удобно для стилизации.

Вывод меню в шаблоне с использованием кастомного Walker

После регистрации меню и создания кастомного Walker, осталось вывести меню в нужном месте шаблона, например, в header.php:

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

Параметр walker указывает WordPress использовать наш класс для генерации меню.

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

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

.main-navigation ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.main-navigation li {
    position: relative;
    display: inline-block;
}

.main-navigation li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

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

.main-navigation li ul li {
    display: block;
}

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

.main-navigation a:hover {
    background-color: #f0f0f0;
}

.menu-item.has-children > a::after {
    content: '\25BC'; /* стрелка вниз */
    margin-left: 5px;
    font-size: 0.6em;
}

Эти стили показывают подменю при наведении и добавляют стрелку у элементов с вложенными списками. Вы можете расширить их и добавить адаптивность по своему усмотрению.

Использование плагинов для расширения возможностей меню

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

Резюме и советы по оптимизации

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

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