Hinzufügen der ersten und letzten CSS-Klasse zu WordPress-Menüpunkten

Möchten Sie dem ersten und letzten Element Ihres WordPress-Menüs ein eigenes Styling hinzufügen?

Eine Möglichkeit besteht darin, den ersten und letzten Menüpunkten einfach eine benutzerdefinierte CSS-Klasse hinzuzufügen. Wenn Sie jedoch das Menü zu einem beliebigen Zeitpunkt neu anordnen, sind diese Elemente möglicherweise nicht mehr die ersten und letzten.

In diesem Artikel zeigen wir Ihnen, wie Sie eine .first- und .last-Klasse hinzufügen, die die ersten und letzten Elemente stilisiert, auch wenn Sie das Menü zu einem späteren Zeitpunkt neu anordnen.

Warum sind das erste und das letzte Navigationselement unterschiedlich gestaltet?

Manchmal müssen Sie dem ersten und dem letzten Element eines Navigationsmenüs ein eigenes Styling hinzufügen. Dadurch können wichtige Links hervorgehoben werden, z. B. der Link zum Kontaktformular Ihrer Website oder zur WooCommerce-Warenkorb-Seite.

In diesem Fall könnten Sie einfach eine benutzerdefinierte CSS-Klasse zu den ersten und letzten Menüpunkten hinzufügen. Wenn Sie jedoch die Reihenfolge des Menüs an irgendeiner Stelle ändern, könnte dies das benutzerdefinierte Styling komplett zerstören.

Aus diesem Grund empfehlen wir, stattdessen Filter zu verwenden.

In dieser Anleitung zeigen wir Ihnen, wie Sie das erste und das letzte Element Ihres Navigationsmenüs gestalten können, so dass Sie das Menü neu anordnen können, ohne das benutzerdefinierte Styling zu zerstören. Verwenden Sie einfach die nachstehenden Quicklinks, um direkt zur gewünschten Methode zu gelangen:

Methode 1: Hinzufügen der ersten und letzten Klasse mithilfe eines Filters (empfohlen)

Am einfachsten können Sie die Elemente Ihres Navigationsmenüs gestalten, indem Sie einen Filter zu Ihrem Thema hinzufügen.

Oft finden Sie in WordPress-Tutorials Code-Schnipsel mit Anweisungen, wie Sie diese in die Datei functions.php Ihres Themes einfügen können.

Das größte Problem ist, dass schon ein kleiner Fehler im benutzerdefinierten Code-Snippet Ihre WordPress-Website zerstören und unzugänglich machen kann. Ganz zu schweigen davon, dass Sie bei einer Aktualisierung Ihres WordPress-Themes alle Ihre Anpassungen verlieren.

An dieser Stelle kommt WPCode ins Spiel.

Dieses kostenlose Plugin erleichtert das Hinzufügen von benutzerdefiniertem CSS, PHP, HTML und mehr zu WordPress, ohne Ihre Website zu gefährden.

Als Erstes müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Code Snippets “ Snippet hinzufügen.

Fahren Sie hier einfach mit der Maus über „Add Your Custom Code“.

Wenn es erscheint, klicken Sie auf „Snippet verwenden“.

Geben Sie zunächst einen Titel für das benutzerdefinierte Code-Snippet ein. Dies kann alles sein, was Ihnen hilft, das Snippet im WordPress-Dashboard zu identifizieren.

Öffnen Sie anschließend das Dropdown-Menü „Code-Typ“ und wählen Sie „PHP Snippet“.

Sie können dann das folgende PHP in das Codefeld einfü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');

Danach können Sie zum oberen Rand des Bildschirms scrollen und auf den Schalter „Inaktiv“ klicken, damit er sich in „Aktiv“ ändert.

Klicken Sie abschließend auf „Snippet speichern“, um das PHP-Snippet zu aktivieren.

Dadurch werden die CSS-Klassen .first und .last für Ihr erstes und letztes Menüelement erstellt. Sie können nun diese Klassen verwenden, um diesen Elementen ein einzigartiges Styling zu geben.

Zu diesem Zweck müssen Sie Ihrer WordPress-Website ein zweites Snippet hinzufügen. Erstellen Sie zunächst ein neues benutzerdefiniertes Code-Snippet, indem Sie das oben beschriebene Verfahren befolgen.

Geben Sie anschließend einen Titel für das benutzerdefinierte Code-Snippet ein.

Öffnen Sie dann das Dropdown-Menü „Codetyp“, aber wählen Sie diesmal „CSS Snippet“.

Für diese Anleitung werden wir einfach die ersten und letzten Menüpunkte fett markieren, indem wir die folgende CSS-Formatierung zum Codefeld hinzufügen:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

Klicken Sie anschließend auf den Schalter „Inaktiv“, damit er sich in „Aktiv“ ändert.

Klicken Sie abschließend auf „Snippet speichern“, um das CSS-Snippet zu aktivieren.

Wenn Sie nun Ihre Website besuchen, werden Sie das aktualisierte Menü live sehen.

Methode 2: Gestaltung des ersten und letzten Elements mit CSS-Selektoren (funktioniert mit allen Themes)

Wenn Sie kein Plugin verwenden möchten, können Sie die ersten und letzten Menüpunkte mit CSS-Selektoren gestalten. Diese Methode funktioniert jedoch möglicherweise nicht mit einigen älteren Browsern, z. B. Internet Explorer.

Aus diesem Grund ist es eine gute Idee, Ihre WordPress-Website in verschiedenen Browsern zu testen.

Um diese Methode anzuwenden, müssen Sie Code in das Stylesheet Ihres Themes oder in den Abschnitt „Zusätzliches CSS“ des WordPress-Theme-Customizers einfügen.

Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung, wie Sie Ihrer WordPress-Website ganz einfach benutzerdefinierte CSS hinzufügen können.

Der erste Schritt besteht darin, die Datei style.css Ihres Themes zu bearbeiten, oder Sie gehen zu Darstellung “ Anpassen und klicken dann auf „Zusätzliches CSS“.

Fügen Sie anschließend den folgenden Codeausschnitt in Ihre Website ein:

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

Beachten Sie, dass Sie „yourmenuid“ durch die ID Ihres Navigationsmenüs ersetzen müssen.

Die Selektoren „first-child“ und „last-child“ wählen das erste und das letzte Kind des übergeordneten Elements aus, d. h. den ersten und den letzten Eintrag im Navigationsmenü.

Zum Beispiel haben wir diesen Code verwendet, um die ersten und letzten Navigationsmenüpunkte in unserem WordPress-Blog fett darzustellen:

ul#primary-menu-list > li:first-child a {
    font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
    font-weight: bold;
}

Wenn Sie ein WordPress-Block-Theme verwenden, wird der Theme Customizer in Ihrem WordPress-Admin fehlen. Sie müssen diese URL in Ihrem Browser eingeben, um auf den Theme-Customizer zuzugreifen:

https://yourdomainname.com/wp-admin/customize.php

Achten Sie darauf, dass Sie die Domain durch den Namen Ihrer Website ersetzen.

Danach öffnen Sie wie zuvor die Registerkarte „Zusätzliches CSS“ und fügen den folgenden Code ein. Beachten Sie, dass der Code etwas anders aussieht, da Sie Ihre Menü-ID nicht hinzufügen müssen.

li:first-child a,
li:last-child a {
    background-color: black;
    border: none;
    color: white !important; /* Ensures the color white is prioritized */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}

Sie können den Code nach Belieben an Ihre Bedürfnisse anpassen. Im folgenden Beispiel haben wir den ersten und den letzten Link in Schaltflächen verwandelt.

So sieht es aus:

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie man die Klassen .first und .last zu WordPress Navigationsmenüs hinzufügt. Vielleicht interessiert Sie auch unsere Anleitung zum Erstellen einer Landing Page mit WordPress oder unsere Liste der besten Drag-and-Drop-Seitenersteller.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.