Создайте выпадающее меню, используя функцию wp_nav_menu()

Вопрос или проблема

<div class="container">
<div class="nav-menu">
<a class="toggleMenu" href="#">Меню</a>
<ul class="nav">
    <li class="test"><a href="#">Главная </a></li>
    <li class="test"><a href="#">О нас  </a></li>
    <li><a href="#">Услуга</a>
        <ul class="music-dropdown-menu">
          <li><a href="#">Категория1</a></li>
          <li><a href="#">Категория2</a></li>
          <li><a href="#">Категория3</a></li>
          <li><a href="#">Категория4</a></li>
          <li><a href="#">Категория5</a></li>
        </ul>
    </li>
    <li><a href="#">Почему мы</a></li>
    <li><a href="#"> Карьера</a></li>
    <li><a href="#">Контакты</a></li>
</ul>
</div>
</div>

.

Ответ или решение

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

1. Настройка меню в WordPress

Первым шагом для создания выпадающего меню является настройка самого меню через админ-панель WordPress. Для этого выполните следующие действия:

1. Войдите в админ-панель WordPress.
2. Перейдите в раздел «Внешний вид» > «Меню».
3. Создайте новое меню и добавьте необходимые пункты, включая подменю. Например, чтобы добавить категорию «Service» с подменю «Category1», «Category2» и т.д., просто перетащите пункты под нужный элемент.

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

После того как меню создано, вам нужно зарегистрировать его в файле вашей темы (обычно это functions.php). Используйте следующий код для регистрации:

function register_my_menu() {
    register_nav_menu('header-menu', __('Header Menu'));
}
add_action('init', 'register_my_menu');

3. Использование wp_nav_menu()

Теперь, когда меню зарегистрировано, можно использовать функцию wp_nav_menu() в шаблонах вашей темы. Расположите вызов этой функции внутри блока <div class="nav-menu">, чтобы создать необходимую разметку.

Вот пример реализации:

<div class="container">
    <div class="nav-menu">
        <a class="toggleMenu" href="#">Menu</a>
        <?php
        wp_nav_menu(array(
            'theme_location' => 'header-menu',
            'container'      => false,  // Убираем контейнер
            'items_wrap'     => '<ul class="nav">%3$s</ul>', // Настройка обертки для пунктов меню
            'depth'          => 2,      // Уровень глубины для подменю
            'add_li_class'   => 'test',  // Добавление класса к элементу списка
        ));
        ?>
    </div>
</div>

4. Стиль и поведение выпадающего меню

Для обеспечения корректного отображения и функциональности выпадающего меню, вам могут понадобиться некоторые CSS и JavaScript. Например:

.nav {
    list-style: none;
}
.nav li {
    position: relative;
    display: inline-block;
}
.nav li ul {
    display: none; /* Скрываем подменю по умолчанию */
    position: absolute; /* Позиционирование подменю */
    left: 0;
    top: 100%;
}
.nav li:hover ul {
    display: block; /* Показываем подменю при наведении */
}

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

Заключение

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

Если у вас возникнут дополнительные вопросы или понадобится помощь, не стесняйтесь обращаться.