Ein ausklappbares Menü in der Seitenleiste ist eine gute Möglichkeit, den Zugang zu wichtigen Links und Inhalten zu erleichtern und gleichzeitig das Design Ihrer Website sauber und übersichtlich zu halten.
Mit dieser Funktion kann der Benutzer das Menü aus- und einklappen und hat so die Kontrolle über sein Surferlebnis. Es ist perfekt für große Websites, eCommerce-Shops oder jede Website mit einem komplexeren Layout.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein ausklappbares Seitenleistenmenü in WordPress erstellen können.
Was ist ein ausklappbares Seitenleistenmenü? (Und wann man es verwenden sollte)
Die benutzerfreundlichsten Menüs bieten einfachen Zugang zu allen Links, die Besucher benötigen. Dies kann jedoch bei WordPress-Websites mit vielen Seiten oder einem komplexeren Layout schwierig sein.
Denken Sie an ein großes eCommerce-Geschäft mit vielen Kategorien und Unterkategorien, wie z. B. Amazon.
Es wäre keine gute Idee, jede einzelne Produktkategorie in einem Standardmenü anzuzeigen. Die Kunden müssten wahrscheinlich durch das Menü blättern, um die Kategorie zu finden, die sie interessiert.
Hier kommen faltbare Menüs ins Spiel. Diese Menüs ordnen den Inhalt in einem „Eltern-Kind“-Ansatz. Das heißt, wenn der Besucher auf ein übergeordnetes Element in einem ausklappbaren Menü klickt, wird es erweitert, um alle untergeordneten Inhalte dieses übergeordneten Elements anzuzeigen.
Ein Beispiel hierfür ist das Nachrichtenmagazin Guardian, das für seine mobile Website ein ausklappbares Menü verwendet.
Zusammenklappbare Seitenleistenmenüs werden manchmal auch als erweiterbare Menüs bezeichnet. Das liegt daran, dass sich die verschiedenen Abschnitte erweitern, wenn ein Besucher darauf klickt.
Standardmäßig verbergen ausklappbare Menüs einen Großteil des Inhalts und der Komplexität vor den Besuchern. Dies ist viel benutzerfreundlicher als das Scrollen durch eine lange Liste von Kategorien und Unterkategorien in Ihrem WordPress-Blog.
Sehen wir uns also an, wie Sie auf Ihrer WordPress-Website ganz einfach ein ausklappbares Seitenleistenmenü erstellen können.
Video-Anleitung
Wenn Sie eine schriftliche Anleitung bevorzugen, dann lesen Sie einfach weiter.
Wie man ein ausklappbares Seitenleistenmenü in WordPress erstellt
Mit dem Plugin Bellows Accordion Menu können Sie in WordPress ein ausklappbares Menü für die Seitenleiste erstellen.
Bellows Accordion Menu bietet einen praktischen Shortcode, mit dem Sie Ihr ausklappbares Menü auf jeder Seite, jedem Beitrag oder Widget-Bereich platzieren können, einschließlich Ihrer Seitenleiste.
Zuerst müssen Sie das Bellows Accordion Menu Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung für Anfänger zur Installation eines WordPress Plugins.
Haftungsausschluss: Bitte beachten Sie, dass das Plugin nicht mit den letzten drei Versionen von WordPress aktualisiert wurde. Wir haben es jedoch auf unserer Website in Echtzeit getestet und es funktioniert einwandfrei. Weitere Informationen finden Sie in unserem Leitfaden über die Verwendung veralteter WordPress Plugins.
Besuchen Sie nach der Aktivierung die Seite Erscheinungsbild “ Menüs in Ihrem WordPress-Dashboard.
Geben Sie zunächst einen Namen für Ihr Menü in das Feld „Menüname“ ein. Beachten Sie, dass Ihre Website-Besucher diesen Namen nicht sehen werden, da er nur für Sie selbst bestimmt ist.
Sie können dann auf die Schaltfläche „Menü erstellen“ klicken.
Wählen Sie dann die Seiten aus, die Sie dem ausklappbaren Seitenleistenmenü hinzufügen möchten. Standardmäßig zeigt WordPress nur Ihre neuesten Seiten an.
Wenn Sie eine Liste aller Seiten Ihrer Website sehen möchten, klicken Sie auf die Registerkarte „Alle anzeigen“.
Alternativ können Sie auch auf „Alle auswählen“ klicken. Dadurch werden alle Ihre Seiten dem ausklappbaren Menü hinzugefügt.
Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie auf den Button „Zum Menü hinzufügen“. Sie können auch Beiträge und Blog-Kategorien auswählen oder individuelle Links hinzufügen. Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen eines Navigationsmenüs in WordPress.
Nachdem Sie alle Ihre verschiedenen Webseiten zum Menü hinzugefügt haben, können Sie sie durch Ziehen und Ablegen verschieben. Dadurch ändert sich die Reihenfolge, in der die Seiten in Ihrem ausklappbaren Menü erscheinen.
Bei ausklappbaren Menüs geht es vor allem um Eltern-Kind-Beziehungen.
Wenn ein Besucher auf ein übergeordnetes Element in Ihrem zusammenklappbaren Menü klickt, wird es erweitert, um alle untergeordneten Inhalte anzuzeigen.
Um diese Beziehung herzustellen, ordnen Sie einfach per Drag & Drop alle untergeordneten Seiten unter der übergeordneten Seite an.
Greifen Sie dann jedes Kind und ziehen Sie es ein wenig nach rechts. Sie können diese Seite dann loslassen. Dadurch wird das Element eingerückt und in eine untergeordnete Seite umgewandelt.
Vergessen Sie nicht, auf den Button „Menü speichern“ zu klicken, wenn Sie fertig sind.
Nun wollen wir dieses ausklappbare Menü in die WordPress-Seitenleiste einfügen. Dazu werden wir einige Shortcodes verwenden, die Bellows Accordion automatisch erstellt.
Um den Shortcode zu erhalten, gehen Sie im WordPress-Dashboard auf die Seite Design “ Balkenmenü. Wenn es nicht bereits ausgewählt ist, dann stellen Sie sicher, dass Sie den Tab „Alle anzeigen“ auswählen.
Klicken Sie nun auf das Feld Shortcode, wodurch der gesamte Code hervorgehoben werden sollte. Kopieren Sie nun diesen Code entweder mit der Tastenkombination Befehl + c oder Strg + c.
Der nächste Schritt ist das Einfügen dieses Shortcodes in ein Widget. Gehen Sie dazu im Admin-Bereich auf die Seite Erscheinungsbild “ Widgets.
Dadurch werden alle Widgetbereiche in Ihrem aktuellen Theme angezeigt. Die Optionen, die Sie sehen, können variieren, aber die meisten modernen WordPress-Themes verfügen über eine Seitenleiste.
Sobald Sie den Bereich der Seitenleiste gefunden haben, klicken Sie darauf. Dieser Bereich wird nun erweitert.
Um einen Block hinzuzufügen, klicken Sie auf das +-Symbol und beginnen Sie mit der Eingabe von „Shortcode“. Wenn er erscheint, wählen Sie den Block „Shortcode“.
Fügen Sie nun einfach Ihren Shortcode für das ausklappbare Menü in diesen Block ein. Um Ihr Menü zu veröffentlichen, müssen Sie auf die Schaltfläche „Aktualisieren“ oben auf Ihrem Bildschirm klicken.
Wenn Sie nun Ihre Website besuchen, sollten Sie ein neues ausklappbares Seitenleistenmenü sehen.
Mit dem Bellows Accordion Plugin können Sie dieses Standardmenü auch ganz einfach anpassen. Zum Beispiel können Sie das Farbschema ändern, um das Branding Ihrer Website besser widerzuspiegeln.
Wenn Sie das Standardmenü ändern möchten, gehen Sie einfach auf die Seite Erscheinungsbild „ Balgenmenü in Ihrem WordPress-Dashboard.
Dieses Menü enthält alle Einstellungen, die Sie benötigen, um Ihr ausklappbares Menü individuell zu gestalten. Es gibt eine Vielzahl von Einstellungen zu entdecken. Beginnen Sie jedoch am besten mit Hauptkonfiguration “ Grundkonfiguration.
Hier können Sie zwischen mehreren verschiedenen Menüfarben wählen. Sie können auch wählen, ob Besucher mehrere Untermenüs auf einmal aufklappen können, indem Sie die Einstellungen für die „Akkordeon-Faltung“ verwenden.
Um die Ausrichtung und Breite des Menüs zu ändern, klicken Sie auf die Registerkarte „Layout & Position“.
Wenn Sie Ihre Änderungen lieber in Echtzeit sehen möchten, können Sie das ausklappbare Menü der Seitenleiste im WordPress Customizer bearbeiten.
Gehen Sie dazu im Verwaltungsbereich auf die Seite Erscheinungsbild “ Anpassen und wählen Sie in der linken Spalte die Registerkarte Faltenbalg“.
Hier finden Sie viele verschiedene Einstellungen für Ihre Seitenleiste. Dazu gehören die Änderung der Breite, der Ausrichtung und der Farbe des ausklappbaren Seitenleistenmenüs.
Bonus: WordPress Sidebar Tricks, um maximale Ergebnisse zu erzielen
Sobald Sie ein ausklappbares Seitenleistenmenü erstellt haben, können Sie einige weitere Tipps anwenden, um mit Hilfe Ihrer Seitenleiste mehr Leads zu generieren.
Sie können zum Beispiel Ihr Seitenleisten-Widget „klebrig“ machen, so dass es auf der Seite sichtbar bleibt, auch wenn der Benutzer nach unten scrollt.
Außerdem können Sie ein Kontaktformular oder ein E-Mail-Anmeldeformular in Ihrer Seitenleiste einfügen, um Ihre E-Mail-Liste aufzubauen. Hierfür können Sie WPForms verwenden, das beste Kontaktformular-Plugin auf dem Markt.
Sie müssen lediglich ein Formular erstellen und es dann mit Hilfe des WPForms-Blocks im Blockmenü zu Ihrer Seitenleiste hinzufügen.
Weitere Details finden Sie in unserem Tutorial zur Erstellung eines Kontaktformulars in WordPress.
Außerdem können Sie Ihre beliebtesten Beiträge in der Seitenleiste anzeigen, Bilder hinzufügen, Symbole für soziale Medien einblenden und Social Proof anzeigen. Dies wird die Nutzer dazu ermutigen, Ihre Website genauer zu erkunden und Ihre Konversionen zu steigern.
Weitere Tipps finden Sie in unserer Liste der besten WordPress-Sidebar-Tricks, um maximale Ergebnisse zu erzielen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man ein ausklappbares Seitenleisten-Menü in WordPress erstellt. Weitere Tipps zum Bearbeiten des Designs Ihrer WordPress Website finden Sie auch in unseren Anleitungen zum individuellen Anpassen des WordPress Headers und den nützlichsten WordPress Widgets für Ihre Website.
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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk
For websites that have many categories, this is the perfect option to make the sidebar clear. I now have about 15 categories on the site and am thinking about something similar to the accordion as well. Thanks for the inspiration.
Tamie
Thank you for this. How can you adjust the spacing between the subcategories? I have a lot of categories and having what looks like a double line space in between make the menus very long.
WPBeginner Support
It would depend on your specific theme for the settings required. You would want to start by checking with the support for your specific theme. Otherwise, you could use Inspect Element to find what needs to be modified. We have a guide below that shows how to use Inspect Element to help with this:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin