gray harmonium on white surface

Akkordeons im Block-Editor

Veröffentlicht am

|

Aktualisiert am

Manchmal ist es übersichtlicher, Texte in Akkordeons zu unterteilen. Das sind ein- und ausklappbare Segmente, die Text oder auch andere Elemente beinhalten können.  

Leider wird der zuvor hier empfohlene Block Accordion Items von Phil Buchanan nicht mehr zuverlässig upgedatet, weswegen wir diesen Beitrag umgeschrieben haben.

Inhaltsverzeichnis


Der Akkordeon-Block von WordPress heißt »Details«

Seit der Version 6.3 hat WordPress einen eigenen Akkordeon-Block namens Details.

Der Block Details im Block-Inserter
Der Details-Block im Block-Inserter

Ein Akkordeon besteht immer aus der Zusammenfassung, die immer zu sehen ist, und dem Inhalt, den man erst nach dem Ausklappen sieht.

Im Details-Block kann man als Zusammenfassung leider keine Überschriften nutzen, sondern nur normale Absätze:

Leerer Details-Block

Zudem gibt es nur wenig Einstellungen zur Gestaltung des Blocks und die wenigen vorhandenen kann man nur für das gesamte Akkordeon nutzen. Deshalb ist z. B. eine getrennte Gestaltung von Zusammenfassung und Inhalt bisher ausschließlich über zusätzliches CSS möglich.

Immerhin sind im Akkordeon-Inhalt außer Absätzen verschiedene Blockarten möglich, wie Bilder, Listen, oder ein weiterer Details-Block. Hier ein Beispiel (bitte ausklappen):

Das ist ein Beispiel für einen ungestalteten Details-Block

So sieht er aufgeklappt aus. Die Gestaltung erfolgt nur über die standardmäßigen WordPress-Einstellungen. Man kann auch ein Bild oder eine Liste einfügen und das sogar in Spalten:

  • Ein Listenpunkt
  • Noch ein Listenpunkt
  • Wieder ein Listenpunkt
  • und so weiter
  • und so fort

Praktische Beispiele für den Einsatz des Details-Blocks finden Sie weiter unten.

Beispiel Nr. 1: Die Mentoring-FAQ

Ein kostenloses Plugin, das komplett dieselben Funktionen wie Accordion Items bietet, habe ich bisher jedenfalls leider nicht wieder finden können.

Deshalb habe ich zum Beispiel die Mentoring-FAQ auf meiner Website neu durchdenken und umbauen müssen. Sie basiert jetzt auf dem Details-Block von WordPress und sieht so aus:

Mentoring FAQ als Beispiel für den Einsatz des Details-Block
Ausschnitt aus dem Mentoring-FAQ auf anneteschwindt.digital

Dazu gehört dieser Zusatz an individuellem CSS:

Zusätzliches CSS zur Gestaltung des Mentoring FAQ von Annette Schwindt
CSS-Anweisungen für das Mentoring-FAQ

Beispiel Nr. 2: Das WP-Lexikon

Das von Peter erstellte WP-Lexikon basiert ebenfalls auf dem Details-Block von WordPress:

Screenshot der Seite WP-Lexikon auf einstieg-in-wp.de
Das WP-Lexikon basiert auf dem Details-Block

Die Umsetzung des WP-Lexikons, von der Block-Struktur über das CSS zur Gestaltung bis zum JavaScript für das Verhalten, wurde im folgenden Beitrag ausführlich dokumentiert:

Mit ein bisschen zusätzlicher Arbeit ist der Details-Block recht vielseitig einsetzbar.

Andere Akkordeon-Blöcke

Im Folgenden ein kurzer Überblick zu weiteren Akkordeon-Blöcken.

Akkordeons im Block-Verzeichnis

Über die Suche im Block-Inserter links oben im Block-Editor finden sich mit dem englischen Suchwort accordion einige Ergebnisse, bei denen man aber im Backend leider nicht sehen kann, wann sie zuletzt aktualisiert wurden. So ist auch Accordion Item weiter gelistet.

Bei einer Suche nach »accordion« im Block-Verzeichnis auf wordpress.org kann man hingegen auch alle Details der einzelnen Plugins einsehen:

Akkordeons in Blocksammlungen

Die in Kapitel 18 vorgestellten Blocksammlungen wie Kadence Blocks, Spectra oder GenerateBlocks haben allesamt einen eigenen Akkordeon-Block.

Der Accordion-Block von GenerateBlocks bietet wirklich viele Einstellungsmöglichkeiten, die neben dem Aussehen auch das Verhalten betreffen, steht aber leider nur in der Bezahlvariante zur Verfügung:

Die Einstellungsmöglichkeiten für das Accordion aus den GenerateBlocks
Liste der Einstellungsmöglichkeiten

Da die GenerateBlocks insgesamt sehr detaillierte Möglichkeiten zur Gestaltung und zum Layouten von Inhalten bieten (siehe z. B. GenerateBlocks statt Elementor), lohnt es sich für anspruchsvollere WordPress-Nutzer vielleicht schon, die Pro-Version anzuschaffen (kein Affiliate-Link).

Der Block Accordion von den GenerateBlocks im Block-Inserter
Die verschiedenen Blöcke in GenerateBlocks
Avatar von Annette Schwindt

Kommentare

3 Antworten zu „Akkordeons im Block-Editor“

  1. […] 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 […]

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

  3. Hui! Perfekt beschrieben und genau dass was ich suche. Danke!