Hinzufügen von benutzerdefinierten Navigationsmenüs in WordPress-Themes

Bei WPBeginner haben wir unzähligen Besuchern geholfen, ihre WordPress Websites individuell anzupassen, um das Benutzererlebnis zu verbessern, das Branding zu steigern und die Konversionsrate zu erhöhen. Und wir haben gesehen, dass ein einzigartiges Navigationsmenü, wenn es richtig gemacht wird, das Engagement erhöhen und die Besucher länger auf Ihrer Website halten kann.

Das Problem ist, dass alle WordPress-Themes feste Positionen haben, an denen ein Navigationsmenü angezeigt werden kann, so dass es schwierig sein kann, dies zu ändern. Das gilt vor allem für Anfänger, denn das Ändern von Theme-Dateien ist ein heikler Prozess.

Wenn Sie ein Block-Theme verwenden, können Sie dies mit dem Full Website-Editor tun. Unserer Erfahrung nach gibt es jedoch bessere Optionen, die für alle Arten von Themes geeignet sind.

Wenn Sie zum Beispiel erweiterte individuelle Anpassungen wünschen, können Sie einen leistungsstarken Page-Builder wie SeedProd verwenden. Oder, wenn Sie nach einer einfachen Möglichkeit suchen, individuellen Code zu verwenden, ist WPCode bei weitem die beste Wahl.

In diesem Artikel zeigen wir Ihnen, wie Sie ein individuelles Navigationsmenü zu einem beliebigen Bereich Ihres WordPress-Themes hinzufügen können. Wir führen Sie durch 3 verschiedene Optionen, so dass Sie das Tutorial wählen können, das für Ihre Bedürfnisse geeignet ist.

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

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

Die genaue Position Ihres Menüs hängt von Ihrem WordPress-Theme ab. Die meisten Themes verfügen über mehrere Optionen, sodass Sie verschiedene Menüs erstellen und an unterschiedlichen Stellen anzeigen können.

Um zu sehen, wo Sie die Menüs in Ihrem aktuellen WordPress-Theme anzeigen können, gehen Sie einfach zu Erscheinungsbild “ Menüs und sehen Sie sich den Abschnitt „Anzeigeort“ an.

Die folgende Abbildung zeigt die Standorte, die vom Astra WordPress-Theme unterstützt werden.

Es kann vorkommen, dass Sie ein Menü in einem Bereich anzeigen möchten, der in Ihrem Thema nicht als „Anzeigeort“ aufgeführt ist.

Sehen wir uns also an, wie Sie ein benutzerdefiniertes Navigationsmenü zu einem beliebigen Bereich Ihres WordPress-Themes hinzufügen können. Verwenden Sie einfach die Links unten, um zu der von Ihnen bevorzugten Methode zu springen:

Methode 1: Verwendung des vollständigen Site-Editors (nur blockbasierte Themes)

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

Weitere Einzelheiten finden Sie in unserem Artikel über die besten WordPress-Themes für die Bearbeitung ganzer Websites.

Diese Methode funktioniert nicht mit jedem Theme, und Sie können nicht jeden Teil des Menüs anpassen. Wenn Sie ein vollständig benutzerdefiniertes Menü zu einem beliebigen WordPress-Theme hinzufügen möchten, empfehlen wir stattdessen die Verwendung eines Plugins für den Seitenersteller.

Wenn Sie ein blockbasiertes Thema verwenden, gehen Sie zu Erscheinungsbild „ Editor.

Standardmäßig wird im vollständigen Site-Editor die Home-Vorlage Ihres Themas angezeigt, aber Sie können jedem Bereich ein Navigationsmenü hinzufügen.

Um alle verfügbaren Optionen zu sehen, wählen Sie entweder „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 dieses Template zu bearbeiten, klicken Sie auf das kleine Bleistiftsymbol.

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 die blaue Schaltfläche „+“.

Geben Sie nun „Navigation“ in die Suchleiste ein.

Wenn der Block „Navigation“ erscheint, ziehen Sie ihn einfach auf Ihr Layout und legen ihn dort ab.

Klicken Sie anschließend auf , um den Navigationsblock auszuwählen.

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

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

Eine weitere Option ist die Erstellung eines Menüs innerhalb des Full-Site-Editors durch Hinzufügen von Seiten, Beiträgen, benutzerdefinierten Links und mehr. Um Elemente zum neuen Menü hinzuzufügen, klicken Sie einfach auf das „+“-Symbol.

Es öffnet sich ein Popup-Fenster, in dem Sie einen beliebigen Beitrag oder eine Seite hinzufügen und entscheiden können, ob diese Links in einem neuen Tab geöffnet werden sollen.

Sie können auch eine Suchleiste in das WordPress-Menü einfügen, Symbole für soziale Medien hinzufügen und vieles mehr. Geben Sie im Popup einfach den Block ein, den Sie dem Menü hinzufügen möchten, und wählen Sie die richtige Option aus, wenn sie erscheint.

Sie können diesen Block dann über die Einstellungen in der Minisymbolleiste und im rechten Menü konfigurieren. Wiederholen Sie einfach diese Schritte, um dem Menü weitere Elemente 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)

Mit dem vollständigen Site-Editor können Sie Menüs zu blockbasierten Themes hinzufügen. Wenn Sie jedoch ein erweitertes, vollständig anpassbares Menü zu einem WordPress-Theme hinzufügen möchten, benötigen Sie ein Plugin für den Seitenersteller.

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

Wir haben umfangreiche Erfahrungen mit diesem Tool, um individuelle Navigationsmenüs, Landing Pages und vieles mehr zu erstellen. Weitere Details finden Sie in unserer vollständigen Rezension von SeedProd.

Für Seiten bietet SeedProd über 350 professionell gestaltete Templates, die Sie als Ausgangspunkt verwenden können. Nachdem Sie ein Template ausgewählt haben, können Sie Ihrer Website ein individuelles Navigationsmenü hinzufügen, indem Sie den vorgefertigten Nav Menu-Block von SeedProd verwenden.

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

Nachdem Sie das Plugin aktiviert haben, fragt SeedProd nach Ihrem Lizenzschlüssel.

Sie können diese Informationen in Ihrem Konto auf der SeedProd-Website finden. Nachdem Sie den Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Wenn Sie das getan haben, gehen Sie zu SeedProd “ Landing Pages und klicken Sie auf die Schaltfläche „Add New Landing Page“.

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

Um Ihnen zu helfen, das richtige Design zu finden, sind alle Vorlagen von SeedProd in verschiedene Kampagnentypen unterteilt, wie z. B. „Coming Soon “ und „Lead Squeeze“. Sie können die Vorlagen von SeedProd sogar verwenden, um Ihre 404-Seite zu verbessern.

Um einen Entwurf genauer zu betrachten, fahren Sie einfach mit der Maus über die Vorlage und klicken Sie auf das Lupensymbol.

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

Wir verwenden für alle unsere Bilder die Vorlage „Black Friday Sales Page“, aber Sie können jede beliebige Vorlage verwenden.

Nachdem Sie eine Vorlage ausgewählt haben, geben Sie einen Namen für diese benutzerdefinierte Seite ein. SeedProd erstellt automatisch eine URL, die auf dem Titel der Seite basiert, aber Sie können diese URL nach Belieben ändern.

Sie können zum Beispiel relevante Schlüsselwörter hinzufügen, damit die Suchmaschinen verstehen, worum es auf der Seite geht. Dies kann Ihre WordPress-SEO verbessern und der Suchmaschine helfen, die Seite Leuten zu zeigen, 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“.

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

Um einen Block anzupassen, wählen Sie ihn einfach im Seiteneditor aus.

In der linken Symbolleiste werden nun alle Einstellungen für diesen Block angezeigt. In der Abbildung unten ändern wir zum Beispiel den Text in einem „Überschrift“-Block.

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

Wenn Sie die Registerkarte „Erweitert“ auswählen, haben Sie Zugriff auf noch mehr Einstellungen. Zum Beispiel können Sie den Block durch das Hinzufügen von Box-Shadows und CSS-Animationen besonders hervorheben.

Um Ihrem Entwurf neue Blöcke hinzuzufügen, suchen Sie einfach einen beliebigen Block im linken Menü und ziehen ihn auf die Seite. Wenn Sie einen Block löschen möchten, wählen Sie ihn durch Anklicken aus und verwenden Sie dann das Mülleimer-Symbol.

Da wir ein benutzerdefiniertes Navigationsmenü erstellen wollen, ziehen Sie einen „Nav Menu“-Block auf die Seite.

Dadurch wird ein Navigationsmenü mit einem einzigen Standardeintrag „Über“ erstellt.

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 Menü anzuzeigen, das Sie zuvor erstellt haben, klicken Sie auf die Schaltfläche „WordPress-Menü“. Sie können nun die Dropdown-Liste „Menüs“ öffnen und eine beliebige Option aus der Liste auswählen.

Danach können Sie die Schriftgröße, die Textausrichtung und vieles mehr über die 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 auf , um das Element „Über“ zu erweitern, das SeedProd standardmäßig erstellt.

Dadurch werden einige Steuerelemente geöffnet, mit denen Sie den Text ändern und die URL hinzufügen können, zu der das Menüelement verlinkt werden soll.

Standardmäßig ist der Link „dofollow“ und wird im selben Browserfenster geöffnet. Sie können diese Einstellungen über die Kontrollkästchen im Abschnitt „URL-Link“ ändern.

In der folgenden Abbildung erstellen wir einen „nofollow“-Link, der in einem neuen Fenster geöffnet wird. Weitere Informationen zu diesem Thema finden Sie in unserem Leitfaden für Einsteiger zu nofollow-Links.

Um dem Menü weitere Einträge hinzuzufügen, klicken Sie einfach auf die Schaltfläche „Neuen Eintrag hinzufügen“.

Sie können dann jedes dieser Elemente nach demselben Verfahren wie oben beschrieben anpassen.

Das linke Menü enthält auch Einstellungen, mit denen Sie die Schriftgröße und die Textausrichtung ändern können.

Sie können sogar eine Trennlinie erstellen, die zwischen den einzelnen Punkten des Menüs erscheint.

Wechseln Sie anschließend zur Registerkarte „Erweitert“. Hier können Sie die Farben des Menüs, die Abstände, die Typografie und andere erweiterte Optionen ändern.

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

Standardmäßig zeigt SeedProd auf mobilen und Desktop-Geräten das gleiche Menü an. Allerdings haben mobile Geräte in der Regel viel kleinere Bildschirme als Desktop-Computer.

Aus diesem Grund sollten Sie ein separates Menü erstellen, das auf mobilen Geräten angezeigt wird. Zum Beispiel könnten Sie ein vertikales Layout verwenden, damit mobile Nutzer nicht seitwärts scrollen müssen. Möglicherweise sollten Sie auch weniger Links auf Smartphones und Tablets anzeigen.

Um ein mobilfähiges Menü zu erstellen, entwerfen Sie das Menü einfach nach dem oben beschriebenen Verfahren. Wählen Sie dann die Registerkarte „Erweitert“ und klicken Sie, um den Abschnitt „Gerätesichtbarkeit“ zu erweitern.

Sie können jetzt den Slider „Auf dem Desktop ausblenden“ einschalten.

Jetzt zeigt SeedProd dieses Menü nur noch für mobile Benutzer an.

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

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

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

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

Wenn Sie kein Plugin für den Page-Builder einrichten möchten, können Sie ein individuelles Navigationsmenü mit Code hinzufügen. Oft finden Sie Anleitungen, wie Sie individuelle Codeschnipsel in die Datei functions.php Ihres Themes einfügen können.

Wir raten jedoch von dieser Methode ab, da schon ein kleiner Fehler in Ihrem Code zu einer Reihe von WordPress-Fehlern führen oder Ihre Website sogar komplett zerstören kann. Außerdem geht der individuell angepasste Code verloren, 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 die WordPress-Kerndateien bearbeiten zu müssen.

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.

Gehen Sie nach der Aktivierung in Ihrem WordPress-Dashboard zu Code Snippets „ Snippet hinzufügen.

Hier sehen Sie alle vorgefertigten Snippets, die Sie Ihrer Website hinzufügen können, z. B. ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen können, die WordPress normalerweise nicht unterstützt, Seiten mit Anhängen deaktivieren können und vieles mehr.

Um Ihr eigenes Snippet zu erstellen, fahren Sie mit der Maus über „Eigenen Code hinzufügen“ und klicken Sie dann 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 in Ihrem WordPress-Dashboard zu identifizieren.

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

Fügen Sie dann einfach den folgenden Codeausschnitt 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' );

Dadurch wird ein neuer Menüpunkt mit dem Namen „Mein eigenes Menü“ zu Ihrem Thema hinzugefügt. Wenn Sie einen anderen Namen verwenden möchten, ändern Sie einfach das Codeschnipsel.

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

In diesem Beispiel fügen wir unserem Theme zwei neue Positionen für Menüs hinzu, die „Mein individuelles Menü“ und „Extra Menü“ heißen.

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' );

Blättern Sie anschließend zu den Optionen für „Einfügen“. Wenn diese nicht bereits ausgewählt ist, wählen Sie die Methode „Automatisch einfügen“, damit WPCode das Snippet auf Ihrer gesamten Website einfügt.

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

Scrollen Sie dann zum oberen Rand des Bildschirms und klicken Sie auf den Schalter „Inaktiv“, damit er auf „Aktiv“ wechselt.

Klicken Sie abschließend auf „Speichern“, um das Snippet zu aktivieren.

Danach gehen Sie zu Darstellung “ Menüs und sehen Sie sich den Bereich „Anzeigeort“ an.

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

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

Wenn Sie mit Ihrem Menü zufrieden sind, fügen Sie es im nächsten Schritt zu Ihrem WordPress-Theme hinzu.

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

Die meisten Websites zeigen das Navigationsmenü direkt unter der Kopfzeile. Das bedeutet, dass das Menü eines der ersten Dinge ist, die Besucher sehen, zusammen mit dem Logo oder dem Titel der Website.

Sie können das benutzerdefinierte Navigationsmenü an jeder beliebigen Stelle hinzufügen, indem Sie einen Code in die Vorlagendatei Ihres Themes einfügen.

Gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild “ Editor für Themendateien.

Wählen Sie im Menü auf der rechten Seite das Template aus, in das Sie das Menü einfügen möchten. Wenn Sie zum Beispiel das individuelle Navigationsmenü im Header Ihrer Website anzeigen möchten, wählen Sie normalerweise die Datei header.php.

Wenn Sie Hilfe bei der Suche nach der richtigen Vorlagendatei benötigen, lesen Sie bitte unsere Anleitung, wie Sie die zu bearbeitenden Dateien in Ihrem WordPress-Theme finden.

Nachdem Sie die Datei ausgewählt haben, müssen Sie eine wp_nav_menu-Funktion hinzufügen und den Namen Ihres individuellen Menüs angeben.

Im folgenden Codeschnipsel fügen wir zum Beispiel „Mein individuelles Menü“ zum Header des Themes 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, werden Sie das benutzerdefinierte Menü in Aktion sehen.

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 dem Branding Ihres Unternehmens passt, indem Sie benutzerdefinierten CSS-Code zu Ihrer Website hinzufügen.

Gehen Sie dazu auf Erscheinungsbild “ Anpassen.

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

Es öffnet sich ein kleiner Code-Editor, in den Sie einige CSS-Elemente eingeben können.

Jetzt können Sie Ihr Menü mit der CSS-Klasse gestalten, die Sie Ihrem Template für das Theme hinzugefügt haben. In unserem Beispiel ist dies .custom_menu_class.

Im folgenden Code fügen wir Ränder und Polsterungen hinzu, setzen die Textfarbe auf Schwarz und ordnen die Menüpunkte in einem horizontalen Layout 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.

Es wird nun 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 zu aktivieren.

Weitere Informationen finden Sie in unserem Leitfaden für die Gestaltung von WordPress-Navigationsmenüs.

Experten-Leitfäden: Mehr mit WordPress-Navigationsmenüs erreichen

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:

• Hinzufügen von Bildsymbolen zu Navigationsmenüs in WordPress
• Wie man Menüs in WordPress mit bedingter Logik versieht (Schritt für Schritt)
• Hinzufügen von Menübeschreibungen in Ihren WordPress Themes
• Wie man ein responsives Vollbildmenü in WordPress einfügt
• So fügen Sie ein Mega-Menü auf Ihrer WordPress Website hinzu (Schritt für Schritt)

Wir hoffen, dass dieser Leitfaden Ihnen geholfen hat, ein individuelles Navigationsmenü in WordPress hinzuzufügen. Vielleicht interessieren Sie sich auch für unsere Anleitungen zum Hinzufügen eines Buttons in Ihrem WordPress Header-Menü oder zum Hervorheben eines Menüpunkts in WordPress.

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.