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

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

Что такое выпадающее меню и зачем оно нужно в WordPress

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

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

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

Регистрация меню в functions.php

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

function wpcat_register_menus() {
    register_nav_menus(array(
        'primary-menu' => __('Primary Menu', 'wpcat'),
    ));
}
add_action('after_setup_theme', 'wpcat_register_menus');

Это создаст меню с идентификатором primary-menu, которое можно будет настроить в админке WordPress.

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

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

wp_nav_menu(array(
    'theme_location' => 'primary-menu',
    'container' => 'nav',
    'container_class' => 'wpcat-primary-menu',
    'menu_class' => 'wpcat-menu',
));

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

Создание выпадающего меню: структура HTML и CSS

WordPress по умолчанию выводит меню с необходимой вложенностью <ul> и <li> для подменю, но для правильной работы выпадающего меню нужно добавить CSS и JavaScript (при необходимости).

Пример CSS для выпадающего меню

Добавьте в файл стилей темы style.css следующий код:

/* Основные стили меню */
.wpcat-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #333;
}

.wpcat-menu li {
    position: relative;
}

.wpcat-menu li a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.wpcat-menu li:hover > a {
    background-color: #555;
}

/* Стили для подменю */
.wpcat-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #444;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 180px;
    z-index: 1000;
}

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

.wpcat-menu li ul li a {
    padding: 12px 15px;
    color: #eee;
}

.wpcat-menu li ul li a:hover {
    background-color: #666;
}

Этот CSS создаёт горизонтальное меню с выпадающими подменю по наведению мыши.

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

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

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.wpcat-menu li.menu-item-has-children > a');
    menuItems.forEach(function(item) {
        item.addEventListener('click', function(e) {
            const submenu = item.nextElementSibling;
            if (submenu && submenu.style.display !== 'block') {
                e.preventDefault();
                submenu.style.display = 'block';
            }
        });
    });
});

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

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

Если вы хотите добавить более сложные функции, например, иконки, анимации или кастомные стили без кода, можно использовать плагины. Вот несколько рекомендаций:

• Max Mega Menu — мощный плагин для создания мегаменю с визуальным редактором.
• WP Responsive Menu — помогает сделать меню адаптивным с мобильной навигацией.
• Nav Menu Roles — позволяет управлять видимостью пунктов меню по ролям пользователей.

Но если вам достаточно базового кастомного выпадающего меню, описанного выше, лучше использовать собственный код — это быстрее и легче поддерживать.

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

Иногда хочется добавить иконки к пунктам меню. Это можно сделать с помощью хука walker_nav_menu_start_el. Пример кода для functions.php:

function wpcat_add_menu_icons($item_output, $item, $depth, $args) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $icon = '<span class="wpcat-menu-icon">▾</span>'; // стрелка вниз
        $item_output = str_replace('<a', $icon . '<a', $item_output);
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'wpcat_add_menu_icons', 10, 4);

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

Советы по отладке и улучшению меню

1. Проверьте структуру меню в админке: Меню должно иметь вложенность для подменю.

2. Используйте инструменты разработчика браузера: Чтобы проверить, правильно ли применяются стили и отображается структура.

3. Тестируйте на разных устройствах: Особенно важно проверить работу меню на мобильных и планшетах.

4. Оптимизируйте CSS и JS: Чтобы не замедлять загрузку сайта, объединяйте и минифицируйте файлы.

5. Кэширование: Если используете кэш-плагины, не забудьте очистить кэш после изменений меню и стилей.