So fügen Sie benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzu

Bei WPBeginner haben wir unzähligen Lesern geholfen, ihre WordPress-Websites anzupassen, um die Benutzererfahrung zu verbessern, das Branding zu stärken und Konversionen zu steigern. Und wir haben gesehen, dass ein einzigartiges Navigationsmenü, wenn es richtig gemacht wird, dazu beitragen kann, das Engagement zu erhöhen und die Leute länger auf Ihrer Website zu halten.

Das Problem ist, dass alle WordPress-Themes vordefinierte Speicherorte haben, an denen Sie ein Navigationsmenü anzeigen können. Daher kann die Änderung schwierig sein. Dies gilt insbesondere, wenn Sie Anfänger sind, da die Modifizierung von Theme-Dateien ein heikler Prozess ist.

Wenn Sie ein Block-Theme verwenden, können Sie dies mit dem Full Site Editor tun. Aber unserer Erfahrung nach gibt es bessere Optionen, die für alle Arten von Themes funktionieren.

Wenn Sie beispielsweise erweiterte Anpassungen wünschen, können Sie einen leistungsstarken Seitenersteller wie SeedProd verwenden. Oder wenn Sie nach einer einfachen Möglichkeit suchen, benutzerdefinierten Code zu verwenden, ist WPCode mit Abstand die beste Wahl.

In diesem Artikel zeigen wir Ihnen, wie Sie ein benutzerdefiniertes Navigationsmenü zu jedem Bereich Ihres WordPress-Themes hinzufügen. Wir führen Sie durch 3 verschiedene Optionen, damit Sie das Tutorial auswählen können, das Ihren Bedürfnissen entspricht.

Warum benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzufügen?

Ein Navigationsmenü ist eine Liste von Links, die auf wichtige Bereiche Ihrer Website verweisen. Sie erleichtern es den Besuchern, interessante Inhalte zu finden, was die Seitenaufrufe erhöhen und die Absprungrate in WordPress reduzieren kann.

Der genaue Standort Ihres Menüs hängt von Ihrem WordPress-Theme ab. Die meisten Themes bieten mehrere Optionen, sodass Sie verschiedene Menüs erstellen und an verschiedenen Stellen anzeigen können.

Um zu sehen, wo Sie Menüs in Ihrem aktuellen WordPress-Theme anzeigen können, gehen Sie einfach zu Darstellung » Menüs und schauen Sie sich dann den Abschnitt „Anzeigestandort“ an.

Das folgende Bild zeigt die vom Astra WordPress-Theme unterstützten Positionen.

Manchmal möchten Sie vielleicht ein Menü in einem Bereich anzeigen, der in Ihrem Theme nicht als „Anzeigespeicherort“ aufgeführt ist.

Vor diesem Hintergrund wollen wir uns ansehen, wie Sie ein benutzerdefiniertes Navigationsmenü zu jedem Bereich Ihres WordPress-Themes hinzufügen können. Verwenden Sie einfach die Schnelllinks unten, um zu der von Ihnen bevorzugten Methode zu springen:

Methode 1: Verwendung des Full Site Editors (nur Block-basierte Themes)

Wenn Sie ein Block-Theme wie ThemeIsle Hestia Pro verwenden, können Sie ein benutzerdefiniertes Navigationsmenü mit Full Site Editing (FSE) und dem Block-Editor hinzufügen.

Weitere Details finden Sie in unserem Artikel über die besten WordPress Full-Site-Editing-Themes.

Diese Methode funktioniert nicht mit jedem Theme und erlaubt Ihnen nicht, jeden Teil des Menüs anzupassen. Wenn Sie ein vollständig benutzerdefiniertes Menü zu einem beliebigen WordPress-Theme hinzufügen möchten, empfehlen wir stattdessen die Verwendung eines Page-Builder-Plugins.

Wenn Sie ein blockbasiertes Theme verwenden, gehen Sie zu Darstellung » Editor.

Standardmäßig zeigt der Full Site Editor die Home-Vorlage Ihres Themes an, aber Sie können jedem Bereich ein Navigationsmenü hinzufügen.

Um alle verfügbaren Optionen anzuzeigen, wählen Sie einfach 'Vorlagen', 'Muster' oder 'Seiten'.

Sie können nun auf die Vorlage, den Vorlagenteil oder die Seite klicken, zu der Sie ein benutzerdefiniertes Navigationsmenü hinzufügen möchten.

WordPress zeigt nun eine Vorschau des Designs an. Um diese Vorlage zu bearbeiten, klicken Sie auf das kleine Stiftsymbol.

Der nächste Schritt ist das Hinzufügen eines Navigationsblocks zu dem Bereich, in dem Sie Ihr Menü anzeigen möchten.

Klicken Sie in der oberen linken Ecke auf den blauen „+“-Button.

Geben Sie nun 'Navigation' in die Suchleiste ein.

Wenn der Block 'Navigation' erscheint, ziehen Sie ihn einfach per Drag & Drop in Ihr Layout.

Klicken Sie als Nächstes, um den Navigationsblock auszuwählen.

Wenn Sie das Menü, das Sie anzeigen möchten, bereits erstellt haben, klicken Sie, um den Navigationsblock auszuwählen. Klicken Sie im rechten Menü auf das Drei-Punkte-Symbol neben „Menü“.

Sie können dann ein Menü aus dem Dropdown-Menü auswählen.

Eine weitere Option ist, ein Menü im Full-Site-Editor zu erstellen, indem Sie Seiten, Beiträge, benutzerdefinierte Links und mehr hinzufügen. Um Elemente zum neuen Menü hinzuzufügen, klicken Sie einfach auf das Symbol „+“.

Dies öffnet ein Popup, in dem Sie jeden Beitrag oder jede Seite hinzufügen und entscheiden können, ob diese Links in einem neuen Tab geöffnet werden sollen.

Sie können auch eine Suchleiste zum WordPress-Menü hinzufügen, Social-Media-Icons hinzufügen und mehr. Geben Sie im Popup einfach den Block ein, den Sie zum Menü hinzufügen möchten, und wählen Sie die richtige Option aus, wenn sie erscheint.

Sie können diesen Block dann mit den Einstellungen in der Mini-Symbolleiste und dem rechten Menü konfigurieren. Wiederholen Sie einfach diese Schritte, um weitere Elemente zum Menü hinzuzufügen.

Wenn Sie mit dem Aussehen des Menüs zufrieden sind, klicken Sie einfach auf die Schaltfläche „Speichern“.

Ihre Website verwendet nun die neue Vorlage, und Besucher können mit Ihrem benutzerdefinierten Navigationsmenü interagieren.

Methode 2: Verwendung eines Page Builder Plugins (funktioniert mit allen Themes)

Der Full Site Editor ermöglicht es Ihnen, Menüs zu blockbasierten Themes hinzuzufügen. Wenn Sie jedoch ein erweitertes, vollständig anpassbares Menü zu einem beliebigen WordPress-Theme hinzufügen möchten, benötigen Sie ein Page-Builder-Plugin.

SeedProd ist das beste WordPress Page-Builder-Plugin auf dem Markt, mit dem Sie jeden Teil Ihres Navigationsmenüs anpassen können.

Wir haben umfangreiche Erfahrung mit diesem Tool zum Erstellen benutzerdefinierter Navigationsmenüs, Landing Pages und vielem mehr. Weitere Details finden Sie in unserem vollständigen SeedProd-Testbericht.

Wenn es um Seiten geht, bietet SeedProd über 350 professionell gestaltete Vorlagen, die Sie als Ausgangspunkt verwenden können. Nach der Auswahl einer Vorlage können Sie Ihrer Website mit dem fertigen Navigationsmenü-Block von SeedProd ein benutzerdefiniertes Navigationsmenü hinzufügen.

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

Nach der Aktivierung des Plugins wird SeedProd nach Ihrem Lizenzschlüssel fragen.

Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website. Geben Sie nach Eingabe des Schlüssels auf die Schaltfläche „Schlüssel überprüfen“.

Sobald Sie das getan haben, gehen Sie zu SeedProd » Landing Pages und klicken Sie auf die Schaltfläche „Neue Landing Page hinzufügen“.

Sie können nun eine Vorlage für Ihre benutzerdefinierte Seite auswählen.

Um Ihnen bei der Suche nach dem richtigen Design zu helfen, sind alle Vorlagen von SeedProd nach verschiedenen Kampagnentypen organisiert, wie z. B. Coming Soon und Lead Squeeze-Kampagnen. Sie können die Vorlagen von SeedProd sogar verwenden, um Ihre 404-Seite zu verbessern.

Um sich ein Design genauer anzusehen, bewegen Sie einfach die Maus über diese Vorlage und klicken Sie dann auf das Lupensymbol.

Wenn Sie ein Design gefunden haben, das Sie verwenden möchten, klicken Sie auf „Diese Vorlage auswählen“.

Wir verwenden die Vorlage „Black Friday Sales Page“ in all unseren Bildern, aber Sie können jede beliebige Vorlage verwenden.

Geben Sie nach der Auswahl einer Vorlage einen Namen für diese benutzerdefinierte Seite ein. SeedProd erstellt automatisch eine URL basierend auf dem Titel der Seite, aber Sie können diese URL beliebig ändern.

Sie k\

Nachdem Sie diese Informationen eingegeben haben, klicken Sie auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“.

Die meisten Vorlagen enthalten bereits einige Blöcke, die die Kernkomponenten aller SeedProd-Seitenlayouts sind.

Um einen Block anzupassen, klicken Sie einfach darauf, um ihn im Seiten-Editor auszuwählen.

Die linke Werkzeugleiste zeigt nun alle Einstellungen für diesen Block an. Im Bild unten ändern wir zum Beispiel den Text innerhalb eines 'Überschriften'-Blocks.

Sie können den Text formatieren, die Ausrichtung ändern, Links hinzufügen und mehr mit den Einstellungen im linken Menü.

Wenn Sie die Registerkarte \

Um neue Blöcke zu Ihrem Design hinzuzufügen, suchen Sie einfach einen beliebigen Block im linken Menü und ziehen Sie ihn dann auf die Seite. Wenn Sie einen Block löschen möchten, klicken Sie darauf, um ihn auszuwählen, und verwenden Sie dann das Papierkorbsymbol.

Da wir ein benutzerdefiniertes Navigationsmenü erstellen möchten, ziehen Sie einen „Navigationsmenü“-Block auf die Seite.

Dies erstellt ein Navigationsmenü mit einem einzelnen Standardelement „Über uns“.

Sie können nun entweder ein neues Menü im SeedProd-Editor erstellen oder ein Menü auswählen, das Sie bereits im WordPress-Dashboard erstellt haben.

Um ein zuvor erstelltes Menü anzuzeigen, klicken Sie auf die Schaltfläche „WordPress-Menü“. Sie können nun das Dropdown-Menü „Menüs“ öffnen und eine beliebige Option aus der Liste auswählen.

Danach können Sie die Schriftgröße, Textausrichtung und mehr mit den Einstellungen im linken Menü ändern.

Wenn Sie stattdessen ein neues Menü in SeedProd erstellen möchten, wählen Sie die Schaltfläche „Einfach“.

Klicken Sie dann, um den von SeedProd standardmäßig erstellten Eintrag „Über“ zu erweitern.

Dies öffnet einige Steuerelemente, mit denen Sie den Text ändern und die URL hinzufügen können, zu der der Menüpunkt verknüpft werden soll.

Standardmäßig ist der Link „dofollow“ und öffnet sich im selben Browserfenster. Sie können diese Einstellungen mit den Kontrollkästchen im Abschnitt „URL-Link“ ändern.

Im folgenden Bild erstellen wir einen \

Um weitere Elemente zum Menü hinzuzufügen, klicken Sie einfach auf die Schaltfläche „Neues Element hinzufügen“.

Sie können dann jeden dieser Punkte anpassen, indem Sie dem gleichen oben beschriebenen Prozess folgen.

Das linke Men\u00fc enth\u00e4lt auch Einstellungen, die die \u00a0

Sie können sogar einen Trennstrich erstellen, der zwischen jedem Element im Menü angezeigt wird.

Wechseln Sie danach zum Tab „Erweitert“. Hier können Sie die Farben, Abstände, Typografie und andere erweiterte Optionen des Menüs ändern.

W\u00e4hrend Sie \u00c4nderungen vornehmen, wird die \u00a0

Standardmäßig zeigt SeedProd auf Mobilgeräten und Desktop-Computern dasselbe Menü an. Mobilgeräte haben jedoch typischerweise viel kleinere Bildschirme im Vergleich zu Desktop-Computern.

In diesem Sinne möchten Sie vielleicht ein separates Menü erstellen, das auf Mobilgeräten angezeigt wird. Sie könnten zum Beispiel ein vertikales Layout verwenden, damit mobile Benutzer nicht seitwärts scrollen müssen. Möglicherweise möchten Sie auch weniger Links auf Smartphones und Tablets anzeigen.

Um \u00a0

Sie können jetzt den Schieberegler „Auf Desktop ausblenden“ aktivieren.

Nun zeigt SeedProd dieses Menü nur noch mobilen Nutzern an.

Wenn Sie mit dem Aussehen Ihres benutzerdefinierten Menüs zufrieden sind, ist es Zeit, es zu veröffentlichen.

Klicken Sie einfach auf den Dropdown-Pfeil neben „Speichern“ und wählen Sie dann „Veröffentlichen“ aus.

Wenn Sie nun Ihren WordPress-Blog besuchen, sehen Sie das benutzerdefinierte Navigationsmenü in Aktion.

Methode 3: Erstellen eines benutzerdefinierten Navigationsmenüs in WordPress mit Code (Fortgeschritten)

Wenn Sie kein Page-Builder-Plugin einrichten m\u00f6chten, k\u00f6nnen Sie ein benutzerdefiniertes Navigationsmen\u00fc per Code hinzuf\u00fcgen. Sie finden oft Anleitungen, wie Sie benutzerdefinierte \u00a0

Wir empfehlen diese Methode jedoch nicht, da selbst ein kleiner Fehler in Ihrem Code eine Reihe von \u00a0

Deshalb empfehlen wir die Verwendung von \u00a0

Das erste, was Sie tun m\u00fcssen, ist die Installation und Aktivierung des \u00a0

Nach der Aktivierung gehen Sie in Ihrem WordPress-Dashboard zu Code Snippets » Snippet hinzufügen.

Hier sehen Sie alle fertigen Snippets, die Sie zu Ihrer Website hinzuf\u00fcgen k\u00f6nnen.  Dazu geh\u00f6rt ein Snippet, mit dem Sie 

Um Ihren eigenen Snippet zu erstellen, bewegen Sie die Maus über 'Fügen Sie Ihren benutzerdefinierten Code hinzu (Neuer Snippet)' und klicken Sie dann auf die Schaltfläche '+ Benutzerdefinierten Snippet hinzufügen'.

Als Nächstes müssen Sie aus der Liste der angezeigten Optionen einen Coded-Typ auswählen. Wählen Sie für dieses Tutorial 'PHP-Snippet' als Coded-Typ.

Sie werden nun zur Seite „Benutzerdefiniertes Snippet erstellen“ weitergeleitet.

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

Sobald Sie das getan haben, fügen Sie einfach den folgenden Schnipsel in den Code-Editor ein:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Dies fügt Ihrem Theme einen neuen Menüstandort namens „Mein benutzerdefiniertes Menü“ hinzu. Um einen anderen Namen zu verwenden, passen Sie einfach den Codeausschnitt an.

Wenn Sie mehr als ein benutzerdefiniertes Navigationsmenü zu Ihrem Theme hinzufügen möchten, fügen Sie einfach eine zusätzliche Zeile zum Code-Snippet hinzu.

Zum Beispiel fügen wir hier zwei neue Menüpositionen zu unserem Theme hinzu, genannt 'Mein benutzerdefiniertes Menü' und 'Zusätzliches Menü':

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Scrollen Sie danach zu den „Einfügeoptionen“. Wenn die Methode nicht bereits ausgewählt ist, wählen Sie die Methode „Automatisch einfügen“, damit WPCode den Ausschnitt auf Ihrer gesamten Website hinzufügt.

Öffnen Sie dann das Dropdown-Menü „Standort“ und klicken Sie auf „Überall ausführen“.

Nun sind Sie bereit, zum oberen Bildschirmrand zu scrollen und auf den Schieberegler „Inaktiv“ zu klicken, damit er zu „Aktiv“ wechselt.

Klicken Sie abschließend auf „Speichern“, um diesen Ausschnitt live zu schalten.

Gehen Sie danach zu Darstellung » Menüs und sehen Sie sich den Bereich „Anzeigestandort“ an.

Sie sollten nun eine neue Option „Mein benutzerdefiniertes Menü“ sehen.

Sie k\u00f6nnen nun einige Men\u00fcpunkte zum neuen Speicherort hinzuf\u00fcgen. Weitere Informationen finden Sie in unserer Schritt-f\u00fcr-Schritt-Anleitung zum Thema \u00a0

Wenn Sie mit Ihrem Menü zufrieden sind, besteht der nächste Schritt darin, es zu Ihrem WordPress-Theme hinzuzufügen.

Hinzufügen des benutzerdefinierten Navigationsmenüs zu Ihrem WordPress-Theme

Die meisten Websites zeigen das Navigationsmen\u00fc direkt unter dem Header-Bereich an. Das bedeutet, dass das Men\u00fc eines der ersten Dinge ist, die Besucher sehen, zusammen mit dem \u00a0

Sie können das benutzerdefinierte Navigationsmenü an jeder beliebigen Stelle hinzufügen, indem Sie etwas Code zur Vorlagendatei Ihres Themes hinzufügen.

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Theme-Datei-Editor.

Wählen Sie im rechten Menü die Vorlage aus, zu der Sie das Menü hinzufügen möchten. Wenn Sie beispielsweise das benutzerdefinierte Navigationsmenü in der Kopfzeile Ihrer Website anzeigen möchten, wählen Sie normalerweise die Datei header.php aus.

Hilfe beim Auffinden der richtigen Vorlagendatei finden Sie in unserem Leitfaden So finden Sie heraus, welche Dateien Sie in Ihrem WordPress-Theme bearbeiten müssen.

Nach der Auswahl der Datei müssen Sie eine wp_nav_menu Funktion hinzufügen und den Namen Ihres benutzerdefinierten Menüs angeben.

Im folgenden Code-Snippet fügen wir beispielsweise „Mein benutzerdefiniertes Menü“ zum Header des Themas hinzu:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Nachdem Sie den Code hinzugefügt haben, klicken Sie auf die Schaltfläche 'Datei aktualisieren', um Ihre Änderungen zu speichern.

Wenn Sie nun Ihre Website besuchen, sehen Sie das benutzerdefinierte Menü in Aktion.

Standardmäßig wird Ihr Menü als einfache Aufzählungsliste angezeigt.

Sie können das benutzerdefinierte Navigationsmenü so gestalten, dass es besser zu Ihrem WordPress-Theme oder Ihrem Unternehmensbranding passt, indem Sie benutzerdefinierten CSS-Code zu Ihrer Website hinzufügen.

Gehen Sie dazu zu Darstellung » Anpassen.

Klicken Sie im WordPress Theme Customizer auf „Zusätzliches CSS“.

Dies öffnet einen kleinen Code-Editor, in den Sie CSS eingeben können.

Sie können Ihr Menü jetzt mit der CSS-Klasse gestalten, die Sie Ihrer Theme-Vorlage hinzugefügt haben. In unserem Beispiel ist dies .custom_menu_class.

Im folgenden Code fügen wir Ränder und Abstände hinzu, setzen die Textfarbe auf Schwarz und ordnen die Menüpunkte horizontal an:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

Der WordPress Customizer wird automatisch aktualisiert.

Nun wird angezeigt, wie das Menü mit dem neuen Stil aussehen wird.

Wenn Sie mit dem Aussehen des Menüs zufrieden sind, klicken Sie auf 'Veröffentlichen', um Ihre Änderungen live zu schalten.

Weitere Informationen finden Sie in unserem Leitfaden So gestalten Sie WordPress-Navigationsmenüs.

Expertenanleitungen: Mehr mit WordPress-Navigationsmenüs machen

Mit WordPress können Sie alle Arten von hilfreichen und ansprechenden Menüs erstellen. In diesem Sinne finden Sie hier einige Expertenanleitungen, die Ihnen helfen, noch mehr aus Ihren Navigationsmenüs herauszuholen:

• So fügen Sie Bildsymbole mit Navigationsmenüs in WordPress hinzu
• So fügen Sie bedingte Logik zu Menüs in WordPress hinzu (Schritt für Schritt)
• So fügen Sie Menü-Beschreibungen in Ihre WordPress-Themes ein
• So fügen Sie ein Vollbild-Responsive-Menü in WordPress hinzu
• So fügen Sie ein Mega-Menü zu Ihrer WordPress-Website hinzu (Schritt für Schritt)

Wir hoffen, dieser ultimative Leitfaden hat Ihnen geholfen zu lernen, wie Sie ein benutzerdefiniertes Navigationsmenü in WordPress hinzufügen. Möglicherweise möchten Sie auch unsere Leitfäden lesen So fügen Sie eine Schaltfläche zu Ihrem WordPress-Header-Menü hinzu oder So heben Sie ein Menüelement in WordPress hervor.

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.