Как создать два меню в шапке в WordPress: подробное руководство

09.09.2025
21701

3 мин
162

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

Потребность в дополнительной навигации

Современные веб-сайты часто требуют разделения навигационных потоков. Например, основное меню может содержать ссылки на ключевые разделы сайта (Услуги, Портфолио, Блог), в то время как второе, вспомогательное меню может включать ссылки на менее приоритетные, но важные страницы: Контакты, О компании, Условия использования, Личный кабинет, переключатель языков или ссылки на социальные сети.

Примеры использования двух меню

Корпоративные сайты: Основное меню для навигации по продуктам/услугам, второе – для информации о компании, вакансиях, контактах.
Интернет-магазины: Основное меню с категориями товаров, второе – для аккаунта пользователя, корзины, избранного, информации о доставке.
Информационные порталы: Главное меню с основными рубриками, вспомогательное – с дополнительными сервисами, подпиской, контактами редакции.

Планирование структуры меню

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

Способ 1: Использование функциональности темы (если поддерживается)

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

Проверка наличия двух областей меню в теме

Самый простой способ – проверить это в административной панели WordPress:

Перейдите в раздел Внешний вид -> Меню.
На вкладке Управление областями (или аналогичной, название может незначительно отличаться) посмотрите список доступных областей.
Если вы видите две или более областей, относящихся к шапке (например, ‘Primary Menu’, ‘Secondary Menu’, ‘Top Bar Navigation’, ‘Header Menu’), ваша тема поддерживает эту функциональность.

Настройка меню в разделе ‘Внешний вид -> Меню’

Создайте два отдельных меню:

Перейдите на вкладку Редактировать меню.
Нажмите создайте новое меню.
Дайте первому меню имя (например, ‘Основное меню’) и добавьте необходимые пункты.
Сохраните меню.
Повторите шаги 2-4 для второго меню (например, ‘Верхнее меню’).

Назначение меню областям в шапке

После создания меню вернитесь на вкладку Управление областями:

Напротив каждой доступной области, относящейся к шапке, выберите из выпадающего списка соответствующее созданное вами меню (‘Основное меню’, ‘Верхнее меню’).
Нажмите Сохранить изменения.

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

Способ 2: Использование плагинов для создания нескольких меню

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

Обзор популярных плагинов

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

Menu Locations: Простой плагин, позволяющий создавать новые области меню и управлять ими.
Meks Menu Locations: Аналогичный плагин, предлагающий дополнительные возможности по настройке.
Max Mega Menu: Хотя это плагин для создания мега-меню, он также позволяет управлять областями и создавать сложные структуры, которые могут заменить второе меню.

Выбор плагина зависит от ваших потребностей и сложности задачи.

Установка и активация плагина

Перейдите в Плагины -> Добавить новый.
Найдите выбранный плагин по названию.
Нажмите Установить, а затем Активировать.

Настройка областей меню плагином

После активации плагина (например, Menu Locations) обычно появляется новый раздел в настройках или в разделе Внешний вид. Следуйте инструкциям плагина для регистрации новой области меню. Как правило, это сводится к указанию названия области и ее идентификатора (slug).

После регистрации новой области она появится на вкладке Управление областями в разделе Внешний вид -> Меню, где вы сможете назначить ей одно из созданных меню.

Размещение меню в шаблоне шапки (header.php)

Некоторые плагины автоматически пытаются встроить меню, но часто требуется вручную добавить вызов новой области в шаблон шапки (header.php) вашей дочерней темы. Плагин обычно предоставляет шорткод или PHP-функцию для вставки. Например:

<?php 
if ( function_exists( 'plugin_function_to_display_menu' ) ) {
    plugin_function_to_display_menu( 'your-new-menu-location-slug' );
}
?>

Или используя стандартную функцию WordPress, если плагин просто зарегистрировал область:

<?php
if ( has_nav_menu( 'secondary_header_menu' ) ) { // Проверяем, назначено ли меню для этой области
    wp_nav_menu([
        'theme_location' => 'secondary_header_menu', // Идентификатор новой области
        'container'      => 'nav',                // Тег-обертка
        'container_class'=> 'secondary-navigation', // CSS класс для обертки
        'menu_class'     => 'secondary-menu',       // CSS класс для списка <ul>
        'depth'          => 1                     // Глубина вложенности (1 - без подменю)
    ]);
}
?>

Точное место вставки зависит от структуры вашего header.php.

Способ 3: Редактирование файла header.php темы (для продвинутых пользователей)

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

Создание резервной копии файла header.php

Перед внесением любых изменений в файлы темы обязательно создайте резервные копии functions.php и header.php.

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

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

<?php
/**
 * Регистрирует дополнительные области навигационного меню.
 *
 * @link https://developer.wordpress.org/reference/functions/register_nav_menus/
 */
function my_register_additional_menu_locations(): void {
    register_nav_menus([
        'secondary_header_menu' => esc_html__( 'Secondary Header Menu', 'text-domain' ),
        // Можно добавить и другие области при необходимости
    ]);
}
add_action( 'after_setup_theme', 'my_register_additional_menu_locations' );
?>

secondary_header_menu: Уникальный идентификатор (slug) для новой области.
Secondary Header Menu: Название области, которое будет отображаться в админ-панели.
text-domain: Текстовый домен вашей темы для перевода строки (замените на свой).

После добавления этого кода и сохранения файла, новая область ‘Secondary Header Menu’ появится в Внешний вид -> Меню -> Управление областями.

Добавление кода для отображения меню в header.php

Скопируйте файл header.php из родительской темы в папку дочерней темы (если его там еще нет). Откройте header.php дочерней темы и найдите место, где вы хотите вывести второе меню (например, рядом с основным меню или в верхней полосе).

Вставьте следующий PHP-код:

<?php
// Проверяем, существует ли область меню и назначено ли ей меню
if ( has_nav_menu( 'secondary_header_menu' ) ) : 
?>
    <nav id="secondary-navigation" class="secondary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Secondary Header Menu', 'text-domain' ); ?>">
        <?php
        // Выводим меню
        wp_nav_menu([
            'theme_location'  => 'secondary_header_menu',
            'menu_class'      => 'secondary-menu', // CSS класс для <ul>
            'container'       => false, // Не использовать стандартный div/nav контейнер, мы добавили свой <nav>
            'depth'           => 1, // Ограничиваем глубину (без выпадающих подменю)
        ]);
        ?>
    </nav><!-- #secondary-navigation -->
<?php 
endif; 
?>

secondary_header_menu: Идентификатор, который вы зарегистрировали в functions.php.
Классы secondary-navigation и secondary-menu используются для дальнейшей стилизации.

Стилизация меню с помощью CSS

После добавления кода меню появится на сайте, но, скорее всего, без стилей. Используйте CSS для придания ему нужного вида. Добавьте стили в файл style.css дочерней темы или через кастомайзер (Внешний вид -> Настроить -> Дополнительные стили).

Пример базовых стилей (необходимо адаптировать под вашу тему):

/* Стили для контейнера второго меню */
.secondary-navigation {
    float: right; /* Пример позиционирования */
    margin-top: 10px; /* Пример отступа */
}

/* Стили для списка <ul> второго меню */
.secondary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Отображаем пункты в ряд */
}

/* Стили для пунктов меню <li> */
.secondary-menu li {
    margin-left: 15px; /* Отступ между пунктами */
}

/* Стили для ссылок <a> */
.secondary-menu li a {
    text-decoration: none;
    color: #555; /* Цвет ссылок */
    font-size: 0.9em;
}

.secondary-menu li a:hover {
    color: #000; /* Цвет при наведении */
}

Как создать два меню в шапке в WordPress: подробное руководство

Потребность в дополнительной навигации

Примеры использования двух меню

Планирование структуры меню

Способ 1: Использование функциональности темы (если поддерживается)

Проверка наличия двух областей меню в теме

Настройка меню в разделе ‘Внешний вид -> Меню’

Назначение меню областям в шапке

Способ 2: Использование плагинов для создания нескольких меню

Обзор популярных плагинов

Установка и активация плагина

Настройка областей меню плагином

Размещение меню в шаблоне шапки (header.php)

Способ 3: Редактирование файла header.php темы (для продвинутых пользователей)

Создание резервной копии файла header.php

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

Добавление кода для отображения меню в header.php

Стилизация меню с помощью CSS

Рекомендации и заключение

Оптимизация для мобильных устройств

Тестирование и отладка

Советы по дизайну и юзабилити

Добавить комментарий

Как создать два меню в шапке в WordPress: подробное руководство

Потребность в дополнительной навигации

Примеры использования двух меню

Планирование структуры меню

Способ 1: Использование функциональности темы (если поддерживается)

Проверка наличия двух областей меню в теме

Настройка меню в разделе ‘Внешний вид -> Меню’

Назначение меню областям в шапке

Способ 2: Использование плагинов для создания нескольких меню

Обзор популярных плагинов

Установка и активация плагина

Настройка областей меню плагином

Размещение меню в шаблоне шапки (header.php)

Способ 3: Редактирование файла header.php темы (для продвинутых пользователей)

Создание резервной копии файла header.php

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

Добавление кода для отображения меню в header.php

Стилизация меню с помощью CSS

Рекомендации и заключение

Оптимизация для мобильных устройств

Тестирование и отладка

Советы по дизайну и юзабилити

Добавить комментарий

Можно ли взломать плагин WordPress и как это происходит?

WordPress: Как безопасно добавить код в шапку, подвал и через плагины

Как работают темы в WordPress: полное руководство по механизму функционирования