Відвідувач зайшов на сайт, відкрив сторінку «Послуги» і не може з першого погляду зрозуміти, де він перебуває. Пункти меню виглядають однаково. Активного стану немає. Це не помилка WordPress, за замовчуванням тема не зобов’язана підсвічувати поточний пункт. Але кілька рядків CSS вирішують проблему за хвилину.

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

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

• Відкриваєте інспектор браузера і знаходите CSS-селектор вашого меню на сайті
• Додаєте 3-5 рядків CSS у Customizer або style.css, на класи .current-menu-item, .current-page-ancestor і .current-post-ancestor
• Якщо на сайті кілька меню, уточнюєте селектор, щоб підсвічування спрацьовувало тільки в основному
• У блокових темах (FSE) той самий підхід, але CSS додається через редактор сайту

Які класи WordPress додає до пунктів меню

Коли WordPress рендерить меню через wp_nav_menu(), кожен пункт <li> отримує кілька класів. Ось три, які відповідають за «активність»:

.current-menu-item, призначається пункту, чиє посилання веде на поточну сторінку. Відкрили «Контакти», пункт «Контакти» в меню отримує цей клас. Найпрямолінійніший і найчастіше використовуваний.

.current-page-ancestor, спрацьовує, коли користувач перебуває на дочірній сторінці, а пункт меню вказує на батьківську. Наприклад, у меню є «Портфоліо», а відвідувач читає кейс усередині цього розділу. Батьківський пункт «Портфоліо» отримує клас-предок, його теж можна підсвітити, щоб показати, в якому розділі сайту перебуває користувач.

.current-post-ancestor, аналог попереднього, але для записів і рубрик. Якщо пункт меню посилається на рубрику «Новини», а читач відкрив конкретну статтю з цієї рубрики, пункт «Новини» буде з цим класом.

Усі три класи WordPress призначає автоматично. Вам не потрібно писати PHP-умови або правити шаблони вручну, на відміну від часів WP 2.9 і старіших, коли доводилося обгортати кожне посилання в if-перевірку на відповідність поточному URL. Зараз достатньо відкрити інспектор і подивитися, який клас уже висить на потрібному пункті.

Крок 1: Знаходимо селектор меню

Відкрийте сайт, натисніть F12 (інструменти розробника) і знайдіть елемент <ul> або <nav>, всередині якого лежать пункти меню. Зазвичай це виглядає так:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Запам’ятайте ідентифікатор (#primary-menu) або клас (.main-navigation) вашого меню. Це селектор, який ми будемо використовувати на наступному кроці, щоб обмежити область дії CSS.

У класичних темах меню найчастіше виводиться через wp_nav_menu() з аргументом theme_location, наприклад, 'primary'. CSS-класи призначаються функцією nav_menu_css_class, і фільтр з тією самою назвою дозволяє розробникам додавати або прибирати класи програмно. Але для базового підсвічування код не потрібен, тільки CSS.

Крок 2: Додаємо CSS для підсвічування

Найпростіший і найбезпечніший спосіб, вставити стилі через вбудований Customizer. В адмінці WordPress перейдіть: Зовнішній вигляд → Налаштувати → Додаткові стилі (Additional CSS).

Скопіюйте та вставте:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

Що робить цей код: коли пункт меню отримує клас .current-menu-item, його посилання змінює колір тексту на білий, фон, на синій, плюс невелике заокруглення. Результат видно одразу в прев’ю Customizer, до збереження.

Для тоншого налаштування можна підсвітити й предків:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

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

Крок 3: Обмежуємо область дії

Якщо на сайті кілька меню (основне в шапці, додаткове у футері, меню в сайдбарі через віджет), CSS з попереднього кроку підсвітить активний пункт скрізь. Це рідко потрібно.

Додайте перед селектором класу уточнення, ID або клас конкретного меню, яке ви знайшли на кроці 1:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Тепер підсвічування спрацює тільки всередині елемента з id="primary-menu". Решта меню на сайті залишаться без змін.

Якщо у вашій темі використовується клас замість ID, пишіть .main-navigation .current-menu-item > a. Принцип той самий.

Як бути з блоковими темами (FSE)

У темах на основі блоків (Twenty Twenty-Four, Twenty Twenty-Five та аналогічні) немає класичного Customizer з полем Additional CSS. Меню будується через Navigation block.

CSS додається через редактор сайту: Зовнішній вигляд → Редактор → Стилі → три крапки (меню) → Додаткові CSS. Код точно такий самий, класи .current-menu-item та інші WordPress продовжує призначати й у блокових темах.

Різниця в селекторі. У FSE обгорткою меню слугує <nav> з класом на кшталт .wp-block-navigation. Уточніть селектор через інспектор і додайте його перед класами активного пункту:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

Якщо сайт побудований на сучасній темі й меню не підсвічується «з коробки», перевірте, чи не перевизначає сама тема стан посилань через :hover і :focus без стилів для .current-menu-item. Виправляється додаванням такої самої ваги селектора.

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

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

Чому меню не підсвічується після додавання CSS?

Найчастіша причина, селектор не збігається з реальною структурою HTML. Відкрийте інспектор (F12), натисніть на активний пункт меню і перевірте: чи є в <li> клас .current-menu-item? Якщо класу немає, WordPress не вважає цю сторінку «поточною» для цього пункту. Таке буває при використанні кастомних типів записів або плагінів, які перевизначають логіку меню. Рішення: зареєструйте кастомний тип із 'show_in_nav_menus' => true або додайте підтримку через фільтр nav_menu_css_class.

Чи можна підсвітити пункт меню іншим кольором для кожної сторінки?

Так. WordPress додає до кожного пункту унікальний клас виду .menu-item-{ID}, наприклад, .menu-item-42. Через інспектор дізнайтеся ID потрібного пункту і напишіть: .menu-item-42 > a { background: #d63638; }. Так можна розфарбувати меню під кольори розділів сайту.

Як виділити пункт меню, якщо це зовнішнє посилання або якір?

Зовнішнє посилання не отримає .current-menu-item, воно веде на інший сайт, і WordPress не може визначити його як «поточне». Для якорів усередині однієї сторінки клас теж не спрацьовує. У цих випадках додавайте до пункту кастомний CSS-клас вручну: Зовнішній вигляд → Меню → Screen Options → галочка CSS класи, потім пропишіть свій клас у налаштуваннях пункту і стилізуйте його.

Чи безпечно додавати CSS через Additional CSS у Customizer?

Так. Стилі з цього поля зберігаються в базі даних і не губляться при оновленні теми, на відміну від правок у style.css дочірньої теми, які можна випадково перезаписати. Поле доступне з WordPress 4.7 і підтримується практично всіма класичними темами.

Чи варто морочитися: підсумок у трьох рядках

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

Задачу повністю вирішують три класи: .current-menu-item, .current-page-ancestor і .current-post-ancestor. Вміщається в 5 рядків коду. На впровадження йде 3 хвилини через Customizer.

Якщо потрібно більше: нестандартна поведінка меню, умовне підсвічування за ролями користувачів або кастомні індикатори, дивіться добірку з 15+ плагінів для меню. Для базового ж підсвічування вистачить і CSS.