Manchmal ist es übersichtlicher, Texte in Akkordeons zu unterteilen. Das sind ein- und ausklappbare Segmente, für die es im WordPress-Core aber leider keinen eigenen Block gibt, und daher muss man zuerst einen Akkordeon-Block installieren.
Warum sich der Block »Accordion Items« von Phil Buchanan dabei für mich als am besten geeignet erwiesen hat, und was ich damit bisher konkret umgesetzt habe, zeige ich in diesem Beitrag.
Einen passenden Akkordeon-Block finden
Wenn Sie einen Pagebuilder wie Elementor oder eine Block-Sammlung wie Kadence Blocks oder Spectra nutzen, dann haben Sie vielleicht bereits einen Akkordeon-Block. Falls nicht, bietet es sich an, direkt im Block-Editor das Block-Verzeichnis von WordPress nach einem solchen Block zu durchsuchen.
Wer im Block-Verzeichnis aber nach »Akkordeon« sucht, wird keine sinnvollen Ergebnisse bekommen, denn die Suche funktioniert nur mit dem englischen Suchwort »accordion«:
Von den derzeit acht Ergebnissen bei dieser Suche hat mich der zuerst gelistete Block »Accordion Item« von Phil Buchanan am meisten überzeugt, weil er unter anderem Folgendes mitbringt:
- Fügt sich nahtlos ins vorhandene Layout des verwendeten Themes ein
- Ist voll responsiv
- Unterstützt im Beschreibungsteil nicht nur Text, sondern auch andere Blöcke wie z.B. Bilder
- Lässt sich reibungslos ineinander verschachteln
- Unterstützt Anker, kann also in sich verlinkt werden
- Öffnen und Schließen der einzelnen Akkordeon-Elemente lässt sich individuell einstellen, ebenso wie auch das Standardverhalten
- Ist intuitiv und direkt im Editor nutzbar
Die anderen angebotenen Akkordeon-Blöcke können jeweils nur Teile davon.
Der Block Accordion Item ist als Plugin unter dem Namen Accordion Blocks auch im Plugin-Verzeichnis von WordPress zu finden. Dieses Plugin installiert dann den Block Accordion Items, den Sie hier im Beitrag direkt vom Block-Editor aus installiert haben.
»Accordion Items« benutzen
Wenn der neue Block installiert ist, können Sie direkt loslegen. Die Block-Auswahl im Editor funktioniert jetzt auch auf Deutsch, Sie können also durch Eingabe von z. B. /ak den passenden Block namens Akkordeon-Element hinzufügen:
Der zunächst leere Block kann dann mit einer Überschrift (H1 bis H6) als Titel und die dazugehörige Beschreibung mithilfe verschiedener Blöcke befüllt werden:
Das Ergebnis sieht dann so aus wie eine normale Überschrift mit einem Plus-Zeichen rechts daneben. Um das folgende Beispiel hervorzuheben, haben wir es mit einem Gruppe-Block farblich hinterlegt. Zum Ausklappen klicken Sie einfach auf die Überschrift oder das Pluszeichen:
Beispiel für ein einfaches Akkordeon
… und so sehe ich aus, wenn ich ausgeklappt werde. Standardmäßig ist definiert, dass ich geschlossen bin und mich erst durch Anklicken öffne. Mein Aussehen passt sich dem Theme an, in dem ich verwendet werde.
Der Clou dabei ist, dass im Beschreibungsteil nicht nur formatierbarer Text unterstützt wird, sondern dass zum Beispiel auch Bilder eingefügt und mit den wordpresseigenen Optionen bearbeitet werden können:
Beispiel für ein Akkordeon mit Bild
… und dann noch ein bisschen Text dazu, der zum Beispiel in Schriftschnitt und Farbe bearbeitet wurde.
Es können auch weitere Absätze, z.B. mit Hintergrund oder anderer Ausrichtung, verwendet werden,
- oder
- auch
- Listen
Das passende Verhalten einstellen
Je nach Funktion eines Akkordeons gibt es verschiedene Anforderungen, wie es sich hinsichtlich des Ein- und Ausklappens der einzelnen Elemente und des Springens zu den einzelnen Elementen verhalten soll. Dafür bietet Accordion Items mehrere Optionen an:
Beispiel für ein offenes Akkordeon-Element
Ich wurde so eingestellt, dass ich standardmäßig offen bin mich nur schließe, wenn ich manuell angeklickt werde, oder jemand das hier drunter gesetzte zweite Akordeon-Element öffnet.
Beispiel für noch ein Akkordeon-Element
wenn ich geöffnet werde, schließt sich das über mir automatisch.
Die jeweiligen Einstellungen können Sie auch für das gesamte Akkordeon standardmäßig festlegen, statt sie für jedes weitere Element neu definieren zu müssen:
Optional: Anker und CSS-Klassen
Unter Erweitert stehen auch die WordPress-Optionen für das Setzen von HTML-Ankern und die Verwendung eigener CSS-Klassen zur Verfügung:
Anker für Direktsprünge setzen
Mit Ankern können Sie Sprungmarken definieren, über die Sie direkt in ein Akkordeon-Element hinein verlinken können. Dazu wählen Sie einfach ein sprechendes Schlüsselwort für den Anker aus und speichern und schon ist das Element über die URL der Seite oder des Beitrags plus #Ankerwort erreichbar:
https://www.meinedomain.de/meineseite#meinanker
und auf derselben Seite sogar nur über Raute und Ankerwort #meinanker.
So können Sie zu einzelnen Akkordeon-Elementen springen und diese auch untereinander verlinken, wenn sich deren Inhalte aufeinander beziehen. So können Sie zum Beispiel vom folgenden Link aus nach oben zum Akkordeon-Element mit Bild springen.
Für Fortgeschrittene: Eigenes Layout via CSS
Wer CSS beherrscht, um individuelle Veränderungen am vorhandenen Layout eines Themes vorzunehmen, kann dies über eigene CSS-Klassen tun. Diese werden im Bereich Design > Customizer > Zusätzliches CSS notiert und können dann in den Akkordeon-Einstellungen im Bereich Erweitert benutzt werden.
Praktische Beispiele
Ein einfaches Akkordeon mit eigenem CSS habe ich auf meiner Website auf der Mentoring-Seite verwendet (siehe Abbildung):
Geöffnet sieht es dann so aus wie in der folgenden Abbildung:
Verschachtelte Akkordeons
Um einiges komplizierter war die Umsetzung eines Glossars zu einem Roman mit Akkordeons, die im folgenden Beitrag auf annetteschwindt.digital beschrieben wird:
In dem Beispiel hat ein Akkordeon mehrere Ebenen, ist mehrfach in sich verlinkt ist und enthält zum Teil auch Bilder.
Fazit: »Accordion-Items« lässt (fast) keine Wünsche offen
Mit dem in diesem Beitrag gezeigten Akkordeon-Block lässt sich also wie gesehen schon Einiges umsetzen.
Das Einzige, was ich mir noch wünschen würde, wäre eine Option für Bilder statt Text im Bereich der Überschrift. Damit könnte man dann auch nonverbale Akkordeons umsetzen.
In Sachen Zugänglichkeit hat der Entwickler des Blocks aber schon insofern mitgedacht, dass sich sein Akkordeon-Block auch ohne Maus nur mit der Tabtaste bedienen lässt.
3 Antworten auf „Akkordeons im Block-Editor“
[…] ich auf einstieg-in-wp.de, wo ich als Co-Autorin tätig bin, einen Beitrag darüber geschrieben, wie sich mit dem Block „Accordion Items“ ein- und ausklappbare Elemente, sogenannte Akkordeons, …. Neben dem Beispiel der Mentoring-FAQ hier auf der Website wurde auch das Glossar angesprochen, das […]
Liebe Annabelle, das ist es, was ich gesucht habe. Denn Medizinwissen kann einfach erklärt werden. Und wer es genauer wissen will, klickt auf das Accordion.
Mit Deinen Erklärungen hoffe ich, meine Artikel straffen zu können, um niemanden zu langweilen, der´s nicht genauer wissen will. Und um mich so darauf vorzubereiten, die alte http://www.drgroh.de modernisieren zu können.
Vielen Dank!
Hui! Perfekt beschrieben und genau dass was ich suche. Danke!