Külastaja saabub teie saidile, avab lehe „Teenused" ega suuda ühe pilguga aru saada, kus ta asub. Menüüelemendid näevad välja identsed. Aktiivset olekut pole. See ei ole WordPressi viga; vaikimisi ei nõuta teemalt praeguse elemendi esiletõstmist. Kuid mõni rida CSS-i lahendab probleemi vähem kui minutiga.

WordPress on alates versioonist 3.0 igale menüüelemendile automaatselt määranud komplekti CSS-klasse. Kolm neist näitavad, et „kasutaja on praegu sellel lehel või selles jaotises". Teil on vaja ainult stiilid kirjutada ja navigatsioon muutub selgeks ilma ühegi klikita.

💡 Kiirülevaade:

• Avage oma brauseri inspektor ja leidke oma saidi menüü CSS-selektor
• Lisage Customizeris või failis style.css 3-5 rida CSS-i, mis sihivad klasse .current-menu-item, .current-page-ancestor ja .current-post-ancestor
• Kui saidil on mitu menüüd, täpsustage selektorit nii, et esiletõst rakenduks ainult peamenüüle
• Plokiteemade (FSE) puhul on lähenemine sama, kuid CSS lisatakse saidiredaktori kaudu

Milliseid klasse WordPress menüüelementidele lisab

Kui WordPress kuvab menüüd funktsiooni wp_nav_menu() kaudu, saab iga <li> element mitu klassi. Siin on kolm, mis juhivad „aktiivset" olekut:

.current-menu-item määratakse elemendile, mille link viitab praegusele lehele. Avage „Kontakt" ja menüüelement „Kontakt" saab selle klassi. Kõige otsesem ja sagedamini kasutatav.

.current-page-ancestor rakendub, kui kasutaja on alamlehel, samal ajal kui menüüelement viitab ülemlehele. Näiteks sisaldab menüü elementi „Portfell" ja külastaja loeb selle jaotise all olevat juhtumiuuringut. Ülemelement „Portfell" saab eellase klassi, nii et saate ka selle esile tõsta ja näidata, millises saidi jaotises kasutaja asub.

.current-post-ancestor on sama kontseptsioon, kuid postituste ja kategooriate jaoks. Kui menüüelement lingib kategooriale „Uudised" ja lugeja avab sellesse kategooriasse kuuluva konkreetse artikli, kannab element „Uudised" seda klassi.

WordPress määrab kõik kolm klassi automaatselt. Te ei pea PHP tingimuslauseid kirjutama ega malle käsitsi muutma, erinevalt WP 2.9 ajastust ja varasemast, mil iga link tuli mässida if-kontrolli sisse praeguse URL-i suhtes. Täna saate lihtsalt inspektori avada ja vaadata, milline klass on sihtelemendile juba külge pandud.

1. Samm: leidke menüü selektor

Avage oma sait, vajutage F12 (arendajatööriistad) ja leidke <ul> või <nav> element, mis sisaldab menüüelemente. Tavaliselt näeb see välja umbes nii:

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

Pange tähele oma menüü identifikaatorit (#primary-menu) või klassi (.main-navigation). See on selektor, mida kasutame järgmises sammus CSS-i ulatuse piiramiseks.

Klassikalistes teemades kuvatakse menüüd kõige sagedamini funktsiooni wp_nav_menu() kaudu koos argumendiga theme_location, näiteks 'primary'. CSS-klassid määrab funktsioon nav_menu_css_class ja samanimeline filter võimaldab arendajatel klasse programselt lisada või eemaldada. Kuid põhiliseks esiletõstuks pole koodi vaja, ainult CSS-i.

2. Samm: lisage esiletõstu CSS

Lihtsaim ja ohutuim viis on lisada stiilid sisseehitatud Customizeri kaudu. WordPressi administraatoris minge jaotisse Välimus → Kohanda → Lisage CSS.

Kopeerige ja kleepige:

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

Mida see kood teeb: kui menüüelement saab klassi .current-menu-item, muudab selle link teksti värvi valgeks ja tausta siniseks, lisaks kerge ümarduse. Tulemus on enne salvestamist kohe nähtav Customizeri eelvaates.

Peenema kontrolli jaoks saate esile tõsta ka eellasi:

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
}

Siin on täidise asemel allajoonimine sinise ribaga. See valik näeb minimalistlikes teemades puhtam välja.

3. Samm: piirake ulatust

Kui teie saidil on mitu menüüd (peamenüü päises, teisene menüü jaluses, vidinamenüü külgribal), tõstab eelmise sammu CSS aktiivse elemendi esile kõikjal. See on harva soovitav.

Pange klassi selektori ette konkreetse menüü ID või klass, mille leidsite 1. sammus:

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

Nüüd rakendub esiletõst ainult elemendi id="primary-menu" sees. Teised saidi menüüd jäävad muutmata.

Kui teie teema kasutab ID asemel klassi, kirjutage .main-navigation .current-menu-item > a. Põhimõte on sama.

Aga plokiteemad (FSE)

Plokipõhistes teemades (Twenty Twenty-Four, Twenty Twenty-Five ja sarnased) ei ole klassikalist Customizerit koos Lisage CSS väljaga. Menüüd on ehitatud navigatsiooniploki abil.

CSS lisatakse saidiredaktori kaudu: Välimus → Redaktor → Stiilid → kolm punkti (menüü) → Lisage CSS. Kood on täpselt sama; WordPress jätkab klasside .current-menu-item ja teiste määramist ka plokiteemades.

Erinevus on selektoris. FSE-s on menüü ümbris <nav> klassiga nagu .wp-block-navigation. Kinnitage selektor inspektori abil ja pange see aktiivse elemendi klasside ette:

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

Kui teie sait töötab kaasaegsel teemal ja menüü ei tõsta „karbist välja" esile, kontrollige, kas teema ise kirjutab üle lingi olekuid :hover ja :focus kaudu, ilma stiilideta klassile .current-menu-item. Lahendus on lisada võrdse spetsiifilisusega selektor.

Põhjalikumat menüü kohandamist (alates megamenüüdest kuni mobiilinavigatsioonini) käsitletakse eraldi artiklis. See sisaldab ka pluginavalikut juhtudeks, kui CSS-ist enam ei piisa: tasuta ehitajatest kuni professionaalsete lahendusteni koos ruudustike ja ikoonidega.

⁉️🤔 Korduma kippuvad küsimused

Miks menüü pärast CSS-i lisamist esile ei tõsta?

Kõige levinum põhjus on see, et selektor ei vasta tegelikule HTML-struktuurile. Avage inspektor (F12), klikkige aktiivsel menüüelemendil ja kontrollige: kas <li>-l on klass .current-menu-item? Kui klass puudub, ei pea WordPress seda lehte selle elemendi jaoks „praeguseks". See võib juhtuda kohandatud postitüüpide või pluginatega, mis kirjutavad üle menüü loogika. Lahendus: registreerige kohandatud tüüp parameetriga 'show_in_nav_menus' => true või lisage tugi filtri nav_menu_css_class kaudu.

Kas ma saan iga lehe jaoks menüüelemendi erineva värviga esile tõsta?

Jah. WordPress lisab igale elemendile unikaalse klassi nagu .menu-item-{ID}, näiteks .menu-item-42. Kasutage inspektorit sihtelemendi ID leidmiseks ja kirjutage: .menu-item-42 > a { background: #d63638; }. See võimaldab menüüd värvikoodidega tähistada, et see vastaks saidi jaotistele.

Kuidas tõstan menüüelemendi esile, kui see on väline link või ankur?

Väline link ei saa klassi .current-menu-item, sest see viitab teisele saidile ja WordPress ei saa seda „praegusena" tuvastada. Sama lehe siseste ankrute puhul see klass samuti ei rakendu. Sellistel juhtudel lisage elemendile käsitsi kohandatud CSS-klass: Välimus → Menüüd → Ekraani seaded → märkige CSS klassid, seejärel sisestage oma klass elemendi seadetes ja kujundage see.

Kas CSS-i lisamine Customizeri Lisage CSS kaudu on ohutu?

Jah. Selle välja stiilid salvestatakse andmebaasi ega kao teema uuendamisel, erinevalt alamteema faili style.css muudatustest, mis võivad kogemata üle kirjutatud saada. Väli on saadaval alates WordPress 4.7-st ja seda toetavad praktiliselt kõik klassikalised teemad.

Kas see on vaeva väärt: kolmerealine kokkuvõte

Aktiivse menüüelemendi esiletõstmine ei ole disaineri kapriis; see on navigatsiooni alustala. Ilma selleta kulutavad külastajad orienteerumiseks lisasekundeid. Sellega on saidistruktuur ühe pilguga selge.

Ülesande lahendavad täielikult kolm klassi: .current-menu-item, .current-page-ancestor ja .current-post-ancestor. See mahub viide koodiritta. Rakendamine võtab Customizeri kaudu kolm minutit.

Kui vajate enamat (mittestandardset menüükäitumist, tingimuslikku esiletõstu kasutajarolli järgi või kohandatud indikaatoreid), vaadake ülevaadet 15+ menüüpluginast. Põhiliseks esiletõstuks piisab CSS-ist.