Новий сайт без меню, як супермаркет без покажчиків. Де каса? У якому ряду хліб? Відвідувач іде, бо не може знайти те, за чим прийшов.

Та сама історія з WordPress. Стандартне встановлення не створює меню автоматично, його потрібно зібрати вручну. На щастя, розробники зробили це завдання візуальним: жодного коду, лише drag-and-drop і кілька кліків. Меню навігації збирається зі сторінок, категорій і довільних посилань у простому інтерфейсі Зовнішній вигляд → Меню.

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

💡 Швидкий огляд:

• Відкриваєте редактор меню: Зовнішній вигляд → Меню, даєте ім’я та натискаєте «Створити меню»
• Додаєте елементи: сторінки, категорії, довільні посилання через ліву панель редактора
• Вибудовуєте порядок перетягуванням і створюєте підменю зсувом праворуч
• Налаштовуєте розташування відображення та зберігаєте результат
• За потреби виводите меню в сайдбар через віджет «Довільне меню»

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

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

Крок 1: створюємо перше меню

Зайдіть в адмінку та перейдіть за шляхом Зовнішній вигляд → Меню. На свіжому встановленні WordPress сторінка буде майже порожньою: ліворуч панель доступних елементів, праворуч область для формування списку.

Перша дія, дати меню ім’я, щоб потім розрізняти їх, якщо створите кілька:

• Впишіть зрозумілу назву в поле Назва меню, наприклад, «Основне меню» або «Головна навігація»

• Натисніть кнопку Створити меню

Права частина екрана одразу зміниться: з’являться блоки «Структура меню» та «Налаштування меню». Поки структура порожня, переходимо до наповнення.

Штук п’ять-шість меню одночасно вам навряд чи знадобляться. Але можливість створити окрему навігацію для футера чи мобільної версії є, обмежень за кількістю WordPress не ставить.

Крок 2: додаємо елементи в меню

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

• Сторінки, список усіх опублікованих сторінок сайту
• Записи, пости блогу
• Категорії, рубрики, за якими згруповані записи
• Довільні посилання, будь-які URL, включно із зовнішніми сайтами

Для типового блогу ядро меню — це сторінки («Про проєкт», «Контакти», «Послуги») плюс категорії («Новини», «Гайди», «Огляди»). Порядок дій:

• Відкрийте потрібну вкладку
• Позначте галочками сторінки/категорії, які мають потрапити в меню
• Натисніть Додати в меню
• Повторіть для решти вкладок

Сторінки та категорії підтягуються автоматично, достатньо проставити галочки. З довільним посиланням трохи інакше: вам потрібна повна URL-адреса (наприклад, https://developer.wordpress.org) і текстова мітка, те, що побачить відвідувач у меню замість голої адреси.

Зверніть увагу: категорії працюють як групування записів. Коли відвідувач клікає пункт «Гайди» в меню, він потрапляє на сторінку з усіма постами цієї рубрики. Докладніше про логіку категорій, у матеріалі SitePoint.

Крок 3: розставляємо порядок і створюємо підменю

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

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

Через стрілку. Клікніть по маленькій стрілці праворуч від назви пункту, розкриється картка з опціями:

• Перемістити вгору / вниз, зсув на одну позицію
• Нагору / На початок, перенесення в перший рядок
• Під <батьківський>, перетворення на підпункт (див. нижче)
• Із <батьківського>, повернення на верхній рівень
• Видалити, червоне посилання внизу картки, прибирає елемент ТІЛЬКИ з меню, не чіпаючи саму сторінку чи запис

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

Важливо: не захоплюйтеся глибиною. Один рівень вкладеності, норма. Два, крайній випадок для дуже розгалужених сайтів. Три, перебір: відвідувач губиться, а на мобільних екранах таке меню перетворюється на лабіринт.

Той самий результат можна отримати через картку елемента: розкрийте стрілкою, натисніть Під <назва батьківського пункту>. Для повернення використовуйте Із <батьківського> або просто перетягніть ліворуч.

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

Крок 4: налаштування меню перед збереженням

Перед тим як натиснути «Зберегти меню», перевірте два параметри в нижній частині правої колонки.

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

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

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

Крок 5: розширені можливості через «Параметри екрана»

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

Що можна ввімкнути:

• Мітки та формати записів, якщо в темі використовується механізм форматів (aside, gallery, video), їх можна додати в меню окремими пунктами
• Цільовий атрибут посилання, відкривати пункт у новій вкладці (target="_blank")
• CSS-класи, кастомні класи для стилізації конкретного пункту через CSS
• Відношення посилань (XFN), мікроформат для вказання зв’язку між сторінками (рідко потрібен, залиште порожнім)
• Опис, текст, який з’являється під час наведення на пункт (залежить від теми)

На практиці найзатребуваніше з цього списку, відкриття в новій вкладці (для зовнішніх посилань) і CSS-класи (для дизайнерських завдань). Решта, нішеві інструменти, які більшість сайтів не чіпають.

Крок 6: виводимо меню в сайдбар через віджети

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

Алгоритм:

• Перейдіть у Зовнішній вигляд → Віджети
• Знайдіть у списку доступних віджет Довільне меню
• Перетягніть його в потрібну область, наприклад, «Бічна панель» або «Footer Widgets»
• У випадному списку виберіть раніше створене меню
• Дайте заголовок (відобразиться над меню в сайдбарі) та натисніть Зберегти

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

⁉️🤔 Часті запитання

Чи можна створити два різних меню та показувати їх у різних місцях?

Так, без обмежень. Створіть кілька меню через Зовнішній вигляд → Меню та призначте кожному своє розташування відображення. Одне меню, в шапку, інше, в футер, третє, в бічну панель через віджети. Кількість місць прив’язки залежить від теми: у середньому 2-4 позиції.

Що робити, якщо в темі лише одне місце під меню?

Задійте віджети. Через Зовнішній вигляд → Віджети можна розмістити додаткові меню в сайдбарі чи футері, навіть якщо тема не реєструє там спеціальних позицій. Або використовуйте плагін для розширеної навігації, наприклад, Max Mega Menu додає мегаменю та додаткові місця розміщення без правлення коду.

Як додати меню в мобільну версію сайту?

У більшості сучасних тем мобільне меню автоматично будується з того самого основного меню. Ви просто позначаєте його в списку розташувань, а тема сама адаптує відображення під мобільні екрани (гамбургер-іконка, випадний список). Якщо тема цього не робить, шукайте в налаштуваннях кастомізатора (Зовнішній вигляд → Налаштувати) розділ Menus / Mobile Menu.

Чи можна додати в меню кошик WooCommerce або кнопку пошуку?

Стандартними засобами, ні. За замовчуванням у меню додаються лише сторінки, категорії та довільні посилання. Для іконок кошика, пошуку чи кнопки входу потрібен або спеціалізований плагін (наприклад, Menu Icons by ThemeIsle), або тема з підтримкою таких елементів у налаштуваннях кастомізатора.

Чи злітає меню під час зміни теми?

Самі меню, ні, вони прив’язані до сайту, а не до теми. Але призначені розташування відображення, так, тому що кожна тема реєструє свої позиції під своїми назвами. Після зміни теми зайдіть у редактор меню та заново призначте розташування в блоці «Налаштування меню».

Що в підсумку: зібрали навігацію за шість кроків

На створення першого меню йде три хвилини, якщо знаєш куди натискати. На практиці схема така: дали ім’я → додали 4-5 ключових сторінок і пару категорій → розставили порядок → зберегли. Усе. Далі можна докручувати: підменю для структурування, додаткові місця через віджети, CSS-класи для тонкої стилізації.

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

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