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

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

Почему стоит создавать многоуровневое меню вручную?

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

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

Создаем функцию для вывода многоуровневого меню

Начнем с написания функции wpcat_render_menu, которая рекурсивно обработает меню и выведет его в виде вложенных <ul> и <li>:

function wpcat_render_menu( $items, $parent_id = 0 ) {
    echo '<ul>';
    foreach ( $items as $item ) {
        if ( intval( $item->menu_item_parent ) === $parent_id ) {
            echo '<li>';
            echo '<a href="' . esc_url( $item->url ) . '">' . esc_html( $item->title ) . '</a>';
            // Рекурсивный вызов для вложенных элементов
            wpcat_render_menu( $items, $item->ID );
            echo '</li>';
        }
    }
    echo '</ul>';
}

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

Получаем меню из WordPress и вызываем нашу функцию

Чтобы получить меню, используем функцию wp_get_nav_menu_items(). Для начала нужно узнать ID меню по его названию:

$menu_name = 'primary'; // название вашего меню
$menu = wp_get_nav_menu_object( $menu_name );
if ( ! $menu ) {
    echo 'Меню "' . esc_html( $menu_name ) . '" не найдено.';
    return;
}
$menu_items = wp_get_nav_menu_items( $menu->term_id );
if ( ! $menu_items ) {
    echo 'В меню нет элементов.';
    return;
}
wpcat_render_menu( $menu_items );

Этот код можно добавить в шаблон темы, например, в header.php или в отдельный файл шаблона.

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

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

ul {
    list-style: none;
    padding-left: 0;
}
ul li {
    position: relative;
}
ul ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    padding-left: 10px;
    background: #f9f9f9;
    border: 1px solid #ccc;
}
ul li:hover > ul {
    display: block;
}

Такой стиль сделает подменю выпадающими при наведении курсора на родительский пункт. Вы можете доработать стили под дизайн вашего сайта.

Поддержка адаптивности и мобильных устройств

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

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('ul li');
    menuItems.forEach(function(item) {
        item.addEventListener('click', function(e) {
            const submenu = item.querySelector('ul');
            if (submenu) {
                e.preventDefault();
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });
});

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

Как интегрировать данное меню с WPShop темами и плагинами

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

Выводы и рекомендации по созданию многоуровневой навигации

Создание многоуровневого меню без плагинов — это отличный способ получить полный контроль над структурой и отображением навигации на WordPress. Вы научились:

• Получать и обрабатывать меню из базы WordPress;
• Рекурсивно выводить вложенные пункты;
• Стилизовать меню с помощью CSS;
• Добавлять адаптивное поведение через JavaScript.

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