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

Möchten Sie benutzerdefinierte Navigationsmenüs in Ihrem WordPress-Theme hinzufügen?

Alle Themes haben feste Positionen, an denen Sie ein Navigationsmenü anzeigen können. Manchmal müssen Sie jedoch ein Menü zu anderen Bereichen Ihrer Website hinzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie ein benutzerdefiniertes Navigationsmenü zu einem beliebigen Bereich Ihres WordPress-Themes hinzufügen können.

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 diese Vorlage 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 und ermöglicht es Ihnen, jeden Teil Ihres Navigationsmenüs individuell zu gestalten.

SeedProd enthält mehr als 300 professionell gestaltete Vorlagen, die Sie als Ausgangspunkt verwenden können. Nachdem Sie eine Vorlage ausgewählt haben, können Sie Ihrer Website ein benutzerdefiniertes Navigationsmenü hinzufügen, indem Sie den vorgefertigten Navigationsmenü-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.

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

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 nun auf den Schieberegler „Auf dem Desktop ausblenden“ klicken, so dass er orange wird.

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, sehen Sie das benutzerdefinierte Navigationsmenü in Aktion.

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

Wenn Sie kein Plugin für den Seitenersteller einrichten möchten, können Sie ein benutzerdefiniertes Navigationsmenü mithilfe von Code hinzufügen. Oft finden Sie Anleitungen zum Hinzufügen benutzerdefinierter Codeschnipsel in der Datei functions.php Ihres Themes.

Wir raten jedoch von dieser Methode ab, da schon ein kleiner Fehler in Ihrem Code zu einer Reihe von WordPress-Fehlern führen oder sogar Ihre Website komplett zerstören kann. 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 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 Thema zwei neue Menüs hinzu, die „Mein eigenes 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 dann zu den Einfügeoptionen. Wenn dies 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 die Vorlage aus, in die Sie das Menü einfügen möchten. Wenn Sie zum Beispiel das benutzerdefinierte Navigationsmenü in der Kopfzeile 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 benutzerdefinierten Menüs angeben.

Im folgenden Codeschnipsel fügen wir zum Beispiel My Custom Menu zur Kopfzeile 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, 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.

Sie können nun Ihr Menü mit der CSS-Klasse gestalten, die Sie Ihrer Themenvorlage 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, um zu zeigen, 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.

Mehr erreichen mit WordPress Navigationsmenüs

Mit WordPress können Sie alle Arten von hilfreichen und ansprechenden Menüs erstellen. Deshalb erfahren Sie hier, wie Sie noch mehr aus Ihren Navigationsmenüs herausholen können:

• Wie man Bildsymbole mit Navigationsmenüs in WordPress hinzufügt
• Wie man Menüs in WordPress mit bedingter Logik versieht
• So fügen Sie Menübeschreibungen in Ihr WordPress-Theme ein
• Hinzufügen eines responsiven Vollbildmenüs in WordPress
• So fügen Sie ein Mega-Menü zu Ihrer WordPress-Website hinzu

Wir hoffen, dass dieser ultimative Leitfaden Ihnen geholfen hat zu lernen, wie man ein benutzerdefiniertes Navigationsmenü in WordPress hinzufügt. Vielleicht interessieren Sie sich auch für die besten Möglichkeiten zur Steigerung der Besucherzahlen in Ihrem Blog und wie Sie die Besucher Ihrer WordPress-Website verfolgen können.

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.