Så här lägger du till den första och sista klassen till WordPress Navigation Menyalternativ

Nyligen när vi arbetade på ett anpassat designprojekt fann vi att vi skulle behöva lägga till vissa anpassade stylingar till våra WordPress-navigationsmenyalternativ. Denna utformning i synnerhet krävde olika styling för det första menyalternativet och det sista menyalternativet. Nu kan vi enkelt gå in i WordPress admin och lägga till en anpassad css klass till första och sista menyalternativet. Men eftersom vi levererar detta till en klient, är det mycket troligt att de kan omorganisera ordningens menyer i framtiden. Använda adminpanelens sätt att lägga till klasser var inte den mest effektiva metoden. Så vi bestämde oss för att göra det genom att använda filter. I den här artikeln visar vi hur du stilar dina första och sista WordPress menyalternativ på olika sätt genom att lägga till en .first och .last CSS-klass.

Allt du behöver göra är att öppna ditt tema functions.php fil. Sedan klistra in följande koden:

 funktion wpb_first_and_last_menu_class ($ items) $ items [1] -> klasser [] = 'first'; $ items [count ($ items)] -> klasser [] = 'sista'; returnera $ items;  add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

Ett annat sätt att stryka de första och sista menyalternativen annars skulle vara att använda CSS-selektorer som fungerar i de flesta moderna webbläsare.

 ul # yourmenuid> li: första barnet  ul # yourmenuid> li: sista barnet 

Obs! Om du har många användare på äldre webbläsare (Internet Explorer), vill du förmodligen undvika följande teknik.

Vi hoppas att den här artikeln har hjälpt dig. Vi har skapat ett fuskblad på vanliga WordPress-genererade CSS-klasser som kan vara till nytta när du även styler menyalternativ.