WordPress Меню: Повний технічний посібник з архітектури навігації

Меню WordPress — це структурована колекція навігаційних посилань, що відображаються як HTML <nav> елементи, які з’єднують відвідувачів зі сторінками, публікаціями, категоріями, власними URL-адресами або таксономіями на вашому сайті. Вони реєструються темами за допомогою register_nav_menus() та керуються через адміністративний інтерфейс WordPress або Customizer, надаючи власникам сайтів повний контроль над ієрархією навігації без необхідності торкатися коду.

Для більшості інсталяцій WordPress меню є основною системою навігації. Правильне налаштування меню впливає не лише на користувацький досвід, але й на ефективність сканування, розподіл внутрішнього посилального капіталу та на те, як пошукові системи інтерпретують ієрархію контенту вашого сайту.

Як насправді працюють меню WordPress зсередини

Перш ніж торкатися панелі адміністратора, корисно зрозуміти архітектуру. Меню WordPress функціонують через три взаємопов’язані рівні:

• Реєстрація теми: Тема оголошує доступні місця розташування меню за допомогою register_nav_menus() всередині functions.php. Без цього виклику на екрані адміністратора Menus не відображаються місця для призначення.
• Зберігання в базі даних: Елементи меню зберігаються як власний тип запису (nav_menu_item) у wp_posts, а зв’язки керуються через wp_term_relationships. Кожен елемент містить метадані, такі як URL, мітка, ID батьківського елемента та позиція.
• Відображення в шаблоні: Тема викликає wp_nav_menu() у своїх файлах шаблонів, передаючи аргумент theme_location. WordPress визначає призначене меню, будує дерево елементів і виводить семантичний HTML.

Розуміння цього означає, що ви точно знаєте, де шукати, коли щось ламається — відсутній виклик wp_nav_menu() у шаблоні, тема, яка ніколи не реєструвала місце розташування, або пошкоджений зв’язок термінів у базі даних.

Крок 1: Доступ до менеджера меню WordPress

Увійдіть до панелі керування WordPress і перейдіть до Зовнішній вигляд > Меню. Цей екран є центральною панелью керування для всіх операцій з меню.

Якщо ви не бачите меню Зовнішній вигляд на бічній панелі, ваша роль користувача, ймовірно, не має можливості edit_theme_options. Потрібен обліковий запис адміністратора.

Альтернативний шлях через Customizer:

Перейдіть до Зовнішній вигляд > Налаштувати > Меню. Цей маршрут надає панель попереднього перегляду в реальному часі поряд з редактором, що корисно для візуального позиціонування, але пропонує менше параметрів масового редагування, ніж спеціальний екран Menus.

Крок 2: Створення нового меню

На екрані Menus натисніть посилання «Створити нове меню» у верхній частині сторінки.

1. Введіть описову внутрішню назву — наприклад, Primary Navigation, Footer Legal Links або Mobile Sidebar. Ця назва ніколи не відображається відвідувачам; вона існує виключно для вашої зручності при керуванні кількома меню.
2. Натисніть Створити меню.

Найкраща практика — називати меню за їх функцією та розташуванням, а не загальними мітками на кшталт «Меню 1». Коли сайт розростається до п’яти або шести меню, чіткі назви запобігають дорогим помилкам призначення.

Крок 3: Додавання елементів до меню

Ліва панель на екрані Menus відображає всі доступні типи контенту, які можна додати як елементи меню.

Сторінки

Встановіть прапорці поруч з наявними сторінками (наприклад, Головна, Про нас, Послуги, Контакти) і натисніть Додати до меню. За замовчуванням WordPress показує лише найновіші сторінки. Натисніть Переглянути всі, щоб побачити повний список, або скористайтеся вкладкою Пошук, щоб знайти конкретну сторінку за назвою.

Публікації та власні типи записів

Окремі публікації можна додати таким же чином. Якщо ваша тема або плагін реєструє власні типи записів (наприклад, portfolio, product), ці типи записів відображаються як окремі панелі — за умови, що вони були зареєстровані з show_in_nav_menus => true.

Категорії та теги

Терміни таксономії є потужними елементами меню для сайтів з великою кількістю контенту. Додавання посилання на категорію спрямовує відвідувачів на сторінку архіву цієї категорії, автоматично відображаючи всі пов’язані публікації. Це особливо ефективно для новинних сайтів або багатотематичних блогів, де контент організований за темами.

Власні посилання

Власні посилання приймають будь-який URL — внутрішній або зовнішній — у поєднанні з текстом посилання на ваш вибір. Варіанти використання включають:

• Посилання на субдомен або зовнішній інструмент
• Створення елемента-заповнювача батьківського рівня (використовуйте # як URL), який діє як тригер випадаючого меню без власного призначення
• Посилання на якірні цілі всередині сторінки (наприклад, https://example.com/about/#team)

Щоб додати власне посилання:

1. Розгорніть панель Власні посилання.
2. Введіть повний URL у поле URL.
3. Введіть видиму мітку у поле Текст посилання.
4. Натисніть Додати до меню.

Крок 4: Організація структури та ієрархії меню

Після того як елементи з’являться в конструкторі меню праворуч, ви керуєте порядком та ієрархією за допомогою перетягування.

Зміна порядку елементів

Натисніть і утримуйте будь-який елемент меню, потім перетягніть його вгору або вниз, щоб змінити його позицію. Крайні ліві елементи відображаються першими в горизонтальних навігаційних панелях.

Створення підменю (випадаюча навігація)

Перетягніть елемент меню трохи правіше та нижче іншого елемента. З’явиться візуальний відступ, що вказує на зв’язок батьківського та дочірнього елементів. Елемент із відступом стає записом підменю, що відображається у випадаючому списку під своїм батьківським елементом.

Можна вкладати кілька рівнів, хоча більшість тем стилізують лише два або три рівні. Поза цими межами підтримка CSS та JavaScript варіюється, а UX погіршується на мобільних пристроях.

Редагування окремих елементів меню

Натисніть стрілку з правого боку будь-якого елемента меню, щоб розгорнути його налаштування:

• Мітка навігації: Текст, що відображається у відрендереному меню (незалежно від назви сторінки).
• Атрибут title: Заповнює HTML-атрибут title тегу якоря — корисно для доступності, але часто надлишково, якщо мітка вже є описовою.
• Відкрити посилання в новій вкладці: Додає target="_blank" і, що важливо, WordPress автоматично додає rel="noopener noreferrer" для запобігання зворотному перехопленню вкладок.
• CSS-класи: Додайте власні класи до окремих елементів для цільового стилізування.
• Зв’язок посилання (XFN): Рідко використовується в сучасних робочих процесах; дозволяє визначити зв’язок між вами та цільовим посиланням за допомогою мікроформатів XFN.
• Опис: Деякі теми відображають короткий опис під міткою меню. Більшість — ні.

Примітка: Поля CSS-класи та Опис приховані за замовчуванням. Щоб їх відобразити, натисніть Параметри екрана у верхньому правому куті сторінки Menus і увімкніть відповідні прапорці.

Крок 5: Призначення меню місцю розташування теми

Створення меню не означає його появу на вашому сайті. Ви повинні призначити його зареєстрованому місцю розташування теми.

Прокрутіть до Налаштувань меню внизу конструктора меню та встановіть прапорець поруч із потрібним місцем розташування — зазвичай позначеним як Основне меню, Додаткове меню, Меню підвалу або Меню соціальних посилань, залежно від того, що реєструє ваша активна тема.

Натисніть Зберегти меню.

Якщо очікуване місце розташування теми відсутнє, тема його не зареєструвала. Ви можете перевірити зареєстровані місця розташування програмно:

print_r( get_registered_nav_menus() );

Запустіть це у тимчасовому файлі шаблону або через плагін, наприклад Query Monitor, щоб перевірити доступні місця розташування.

Призначення меню через Customizer

Перейдіть до Зовнішній вигляд > Налаштувати > Меню > Переглянути всі місця розташування. Кожне зареєстроване місце розташування має випадаючий список, де ви вибираєте, яке меню відображати. Зміни тут попередньо переглядаються в реальному часі перед публікацією.

Крок 6: Розширене налаштування меню

Додавання іконок до елементів меню

Більшість тем не підтримують іконки в елементах меню нативно. Поширені підходи:

• Псевдоелементи CSS: Додайте клас до елемента меню та використовуйте ::before або ::after у вашій таблиці стилів для вставки іконки з бібліотеки, наприклад Font Awesome.
• Мітка навігації з HTML: Деякі теми дозволяють HTML у полі Мітки навігації. Ви можете вставити тег <i> або <svg> безпосередньо, хоча це ненадійно і ламається, якщо тема очищає мітки.
• Вибір іконок на основі плагінів: Плагіни, такі як Max Mega Menu або WP Menu Icons, додають вибір іконок безпосередньо до редактора елементів меню.

Мега-меню

Для великих сайтів з глибокими ієрархіями контенту стандартні випадаючі списки стають незручними. Мега-меню відображає широку багатоколонкову панель замість вузького вертикального списку. Реалізація вимагає або спеціального плагіна, або теми, яка нативно підтримує цей шаблон. Структура меню в WordPress залишається такою ж — різниця полягає виключно в тому, як CSS та JavaScript теми відображають вкладені елементи.

Адаптивні та мобільні меню

Усі сучасні теми згортають горизонтальну навігацію в перемикач-гамбургер на малих вікнах перегляду. Ця поведінка обробляється JavaScript та CSS теми, а не ядром WordPress. Якщо мобільне меню вашої теми зламане або недоступне, проблема майже завжди у файлі navigation.js теми або у відсутньому атрибуті ARIA на кнопці перемикача.

Для відповідності вимогам доступності (WCAG 2.1 AA) кнопка перемикача повинна мати:

• Атрибут aria-expanded, що перемикається між true та false при натисканні
• Атрибут aria-controls, що вказує на ID контейнера меню
• Видимий індикатор фокусу

Крок 7: Меню у віджетизованих областях

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

Для класичних віджетів (до WordPress 5.8):

1. Перейдіть до Зовнішній вигляд > Віджети.
2. Перетягніть віджет Меню навігації до потрібної області віджетів.
3. Виберіть меню зі випадаючого списку та збережіть.

Для екрана віджетів блочного редактора (WordPress 5.8+):

1. Перейдіть до Зовнішній вигляд > Віджети.
2. Натисніть іконку +, щоб додати блок.
3. Знайдіть і вставте блок Навігація або блок Власний HTML.
4. Блок Навігація може посилатися на наявне меню за назвою.

Для тем з повним редагуванням сайту (FSE):

У темах на основі блоків традиційні меню замінені блоком Навігація всередині Редактора сайту (Зовнішній вигляд > Редактор). Блок Навігація використовує ті самі дані меню, але керується повністю в інтерфейсі блочного редактора. Класичний екран Зовнішній вигляд > Меню може взагалі не відображатися в темах FSE.

Типи меню WordPress: порівняння

Керування кількома меню

WordPress підтримує необмежену кількість збережених меню, але лише одне меню може бути призначено кожному місцю розташування теми одночасно. Практична архітектура з кількома меню для типового бізнес-сайту:

• Основне меню: Сторінки послуг та контенту верхнього рівня
• Меню підвалу (Колонка 1): Сторінки компанії та юридичні сторінки
• Меню підвалу (Колонка 2): Посилання на підтримку та ресурси
• Мобільне меню: Спрощена версія основного меню з меншою кількістю елементів для зручнішої навігації великим пальцем
• Меню панелі керування/облікового запису: Актуально лише якщо сайт має область для авторизованих користувачів

Щоб перемикатися між меню на екрані Menus, використовуйте випадаючий список Вибрати меню для редагування у верхній частині та натисніть Вибрати.

Програмне керування меню

Для розробників, які керують WordPress у масштабі — особливо на VPS Хостингу або Виділених серверах, де розгортання виконуються за скриптами — програмне створення та призначення меню є набагато надійнішим, ніж ручні кліки в адмінці.

Створення меню та його призначення місцю розташування:

// Create the menu
$menu_id = wp_create_nav_menu( 'Primary Navigation' );

// Add a page item
wp_update_nav_menu_item( $menu_id, 0, array(
    'menu-item-title'   => 'Home',
    'menu-item-url'     => home_url( '/' ),
    'menu-item-status'  => 'publish',
    'menu-item-type'    => 'custom',
) );

// Assign to a theme location
$locations = get_theme_mod( 'nav_menu_locations' );
$locations['primary'] = $menu_id;
set_theme_mod( 'nav_menu_locations', $locations );

Експорт та імпорт меню між середовищами за допомогою WP-CLI:

# Export the full site (includes menu data in the WXR file)
wp export --path=/var/www/html --dir=/tmp/exports

# On the target server, import
wp import /tmp/exports/site.xml --authors=create

WP-CLI також дозволяє безпосередньо перевіряти призначення меню:

wp menu list
wp menu location list
wp menu location assign primary my-menu-slug

Це безцінно при міграції інсталяцій WordPress між тестовим і робочим середовищами на VPS з cPanel або чистому Linux-сервері.

Поширені проблеми з меню та способи їх вирішення

Меню не відображається на фронтенді

• Меню було створено, але не призначено місцю розташування теми. Перейдіть до Зовнішній вигляд > Меню > Налаштування меню та встановіть прапорець місця розташування.
• Файл шаблону теми не викликає wp_nav_menu() для цього місця розташування. Перевірте header.php теми або відповідну частину шаблону.
• Плагін кешування обслуговує застарілу сторінку. Очистіть кеш після збереження меню.

Елементи меню відображають неправильний URL

• URL сайту змінився (наприклад, після міграції з HTTP на HTTPS або переходу на новий домен). Елементи власних посилань зберігають абсолютні URL і повинні бути оновлені вручну або через пошук і заміну в базі даних:

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --path=/var/www/html

Підменю у випадаючих списках не відображаються

• JavaScript теми для подій наведення або кліку не завантажується. Перевірте консоль браузера на наявність помилок JS.
• Правило CSS приховує контейнер підменю. Перевірте елемент і знайдіть display: none без відповідного стану наведення/фокусу.
• Елементи меню правильно вкладені в адмінці, але тема підтримує лише один рівень глибини.

Меню зникає після зміни теми

• Меню зберігаються в базі даних, але місця розташування тем змінюються між темами. Після перемикання перейдіть до Зовнішній вигляд > Меню та перепризначте свої меню місцям розташування нової теми.

Міркування безпеки для навігації WordPress

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

• Відкрите перенаправлення через власні посилання: Якщо ваш сайт програмно будує URL елементів меню з параметрів запиту, перевіряйте та очищайте ввід. Функція esc_url() WordPress повинна обгортати будь-який вивід URL.
• Підвищення привілеїв через видимість меню: Деякі плагіни пропонують правила «видимості меню» (показувати цей елемент лише авторизованим користувачам, адміністраторам тощо). Переконайтеся, що ці правила застосовуються на стороні сервера, а не просто приховуються через CSS — приховування посилання в DOM не обмежує доступ до цільової сторінки.
• XSS у мітках навігації: WordPress очищає мітки меню при виведенні, але власні реалізації wp_nav_menu() з item_spacing => 'discard' або власними класами walker можуть обходити стандартне екранування. Завжди використовуйте esc_html() або esc_attr() у власних walker-класах.

Підтримання актуальності вашої інсталяції WordPress, тем та плагінів є базовим захистом. Якщо ви запускаєте WordPress на плані Спільного веб-хостингу, переконайтеся, що ваш хостинг застосовує правила WAF на рівні сервера, які перехоплюють поширені шаблони ін’єкцій, спрямованих на адміністративний інтерфейс.

SSL та цілісність URL меню

Якщо ваш сайт працює під HTTPS — а він повинен, оскільки Google розглядає HTTP як сигнал ранжування — всі URL елементів меню повинні використовувати схему https://. Попередження про змішаний контент, спричинені одним посиланням http:// у меню, можуть пригнічувати індикатор безпечного замка браузера та підривати довіру відвідувачів.

Переконайтеся, що ваша конфігурація SSL правильна і що ваші SSL-сертифікати охоплюють усі субдомени, на які посилаються елементи вашого меню, особливо якщо ви посилаєтеся на субдомен, наприклад shop.example.com або docs.example.com.

Після встановлення або оновлення SSL-сертифіката виконайте повний аудит меню:

wp menu item list --menu=primary --fields=url --format=csv | grep "^http://"

Будь-який результат цієї команди є елементом меню, який потрібно оновити до HTTPS.

Ключові технічні висновки

• Реєструйте місця розташування меню у functions.php за допомогою register_nav_menus() перш ніж очікувати їх появи в адмінці.
• Призначайте меню місцям розташування — створення меню без призначення нічого не відображає на фронтенді.
• Використовуйте Параметри екрана, щоб розблокувати поля CSS-класи, Опис та Зв’язок посилання в редакторі елементів меню.
• У темах з повним редагуванням сайту керуйте навігацією через блок Навігація в Редакторі сайту, а не через класичний екран Menus.
• Використовуйте команди wp menu WP-CLI для скриптованих розгортань, міграцій та масових оновлень у кількох середовищах.
• Після будь-якої міграції домену або переходу з HTTP на HTTPS виконайте пошук і заміну URL елементів меню — власні посилання зберігають абсолютні шляхи.
• Перевіряйте доступність мобільного меню: aria-expanded, aria-controls та керування фокусом клавіатури не є необов’язковими для відповідності вимогам.
• Інвалідація кешу є обов’язковою після кожного збереження меню у виробничих середовищах із об’єктним або сторінковим кешуванням.
• Власні walker-класи у wp_nav_menu() обходять стандартне екранування — завжди явно застосовуйте esc_html() та esc_url().
• Для багатосередовищних налаштувань WordPress на Панелях керування VPS використовуйте експорти WP-CLI для надійного перенесення конфігурацій меню, а не відтворюйте їх вручну.

FAQ

Чи можна мати різні меню для мобільних та десктопних пристроїв на одному сайті WordPress?

Не нативно лише через систему меню WordPress. Стандартний підхід — зареєструвати два місця розташування теми — одне для десктопу, одне для мобільних — призначити різні меню кожному та використовувати медіа-запити CSS для показу або приховування відповідного місця розташування. Деякі плагіни мега-меню обробляють це автоматично з вбудованими панелями адаптивної конфігурації.

Чому моє меню показує сторінки, які я не додавав?

Якщо ви встановили прапорець Автоматично додавати нові сторінки верхнього рівня до цього меню під час створення меню, WordPress вставляє кожну нову опубліковану сторінку верхнього рівня до меню. Зніміть цей прапорець у розділі Налаштування меню та збережіть, щоб зупинити цю поведінку.

У чому різниця між місцем розташування меню та меню?

Місце розташування меню — це слот, визначений темою (наприклад, «Основне меню»). Меню — це фактична колекція посилань, яку ви будуєте в адмінці. Ви призначаєте меню місцю розташування. Одне меню може бути призначено кільком місцям розташування; одне місце розташування може містити лише одне меню одночасно.

Як додати меню WordPress на сторінку за допомогою шорткоду або блоку?

WordPress core не надає нативного шорткоду для меню. Найчистіший метод у блочному редакторі — вставити блок Навігація та вибрати збережене меню. Альтернативно, використовуйте функцію wp_nav_menu() у блоці Власний HTML з увімкненим виконанням PHP через плагін, або використовуйте плагін шорткодів, що обгортає wp_nav_menu().

Чи впливає структура меню на SEO?

Так, опосередковано, але суттєво. Посилання меню сканується Googlebot і передає внутрішній посилальний капітал своїм цілям. Сторінки, пов’язані з основною навігацією, зазвичай отримують вищий пріоритет сканування та сильніші внутрішні сигнали PageRank. Глибоке приховування важливих сторінок за кількома рівнями підменю зменшує їх ефективний посилальний капітал. Тримайте найважливіші стратегічно сторінки в межах одного або двох кліків від головної сторінки через основне меню.