Legg til en egendefinert klasse i WordPress Menyelement ved hjelp av betingede uttalelser

I de fleste tilfeller når du styler WordPress navigasjonsmenyer, kan du bare legge til CSS klasser fra WordPress admin panel. Nylig mens vi jobbet på et prosjekt, fant vi oss selv i en plagsom situasjon. Vi ønsket å legge til en egendefinert klasse på et bestemt menyelement kun på enkelt innleggssider. Etter å ha kikket en stund, kunne vi ikke finne noen løsning. Vår siste utvei var å spørre om twitter. Otto (@ Otto42) svarte ved å si at det er mulig å bruke filtre, men det er ingen dokumentasjon for filteret.

Etter å ha sett i kjernen en stund, fant vi ut løsningen. Det du trenger å gjøre er å lime inn følgende kode i din functions.php-fil:

 // Filtrering av en klasse i navigasjonsmenyelementet add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2); funksjonen special_nav_class ($ klasser, $ item) if (is_single () && $ item-> title == 'Blog') $ classes [] = 'nåværende menyelement';  returner $ klasser;  

Koden ovenfor er ganske enkelt å sjekke om det er en enkelt innleggsside, og menyelementet tittelen er Blogg. Hvis kriteriene er tilpasset, legger det til en klasse "Aktuell meny-element". Vi trengte å legge til en egendefinert klasse for å få det til å fungere med dette designet som vi jobber med.

Hvis du ikke kan fortelle det allerede, var det i utgangspunktet det vi ønsket å gjøre, å holde bloggelementet markert i menyen når brukeren var på ett enkelt innlegg. Dette tillot dem å se at de enkelte innleggene er en del av bloggen. Dette gir vanligvis ikke mening, men i det designet vi jobber med, var det fornuftig.

Hvis du var desperat på jakt etter denne koden, håper vi at denne artikkelen hjalp. Du kan også sjekke for andre $ item variabler. Noen eksempler er: $ item-> ID, $ item-> title, $ item-> xfn

Quick Edit: Etter at du sendte denne artikkelen på twitter, påpekte en av våre brukere @dbrabyn at vi enkelt kunne oppnå dette med CSS Body classes. For eksempel:

.single #navigation .leftmenublog div display: inline-block! viktig;

I utgangspunktet hva vi gjorde ble lagt til en ekstra div for å vise et pilikon til menyen vår. Denne pilen vil bare bli vist hvis klassen enten ble svevet over eller valgt. Ellers ble det satt til å vise: ingen; Ved å bruke kroppsklassen, har vi bare gjort div elementvisningen bare for den bestemte menyklassen.