Lägg till en anpassad klass i WordPress Menyobjekt med villkorliga uttalanden

I de flesta fall när du utformar WordPress navigeringsmenyer kan du helt enkelt lägga till CSS-klasser från WordPress-administratörspanelen. Nyligen när vi arbetade på ett projekt befann vi oss i en besvärlig situation. Vi ville bara lägga till en anpassad klass i ett visst menyalternativ på enstaka postsidor. Efter att ha letat efter en stund kunde vi inte hitta någon lösning. Vår sista utväg var att fråga på twitter. Otto (@ Otto42) svarade genom att säga att det är möjligt att använda filter, men det finns ingen dokumentation för filtret.

Efter att ha tittat i kärnan ett tag, räknade vi ut lösningen. Vad du behöver göra är att klistra in följande kod i din functions.php-fil:

 // Filtrera en klass i navigeringsmenyn Item add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2); funktion special_nav_class ($ classes, $ item) if (is_single () && $ item-> title == 'Blog') $ classes [] = 'aktuellt menyobjekt';  returnera $ klasser;  

Koden ovan kontrollerar helt enkelt om det är en enda inläggssida, och menyobjektets titel är Blog. Om kriterierna matchas lägger det till en klass "Aktuell meny-artikel". Vi behövde lägga till en anpassad klass för att få det att fungera med den här designen som vi jobbar med.

Om du inte kan berätta redan, var det i grund och botten vad vi ville göra att bloggen var markerad i menyn när användaren var på ett enda inlägg. Detta gjorde det möjligt för dem att se att de enskilda inläggen är en del av bloggen. Det är normalt inte meningsfullt, men i den design som vi jobbar på var det meningsfullt.

Om du var desperat letar efter den här koden hoppas vi att den här artikeln hjälpte. Du kan också söka efter andra $ item variabler också. Några exempel är: $ item-> ID, $ item-> title, $ item-> xfn

Snabbredigering: Efter att ha lagt in den här artikeln på twitter, påpekade en av våra användare @dbrabyn att vi lätt kunde uppnå detta med CSS Body classes. Till exempel:

.singel #navigation .leftmenublog div display: inline-block! viktigt;

I grund och botten gjorde vi en extra div för att visa en pilikon till vår meny. Denna pil skulle bara visas om klassen antingen var svävad över eller vald. Annars sattes den att visas: ingen; Genom att använda kroppsklassen gjorde vi bara div-elementskärmen endast för den specifika menyklassen.