Меню, скелет сайту. Відвідувач сканує його за секунди: незрозуміло куди натиснути, іде геть. Базовий конструктор 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-панелі, коли плагін робить це за хвилину. Баланс між швидкістю сайту і зручністю навігації, рівно те, заради чого читач залишається на сторінці.