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 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.
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)
- Methode 2: Verwendung eines Page Builder Plugins (funktioniert mit allen Themes)
- Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)
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.
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 auf den Block 'Navigation', um ihn auszuwählen. Klicken Sie im rechten Menü auf das Symbol mit den drei Punkten 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, 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 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.
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“.
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.
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.
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“.
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, 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.
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 'nofollow'-Link, der sich in einem neuen Fenster öffnet. Weitere Informationen zu diesem Thema finden Sie in unserer Anfängeranleitung für Nofollow-Links.
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 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.
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.
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.
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ö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.
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'.
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ö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.
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.
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.
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 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:
- 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 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.
Imran
Ich habe eine benutzerdefinierte Kopfzeile für WordPress erstellt, bei der Menüpunkte fest codiert waren. Wie kann ich stattdessen das WordPress-Menü in der Kopfzeile anstelle des fest codierten Menüs verwenden?
cheryl
Ich bin ziemlich neu bei WordPress, möchte aber ein benutzerdefiniertes Menü bearbeiten, das wir erstellt haben, da etwas im Menü falsch zu sein scheint.
Wie mache ich das?
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
Hilfreicher Artikel. Ich bin ein WordPress-Benutzer und diese Tipps werden mir helfen, benutzerdefinierte Navigationsmenüs hinzuzufügen. Danke fürs Teilen.
Daniel Keith
Hallo,
Tolles Tutorial. Wie kann ich CSS auf dieses benutzerdefinierte Menü anwenden?
Obwohl dies eine großartige Möglichkeit ist, mehrere Menüs hinzuzufügen, sieht die Website ohne richtiges CSS seltsam aus.
Zaheer Abbas
Ich erstelle mein WordPress-Theme, aber das Menü und das Widget werden im Admin-Panel nicht angezeigt ???
Sind das integrierte Funktionen in WordPress oder muss ich Menüs und Widgets mit Code erstellen? Bitte leiten Sie mich an.
Tabitha
Wie kann ich mein Dropdown-Menü in Spalten aufteilen? Mein aktuelles Dropdown ist zu lang.
Aakash Salunke
Ich bin ein fortgeschrittener Benutzer. Mein Theme unterstützt nur ein Menü. Aber ich möchte ein weiteres Menü hinzufügen. Ich habe es gemacht, aber wie kann ich es hinzufügen?
WPBeginner Support
Zuerst müssen Sie den Menüstandort registrieren, dann müssen Sie Ihre Theme-Dateien bearbeiten, um Ihr Navigationsmenü anzuzeigen.
Admin
bobit
es hat funktioniert, danke für den tollen Beitrag
Aijaz Ansari
Super, Tutorial, es hilft wirklich einem Anfänger wie mir.
Danke
Victoria
Danke für den Artikel!!! Ich habe meine neue Speisekarte erstellt.
Ich habe aber ein Problem.
Meine Website hat eine feste Breite, und wenn ich das Fenster vergrößere oder verkleinere, bleibt alles an seinem Platz, außer der neuen Speisekarte. Min-width ist keine Option, da es nicht genau das Verhalten ist, das ich möchte.
Wie kann ich es dazu bringen, sich genauso zu verhalten wie der Rest des Seiteninhalts?
Danke!
Joey
DANKE! Ich habe lange danach gesucht und nie gedacht, dass es so einfach ist.
Cory
Ich habe ein verrücktes altes Theme, das WP 3.0+ Menüs nicht unterstützt hat. Dieses Tutorial war so einfach. Es hat mich 3 Minuten gekostet, es ein wenig auf den neuesten Stand zu bringen. Vielen Dank.
Jacques Goudreau
Danke für den Tipp! Tolles Tutorial!
Emma
Wo kann ich diese Änderungen überhaupt vornehmen? Ich sehe keine dieser Optionen unter den Tabs "Theme" oder "Theme Options".
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Redaktion
Die meisten Themes unterstützen dies. Schauen Sie unter Design > Menüs. Dieser Artikel richtet sich an Theme-Designer, die diese Funktion in ihren Themes hinzufügen möchten, damit Benutzer Menüs über das Backend hinzufügen können.
Admin
Zoe
Ich habe versucht, einer einzelnen benutzerdefinierten URL eine benutzerdefinierte Klasse hinzuzufügen (um die Farbe nur einer URL zu ändern) im Abschnitt „Top Nav Menus“, aber es fügt meine Klasse nur als Erweiterung der vorhandenen Klasse im Quellcode des Ausgabecodes hinzu und es passiert nichts.
Hier ist mein CSS-Code und der Quellcode, der auf meiner Website ausgegeben wird:
.myCustomClass { color: #FFFF00; }
Ein einmaliger farbiger Link
Irgendwelche Vorschläge, wie ich das zum Laufen bringe?
Redaktion
Ja, fügen Sie es wie color: #ffff00 !important; in diese Klasse ein. Das sollte den Trick machen.
Admin
Jeremy Johnson
Ich konnte diese Modifikationen implementieren und das benutzerdefinierte Menü funktioniert. Allerdings scheint die CSS-Datei meines gewählten Themes keine Untermenüs zu unterstützen. Das Untermenüelement ist immer sichtbar, das Überfahren des übergeordneten Elements mit der Maus hat keine Auswirkung, und das übergeordnete Menüelement ist so breit wie das breitere untergeordnete Element, was die anderen Menüelemente weiter nach rechts schiebt, als sie sollten. Haben Sie Vorschläge, wie das Untermenü dynamisch agieren kann? Ich bin ziemlich neu in CSS.
Redaktion
Der beste Ausgangspunkt wäre, das Standard-Theme Twenty Eleven zu verwenden. Verwenden Sie die Navigations-CSS von dort und beginnen Sie mit der Modifikation.
Admin
Cedric
Suche immer noch nach einer Lösung dafür.
shaunling
Das ist ja super!
digitfox
Ja! Das ist ein schönes Tutorial für mich! Ich bin ganz neu bei WP! Danke
PauloNeves
Ich brauche Hilfe.
Folge allen Schritten, aber im Bedienfeld "Darstellung" ist das Optionsmenü nicht aktiviert.
Wenn ich ein anderes Thema auswähle, funktioniert es.
Wie aktiviere ich das Optionsmenü?
Danke.
Paulo Neves
wpbeginner
@PauloNeves Sie müssen diese Zeile in die functions.php-Datei Ihres Themes einfügen: add_theme_support( ‘menus’ );
Brad
Danke dafür! Hat bei mir super funktioniert und meinem Kunden sehr geholfen! – aptdesign
eeebasic
Das ist sehr hilfreich für mich, obwohl die WordPress 3.3-Version vor ein paar Tagen veröffentlicht wurde.
citydan
Ich habe die Anweisungen und diesen Beitrag sowie den Beitrag hier (https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/) befolgt und herausgefunden, wie ich mein CSS so einrichten kann, dass das Menü korrekt angezeigt wird, aber die Kindelemente (Untermenüelemente) werden nicht angezeigt. Ich habe sie im Menü-Editor korrekt eingerichtet, aber auf der Website werden sie nicht angezeigt. Sie sind nicht durch CSS versteckt, da sie im Quellcode der Seite nicht vorhanden sind.
Haben Sie Ideen, warum meine Untermenüpunkte nicht angezeigt werden?
GourabMalla
Hallo,
Ich habe das benutzerdefinierte Menü in der oberen Navigation hinzugefügt, möchte aber wissen, wie ich die "Current Page Class" aktivieren kann.
Ich benutze WordPress 3.2
Danke
Gourab
DanFlynnDesign
Danke! Ich liebe es, wie das alles dynamisch ist, sodass der Kunde es bei Bedarf bearbeiten kann, plus die Möglichkeit, anzugeben, welche Seite die aktuelle ist und einen Hover-Effekt anzuwenden! GENAU das, wonach ich gesucht habe!
asharperrazor
Ich habe das schon oft versucht. Ich habe ein altes WordPress-Theme. So alt, dass ich nicht einmal sicher bin, für welche WordPress-Version es geschrieben wurde. Jedenfalls kann ich den Funktions-Teil zum Laufen bringen. Ich kann das richtige Menü speichern. Ich kann den Code in andere Teile meiner Website einfügen, z. B. in den Footer, obwohl er als hierarchische Liste und nicht horizontal angezeigt wird.
Wird nicht im oberen Navigationsmenü angezeigt. Benötige ich ein neues Theme oder ist es möglich, mein aktuelles Theme zu bearbeiten, um die neue Menüfunktion zu ermöglichen?
Danke im Voraus. Die Website ist http://www.asharperrazor.com
JamesGeorge
Ich habe das OHNE Probleme implementiert – vielen Dank! Ich habe den „Navigationsmenü“-Code genommen und ihn in das Div eingefügt, wo das Theme meines Kunden die Liste der Seiten aufrief. Ich habe ihn im Grunde durch Ihren obigen Code ersetzt und hochgeladen, und das CSS hat ihn im gleichen Stil gehalten. Es sieht großartig aus und funktioniert perfekt. FANTASTISCH!
ÁlvaroBenavides
Ich brauche wirklich Hilfe bei der Implementierung des CSS der Klassen, also benachrichtigen Sie mich bitte, wenn Sie fertig sind!
Bec
Toller Beitrag – danke!
Ich habe es wie oben implementiert und meine Menüpunkte werden auf der Website angezeigt, das einzige Problem ist, dass jede Seite leer ist?!
Irgendwelche Ideen?
Redaktion
Klingt nach einem PHP-Fehler. Bitte validieren Sie Ihr PHP, um sicherzustellen, dass kein Fehler vorliegt.
Admin
Joseph McCullough
Schnell und dreckig – so mag ich meine Code-Schnipsel. Vielen Dank.
Paul
Ich habe schon ein paar Mal benutzerdefinierte Navigationsmenüs erstellt. Was seltsam ist, ist, dass sie nach dem Erstellen und Speichern eine Weile angezeigt werden und dann die Navigationsleiste zu nur 2 Tabs zurückkehrt, als ob die Einstellungen automatisch überschrieben würden. Auf Websites mit demselben Template, auf denen ich nie eine benutzerdefinierte Leiste erstellt habe, werden sie korrekt angezeigt.
Irgendwelche Ideen?
Redaktion
Nein, keine Ahnung, warum es das tut.
Admin
Narendra Choudhary
Sie können benutzerdefinierte Klassen für jede Navigation definieren und dann ein Bild im Hintergrund hinzufügen. Sie können sogar die CSS-Eigenschaft (text-indent) verwenden, um den Menütext zu entfernen, wenn Sie möchten.
Antworten
Ram
Ich habe eine Frage zum Navigationsmenü,
gibt es eine Möglichkeit, das Bild zur Liste der Navigationsmenüs hinzuzufügen?..
Danke,
Ram
Redaktion
Sie können jeder Navigation benutzerdefinierte Klassen zuweisen und dann ein Bild im Hintergrund hinzufügen. Sie können sogar die CSS-Eigenschaft (text-indent) verwenden, um den Menütext zu entfernen, wenn Sie möchten.
Admin
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Danke,
Ram
Redaktion
Ja, es ist möglich, verschiedene Bilder mit dem benutzerdefinierten Menü hinzuzufügen. Das, das Sie verwenden, ist nicht das Menü, über das wir in diesem Artikel sprechen.
Julie @ Inspired to Write
Können Sie Code hinzufügen, um es ansprechender zu gestalten (Schriftarten, Schaltflächen, Größe usw.)? Wenn ja, können Sie mir ein Beispiel geben und wo ich diesen Code einfügen soll? Danke!
Redaktion
Das ist eine CSS-bezogene Frage. Sie müssen die Schriftgröße in den entsprechenden Klassen in der CSS-Datei hinzufügen. Wir werden bald einen Artikel über CSS-Stile veröffentlichen.
Admin
Chris
Frage zur Menüverwaltung.
Ich habe ein Menü, das rechtsbündig ist, sodass die Menüpunkte in umgekehrter Reihenfolge angezeigt werden.
Gibt es eine Möglichkeit, die menu_order umgekehrt zu sortieren?
also: sort_column’ => ‘menu_order’ würde etwas hinzugefügt bekommen, um die Reihenfolge umzukehren.
Danke!
Redaktion
Nur weil sie rechtsbündig sind, sollte das nicht bedeuten, dass sie in umgekehrter Reihenfolge erscheinen. Um das zu beheben, müssen Sie Ihr CSS ändern, anstatt den Hook umzukehren. Erstellen Sie einen Container-Div, der rechtsbündig ausgerichtet ist, und lassen Sie dann die Listen-Tags nach links schweben.
Admin
Julie
Habe die Anweisungen befolgt, aber nachdem ich Menüs erstellt und die entsprechenden Kategorien zum Verwenden hinzugefügt habe, sehe ich sie nicht in meiner Navigationsleiste – irgendwelche Ideen, was ich falsch gemacht habe?
Redaktion
Haben Sie die Codes in Ihre header.php oder dort, wo das Menü erscheinen soll, eingefügt?
Admin
dan
Sie müssen dies auch zu Ihrer functions.php-Datei hinzufügen, um die Menüs verwenden zu können
register_nav_menus( array( 'primary' => __( 'Hauptnavigation', 'twentyten' ), ) );
Redaktion
Sicherlich etwas, das man bei der Veröffentlichung kostenloser Themes haben sollte, aber bei benutzerdefinierten Themes hängt alles davon ab, was man braucht. Manchmal muss man keine Standorte registrieren.
Admin
ähhh
Ich folge überhaupt nicht... könnten Sie klarer sagen, wo ich diesen Code (add_theme_support( ‘menus’ );) in die functions.php-Datei einfügen würde?
ich bin völlig verloren
Redaktion
Irgendwo innerhalb der PHP-Tags. Wenn Sie keine PHP-Erfahrung haben, empfehlen wir Ihnen, einen Fachmann zu beauftragen.
Admin
BanyanTree
Wenn Sie Artikel für Anfänger schreiben, sollten Sie auch einfache Fragen beantworten. Ansonsten zahlen Sie einfach für Werbung, um Ihr Geschäft voranzutreiben und die Vorwand zu beenden.
wpbeginner
@BanyanTree Das Hinzufügen von Codes zur functions.php-Datei ist nicht so schwer. Sie fügen ihn innerhalb der PHP-Tags ein. Wir haben Artikel wie diesen geschrieben: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ Aber es ist einfach unmöglich, von all unseren Artikeln auf diesen einen Artikel zu verlinken. Wenn Sie jemanden fragen, wie er den Hintergrund in CSS ändert, und Sie ihm sagen, dass er background: #000 oder einen anderen Hexcode in die CSS-Eigenschaft einfügt, ist das hilfreich genug. Wenn er dann fragt, wo in der CSS-Datei er das einfügt, dann ist das etwas, das Sie im Voraus wissen müssen. Diese Seite ist keine PHP für Dummies-Seite oder CSS für Dummies-Seite. Wir tun unser Bestes, um so vielen Menschen wie möglich KOSTENLOS zu helfen.
BanyanTree
@wpbeginner@BanyanTree Sie müssen keine Artikel verlinken, niemand hat danach gefragt. Drei Worte beantworten seine Frage; „am Ende“, was einfacher zu tippen ist als eine bissige Bemerkung. Denken Sie daran, Sie haben Ihre Website benannt; „wpbeginner“, und wenn das das Publikum ist, das Sie suchen, bedienen Sie es entsprechend.
wpbeginner
@f1mktsol Ja, und die Seite ist über das anfängliche Publikum hinausgewachsen, mit dem wir begonnen haben. Diese Seite hat sich weiterentwickelt. Deshalb haben wir Kategorien… Das Wort „Anfänger“ wird relativ verwendet.
Wir haben Artikel für absolute Anfänger, die gerade erst Benutzer in unserer Kategorie Anfängerleitfaden sind… Wir haben auch Artikel in unserer Kategorie WordPress-Plugins, die auf dieses Publikum zugeschnitten sind. Wenn Sie sich in unserer Kategorie WP-Themes befinden, sind die Artikel für angehende Theme-Entwickler geschrieben. Sie sind Anfänger im Entwicklerbereich. Dasselbe gilt für die Tutorials.
Ich hoffe, das erklärt es.
f1mktsol
@wpbeginner Wenn Sie Ihren Namen hinter sich gelassen haben, sollten Sie ihn ändern, um dem Publikum zu entsprechen, das Sie bevorzugen. Ziehen Sie in Erwägung, einen Fachmann zu konsultieren.
Skubeedoo
Ich habe add_theme_support( ‘menus’ ); hinzugefügt
und keine Option im Admin-Panel gesehen [wo soll ich suchen?] Ich benutze das Intrepidity-Theme. Ich bin ein Noob, also ist es vielleicht direkt vor mir und ich weiß den Unterschied nicht. Ich habe eine Website, die ein WP darin hat, und möchte aus WP heraus und zurück zu meiner Haupt-URL navigieren können. Alles, was ich brauche, ist ein „Home“-Navigationslink.
Danke im Voraus.
Redaktion
Es sollte unter dem Reiter "Design" angezeigt werden.
Admin
ianarosh
Freund, du hast eine tolle Seite und ich bin froh, dass ich sie gefunden habe!
Ich habe mir den Kopf zerbrochen, wie ich das benutzerdefinierte Menü hinzufüge, und es war einfach, nachdem ich das gesehen hatte! Einfach unglaublich.
Eine Anregung, die man sich jemals überlegt hat, wenn man Beiträge über Blog-/Server-Sicherheit erstellt? (nicht sicher, ob Sie bereits mehr recherchieren mussten :O)
Beste Grüße und weiter so, Kumpel!
Redaktion
Mach eine Suche, wir haben bereits einen Beitrag dazu.
Admin
Charles
Kann mir jemand sagen, wie ich die Unterstützung für mehrere Menüs in der functions.php-Datei hinzufüge. Ich möchte zwei Menüsets einfügen.
Redaktion
Sie brauchen keine zwei Sätze von functions.php… Rufen Sie einfach die Hauptfunktion auf. Erstellen Sie mehrere Menüs über die Benutzeroberfläche in wp-admin. Dann müssten Sie die Menüs im PHP-Code aufrufen.
Admin
Jamie
Nur damit Sie es wissen, aber Folgendes:
“add_theme_support( ‘nav-menus’ );”
Wurde in der endgültigen Version geändert zu:
“add_theme_support( ‘menus’ );”
Thanks!
Peter Luit
@Jamie: Danke für diese letzte Bemerkung!
Redaktion
Thanks Jamie, Post fixed
Admin
Jacob
Großartig. Genau das, wonach ich gesucht habe. Wie füge ich den Menü-Slug zur Funktion hinzu?
Redaktion
‘Menü’ => ‘Projektnavigation’ so <<
Admin
Chris Creed
Danke dafür – ich spiele gerade mit dem neuen Menüsystem herum – es ist eine großartige Zusatzfunktion, die die Dinge so viel einfacher machen wird. Ich entwickle Themes und erhalte ziemlich viele Supportanfragen von Leuten, die benutzerdefinierte Navigationsbereiche auf ihrer Website erstellen möchten – die neuen Menüs sollten hoffentlich helfen, die Dinge erheblich zu vereinfachen (insbesondere für Leute mit wenig WordPress-Erfahrung).
Gopal Bhattacharjee
Ich teste auch WordPress 3.0 Beta, jetzt kann ich mit Menüs herumspielen… Danke!
Angie
Ich frage mich, wie ich HOME aus meinem Navigationsmenü mit WP 3.0 Beta entfernen kann. Soll ich die Funktion wp_nav_menu bearbeiten oder gibt es einen anderen Weg?
Wenn ich die Funktion bearbeite, können Sie dann Anweisungen geben?
Redaktion
Sie können einfach auf Entfernen klicken… genau wie jeder andere Navigationslink.
Admin
Kevin
Es ist schade, dass es keine Möglichkeit gibt, die „Startseite“ innerhalb des Menü-Builders zum Menü hinzuzufügen. Das ist ein großer Mangel.
Redaktion
Warum nicht? Sie können einen benutzerdefinierten Navigationslink namens Home erstellen und Ihre Homepage-URL hinzufügen.
Admin
Noor
Ich teste auch WordPress 3.0 Beta und habe ein paar schlechte Dinge bei den Menüs gefunden… z.B. ist es inkonsistent und ich hoffe, dass es bis zur endgültigen Veröffentlichung konsistent wird.
michelle
schönes Tutorial! Danke fürs Teilen!
Mani Viswanathan
Gute Tutorials zuerst! Wird nützlich sein, wenn ich auf 3.0 aktualisiere