Odwiedzający wszedł na stronę, otworzył zakładkę „Usługi" i nie może od razu zorientować się, gdzie się znajduje. Pozycje menu wyglądają identycznie. Nie ma aktywnego stanu. To nie jest błąd WordPressa, domyślnie motyw nie ma obowiązku podświetlania bieżącej pozycji. Ale kilka linijek CSS rozwiązuje problem w minutę.

WordPress od wersji 3.0 automatycznie przypisuje każdej pozycji menu zestaw klas CSS. Wśród nich trzy odpowiadają za stan „użytkownik jest teraz na tej stronie lub wewnątrz tej sekcji". Pozostaje tylko napisać style, a nawigacja staje się zrozumiała bez żadnego kliknięcia.

💡 Szybki przegląd:

• Otwiera Pan/Pani inspektor przeglądarki i znajduje selektor CSS swojego menu na stronie
• Dodaje Pan/Pani 3-5 linijek CSS w Customizerze lub pliku style.css, dla klas .current-menu-item, .current-page-ancestor i .current-post-ancestor
• Jeśli na stronie jest kilka menu, doprecyzowuje Pan/Pani selektor, aby podświetlenie działało tylko w głównym
• W motywach blokowych (FSE) to samo podejście, ale CSS dodaje się przez edytor witryny

Jakie klasy WordPress dodaje do pozycji menu

Kiedy WordPress renderuje menu przez wp_nav_menu(), każda pozycja <li> otrzymuje kilka klas. Oto trzy, które odpowiadają za „aktywność":

.current-menu-item, jest przypisywana pozycji, której link prowadzi do bieżącej strony. Otworzył Pan/Pani „Kontakt", pozycja „Kontakt" w menu otrzymuje tę klasę. Najprostszy i najczęściej używany przypadek.

.current-page-ancestor, działa, gdy użytkownik znajduje się na stronie podrzędnej, a pozycja menu wskazuje na nadrzędną. Na przykład w menu jest „Portfolio", a odwiedzający czyta case study wewnątrz tej sekcji. Nadrzędna pozycja „Portfolio" otrzymuje klasę przodka, ją również można podświetlić, aby pokazać, w której sekcji witryny znajduje się użytkownik.

.current-post-ancestor, odpowiednik poprzedniej, ale dla wpisów i kategorii. Jeśli pozycja menu linkuje do kategorii „Aktualności", a czytelnik otworzył konkretny artykuł z tej kategorii, pozycja „Aktualności" będzie miała tę klasę.

Wszystkie trzy klasy WordPress przypisuje automatycznie. Nie musi Pan/Pani pisać warunków PHP ani ręcznie edytować szablonów, w przeciwieństwie do czasów WP 2.9 i starszych, kiedy trzeba było opakowywać każdy link w if sprawdzający zgodność z bieżącym URL. Teraz wystarczy otworzyć inspektor i sprawdzić, która klasa już wisi na potrzebnej pozycji.

Krok 1: Znajdujemy selektor menu

Proszę otworzyć stronę, nacisnąć F12 (narzędzia deweloperskie) i znaleźć element <ul> lub <nav>, wewnątrz którego znajdują się pozycje menu. Zazwyczaj wygląda to tak:

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

Proszę zapamiętać identyfikator (#primary-menu) lub klasę (.main-navigation) swojego menu. To selektor, którego użyjemy w następnym kroku, aby ograniczyć zakres działania CSS.

W klasycznych motywach menu najczęściej jest wyprowadzane przez wp_nav_menu() z argumentem theme_location, na przykład 'primary'. Klasy CSS są przypisywane przez funkcję nav_menu_css_class, a filtr o tej samej nazwie pozwala deweloperom programowo dodawać lub usuwać klasy. Ale do podstawowego podświetlenia kod nie jest potrzebny, tylko CSS.

Krok 2: Dodajemy CSS do podświetlenia

Najprostszy i najbezpieczniejszy sposób to wstawić style przez wbudowany Customizer. W panelu administracyjnym WordPressa proszę przejść: Wygląd → Dostosuj → Dodatkowy CSS (Additional CSS).

Proszę skopiować i wkleić:

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

Co robi ten kod: kiedy pozycja menu otrzymuje klasę .current-menu-item, jej link zmienia kolor tekstu na biały, tło na niebieskie, plus małe zaokrąglenie. Rezultat widać od razu w podglądzie Customizera, przed zapisaniem.

Do subtelniejszego dostrojenia można podświetlić również przodków:

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
}

Tutaj zamiast wypełnienia, podkreślenie niebieskim paskiem. Taki wariant wygląda schludniej w minimalistycznych motywach.

Krok 3: Ograniczamy zakres działania

Jeśli na stronie jest kilka menu (główne w nagłówku, dodatkowe w stopce, menu w sidebarze przez widget), CSS z poprzedniego kroku podświetli aktywną pozycję wszędzie. Rzadko jest to potrzebne.

Proszę dodać przed selektorem klasy doprecyzowanie, ID lub klasę konkretnego menu, które znalazł Pan/Pani w kroku 1:

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

Teraz podświetlenie zadziała tylko wewnątrz elementu z id="primary-menu". Pozostałe menu na stronie pozostaną bez zmian.

Jeśli w Pana/Pani motywie używana jest klasa zamiast ID, proszę napisać .main-navigation .current-menu-item > a. Zasada jest ta sama.

Jak postępować z motywami blokowymi (FSE)

W motywach opartych na blokach (Twenty Twenty-Four, Twenty Twenty-Five i podobne) nie ma klasycznego Customizera z polem Additional CSS. Menu jest budowane przez blok Nawigacji.

CSS dodaje się przez edytor witryny: Wygląd → Edytor → Style → trzy kropki (menu) → Dodatkowy CSS. Kod jest dokładnie taki sam, klasy .current-menu-item i inne WordPress nadal przypisuje również w motywach blokowych.

Różnica tkwi w selektorze. W FSE opakowaniem menu jest <nav> z klasą w rodzaju .wp-block-navigation. Proszę doprecyzować selektor przez inspektor i dodać go przed klasami aktywnej pozycji:

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

Jeśli strona jest zbudowana na nowoczesnym motywie, a menu nie podświetla się „od razu po instalacji", proszę sprawdzić, czy sam motyw nie nadpisuje stanu linków przez :hover i :focus bez stylów dla .current-menu-item. Koryguje się to przez dodanie selektora o takiej samej wadze.

Głębszą customizację menu, od mega-menu po nawigację mobilną, omawialiśmy w osobnym materiale. Tam również przegląd wtyczek na wypadek, gdy CSS już nie wystarcza: od darmowych kreatorów po profesjonalne rozwiązania z siatką i ikonami.

⁉️🤔 Często zadawane pytania

Dlaczego menu nie podświetla się po dodaniu CSS?

Najczęstsza przyczyna: selektor nie pasuje do rzeczywistej struktury HTML. Proszę otworzyć inspektor (F12), kliknąć na aktywną pozycję menu i sprawdzić: czy w <li> jest klasa .current-menu-item? Jeśli klasy nie ma, WordPress nie uważa tej strony za „bieżącą" dla tej pozycji. Zdarza się to przy użyciu niestandardowych typów wpisów lub wtyczek, które nadpisują logikę menu. Rozwiązanie: proszę zarejestrować niestandardowy typ z 'show_in_nav_menus' => true lub dodać obsługę przez filtr nav_menu_css_class.

Czy można podświetlić pozycję menu innym kolorem dla każdej strony?

Tak. WordPress dodaje do każdej pozycji unikalną klasę w rodzaju .menu-item-{ID}, na przykład .menu-item-42. Przez inspektor proszę sprawdzić ID potrzebnej pozycji i napisać: .menu-item-42 > a { background: #d63638; }. W ten sposób można pokolorować menu zgodnie z kolorami sekcji witryny.

Jak wyróżnić pozycję menu, jeśli jest to link zewnętrzny lub kotwica?

Link zewnętrzny nie otrzyma .current-menu-item, prowadzi na inną stronę i WordPress nie może określić go jako „bieżącego". Dla kotwic wewnątrz jednej strony klasa również nie zadziała. W tych przypadkach proszę dodać do pozycji niestandardową klasę CSS ręcznie: Wygląd → Menu → Opcje ekranu → zaznaczyć Klasy CSS, następnie proszę wpisać swoją klasę w ustawieniach pozycji i ją ostylować.

Czy bezpiecznie jest dodawać CSS przez Additional CSS w Customizerze?

Tak. Style z tego pola są zapisywane w bazie danych i nie giną przy aktualizacji motywu, w przeciwieństwie do poprawek w style.css motywu potomnego, które można przypadkowo nadpisać. Pole jest dostępne od WordPress 4.7 i jest obsługiwane przez praktycznie wszystkie klasyczne motywy.

Czy warto się tym przejmować: podsumowanie w trzech zdaniach

Podświetlenie aktywnej pozycji menu to nie kaprys projektanta, a minimum nawigacyjne. Bez niego odwiedzający traci dodatkowe sekundy na orientację. Z nim struktura witryny jest czytelna od pierwszego rzutu oka.

Zadanie w pełni rozwiązują trzy klasy: .current-menu-item, .current-page-ancestor i .current-post-ancestor. Mieści się w 5 linijkach kodu. Wdrożenie zajmuje 3 minuty przez Customizer.

Jeśli potrzeba więcej: niestandardowe zachowanie menu, warunkowe podświetlanie według ról użytkowników lub niestandardowe wskaźniki, proszę zajrzeć do zestawienia 15+ wtyczek do menu. Do podstawowego podświetlenia wystarczy jednak CSS.