LĂ€gg till en anpassad klass i WordPress-menyalternativet med villkorliga uttalanden

LĂ€gg till en anpassad klass i WordPress-menyalternativet 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-adminpanelen. Nyligen nÀr vi arbetade med ett projekt befann vi oss i en besvÀrlig situation. Vi ville lÀgga till en anpassad klass till ett visst menyalternativ bara pÄ enstaka inlÀggssidor. Efter att ha tittat runt ett tag kunde vi inte hitta nÄgon lösning. VÄr sista utvÀg var att frÄga pÄ twitter. Otto (@ Otto42) svarade och sa 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 fick vi reda pÄ lösningen. Vad du behöver göra Àr att klistra in följande kod i filen functions.php:


//Filtering a Class in Navigation Menu Item
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if(is_single() && $item->title == 'Blog'){
             $classes[] = 'current-menu-item';
     }
     return $classes;
}

Koden ovan kontrollerar helt enkelt om det Ă€r en enda inlĂ€ggssida och menyalternativet Ă€r Blog. Om kriterierna matchas lĂ€gger det till en klass “Aktuell meny-post”. Vi behövde lĂ€gga till en anpassad klass för att fĂ„ den att fungera med den hĂ€r designen som vi arbetar med.

Om du inte redan kan berÀtta var det som vi ville göra i grunden att hÄlla bloggobjektet markerat 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. Detta Àr normalt inte meningsfullt, men i den design som vi arbetar med var det meningsfullt.

Om du desperat letade efter den hÀr koden hoppas vi att den hÀr artikeln hjÀlpte till. Du kan ocksÄ söka efter andra $ artikelvariabler. NÄgra exempel Àr: $ artikel-> ID, $ artikel-> titel, $ artikel-> xfn

Snabbredigering: Efter att ha publicerat den hÀr artikeln pÄ twitter pÄpekade en av vÄra anvÀndare @dbrabyn att vi lÀtt kunde ha lyckats med CSS Body-klasser. Till exempel:

.single #navigation .leftmenublog div{display: inline-block !important;}

I grund och botten var vad vi gjorde lagt till ytterligare en div för att visa en pilikon i vÄr meny. Den hÀr pilen visas bara om klassen antingen svÀvar över eller valdes. Annars var den instÀlld pÄ att visa: ingen; Genom att anvÀnda kroppsklassen gjorde vi bara visningen av div-element för den specifika menyklassen.