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

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.