De eerste en laatste klas toevoegen aan WordPress Navigatie Menu-items

De eerste en laatste klas toevoegen aan WordPress Navigatie Menu-items / Thema's

Onlangs tijdens het werken aan een ontwerpproject op maat, vonden we het nodig om een ​​aangepaste stijl toe te voegen aan onze items in het WordPress-navigatiemenu. Vooral dit ontwerp vereiste een andere stijl voor het eerste menu-item en het laatste menu-item. Nu kunnen we gemakkelijk in de WordPress-beheerder gaan en een aangepaste css-klasse aan het eerste en laatste menu-item toevoegen. Maar omdat we dit aan een klant leveren, is het zeer waarschijnlijk dat ze de volgorde van de menu's in de toekomst mogelijk zullen herschikken. Het gebruiken van de admin-manier om klassen toe te voegen was niet de meest efficiënte methode. Dus hebben we besloten om het te doen met behulp van filters. In dit artikel laten we u zien hoe u uw eerste en laatste WordPress-menu-items anders vormgeeft door een .first en .last CSS-klasse toe te voegen.

Het enige wat je hoeft te doen is je thema's openen functions.php het dossier. Plak dan de volgende code:

 functie wpb_first_and_last_menu_class ($ items) $ items [1] -> classes [] = 'first'; $ items [count ($ items)] -> classes [] = 'last'; $ items retourneren;  add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

Een andere manier om de eerste en laatste menu-items anders in te richten, zou zijn om CSS-selectors te gebruiken die in de meeste moderne browsers werken.

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

Opmerking: als u veel gebruikers heeft in oudere browsers (Internet Explorer), wilt u waarschijnlijk de volgende techniek vermijden.

We hopen dat dit artikel je heeft geholpen. We hebben een spiekbriefje gemaakt op standaard door WordPress gegenereerde CSS-klassen die van pas kunnen komen bij het stylen van menu-items.