Kävijä saapuu sivustollesi, avaa "Palvelut"-sivun eikä pysty yhdellä silmäyksellä hahmottamaan, missä hän on. Valikkokohteet näyttävät identtisiltä. Aktiivista tilaa ei ole. Tämä ei ole WordPressin bugi; oletuksena teeman ei tarvitse korostaa nykyistä kohdetta. Mutta muutamalla CSS-rivillä ongelma korjaantuu alle minuutissa.

WordPress on automaattisesti lisännyt jokaiselle valikkokohteelle joukon CSS-luokkia versiosta 3.0 lähtien. Kolme niistä ilmaisee "käyttäjä on parhaillaan tällä sivulla tai tässä osiossa". Sinun tarvitsee vain kirjoittaa tyylit, ja navigaatio selkeytyy ilman yhtäkään klikkausta.

💡 Pikakatsaus:

• Avaa selaimesi tarkastustyökalu ja etsi sivustosi valikon CSS-valitsin
• Lisää 3-5 riviä CSS:ää Mukauttajaan tai style.css-tiedostoon, jotka kohdistuvat luokkiin .current-menu-item, .current-page-ancestor ja .current-post-ancestor
• Jos sivustolla on useita valikoita, tarkenna valitsinta niin, että korostus koskee vain päävalikkoa
• Lohkoteemoissa (FSE) lähestymistapa on sama, mutta CSS lisätään sivustoeditorin kautta

Mitä luokkia WordPress lisää valikkokohteisiin

Kun WordPress renderöi valikon wp_nav_menu()-funktiolla, jokainen <li>-elementti saa useita luokkia. Tässä ovat ne kolme, jotka hallitsevat "aktiivista" tilaa:

.current-menu-item lisätään kohteelle, jonka linkki osoittaa nykyiselle sivulle. Avaa "Yhteystiedot", ja "Yhteystiedot"-valikkokohta saa tämän luokan. Suoraviivaisin ja yleisimmin käytetty.

.current-page-ancestor aktivoituu, kun käyttäjä on alasivulla ja valikkokohta osoittaa yläsivulle. Esimerkiksi valikossa on "Portfolio" ja kävijä lukee tapaustutkimusta kyseisessä osiossa. Yläsivun "Portfolio"-kohta saa ancestor-luokan, joten voit korostaa senkin ja näyttää, missä sivuston osiossa käyttäjä on.

.current-post-ancestor on sama käsite, mutta artikkeleille ja kategorioille. Jos valikkokohta linkittää "Uutiset"-kategoriaan ja lukija avaa tietyn artikkelin siitä kategoriasta, "Uutiset"-kohta saa tämän luokan.

WordPress lisää kaikki kolme luokkaa automaattisesti. Sinun ei tarvitse kirjoittaa PHP-ehtolauseita tai muokata mallipohjia käsin, toisin kuin WP 2.9:n aikakaudella ja sitä aiemmin, jolloin jokainen linkki piti kääriä if-tarkistukseen nykyistä URL-osoitetta vasten. Nykyään voit vain avata tarkastustyökalun ja katsoa, mikä luokka kohde-elementissä on jo valmiina.

Vaihe 1: Etsi valikon valitsin

Avaa sivustosi, paina F12 (kehittäjätyökalut) ja paikanna <ul>- tai <nav>-elementti, joka sisältää valikkokohteet. Se näyttää yleensä tältä:

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

Pane merkille valikkosi tunniste (#primary-menu) tai luokka (.main-navigation). Tämä on valitsin, jota käytämme seuraavassa vaiheessa rajaamaan CSS:n vaikutusalueen.

Klassisissa teemoissa valikot renderöidään useimmiten wp_nav_menu()-funktiolla, jossa on theme_location-argumentti, kuten 'primary'. CSS-luokat lisää nav_menu_css_class-funktio, ja samanniminen filtteri antaa kehittäjille mahdollisuuden lisätä tai poistaa luokkia ohjelmallisesti. Mutta peruskorostukseen ei tarvita koodia, vain CSS:ää.

Vaihe 2: Lisää korostuksen CSS

Yksinkertaisin ja turvallisin tapa on lisätä tyylit sisäänrakennetun Mukauttajan kautta. Siirry WordPressin hallintapaneelissa kohtaan Ulkoasu → Mukauta → Lisä-CSS.

Kopioi ja liitä:

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

Mitä tämä koodi tekee: kun valikkokohta saa .current-menu-item-luokan, sen linkin tekstin väri muuttuu valkoiseksi ja tausta siniseksi, sekä saa kevyen pyöristyksen. Lopputulos näkyy välittömästi Mukauttajan esikatselussa, ennen tallentamista.

Tarkempaa hallintaa varten voit korostaa myös ancestor-kohteet:

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
}

Tässä täytön sijaan käytetään alleviivausta sinisellä palkilla. Tämä vaihtoehto näyttää siistimmältä minimalistisissa teemoissa.

Vaihe 3: Rajaa vaikutusalue

Jos sivustollasi on useita valikoita (päävalikko ylätunnisteessa, toissijainen valikko alatunnisteessa, widget-valikko sivupalkissa), edellisen vaiheen CSS korostaa aktiivisen kohteen kaikkialla. Se on harvoin toivottavaa.

Lisää luokkavalitsimen eteen vaiheessa 1 löytämäsi tietyn valikon ID tai luokka:

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

Nyt korostus aktivoituu vain elementin sisällä, jolla on id="primary-menu". Sivuston muut valikot pysyvät ennallaan.

Jos teemasi käyttää luokkaa ID:n sijaan, kirjoita .main-navigation .current-menu-item > a. Periaate on sama.

Entä lohkoteemat (FSE)

Lohkopohjaisissa teemoissa (Twenty Twenty-Four, Twenty Twenty-Five ja vastaavat) ei ole klassista Mukauttajaa Lisä-CSS-kentällä. Valikot rakennetaan Navigaatio-lohkolla.

CSS lisätään sivustoeditorin kautta: Ulkoasu → Editori → Tyylit → kolme pistettä (valikko) → Lisä-CSS. Koodi on täsmälleen sama; WordPress lisää .current-menu-item- ja muita luokkia myös lohkoteemoissa.

Ero on valitsimessa. FSE:ssä valikon kääre on <nav>, jolla on luokka kuten .wp-block-navigation. Varmista valitsin tarkastustyökalun avulla ja lisää se aktiivisen kohteen luokkien eteen:

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

Jos sivustosi käyttää modernia teemaa eikä valikko korostu "suoraan paketista", tarkista, ylikirjoittaako teema itse linkkien tilat :hover- ja :focus-määreillä ilman tyylejä .current-menu-item-luokalle. Korjaus on lisätä yhtä spesifi valitsin.

Syvällisempi valikoiden muokkaus (mega-valikoista mobiilinavigaatioon) käsitellään erillisessä artikkelissa. Se sisältää myös lisäosakatsauksen tapauksiin, joissa CSS ei enää riitä: ilmaisista rakentajista ammattimaisiin ratkaisuihin, joissa on ruudukot ja kuvakkeet.

⁉️🤔 Usein kysytyt kysymykset

Miksi valikko ei korostu, vaikka lisäsin CSS:n?

Yleisin syy on, että valitsin ei vastaa todellista HTML-rakennetta. Avaa tarkastustyökalu (F12), klikkaa aktiivista valikkokohtaa ja tarkista: onko <li>-elementillä .current-menu-item-luokka? Jos luokka puuttuu, WordPress ei pidä tätä sivua "nykyisenä" kyseiselle kohteelle. Näin voi käydä mukautettujen sisältötyyppien tai valikkologiikan ylikirjoittavien lisäosien kanssa. Ratkaisu: rekisteröi mukautettu tyyppi asetuksella 'show_in_nav_menus' => true tai lisää tuki nav_menu_css_class-filtterin kautta.

Voinko korostaa valikkokohteen eri värillä jokaiselle sivulle?

Kyllä. WordPress lisää jokaiseen kohteeseen yksilöllisen luokan, kuten .menu-item-{ID}, esimerkiksi .menu-item-42. Etsi tarkastustyökalulla kohde-elementin ID ja kirjoita: .menu-item-42 > a { background: #d63638; }. Näin voit värikoodata valikon vastaamaan sivuston osioita.

Miten korostan valikkokohteen, jos se on ulkoinen linkki tai ankkuri?

Ulkoinen linkki ei saa .current-menu-item-luokkaa, koska se osoittaa toiselle sivustolle, eikä WordPress voi tunnistaa sitä "nykyiseksi". Saman sivun sisäisille ankkureille luokka ei myöskään aktivoidu. Näissä tapauksissa lisää kohteelle mukautettu CSS-luokka käsin: Ulkoasu → Valikot → Näyttöasetukset → valitse CSS-luokat, syötä sitten luokkasi kohteen asetuksiin ja tyylitä se.

Onko turvallista lisätä CSS:ää Mukauttajan Lisä-CSS:n kautta?

Kyllä. Tämän kentän tyylit tallennetaan tietokantaan eivätkä ne katoa teeman päivittyessä, toisin kuin muokkaukset style.css-tiedostoon lapsiteemassa, jotka voivat vahingossa ylikirjoittua. Kenttä on ollut saatavilla WordPress 4.7:stä lähtien, ja käytännössä kaikki klassiset teemat tukevat sitä.

Onko vaivan arvoista: kolmen rivin yhteenveto

Aktiivisen valikkokohteen korostaminen ei ole suunnittelijan päähänpisto, vaan navigaation perusedellytys. Ilman sitä kävijät käyttävät ylimääräisiä sekunteja suunnistamiseen. Sen kanssa sivuston rakenne on selkeä yhdellä silmäyksellä.

Tehtävän hoitavat kokonaan kolme luokkaa: .current-menu-item, .current-page-ancestor ja .current-post-ancestor. Se mahtuu viiteen koodiriviin. Toteutus vie kolme minuuttia Mukauttajan kautta.

Jos tarvitset enemmän (epästandardia valikkokäyttäytymistä, ehdollista korostusta käyttäjäroolin mukaan tai mukautettuja indikaattoreita), katso katsaus yli 15 valikkolisäosaan. Peruskorostukseen CSS riittää.