Посетитель зашел на сайт, открыл страницу «Услуги», и не может с первого взгляда понять, где он находится. Пункты меню выглядят одинаково. Активного состояния нет. Это не ошибка 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.