Müssen Sie dem ersten und letzten Element Ihres WordPress-Navigationsmenüs benutzerdefiniertes Styling hinzufügen?
Sie könnten dem ersten und letzten Menüelement einfach eine benutzerdefinierte CSS-Klasse hinzufügen, aber wenn das Menü neu angeordnet wird, sind diese Elemente nicht mehr das erste und letzte Element.
In diesem Artikel zeigen wir Ihnen, wie Sie eine .first- und .last-Klasse hinzufügen, die das erste und letzte Menüelement formatiert, selbst wenn die Menüelemente neu angeordnet werden.
Warum das erste und das letzte Navigationselement unterschiedlich gestalten?
In einem früheren benutzerdefinierten Designprojekt mussten wir den Navigationsmenüelementen einer WordPress-Website ein benutzerdefiniertes Styling hinzufügen. Insbesondere dieses Design erforderte eine unterschiedliche Gestaltung des ersten Menüpunktes und des letzten Menüpunktes.
Jetzt konnten wir das Menü ganz einfach bearbeiten und dem ersten und letzten Menüpunkt eine benutzerdefinierte CSS-Klasse hinzufügen. Da wir das Projekt jedoch an einen Kunden lieferten, musste unsere Lösung auch dann funktionieren, wenn die Reihenfolge der Menüs geändert wurde.
Also haben wir uns entschieden, stattdessen Filter zu verwenden.
In diesem Tutorial zeigen wir Ihnen zwei Möglichkeiten, das erste und das letzte Element Ihres Navigationsmenüs zu gestalten. Sie können Ihre bevorzugte Methode aus der folgenden Liste auswählen:
- Methode 1: Hinzufügen der ersten und letzten Klasse mithilfe eines Filters
- Methode 2: Erstes und letztes Element mit CSS-Selektoren gestalten
Methode 1: Hinzufügen der ersten und letzten Klasse mithilfe eines Filters
Die erste Möglichkeit, Ihre ersten und letzten Navigationsmenüelemente unterschiedlich zu gestalten, besteht darin, Ihrem Design einen Filter hinzuzufügen.
Sie müssen der Datei functions.php Ihres Themes Code hinzufügen. Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.
Alles, was Sie tun müssen, ist die Datei functions.php Ihres Themes zu öffnen und dann den folgenden Codeausschnitt einzufügen:
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');
Dadurch werden .first- und .last-CSS-Klassen für Ihre ersten bzw. letzten Navigationsmenüelemente erstellt. Sie können diese Klassen verwenden, um die Menüelemente zu gestalten.
Um dies im Detail zu erfahren, lesen Sie unsere Anleitung zum Stylen von WordPress-Navigationsmenüs.
Für dieses Tutorial fügen wir dem style.css-Stylesheet unseres Themes die folgende grundlegende CSS-Formatierung hinzu, um den ersten und letzten Menüpunkt einfach fett zu formatieren:
.first a { font-weight: bold; } .last a { font-weight: bold; }
Hier können Sie Screenshots sehen, bevor und nachdem wir den Code zu unserer Demo-Site hinzugefügt haben.
Methode 2: Erstes und letztes Element mit CSS-Selektoren gestalten
Eine zweite Möglichkeit, das erste und das letzte Menüelement unterschiedlich zu gestalten, besteht darin, CSS-Selektoren zu verwenden. Diese Methode ist einfacher, funktioniert jedoch möglicherweise nicht mit einigen älteren Browsern wie Internet Explorer.
Um dieser Methode zu folgen, musst du dem Stylesheet deines Themes oder dem Abschnitt „Additional CSS“ des WordPress Theme Customizer Code hinzufügen.
Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Site.
Sie sollten damit beginnen, die style.css-Datei Ihres Themes zu bearbeiten oder zu zu navigieren Aussehen » Anpassen und klicken Sie auf ‚Zusätzliches CSS‘.
Danach müssen Sie das folgende Code-Snippet einfügen und dann Ihre Änderungen speichern oder veröffentlichen.
ul#yourmenuid > li:first-child { } ul#yourmenuid > li:last-child { }
Beachten Sie, dass Sie ‚yourmenuid‘ durch die tatsächliche ID des Navigationsmenüs ersetzen müssen. Die Selektoren ‚first-child‘ und ‚last-child‘ wählen ein Element aus, wenn es das erste und letzte Kind seines Elternteils, dem Navigationsmenü, ist.
Mit diesem Code haben wir beispielsweise den ersten und den letzten Navigationsmenüpunkt auf unserer Demo-Site fett gedruckt:
ul#primary-menu-list > li:first-child a { font-weight: bold; } ul#primary-menu-list > li:last-child a { font-weight: bold; }
Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie Sie die .first- und .last-Klassen zu WordPress-Navigationsmenüs hinzufügen.
Vielleicht möchten Sie auch lernen, wie Sie 50 häufige WordPress-Fehler beheben oder unsere Liste der besten Drag-and-Drop-Seitenersteller ansehen.