Så här lägger du till den första och sista klassen i WordPress-navigeringsmenyalternativen

Nyligen när vi arbetade med ett anpassat designprojekt fann vi ett behov av att lägga till anpassad styling till våra WordPress-navigeringsmenyalternativ. Speciellt denna design krävde olika styling för det första menyalternativet och det sista menyalternativet. Nu kan vi enkelt gå in i WordPress-administratören och lägga till en anpassad css-klass till det första och sista menyalternativet. Men eftersom vi levererar detta till en klient är det mycket troligt att de kan ordna om menyernas ordning i framtiden. Att 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 kommer vi att visa dig hur du utformar dina första och sista WordPress-menyalternativ på olika sätt genom att lägga till en. Första och. Senast CSS-klass.

Allt du behöver göra är att öppna temat filen. Klistra sedan in följande kod:

function wpb_first_and_last_menu_class($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

Ett annat sätt att utforma de första och sista menyalternativen annorlunda skulle vara att använda CSS-väljare som fungerar i de flesta moderna webbläsare.

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Obs! Om du har många användare i ä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 fuskark på standard WordPress-genererade CSS-klasser som kan vara till nytta när du också stylar menyalternativ.