Wie erstelle man ein WordPress Dropdown-Menü erstellen kann (5 Methoden)
Dieses Tutorial behandelt die folgenden Themen:
Die WordPress Dropdown-Menü-Funktionalität führt Ihre Besucher durch Ihre Website. Es ist die Roadmap, die sie davor bewahrt, sich zu verirren, und sicherstellt, dass sie problemlos finden, was sie brauchen. Eine sorgfältig organisierte Website-Navigationsstruktur kann Ihre Besucher auf Ihrer Website länger und engagierter halten.
Aber wie strukturiert man ein Dropdown-Menü, um eine angenehme und produktive Benutzererfahrung zu schaffen?
In diesem Artikel zeigen wir Ihnen 5 Methoden, um ein Dropdown-Menü zu erstellen und skizzieren die besten Praktiken für die Strukturierung. Lesen Sie weiter, um ein Meister der Erstellung von Dropdown-Menüs in WordPress zu werden.
5 Methoden zum Erstellen von Dropdown-Menüs in WordPress
WordPress bietet verschiedene Methoden, um Dropdown-Menüs zu erstellen. Sie reichen von einfachen eingebauten Optionen und Plugins bis hin zu fortgeschritteneren Ansätzen mit benutzerdefiniertem CSS und PHP. Lesen Sie weiter, um mehr über jede dieser Optionen zu erfahren.
1. Verwendung des eingebauten Menü-Editors
WordPress bietet einen eingebauten Menü-Editor, mit dem Sie Dropdown-Menüs ohne zusätzliche Plugins oder Programmierkenntnisse erstellen können.
Befolgen Sie diese Schritte:
- Loggen Sie zunächst in das Backend Ihrer WordPress-Site ein.
- Gehen Sie zu Design > Menüs in Ihrem WordPress-Dashboard.
- Klicken Sie auf die Schaltfläche “Menü erstellen“.
- Geben Sie Ihrem neuen Menü einen Namen .
- Wählen Sie die Position auf Ihrer Website unter Menüeinstellungen. Sie können „Neue Seiten der obersten Ebene automatisch zu diesem Menü hinzufügen“ auswählen, indem Sie das entsprechende Kästchen markieren. Außerdem können Sie die Kästchen zur Verwaltung der Positionen auf Ihrer Website aktivieren, an denen das Menü sichtbar sein soll.
- Gehen Sie zum Abschnitt “Menüelemente hinzufügen” auf der linken Seite des Bildschirms und wählen Sie die Seiten aus, die Sie in Ihr Menü aufnehmen möchten.
- Spezifische Beiträge, Benutzerdefinierte Links, oder Kategorien, indem Sie jeden Abschnitt mit einem Klick auf den Pfeil auf der rechten Seite erweitern.
- Fügen Sie einen benutzerdefinierten Link (Platzhalter für ein Dropdown-Menü) hinzu, indem Sie die URL und den Linktext eingeben (verwenden Sie #, wenn er nicht anklickbar ist) und ihn dann zum Menü hinzufügen.
- Ziehen Sie die Elemente einfach per Drag & Drop auf die rechte Seite des Bildschirms, um ihre Reihenfolge zu ordnen.
- Verwandeln Sie Menüelemente in Untermenüs, indem Sie die Option “Unter” unter einem übergeordneten Element auswählen.
- Klicken Sie auf “Menü speichern“, um Ihre Änderungen zu speichern
Nachdem Sie Ihr neues Menü gespeichert haben, überprüfen Sie Ihre Website, um zu sehen, wie es aussieht. Wie Sie in der Abbildung unten sehen können, ist die Menüleiste Über das übergeordnete Menüelement, mit Projekt und Dienste als Untermenüs.
2. Verwenden des Navigationsblocks im Blockeditor
Der Block-Editor ist eine in WordPress integrierte Funktionalität. Es vereinfacht die Erstellung von Dropdown-Menüs. Mit diesem Werkzeug können Sie Ihre Menüs visuell erstellen und die Änderungen in einer Live-Vorschau sehen.
Hier ist, wie Sie es verwenden können.
- Bearbeiten Sie die Seite oder den Beitrag, wo Sie das Dropdown-Menü einfügen möchten.
- Klicke auf das “+” Symbol, um einen neuen Block hinzuzufügen.
- Suchen und wählen Sie den “Navigation” Block aus der Liste der verfügbaren Blöcke.
- Ziehen Sie den “Navigation”-Block an die gewünschte Stelle in Ihrem Inhalt.
- Ordnen Sie Menüelemente an, indem Sie jedes Menüelement in die gewünschte Reihenfolge ziehen und ablegen, um Ihre Menüstruktur aufzubauen.
- Klicken Sie auf die Schaltfläche “Untermenü hinzufügen” unter einem primären Menüeintrag, um ein neues WordPress Dropdown-Menü innerhalb dieses Menüeintrags zu erstellen.
- Wählen Sie die Seiten oder Links, die Sie in das Dropdown-Menü aufnehmen möchten.
- Passen Sie Farben, Abstände und andere Einstellungen in den Blockoptionen an, um Ihr Menü zu gestalten.
- Klicken Sie auf „Aktualisieren“ > “Speichern“, um Ihre Änderungen zu übernehmen.
3. Benutzerdefinierte CSS-Manipulation
Um ein Dropdown-Menü mit CSS zu erstellen, müssen Sie den Stil und das Verhalten Ihrer Menüelemente und deren Unterelemente definieren. Dies erfordert eine Kombination von Strukturen in Ihrem HTML und Styling mit CSS.
Hier sind die Schritte, die Sie befolgen können:
- Überprüfen Sie die Dokumentation zu Ihrem Thema oder verwenden Sie die Entwicklertools Ihres Browsers, um die HTML-Struktur Ihres Menüs zu überprüfen. Dadurch werden die spezifischen Klassen oder IDs Ihres Themas für Menüeinträge und Untermenüs angezeigt.
- Passen Sie die CSS-Selektoren im Code an, damit sie den spezifischen CSS-Klassen oder IDs Ihres Themes entsprechen.
- Fügen Sie benutzerdefinierten CSS-Code in Ihre style.css ein, um Ihr Menü zu erstellen.
Hier ist ein einfaches Beispiel.
/* Style the parent menu items */
nav ul li {
background-color: #333; /* Main item background color */
color: white; /* Main item text color */
}
/* Initially hide the sub-menu */
nav ul li ul {
display: none;
position: absolute; /* Position the dropdown */
background-color: #444; /* Dropdown background color */
z-index: 100; /* Ensure the dropdown is above other content */
}
/* Reveal the sub-menu on hover over the parent item */
nav ul li:hover > ul {
display: block; /* Show dropdown */
}
/* Style individual dropdown items */
nav ul li ul li {
display: block; /* Dropdown items should be block level */
}- Targeting bestimmte CSS-Klassen oder IDs, um bestimmte Stile anzuwenden. Mit ihnen können Sie Eigenschaften wie Hintergrundfarbe, Farbe, Anzeige, Position, etc. nach Ihren Design-Vorlieben anpassen.
- Testen Sie die Reaktionsfähigkeit, um sicherzustellen, dass das Dropdown auf verschiedenen Bildschirmgrößen gut funktioniert.
4. Verwendung von WordPress Menü Plugins
Eine andere Methode zur Erstellung und Gestaltung von Navigationsmenüs ist die Verwendung von WordPress-Plugins. Mit ein paar Klicks können Sie auf leistungsstarke Funktionen zugreifen, die das Erstellen von Dropdown-Menüs vereinfachen
Hier ist der Prozess in Kürze:
- Installieren Sie ein Menü-Plugin. Aus dem WordPress-Repository können Sie ein Plugin wie ‘Max Mega Menu‘ installieren und aktivieren.
- Gehen Sie zu Design > Menüs und suchen Sie den Abschnitt Max Mega Menü Einstellungen, um Effekte anzuwenden. Dann verwenden Sie die Drag-and-Drop-Schnittstelle, um Ihr Menü zu erstellen.
- Speichern Sie Ihre Änderungen und weisen Sie das Menü dem gewünschten Thema zu.
5. Benutzerdefinierte PHP-Entwicklung
Um ein einfaches WordPress Dropdown-Menü mit PHP-Code zu erstellen, verwenden Sie die wp_nav_menu() Funktion in der header.php Datei, wie unten gezeigt.
- Menüpositionen registrieren. In der Datei functions.php Ihres Themes müssen Sie eine Menüposition mit register_nav_menus() registrieren. Dies sagt WordPress, wo dein Menü im Theme platziert wird.
function mytheme_register_nav_menu() {
register_nav_menus(array(
'primary' => __('Primary Menu', 'theme-slug'),
));
}
add_action('after_setup_theme', 'mytheme_register_nav_menu');- Implementieren Sie die Menü-Schaltfläche. Platzieren Sie die wp_nav_menu() Funktion in der header.php wo das Menü erscheinen soll.
wp_nav_menu(array('theme_location' => 'primary', 'container_class' => 'main-nav'));- Erstellen Sie Ihr Menü in WordPress Admin. Unter Darstellung > Menüs, erstellen Sie Ihr Dropdown-Menü und weisen Sie es dem ‘Primären’ Ort zu, den Sie registriert haben.
- Stil das Menü mit CSS. Fügen Sie Ihren benutzerdefinierten Code zum Stylesheet Ihres Themes hinzu, um das Menü zu gestalten.
- Ausgabe des Menüs auf Ihrer Website: Besuchen Sie Ihre Website, um zu überprüfen, wie WordPress das Hauptmenü in Ihrem registrierten Standort ausgibt.
- Stellen Sie die Dropdown-Funktionalität sicher. Um Dropdown-Menüs zu unterstützen, benötigt Ihr Thema möglicherweise zusätzliches HTML, CSS oder JavaScript.
Strukturierung Ihrer WordPress Dropdown-Menüs
Ein gut strukturiertes Dropdown-Menü kann die Benutzerfreundlichkeit Ihrer Website erheblich verbessern. Das Layout zu beherrschen und sicherzustellen, dass es zugänglich und reaktionsschnell ist, ist der Schlüssel zu einer größeren Benutzerzufriedenheit.
Planung Ihres WordPress Menülayouts
Beginnen Sie damit, Ihr Menü zu gestalten, um die Architektur Ihrer Website widerzuspiegeln. Gruppieren Sie verwandte Elemente unter entsprechenden Überschriften. Außerdem sollten Sie die Tiefe Ihrer Menüs überschaubar halten, damit Benutzer leicht durch Ihre Inhalte navigieren können.
Best Practices für die Menühierarchie
Für eine optimale Menühierarchie, organisieren Sie Ihre Elemente logisch und gruppieren Sie ähnliche Inhalte zusammen. Stellen Sie sicher, dass die wichtigsten Seiten in der Hierarchie vorne sind. Bemühen Sie sich um Einfachheit, indem Sie die Menütiefe auf zwei oder drei Ebenen begrenzen, um Verwirrung der Benutzer zu vermeiden. Verwenden Sie klare, beschreibende Labels für eine einfache Navigation. Am wichtigsten ist, Aufrechterhaltung der Konsistenz auf Ihrer Website, um eine vertraute und benutzerfreundliche Erfahrung zu schaffen.
Zugänglichkeit und responsives Design
Stellen Sie sicher, dass Ihre Dropdown-Menüs für alle Benutzer zugänglich sind, auch für Menschen mit Behinderungen. Darüber hinaus entwerfen Sie Ihre Menüs, um responsive zu sein. Dies stellt sicher, dass sie sowohl auf dem Desktop als auch auf dem Handy reibungslos funktionieren.
Schlussfolgerung
Zusammenfassend lässt sich sagen, dass die Erstellung eines effektiven WordPress Dropdown-Menüs Funktionalität mit benutzerzentriertem Design kombiniert. Egal, ob Sie sich für die Einfachheit des eingebauten Menü-Editors, die dynamischen Fähigkeiten von Plugins oder die individuelle Note von CSS und PHP entscheiden, das Ziel bleibt, ein nahtloses Navigationserlebnis zu bieten.
Indem Sie Ihre Menüs strukturiert, zugänglich und reaktionsschnell halten, können Besucher Ihre Website leicht erkunden. Dies ist ein Gewinn sowohl für die Benutzerzufriedenheit als auch für die SEO-Leistung. Ein gut gestaltetes Menü führt Benutzer durch Ihre Inhalte und spiegelt die Professionalität Ihrer WordPress-Site wider.