So fügen Sie der WordPress-Menüelemente die erste und letzte CSS-Klasse hinzu

Haben Sie schon einmal Websites mit einzigartig gestalteten ersten und letzten Menüelementen bemerkt? Das ist kein Zufall – es ist cleveres CSS am Werk. Diese Technik kann wichtige Links hervorheben, wie Ihre Kontaktseite oder ein Sonderangebot.

Viele unserer Leser haben versucht, benutzerdefinierte Klassen zu ihren Menüpunkten hinzuzufügen, nur um festzustellen, dass die Formatierung bricht, wenn sie ihr Menü neu anordnen. Die als 'erste' und 'letzte' markierten Elemente befinden sich nicht mehr an diesen Positionen, was das Menü inkonsistent aussehen lässt.

Deshalb zeigt Ihnen dieser Leitfaden, wie Sie eine Klasse .first und .last hinzufügen, die an Ihren Menüpunkten haften bleibt, auch wenn Sie die Reihenfolge später ändern. Wir behandeln zwei Methoden: einen Filter für klassische Themes und CSS-Selektoren für alle Themes, einschließlich Block-Themes.

Warum die ersten und letzten Navigationsmenüelemente unterschiedlich gestalten?

Manchmal müssen Sie den ersten und letzten Elementen in einem Navigationsmenü benutzerdefinierte Stile hinzufügen. Dies kann wichtige Links hervorheben, wie z. B. den Link zu Ihrem Kontaktformular oder zur WooCommerce-Warenkorbseite.

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 zu irgendeinem Zeitpunkt ändern, kann dies die benutzerdefinierte Formatierung vollständig beeinträchtigen.

Aus diesem Grund empfehlen wir die Verwendung von Filtern.

In dieser Anleitung zeigen wir Ihnen, wie Sie die ersten und letzten Elemente Ihres Navigationsmenüs gestalten, damit Sie das Menü neu anordnen können, ohne die benutzerdefinierte Gestaltung zu beeinträchtigen. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der gewünschten Methode zu gelangen:

• Methode 1: Hinzufügen der ersten und letzten Klasse mit einem Filter (empfohlen)
• Methode 2: Gestalten von ersten und letzten Elementen mit CSS-Selektoren (funktioniert mit allen Themes)

Methode 1: Hinzufügen der ersten und letzten Klasse mit einem Filter (empfohlen)

Hinweis: Diese Methode funktioniert nur mit einem klassischen WordPress-Theme. Wenn Sie ein Block-Theme verwenden, gehen Sie zu Methode 2.

Der einfachste Weg, Ihre Navigationsmenüpunkte zu gestalten, ist das Hinzufügen eines Filters zu Ihrem Theme.

Oft finden Sie Code-Snippets in WordPress-Tutorials mit Anweisungen, sie zu Ihrer Theme-Datei functions.php hinzuzufügen.

Das größte Problem ist, dass selbst ein kleiner Fehler im benutzerdefinierten Code-Snippet Ihre WordPress-Website zum Absturz bringen und unzugänglich machen kann. Ganz zu schweigen davon, dass Sie bei einem Update Ihres WordPress-Themes alle Ihre Anpassungen verlieren werden.

Hier 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.

Das erste, was Sie tun müssen, ist das kostenlose WPCode-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Code Snippets » Add Snippet.

Bewegen Sie hier einfach die Maus über 'Fügen Sie Ihren benutzerdefinierten Code hinzu'.

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

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

Öffnen Sie danach das Dropdown-Menü 'Code-Typ' und wählen Sie 'PHP-Snippet'.

Sie können dann den folgenden PHP-Code 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 sind Sie bereit, zum oberen Bildschirmrand zu scrollen und auf den Schalter 'Inactive' zu klicken, damit er sich in 'Active' ändert.

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

Dies erstellt die CSS-Klassen .first und .last für Ihre ersten und letzten Menüpunkte. Sie können diese Klassen nun verwenden, um diesen Punkten auf Ihrem benutzerdefinierten Navigationsmenü ein einzigartiges Styling zu geben.

Dazu müssen Sie Ihrer WordPress-Website einen zweiten Code-Schnipsel hinzufügen. Erstellen Sie zunächst einen neuen benutzerdefinierten Code-Schnipsel, indem Sie den gleichen Prozess wie oben beschrieben befolgen.

Geben Sie danach einen Titel für den benutzerdefinierten Code-Snippet ein.

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

Für diese Anleitung werden wir einfach die ersten und letzten Menüelemente fett formatieren, indem wir die folgende CSS-Formatierung in das Codefeld einfügen:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

Wenn Sie dies getan haben, klicken Sie auf den Umschalter „Inaktiv“, sodass er zu „Aktiv“ wechselt.

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

Wenn Sie nun Ihre Website besuchen, sehen Sie das neu gestaltete Menü live.

Methode 2: Gestalten von ersten und letzten Elementen mit CSS-Selektoren (funktioniert mit allen Themes)

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

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

Um diese Methode anzuwenden, müssen Sie Code zu Ihrer Theme-Stylesheet-Datei oder dem Abschnitt „Zusätzliches CSS“ des WordPress Theme Customizer hinzufügen.

Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.

Der erste Schritt ist die Bearbeitung der style.css-Datei Ihres Themes oder das Aufrufen von Darstellung » Anpassen und dann das Klicken auf „Zusätzliches CSS“.

Fügen Sie danach den folgenden Code-Schnipsel zu Ihrer Website hinzu:

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 letzte Kind seines Elternelements aus, was die ersten und letzten Elemente im Navigationsmenü sind.

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

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, fehlt der Theme Customizer in Ihrem WordPress-Adminbereich. Sie müssen diese URL in Ihrem Browser eingeben, um auf den Theme Customizer zuzugreifen:

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

Stellen Sie sicher, dass Sie die Domain durch den Domainnamen Ihrer Website ersetzen.

Öffnen Sie danach wie zuvor den Tab „Zusätzliches CSS“ und fügen Sie den folgenden Code ein. Beachten Sie, wie 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;
}

Passen Sie den Code gerne an Ihre Bedürfnisse an. Im folgenden Beispiel haben wir die ersten und letzten Links in Schaltflächen umgewandelt.

So sieht es aus:

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie die Klassen .first und .last zu WordPress-Navigationsmenüs hinzufügen. Möglicherweise möchten Sie auch unseren Artikel über die Erstellung eines vertikalen Navigationsmenüs in WordPress und unseren Leitfaden für Anfänger zur Erstellung eines Dropdown-Menüs auf einer WordPress-Website lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.