So fügen Sie die erste und letzte Klasse zu WordPress-Navigationsmenüelementen hinzu

Vor kurzem haben wir bei der Arbeit an einem benutzerdefinierten Design-Projekt die Notwendigkeit gefunden, unseren WordPress-Navigationsmenüelementen ein benutzerdefiniertes Styling hinzuzufügen. Dieses Design erforderte insbesondere eine unterschiedliche Gestaltung für den ersten Menüpunkt und den letzten Menüpunkt. Jetzt könnten wir problemlos in den WordPress-Admin gehen und dem ersten und letzten Menüpunkt eine benutzerdefinierte CSS-Klasse hinzufügen. Da wir dies jedoch an einen Kunden weitergeben, ist es sehr wahrscheinlich, dass er die Reihenfolge der Menüs in der Zukunft ändern wird. Das Hinzufügen von Klassen über das Admin-Panel war nicht die effizienteste Methode. Also haben wir uns dazu entschieden, Filter zu verwenden. In diesem Artikel zeigen wir Ihnen, wie Sie Ihre ersten und letzten WordPress-Menüelemente unterschiedlich gestalten können, indem Sie eine .first- und eine .last-CSS-Klasse hinzufügen.

Alles, was Sie tun müssen, ist Ihr Thema zu öffnen Functions.php Datei. Fügen Sie dann den folgenden Code ein:

 Funktion wpb_first_and_last_menu_class ($ items) $ items [1] -> classes [] = 'first'; $ items [count ($ items)] -> classes [] = 'last'; $ Elemente zurückgeben;  add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

Eine andere Möglichkeit, den ersten und den letzten Menüpunkt unterschiedlich zu gestalten, wäre die Verwendung von CSS-Selektoren, die in den meisten modernen Browsern funktionieren.

 ul # yourmenuid> li: erstes Kind  ul # yourmenuid> li: letztes Kind  

Hinweis: Wenn Sie mit älteren Browsern (Internet Explorer) viele Benutzer haben, möchten Sie wahrscheinlich die folgende Technik vermeiden.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat. Wir haben einen Spickzettel zu den von WordPress standardmäßig erzeugten CSS-Klassen erstellt, die sich auch beim Gestalten von Menüelementen als nützlich erweisen können.