Меню, скелет сайта. Посетитель сканирует его за секунды: непонятно куда нажать, уходит. Базовый конструктор WordPress во «Внешний вид → Меню» собирает навигацию за минуту, но выглядит она как голая текстовая строка. Ни иконок, ни закрепления при прокрутке, ни нормальной мобильной версии.

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

Здесь собраны оба пути: лёгкие доработки через functions.php и style.css плюс лучшие живые плагины для продвинутых меню. Материал работает на классических темах, блочных и в связке с любой популярной сборкой.

💡 Быстрый обзор:

• Установите плагин Menu Icons и добавьте иконки к пунктам меню за пять минут без кода
• Вставьте функцию wp_loginout в functions.php, кнопка входа появится прямо в навигации
• Зарегистрируйте шорткод menu и выводите готовое меню в любом месте сайта
• Закрепите меню при прокрутке тремя строками CSS либо одним из трёх плагинов
• Выберите продвинутый конструктор из трёх вариантов: UberMenu, Max Mega Menu или QuadMenu
• Настройте мобильную навигацию через WP Mobile Menu или Mobi с сенсорным интерфейсом

1. Иконки пунктов меню через Menu Icons

Быстрый способ оживить навигацию: добавить иконки рядом с названиями разделов. Глаз «схватывает» значок раньше текста, а через пару визитов иконка запоминается прочнее любого ярлыка.

Задачу закрывает бесплатный Menu Icons от команды ThemeIsle, 400 000+ активных установок на WordPress.org, рейтинг 4,4. Кода не нужно.

Порядок действий:

• Установите плагин через «Плагины → Добавить новый», наберите «Menu Icons»
• Активируйте и перейдите во «Внешний вид → Меню»
• Раскройте любой пункт, появится блок выбора иконки
• Выберите значок из Dashicons (встроены в WordPress), Font Awesome или загрузите свой
• Настройте положение и размер, сохраните

Под капотом плагин добавляет CSS-класс с иконкой к элементу <li>, чистое решение, без конфликтов с темами. Поддерживает Dashicons, Font Awesome, Elusive Icons и Genericons. Работает с любым меню, зарегистрированным через стандартный wp_nav_menu.

🔗 Menu Icons на WordPress.org

2. Кнопка входа и выхода прямо в меню

Если на сайте есть регистрация, пользователю нужен быстрый вход без поиска страницы /wp-login.php. Ссылка «Войти» или «Выйти» висит прямо в главном меню и автоматически меняется в зависимости от статуса.

Решается одной функцией в functions.php:

1
function add_login_logout_link($items, $args) {
2
    $loginoutlink = wp_loginout('index.php', false);
3
    $items .= '<li>'. $loginoutlink .'</li>';
4
    return $items;
5
}
6
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

Фрагмент цепляется за хук wp_nav_menu_items и добавляет <li> со ссылкой в конец любого меню. Функция wp_loginout() сама определяет статус: вышел пользователь, показывает «Войти», авторизован, «Выйти» с редиректом на ту же страницу.

После сохранения файла перезагрузите сайт и проверьте оба состояния. Если нужно перенаправить пользователя на конкретную страницу после входа, замените первый аргумент wp_loginout() с 'index.php' на нужный URL.

3. Шорткод для отображения меню в любом месте

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

Ответ, зарегистрировать собственный шорткод:

1
function menu_function($atts, $content = null) {
2
    extract(
3
        shortcode_atts(
4
            array( 'name' => null, ),
5
            $atts
6
        )
7
    );
8
    return wp_nav_menu(
9
        array(
10
            'menu' => $name,
11
            'echo' => false
12
        )
13
    );
14
}
15
add_shortcode('menu', 'menu_function');

Добавьте код в functions.php, сохраните, и в любом месте сайта пишите:

[menu name="главное-меню"]

Название берите из «Внешний вид → Меню», оно указано над списком пунктов. Шорткод вызывает стандартную wp_nav_menu() с подавленным выводом ('echo' => false) и возвращает готовую HTML-разметку.

Так можно держать общую навигацию в футере, дополнительную, в боковой панели конкретного поста, а для лендинга собрать отдельное меню вообще без привязки к теме.

4. Поле поиска в строке навигации

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

Базовая версия, та же техника с фильтром wp_nav_menu_items:

1
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
2
function add_search_box( $items, $args) {
3
    $items .= '<li>'. get_search_form( false ). '</li>';
4
    return $items;
5
}

Функция get_search_form(false) возвращает HTML формы поиска без вывода на экран. Поле прижмётся к последнему пункту меню, скорее всего, понадобится позиционирование. Добавьте CSS-класс к <li>:

1
$items .= '<li class="searchbox-position">'. get_search_form( false ). '</li>';

А в style.css темы пропишите отступы:

1
.searchbox-position {
2
    margin-top: 15px;
3
    margin-right: 20px;
4
}

Три строчки PHP и пара строк CSS. Результат: поле поиска всегда перед глазами, на любом разрешении.

5. Закреплённое меню при прокрутке

Sticky-меню, это когда панель навигации прилипает к верху экрана и едет вместе с пользователем вниз по странице. Удобно на лендингах, длинных статьях и в магазинах: не нужно скроллить обратно чтобы перейти в другой раздел.

Способ 1: CSS (бесплатно, без плагинов)

Найдите селектор главного меню в вашей теме, обычно .nav-menu, .genesis-nav-menu или .main-navigation. Пропишите в style.css:

1
.nav-menu {
2
    position: fixed;
3
    background: #333;
4
    top: 0px;
5
    right: 0px;
6
    left: 0px;
7
    z-index: 99;
8
}

Ключевая строка, position: fixed. Она вырывает блок из потока и фиксирует относительно окна браузера. top: 0; right: 0; left: 0 растягивают меню на всю ширину. Прижмите контент отступом сверху чтобы меню не перекрыло шапку.

Минус у CSS-метода один: после фиксации меню пропадает из потока, и контент «подпрыгивает» вверх. Решается добавлением padding-top к body, равным высоте меню.

Способ 2: плагины (тоньше контроль, без кода)

Если не хочется лезть в файлы темы, три проверенных инструмента.

myStickymenu, бесплатный плагин с 200 000+ активных установок на WordPress.org и рейтингом 4,6. Цепляется за CSS-класс навигации вашей темы, достаточно указать его в настройках. Адаптивный: на мобильных sticky-эффект отключается автоматически. Есть поле для пользовательских CSS-стилей и режим «приклеивания» с задержкой по пикселям прокрутки.

Sticky Menu (or Anything!) On Scroll, ещё один бесплатный вариант, который умеет «приклеивать» вообще любой элемент по CSS-селектору: не только меню, но и логотип, шапку целиком, кнопку. Потребует базового понимания HTML и CSS чтобы найти правильный селектор, но даёт полную свободу.

UberMenu Sticky Extension, дополнение к плагину UberMenu за $8. Если UberMenu уже стоит, расширение добавляет sticky-режим одним тумблером. На мобильных автоматически выключается чтобы не перекрывать экран.

6. Удаление пунктов меню из админки WordPress

Когда вы передаёте сайт клиенту или даёте доступ авторам, стандартная админка слишком «богатая»: 10+ разделов, многие из которых пользователю не нужны и даже опасны. Плагины и настройки тем должны оставаться только у администратора.

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

1
if (!current_user_can( 'manage_options' )) {
2
    add_action( 'admin_menu', 'my_remove_menus', 999 );
3
}
4
function my_remove_menus() {
5
    remove_menu_page( 'index.php' );                  //Dashboard
6
    remove_menu_page( 'edit.php' );                   //Posts
7
    remove_menu_page( 'upload.php' );                 //Media
8
    remove_menu_page( 'edit.php?post_type=page' );    //Pages
9
    remove_menu_page( 'edit-comments.php' );          //Comments
10
    remove_menu_page( 'themes.php' );                 //Appearance
11
    remove_menu_page( 'plugins.php' );                //Plugins
12
    remove_menu_page( 'users.php' );                  //Users
13
    remove_menu_page( 'tools.php' );                  //Tools
14
    remove_menu_page( 'options-general.php' );        //Settings
15
}

Фрагмент вешается в functions.php. Проверка !current_user_can('manage_options') отсекает администраторов, они видят всё. Остальным ролям список обрезается до того, что вы оставите.

Убирайте только те строки remove_menu_page, которые нужны. Например, для редактора можно оставить «Записи», «Медиафайлы» и «Страницы», всё остальное убрать. Важный нюанс: функция скрывает пункты из меню, но не блокирует прямой доступ по URL. Для полного закрытия страниц настройте capabilities в роли пользователя.

7. Продвинутые плагины для создания меню

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

7.1 UberMenu, самый функциональный конструктор

Ветеран рынка с 43 000+ продаж на CodeCanyon. Создаёт адаптивные мегаменю с сенсорной поддержкой. Внутрь можно положить изображения, видео, карты и готовую контактную форму в подменю. Больше 50 настроек стиля с живым превью, автоматическая генерация подменю из контента и вкладки под пунктами. Интегрируется с WooCommerce: умеет динамически подтягивать категории товаров.

Цена: от $26. 🔗 UberMenu на CodeCanyon

7.2 Max Mega Menu, бесплатный лидер

Самый популярный бесплатный плагин мегаменю на WordPress.org: 400 000+ активных установок и рейтинг 4,8. Строит мегаменю через drag-and-drop в стандартном экране «Внешний вид → Меню», никакого отдельного интерфейса. Поддерживает сетку колонок, виджеты внутри подменю, иконки и off-canvas-режим для мобильных. Frontend-скрипт весит меньше 2 КБ gzip, на скорости сайта не сказывается.

• Плюсы: встроен в родной интерфейс меню WordPress, минимальный вес скрипта, виджеты внутри подменю, бесплатная версия закрывает 90% задач
• Минусы: часть продвинутых стилей и таб-меню только в Pro ($29 в год)
• Цена: Free / Pro от $29 в год
• Скачать: 🔗 Max Mega Menu на WordPress.org

7.3 QuadMenu, вкладки, карусели и полная кастомизация

QuadMenu превращает стандартное меню в мегаменю с вкладками и каруселями, функций больше чем у Max Mega Menu, но и порог входа чуть выше. Поддерживает вертикальные и горизонтальные макеты, интеграцию с Elementor и Beaver Builder, Google Fonts и 2 000+ иконок Font Awesome. Тёмная и светлая темы из коробки, адаптивная мобильная версия с off-canvas-панелью.

• Плюсы: вкладки и карусели внутри меню, глубокая интеграция с конструкторами страниц, developer-friendly (хуки и фильтры)
• Минусы: сложнее в первичной настройке чем Max Mega Menu, часть функций только в платной версии
• Цена: Free / Premium от $15 в год
• Скачать: 🔗 QuadMenu на WordPress.org

8. Мобильные меню для смартфонов и планшетов

Мобильный трафик давно обогнал десктоп. Если на телефоне меню превращается в нечитаемую простыню, посетитель уходит. Адаптивная тема масштабирует десктопное меню под узкий экран, но структура остаётся той же: пять-шесть пунктов в строку становятся длинным вертикальным списком. Специализированный плагин даёт гамбургер-кнопку, свайпы и сенсорную оптимизацию.

8.1 WP Mobile Menu, быстрый off-canvas для любого сайта

Самый популярный бесплатный плагин мобильного меню на WordPress.org: 80 000+ активных установок и рейтинг 4,7. Добавляет off-canvas-панель которая выезжает по нажатию гамбургер-кнопки. Поддерживает три уровня вложенности, поиск внутри мобильного меню, иконки и настройку цветов. Отдельно настраивается поведение для разных разрешений экрана.

• Плюсы: минимальная настройка (работает сразу после активации), adaptive (показывается только на мобильных), не конфликтует с темами
• Минусы: часть продвинутых стилей и WooCommerce-интеграция в Pro ($19 в год)
• Цена: Free / Pro от $19 в год
• Скачать: 🔗 WP Mobile Menu на WordPress.org

8.2 Mobi, drag-and-drop-конструктор мобильного меню

Интуитивный построитель меню перетаскиванием. Меню размещается сверху или снизу экрана. Встроено 700+ иконок, любое количество значков соцсетей на панели, шрифты Google для оформления. Можно управлять видимостью меню для гостей и авторизованных пользователей отдельно. Хорошо подходит сайтам где мобильное меню должно выглядеть как самостоятельный интерфейс а не как уменьшенная копия десктопа.

Цена: от $16. 🔗 Mobi на CodeCanyon

⁉️🤔 Частые вопросы

Можно ли сделать меню вообще без плагинов, только кодом?

Да, все описанные приёмы, иконки, sticky-эффект, шорткод, кнопка входа, реализуются через functions.php и style.css без установки сторонних инструментов. Плагины просто экономят время и дают графический интерфейс тем, кто не хочет лезть в код. Если уверенно работаете с PHP и CSS, плагины не обязательны. Но когда нужны мегаменю или off-canvas-панель с анимациями, готовый плагин экономит часы ручной вёрстки.

Какой плагин выбрать для интернет-магазина на WooCommerce?

Для магазина критично мегаменю с категориями товаров, картинками и фильтрами. Здесь лучше всего показывает себя UberMenu: динамически подтягивает категории WooCommerce и строит подменю на лету. Бесплатная альтернатива, Max Mega Menu с виджетами внутри подменю: картинки категорий тянутся стандартным виджетом WooCommerce, а поиск, отдельной строкой.

Что делать, если после добавления кода в functions.php сайт перестал открываться?

Восстановите исходный файл через FTP или файловый менеджер хостинга. Перед любыми правками functions.php делайте резервную копию. Альтернативный безопасный путь, плагин Code Snippets: он позволяет добавлять PHP-фрагменты через админку и автоматически отключает код при фатальной ошибке, возвращая сайт в рабочее состояние.

Нужно ли обновлять меню после смены темы WordPress?

Меню привязано к области отображения (location), которую регистрирует тема. При смене темы эти области меняются, меню нужно заново назначить во «Внешний вид → Меню» на вкладке «Управление областями». Сами пункты, их порядок и вложенность сохраняются, теряется только привязка к location.

Как проверить, что мобильное меню работает на всех устройствах?

Откройте сайт в режиме адаптивного дизайна в Chrome DevTools (F12 → иконка устройства) и пройдите по шести брейкпойнтам: 320px, 375px, 414px, 768px, 1024px, 1280px. Проверьте гамбургер-кнопку (должна быть над контентом, не перекрыта), скорость отклика анимации и видимость всех пунктов меню без горизонтальной прокрутки. Популярные плагины вроде WP Mobile Menu дают настройку брейкпойнта вручную, можно задать разную ширину срабатывания под конкретную тему.

Что ставить под вашу задачу: итоговый расклад

Если коротко: сначала исчерпайте встроенные возможности WordPress и лёгкие CSS-доработки, потом подключайте плагины. Так стек остаётся минимальным, сайт, быстрым, а навигация, именно такой, какой она нужна читателям.

• Простой блог или визитка, начните с Menu Icons (бесплатно) и sticky-меню тремя строками CSS. Этого достаточно чтобы навигация перестала выглядеть сырой.
• Сайт с регистрацией, добавьте кнопку входа через wp_loginout(). Пользователи перестанут искать страницу логина.
• Лендинг или длинная статья, шорткод [menu] расставит навигационные блоки по телу страницы где угодно.
• Интернет-магазин или контентный портал, здесь нужно мегаменю. Берите UberMenu если бюджет позволяет и нужен максимум функций, либо Max Mega Menu для типовых задач (бесплатно и без потери скорости).
• Мобильная аудитория доминирует, WP Mobile Menu закроет 9 из 10 сценариев: ставится за минуту и сразу даёт off-canvas-панель с поиском. Если нужен более самостоятельный мобильный интерфейс, посмотрите Mobi.

Возьмите за правило: один плагин на одну задачу. Не ставьте мегаменю ради пары иконок и не пишите код для off-canvas-панели когда плагин делает это за минуту. Баланс между скоростью сайта и удобством навигации, ровно то, ради чего читатель остаётся на странице.