Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

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.

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

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 Besuchern, interessante Inhalte zu finden, was die Seitenaufrufe erhöhen und die Absprungrate in WordPress reduzieren kann.

Der genaue Speicherort 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 von Astra WordPress theme unterstützten Positionen.

Die Menüpositionen im beliebten Astra-Theme

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-Themes für die vollständige Website-Bearbeitung.

Diese Methode funktioniert nicht mit jedem Theme und erlaubt es Ihnen nicht, jeden Teil des Menüs anzupassen. Wenn Sie ein komplett benutzerdefiniertes Menü zu jedem 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.

Öffnen des WordPress Full-Site-Editors (FSE)

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

Hinzufügen eines benutzerdefinierten Navigationsmenüs zu einem WordPress-Block-basierten Theme

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.

Hinzufügen eines Navigationsmenüs zu einer 404-Seiten-Vorlage

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.

Hinzufügen von Blöcken zu Ihrem WordPress-Theme

Geben Sie nun 'Navigation' in die Suchleiste ein.

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

Der WordPress-Navigationsblock

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

Wenn Sie das Menü, das Sie anzeigen möchten, bereits erstellt haben, klicken Sie auf den Block 'Navigation', um ihn auszuwählen. Klicken Sie im rechten Menü auf das Symbol mit den drei Punkten neben 'Menü'.

Menüs zu einem WordPress-Theme mit dem Full-Site-Editor (FE) hinzufügen

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 „+“.

So erstellen Sie ein neues Menü im Block-Editor

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, wenn sie erscheint.

Hinzufügen einer Suchleiste zu einem WordPress-Navigationsmenü

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

So fügen Sie benutzerdefinierte Navigationen in ein WordPress-Theme ein

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 von benutzerdefinierten 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, wie man ein WordPress-Plugin installiert.

Hinweis: Es gibt auch eine kostenlose Version von SeedProd, mit der Sie benutzerdefinierte Navigationsmenüs erstellen können, ohne Code schreiben zu müssen. In dieser Anleitung verwenden wir jedoch SeedProd Pro, da es den Navigationsmenü-Block sowie zusätzliche Vorlagen und erweiterte Funktionen bietet.

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

SeedProd Lizenzschlüssel

Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website. Nachdem Sie den Schlüssel eingegeben haben, klicken Sie 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“.

SeedProd's Seitendesign-Vorlagen

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 in verschiedene Kampagnentypen unterteilt, wie z. B. 'Coming Soon' und Lead-Squeeze-Kampagnen. Sie können die Vorlagen von SeedProd sogar verwenden, um Ihre 404-Seite zu verbessern.

Die SeedProd-Vorlagenbibliothek

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

Auswahl einer SeedProd-Vorlage für Ihre WordPress-Website

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.

Fügen Sie beispielsweise relevante Schlüsselwörter hinzu, damit Suchmaschinen verstehen, worum es auf der Seite geht. Dies kann Ihr WordPress SEO verbessern und der Suchmaschine helfen, die Seite den Personen anzuzeigen, die nach Inhalten wie Ihren suchen.

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

Eine neue Seite mit SeedProd erstellen

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.

Bearbeiten einer Überschrift in SeedProd

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

Wenn Sie die Registerkarte „Erweitert“ auswählen, erhalten Sie Zugriff auf noch mehr Einstellungen. Sie können beispielsweise den Block wirklich hervorheben, indem Sie Box-Schatten und CSS-Animationen hinzufügen.

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.

Entfernen von Blöcken aus einem benutzerdefinierten Layout

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

Hinzufügen eines benutzerdefinierten Navigationsmenüs zu einem WordPress-Layout

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.

So erstellen Sie ein Menü mit SeedProd

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

So erstellen Sie ein Navigationsmenü mit SeedProd

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.

Hinzufügen eines benutzerdefinierten Navigationsmenüs zu einer Landingpage

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 'nofollow'-Link, der sich in einem neuen Fenster öffnet. Weitere Informationen zu diesem Thema finden Sie in unserer Anfängeranleitung für Nofollow-Links.

Ein Menüpunkt als No-Follow markieren

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.

Elemente zu einem benutzerdefinierten Navigationsmenü hinzufügen

Das Menü auf der linken Seite enthält auch Einstellungen, die die Schriftgröße und die Textausrichtung ändern.

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

Erstellen eines Trennzeichens für Ihr benutzerdefiniertes Navigationsmenü

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

Während Sie Änderungen vornehmen, wird die Live-Vorschau automatisch aktualisiert, sodass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was in Ihrem Design gut aussieht.

Die erweiterten Anpassungseinstellungen von SeedProd

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 ein mobilfreundliches Menü zu erstellen, gestalten Sie das Menü einfach nach demselben oben beschriebenen Verfahren. Wählen Sie dann die Registerkarte 'Erweitert' und klicken Sie, um den Abschnitt 'Gerätesichtbarkeit' zu erweitern.

So erstellen Sie ein Menü nur für Mobilgeräte in SeedProd

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

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

Menü auf Desktop-Geräten ausblenden

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.

So veröffentlichen Sie ein benutzerdefiniertes Seitenlayout

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öchten, können Sie ein benutzerdefiniertes Navigationsmenü per Code hinzufügen. Oft finden Sie Anleitungen mit Anweisungen, wie Sie benutzerdefinierte Code-Snippets zur functions.php-Datei Ihres Themes hinzufügen.

Wir empfehlen diese Methode jedoch nicht, da selbst ein kleiner Fehler in Ihrem Code eine Reihe von häufigen WordPress-Fehlern verursachen oder Ihre Website sogar komplett lahmlegen könnte. Außerdem verlieren Sie den benutzerdefinierten Code, wenn Sie Ihr WordPress-Theme aktualisieren.

Deshalb empfehlen wir die Verwendung von WPCode. Es ist der einfachste und sicherste Weg, benutzerdefinierten Code in WordPress hinzuzufügen, ohne Kern-WordPress-Dateien bearbeiten zu müssen.

Hinweis: Es gibt unzählige verschiedene Möglichkeiten, wie Sie WPCode verwenden können, um Ihre WordPress-Website sicher anzupassen. Es verfügt über eine integrierte Code-Snippet-Bibliothek und unterstützt alle wichtigsten WordPress-Sprachen, einschließlich PHP, JavaScript, CSS und HTML. Weitere Informationen zum Plugin finden Sie in unserem vollständigen WPCode-Testbericht.

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 zum Installieren eines WordPress-Plugins.

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

Hinzufügen eines Code-Snippets mit dem WPCode WordPress-Plugin

Hier sehen Sie alle fertigen Snippets, die Sie zu Ihrer Website hinzufügen können.  Dazu gehört ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen können, die WordPress normalerweise nicht unterstützt, Anhangsseiten deaktivieren und vieles mehr.

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

Einen benutzerdefinierten Snippet zu WordPress 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.

PHP-Snippet in WPCode auswählen

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.

Hinzufügen eines benutzerdefinierten Navigationsmenüs mit WPCode

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

Ausführen eines benutzerdefinierten Code-Snippets

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.

Einfügen eines benutzerdefinierten Navigationsmenüs mit dem WPCode WordPress-Plugin

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.

Ein benutzerdefiniertes Navigationsmenü, das mit dem WPCode-Plugin erstellt wurde

Sie können nun loslegen und einige Menüpunkte zum neuen Standort hinzufügen. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Hinzufügen von Navigationsmenüs für Anfänger.

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ü direkt unter dem Header-Bereich an. Das bedeutet, dass das Menü zusammen mit dem Website-Logo oder Titel eines der ersten Dinge ist, das Besucher sehen.

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.

Der WordPress-Theme-Datei-Editor

Hilfe beim Auffinden der richtigen Vorlagendatei finden Sie in unserem Leitfaden unter 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.

Bearbeiten der WordPress-Theme-Dateien

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

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

Ein benutzerdefiniertes WordPress-Menü, das mit Code erstellt wurde

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.

Ein WordPress-Theme anpassen

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

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

Zusätzliches CSS zu Ihrem WordPress-Theme hinzufügen

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.

Styling eines benutzerdefinierten Navigationsmenüs

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 zum Thema Gestaltung von 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:

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 Anleitungen dazu lesen, wie Sie eine Schaltfläche in Ihr WordPress-Header-Menü einfügen oder wie Sie ein Menüelement in WordPress hervorheben.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

99 CommentsLeave a Reply

  1. Ich wollte Plugins für solche Dinge immer vermeiden. Deshalb schätze ich es immer, wenn Sie auch die Option anbieten, WP Code und Snippets zu verwenden. Ich probiere sie immer zuerst auf einer Testseite aus und dieses hier funktioniert hervorragend. Dann speichere ich Ihre Snippets in meinem eigenen Code-Speicher, auf den ich bei Bedarf immer zurückgreifen kann. Danke.

  2. Danke für das Zeigen des Codes, ich habe ein Problem, mein neues neues Menü zeigt immer denselben Inhalt wie das Hauptmenü an, nachdem ich Folgendes angewendet habe:
    wp_nav_menu( array( ‘theme_location’=>’too-right-menu’, ‘container_class’=>’top-right-class’ ) );

    Bitte helfen Sie.

    • Möglicherweise verwenden Sie denselben Namen wie ein anderes Menü, das Ihr Theme aktiv hat. Wenn Sie dies noch nicht getan haben, versuchen Sie bitte einen anderen Speicherortnamen.

      Admin

  3. Wie kann ich dieses Menü fixieren? Ich benutze die erste Methode, d.h. den Code in die header.php des Themes einzufügen. Jetzt möchte ich dieses Element fixieren, wenn der Benutzer von dieser Menüposition aus scrollt.

  4. Ich habe zwei Menüs erstellt. Eines links vom Logo und das andere rechts. Jetzt möchte ich ein Untermenü hinzufügen. Ich ziehe die Menüs einfach unter das übergeordnete Element, aber es funktioniert nicht. Haben Sie einen Artikel, der erklärt, wie wir ein benutzerdefiniertes Untermenü hinzufügen können?

    • Im Moment nicht, aber wir werden das sicherlich für zukünftige Artikel berücksichtigen.

      Admin

    • Möglicherweise müssen Sie ändern, wo der Code in der Vorlage eingefügt wird, aber wenn Sie sich an den Support Ihres aktuellen Themes wenden, können diese Ihnen mitteilen, wo der Header in ihrem Theme hinzugefügt wird.

      Admin

  5. Hallo

    Warum kann ich die Menüseite meiner Website nicht sehen?

    das Layout der Tutorials sieht überhaupt nicht wie mein Bildschirm aus

    danke

  6. Hallo, ich benutze Magazine Pro und es gibt keine Option für ein benutzerdefiniertes Menü im Widget-Bereich!! Ich habe Ihren Code verwendet, um ein benutzerdefiniertes Menü zu erstellen, aber ich brauche Hilfe, da es keine Option für ein benutzerdefiniertes Menü im Widget-Bereich gibt, weshalb ich es nicht in den Fußbereich ziehen und ablegen kann... Bitte helfen Sie mir

  7. Hallo! Ich habe das Tutorial abgeschlossen und konnte das Menü an der gewünschten Stelle auf meiner Website hinzufügen. Ich habe es gestylt und alles. PROBLEM: Das Menü erscheint beim Aktualisieren der Seite für einen Moment, ich kann es sogar anklicken! Es verschwindet jedoch schnell hinter meinem Header. Es ist nicht anklickbar, nachdem es verschwunden ist. Mein Gehirn explodiert, während ich versuche, das herauszufinden!!

  8. Hallo
    Zuerst erstelle ich das Add-Menü mit dem Namen mein benutzerdefiniertes Menü und es funktioniert einwandfrei und ordnungsgemäß. Dann ändere ich seinen Namen in Fußzeilenmenü. Nach der Namensänderung wird das benutzerdefinierte Navigationsmenü nicht abgerufen. Was ist der Grund dafür?

  9. Hallo, eine Freundin von mir hat ein Problem, nun ja, mehrere. Sie hat die horizontale Header-Navigationsleiste, aber auch eine vertikale daneben, die den Seiteninhalt verdeckt. Sie erscheint, wenn man auf der Startseite zu scrollen beginnt, ist aber auf allen Inhaltsseiten fixiert. Kann sich das bitte jemand ansehen und Rat geben? Außerdem gibt es eine Fehlermeldung, die wir nicht loswerden können. Jede Hilfe wird sehr geschätzt.

  10. wie man den Standard-Slider eines beliebigen Themas entfernt und wie man unser neues Slider-Modell auf der Homepage hinzufügt

Hinterlasse eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.