Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man ein ausklappbares Seitenleistenmenü in WordPress erstellt (Der einfache Weg)

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.

How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)

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.

An example of a collapsible menu.

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

Subscribe to WPBeginner

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.

A collapsible sidebar menu in WordPress.

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.

Creating a menu in the 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“.

Adding pages to your WordPress menu.

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.

Adding posts to the WordPress menu.

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.

The collapsible menu shortcode in the WordPress dashboard.

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.

Configuring the collapsible sidebar menu.

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“.

How to add a widget to the WordPress sidebar.

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.

Example of a working collapsible menu

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.

Configuring the look and feel of your WordPress collapsible sidebar menu.

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“.

Placing the collapsible menu on the WordPress website.

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“.

Configuring your collapsible menu in the WordPress Customizer.

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.

Add WPForms widget block

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

4 KommentareEine Antwort hinterlassen

  1. 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!

  2. 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.

  3. 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.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.