Hinzufügen benutzerdefinierter Elemente zu bestimmten WordPress-Menüs

Möchten Sie benutzerdefinierte Elemente zu bestimmten WordPress-Menüs hinzufügen?

WordPress-Menüs sind Navigationsmenüs, die oben auf den meisten Websites angezeigt werden. Manchmal möchten Sie vielleicht andere benutzerdefinierte Elemente als einfache Links in Navigationsmenüs anzeigen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach benutzerdefinierte Elemente zu bestimmten WordPress-Menüs hinzufügen können.

Warum benutzerdefinierte Elemente zu WordPress-Menüs hinzufügen

WordPress-Menüs sind Navigationslinks, die normalerweise am oberen Rand einer Website angezeigt werden. Auf mobilen Geräten werden sie oft angezeigt, wenn Sie auf ein Menüsymbol tippen.

Da dies ein prominenter Platz in einem typischen WordPress-Website-Layout ist, ist es klug, ihn zu nutzen, indem man andere benutzerdefinierte Elemente als einfache Links im Menü platziert.

Zum Beispiel möchten einige Benutzer vielleicht das Suchformular anzeigen, wie wir es bei WPBeginner tun. Eine Mitgliedschafts-Website möchte vielleicht An- und Abmeldelinks anzeigen, oder Sie möchten Icons oder Bilder zu Ihrem Menü hinzufügen.

Standardmäßig sind die Navigationsmenüs so konzipiert, dass sie einfache Textlinks anzeigen. Sie können jedoch auch benutzerdefinierte Elemente in WordPress-Menüs platzieren.

Schauen wir uns nun an, wie Sie benutzerdefinierte Elemente zu bestimmten Menüs in WordPress hinzufügen können, während der Rest Ihres Navigationsmenüs intakt bleibt.

Hinzufügen benutzerdefinierter Elemente zu bestimmten Navigationsmenüs in WordPress

Es gibt verschiedene Möglichkeiten, benutzerdefinierte Elemente zu einem Navigationsmenü in WordPress hinzuzufügen. Es hängt davon ab, welche Art von benutzerdefiniertem Element Sie hinzufügen möchten.

Wir werden Ihnen einige der gängigsten Beispiele zeigen. Für einige von ihnen müssen Sie Plugins verwenden, für andere müssen Sie Code hinzufügen.

Wenn Sie zu einem bestimmten Abschnitt springen möchten, können Sie dieses Inhaltsverzeichnis verwenden:

• Hinzufügen eines Such-Popups zu Ihrem WordPress-Menü
• Hinzufügen von Icons oder Bildern zu Ihrem Menü
• Hinzufügen von Login/Logout-Links zu Ihrem Menü
• Hinzufügen von benutzerdefiniertem Text zu einem WordPress-Menü
• Hinzufügen des aktuellen Datums zum Menü
• Benutzernamen in Ihrem Menü anzeigen
• Verschiedene Menüs auf verschiedenen Seiten anzeigen

Fangen wir an.

1. Hinzufügen eines Such-Popups im WordPress-Menü

Normalerweise können Sie ein Suchformular in Ihre WordPress-Seitenleiste einfügen, indem Sie das Standard-Such-Widget oder den Suchblock verwenden. Es gibt jedoch keine Möglichkeit, die Suche standardmäßig in das Navigationsmenü einzufügen.

Einige WordPress-Themes verfügen über eine Option zum Hinzufügen eines Suchfelds zum Hauptmenübereich. Wenn Ihr Theme dies nicht hat, können Sie die folgende Methode verwenden.

Hierfür müssen Sie das SearchWP Modal Search Form Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Dieses Plugin ist ein Addon für SearchWP, das beste WordPress-Such-Plugin auf dem Markt.

Das Addon ist kostenlos und funktioniert auch mit der Standard-WordPress-Suche. Wir empfehlen jedoch, es mit SearchWP zu verwenden, wenn Sie Ihre WordPress-Suche verbessern möchten.

Nachdem Sie das Addon installiert haben, gehen Sie einfach auf die Seite Erscheinungsbild “ Menüs. Klicken Sie unter der Spalte „Menüpunkte hinzufügen“ auf die Registerkarte „SearchWP Modal Search Forms“, um sie zu erweitern.

Wählen Sie Ihre Suchmaschine aus und klicken Sie dann auf die Schaltfläche Zum Menü hinzufügen.

Das Plugin fügt die Suche zu Ihrem Navigationsmenü hinzu. Klicken Sie auf das „Modale Suchformular“ unter Ihren Menüpunkten, um es zu erweitern und ändern Sie die Bezeichnung in „Suche“ oder etwas anderes, das Sie wünschen.

Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken, um Ihre Änderungen zu speichern.

Sie können nun Ihre Website besuchen und sehen, dass die Suche zu Ihrem Navigationsmenü hinzugefügt wurde. Wenn Sie darauf klicken, wird das Suchformular in einem Leuchtkasten geöffnet.

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen einer Suchschaltfläche zu einem WordPress-Menü.

2. Hinzufügen von Symbolen und benutzerdefinierten Bildern zu bestimmten Menüs

Ein weiteres beliebtes benutzerdefiniertes Element, das die Benutzer häufig zu einem bestimmten Menü hinzufügen möchten, ist ein Bild oder ein Symbol.

Dazu müssen Sie das Menu Image Icon Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung auf die Seite Erscheinungsbild “ Menüs und fahren Sie mit der Maus über den Menüpunkt, an dem Sie ein Symbol oder Bild anzeigen möchten.

Klicken Sie auf die blaue Schaltfläche Menübild, um fortzufahren.

Daraufhin wird ein Popup-Fenster angezeigt. Hier können Sie ein Bild oder ein Symbol auswählen, das mit diesem Menüpunkt angezeigt werden soll.

Sie können auch die Position des Bildes oder Symbols in Bezug auf den Menüpunkt wählen. Sie können zum Beispiel das Symbol direkt vor dem Menüpunkt anzeigen, wie in unserem Beispiel unten, oder sogar den Menütitel ausblenden, so dass nur das Symbol angezeigt wird.

Vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu speichern. Wiederholen Sie den Vorgang, wenn Sie Symbole oder Bilder zu anderen Menüpunkten hinzufügen möchten.

Danach können Sie Ihre Website besuchen, um das benutzerdefinierte Bild oder Symbol in bestimmten Menüpunkten zu sehen.

Eine ausführliche Anleitung finden Sie in unserem Tutorial zum Hinzufügen von Bildern in WordPress-Menüs.

3. Login-/Logout-Links zum spezifischen WordPress-Menü hinzufügen

Wenn Sie ein WordPress-Mitgliedschafts-Plugin verwenden oder ein Online-Geschäft betreiben, möchten Sie vielleicht den Benutzern die Möglichkeit geben, sich einfach bei ihren Konten anzumelden.

Standardmäßig verfügt WordPress nicht über eine einfache Möglichkeit, Links zum An- und Abmelden in Navigationsmenüs anzuzeigen.

Wir zeigen Ihnen, wie Sie sie mit Hilfe eines Plugins oder eines Code-Snippets hinzufügen können.

1. Hinzufügen von Login/Logout-Links zu Menüs mit einem Plugin

Diese Methode ist einfacher und wird für alle Benutzer empfohlen.

Zunächst müssen Sie das Plugin für das Login- oder Logout-Menüelement installieren und aktivieren. Danach müssen Sie die Seite Erscheinungsbild “ Menü aufrufen und auf die Registerkarte Login/Logout klicken, um sie zu erweitern.

Hier müssen Sie den Punkt „Anmelden/Abmelden“ auswählen und auf die Schaltfläche „Zum Menü hinzufügen“ klicken.

Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken, um Ihre Änderungen zu speichern. Sie können nun Ihre Website besuchen, um Ihren benutzerdefinierten Login-Logout-Link in Aktion zu sehen.

Der Link ändert sich je nach Anmeldestatus des Benutzers dynamisch in Anmeldung oder Abmeldung.

Erfahren Sie mehr in unserem Tutorial über das Hinzufügen von Login- und Logout-Links in WordPress-Menüs.

2. Hinzufügen von Login-/Logout-Links mit benutzerdefiniertem Code

Bei dieser Methode müssen Sie Code zu Ihrer WordPress-Website hinzufügen. Wenn Sie dies noch nicht getan haben, werfen Sie einen Blick auf unsere Anleitung zum Hinzufügen von benutzerdefiniertem Code in WordPress.

Zunächst müssen Sie den Namen herausfinden, den Ihr WordPress-Theme für die spezifische Position des Navigationsmenüs verwendet.

Am einfachsten finden Sie dies, indem Sie die Seite Erscheinungsbild “ Menüs aufrufen und mit der Maus auf den Bereich der Menüpositionen gehen.

Klicken Sie mit der rechten Maustaste, um das Werkzeug „Inspect“ auszuwählen, und dann sehen Sie den Ortsnamen im Quellcode unten. Unser Demo-Theme verwendet zum Beispiel primär, Fußzeile und Top-Bar-Menü.

Notieren Sie sich den Namen, den Sie für den Zielort verwenden, an dem Sie den Anmelde-/Abmeldelink anzeigen möchten.

Als Nächstes müssen Sie den folgenden Code in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin einfügen.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Danach können Sie Ihre Website besuchen, und Sie sehen den Link zum Anmelden oder Abmelden in Ihrem Navigationsmenü.

Dieser dynamische Link schaltet je nach Anmeldestatus des Benutzers automatisch auf Login oder Logout um.

4. Hinzufügen von benutzerdefiniertem Text zu Ihrem WordPress-Navigationsmenü

Was, wenn Sie nur Text und keinen Link zu Ihrem Navigationsmenü hinzufügen möchten?

Es gibt zwei Möglichkeiten, wie Sie das tun können.

1. Benutzerdefinierten Text zu einem bestimmten Menü hinzufügen (einfacher Weg)

Gehen Sie einfach auf die Seite Erscheinungsbild “ Menüs und fügen Sie einen benutzerdefinierten Link mit dem Zeichen # als URL und dem Text, den Sie anzeigen möchten, als Linktext hinzu.

Klicken Sie auf die Schaltfläche Zum Menü hinzufügen, um fortzufahren.

WordPress fügt Ihren benutzerdefinierten Text als Menüpunkt in der linken Spalte hinzu. Klicken Sie nun darauf, um ihn zu erweitern, und löschen Sie das #-Zeichen.

Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken und Ihre Website in der Vorschau anzuzeigen. Sie werden sehen, dass Ihr benutzerdefinierter Text im Navigationsmenü erscheint.

Es handelt sich zwar immer noch um einen Link, aber wenn der Nutzer darauf klickt, hat er nichts davon.

2. Hinzufügen von benutzerdefiniertem Text zu einem Navigationsmenü mit Code

Bei dieser Methode fügen Sie einen Codeschnipsel in Ihre Website ein. Zunächst müssen Sie den Namen des Speicherorts Ihres Themas herausfinden, wie oben im Abschnitt Login/Logout-Link beschrieben.

Danach müssen Sie den folgenden Code in die Datei functions.php des Themes oder ein site-spezifisches Plugin einfügen.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

Ersetzen Sie einfach die Stelle, an der ‚Benutzerdefinierter Text‘ steht, durch Ihren eigenen Text.

Sie können nun Ihre Änderungen speichern und Ihre Website besuchen, um den benutzerdefinierten Text am Ende des Navigationsmenüs zu sehen.

Diese Code-Methode kann sich als nützlich erweisen, wenn Sie programmatisch dynamische Elemente zu einem bestimmten WordPress-Menü hinzufügen möchten.

5. Aktuelles Datum im WordPress-Menü hinzufügen

Möchten Sie das aktuelle Datum in einem Navigationsmenü in WordPress anzeigen? Dieser Trick ist sehr nützlich, wenn Sie einen häufig aktualisierten Blog oder eine News-Website betreiben.

Fügen Sie einfach den folgenden Code in die Datei functions.php Ihres Themes oder in ein site-spezifisches Plugin ein.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
         
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
 
    }
    return $items;
}

Vergessen Sie nicht, „primär“ durch den Standort Ihres Menüs zu ersetzen.

Sie können nun Ihre Website besuchen, um das aktuelle Datum in Ihrem WordPress-Menü zu sehen.

Sie können auch das Datumsformat nach Ihren Wünschen ändern. Siehe unsere Anleitung zum Ändern des Datums- und Zeitformats in WordPress.

6. Benutzernamen im WordPress-Menü anzeigen

Möchten Sie Ihr Navigationsmenü noch ein wenig persönlicher gestalten? Sie können eingeloggte Benutzer mit ihrem Namen in Ihrem Navigationsmenü begrüßen.

Als erstes müssen Sie den folgenden Code in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin einfügen.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
			 if ( is_user_logged_in() )     {
				$current_user = wp_get_current_user();
				 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
			 } else { 
			 $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
			 }
        }
    }

    return $menu_items;
} 

Dieser Code prüft zunächst, ob Sie einen Menüpunkt mit #profile_name# als Linktext hinzugefügt haben. Danach ersetzt er diesen Menüpunkt durch den Namen des angemeldeten Benutzers oder eine generische Begrüßung für nicht angemeldete Benutzer.

Als Nächstes müssen Sie auf die Seite Erscheinungsbild “ Menüs gehen und einen neuen benutzerdefinierten Link mit dem #profil_name# als Linktext hinzufügen.

Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken, um Ihre Änderungen zu speichern. Danach können Sie Ihre Website besuchen, um den Namen des eingeloggten Benutzers im WordPress-Menü zu sehen.

7. Dynamische Anzeige bedingter Menüs in WordPress

Bislang haben wir Ihnen gezeigt, wie Sie verschiedene Arten von benutzerdefinierten Elementen zu bestimmten WordPress-Menüs hinzufügen können. Manchmal müssen Sie den Benutzern jedoch dynamisch verschiedene Menüpunkte anzeigen.

Sie möchten zum Beispiel ein Menü nur angemeldeten Benutzern zeigen. Ein anderes Szenario ist, wenn Sie möchten, dass sich das Menü ändert, je nachdem, welche Seite der Benutzer gerade anschaut.

Mit dieser Methode können Sie mehrere Menüs erstellen und diese nur anzeigen, wenn bestimmte Bedingungen erfüllt sind.

Zunächst müssen Sie das Plugin für bedingte Menüs installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Erscheinungsbild “ Menüs aufrufen. Von hier aus müssen Sie ein neues Menü erstellen, das Sie anzeigen möchten. In diesem Beispiel haben wir zum Beispiel ein neues Menü nur für angemeldete Benutzer erstellt.

Nachdem Sie das Menü erstellt haben, wechseln Sie zur Registerkarte „Standorte verwalten“.

Von hier aus müssen Sie auf den Link Bedingte Menüs neben der Position des Menüs klicken.

Danach müssen Sie das Menü, das Sie zuvor erstellt haben, aus dem Dropdown-Menü auswählen.

Klicken Sie dann auf die Schaltfläche „+ Bedingungen“, um fortzufahren.

Daraufhin wird ein Popup-Fenster angezeigt.

Hier können Sie die Bedingungen auswählen, die erfüllt sein müssen, damit dieses Menü angezeigt wird.

Das Plugin bietet eine Reihe von Bedingungen, aus denen Sie wählen können. Zum Beispiel können Sie das Menü basierend auf einer bestimmten Seite, Kategorie, Beitragstyp, Taxonomie und mehr anzeigen.

Sie können auch unterschiedliche Menüs je nach Benutzerrolle und Anmeldestatus anzeigen. Zum Beispiel können Sie bestehenden Mitgliedern auf einer Mitglieder-Website ein anderes Menü zeigen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu erfahren, wie Sie benutzerdefinierte Elemente zu bestimmten WordPress-Menüs hinzufügen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Auswahl der besten Webdesign-Software oder unseren Expertenvergleich der besten Live-Chat-Software für kleine Unternehmen.

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.