Kategorien
Inhalte bearbeiten Plugins Tipps & Tricks

Akkordeons im Block-Editor

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«:

Block-Auswahl zum Suchwort accordion
Block-Suche zum Stichwort „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:

Akkordeon-Block auswählen
Akkordeon-Block 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:

leerer Akkordeon-Block
Leerer Akkordeon-Block

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

Porträtfoto von Annette Schwindt
Abgerundetes Bild in Vorschaugröße

… 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:

Akkordeon - Einstellungen für das Akkordeon Element (erster Teil): Öffnen, Schließen, Springen
Einstellungsmöglichkeiten für das Öffnen, Schließen und Springen

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:

Akkordeon - Link zum Definieren des Standardverhaltens eines Akkordeons
Link für das Festlegen der Standardeinstellungen

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:

Block-Editor - Sidebar Einstellungen - Erweiterte Einstellungen mit HTML-Anker und CSS-Klassen
Erweiterte Optionen für Anker und CSS-Klassen

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):

Ausschnitt des geschlossenene Mentoring-FAQs von Annette Schwindt
Screenshot der Mentoring-FAQ

Geöffnet sieht es dann so aus wie in der folgenden Abbildung:

Geöffnetes Akkordeon-Element im Mentoring-FAQ von Annette Schwindt
Geöffnetes Akkordeon-Element mit Überschrift, Absatz und Liste

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.

Von Annette Schwindt

Freischaffende Wegbegleiterin in Sachen digitaler Kommunikation und Schreiben. Fachgutachterin von „Einstieg in WordPress“, von Peter Müller "Annabelle" genannt. Mehr auf annetteschwindt.digital.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert