Ein Glossar mit dem Block-Editor umsetzen

Gerade habe 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, in Beiträgen und Seiten umsetzen lassen. Neben dem Beispiel der Mentoring-FAQ hier auf der Website wurde auch das Glossar angesprochen, das ich für Anna Hellmich auf ihrer WordPress-Website erstellt habe. Darauf möchte ich hier noch einmal genauer eingehen:

Das Ausgangsmaterial

Das eigentliche Glossar zu ihrem Roman „Der Steinkönig“ hat Anna selbst als Textdatei zusammengestellt und mir dann zur Umsetzung in WordPress weitergegeben. Da sie selbst nicht wusste, was technisch machbar ist, hat sie mir das Ganze vertrauensvoll überlassen. Ich habe mir daraufhin Folgendes überlegt:

Die Anforderungen

Natürlich hätte ich es einfach als normalen Text belassen können, aber das hätte bei der Benutzung viel Scroll-Arbeit erfordert. Auch sollte langes Suchen vermieden werden, wenn es darum geht, die passenden Begriffe bei Informationen zu finden, die sich aufeinander beziehen. Zumal das Glossar noch drei Teile hat, so dass auch keine rein alphabetische Ordnung vorausgesetzt werden kann. Zusammengefasst gab es also folgende Anforderungen:

1. Langes Scrollen verhindern
2. Suchen so weit als möglich vermeiden
3. Begriffe mit Bezug zu anderem Begriff klickbar machen

Die Lösungen

Akkordeon statt Scrollen

Um Anforderung 1 zu erfüllen, bediente ich mich des schon genannten Blocks „Accordion Items“ von Phil Buchanan, den ich mir wie im o.g. Artikel beschrieben aus dem Block-Verzeichnis installiert habe.

Dieser verhalf mir nicht nur dazu, die drei einzelnen Teile des Glossars in jeweils einem Akkordeon umzusetzen, sondern auch, diese bei Bedarf in mehreren Ebenen zu gestalten. Der Akkordeon-Block unterstützt nämlich nicht nur eine Überschrift für den jeweiligen Begriff und einen Absatz für die dazugehörige Beschreibung. Im Beschreibungsbereich kann auch ein weiterer Akkordeon-Block eingefügt und die Akkordeons so in sich verschachtelt werden.

Anker setzen und Verlinkungen einfügen

Zu den Anforderungen 2 und 3: Um die einzelnen Begriffe, die ja alle auf derselben Seite stehen, per Link erreichbar zu machen, nutze ich die Anker-Funktion, die WordPress in den Block-Einstellungen (rechte Seitenleiste) standardmäßig über Erweitert anbietet:

Als Ankerwort wählte ich jeweils den zu verlinkenden Begriff, so dass ich nachher nicht erst suchen musste, wie der passende Anker heißt. So ist die Beschreibung des Landes Heran über den Anker #heran unter https://anna-hellmich.de/steinkoenig/glossar/#heran erreichbar.

Solange ich von derselben Seite aus verlinke, brauche ich nicht jedesmal den kompletten Linkpfad eingeben, sondern konnte einfach überall, wo der Begriff „Heran“ fällt, denselben mit #heran verlinken.

Noch ein paar Extras

Alphabetische Direktsprünge

Da nur im Personen-Teil eine komplett alphabetische Ordnung besteht und der auch am längsten ist, habe ich dort als zusätzliche Hilfe einen Absatz mit einem Alphabet eingefügt, dessen Buchstaben (wenn verwendet) mit Ankerwort des ersten passenden Worts dazu verlinkt sind:

Bilder und Listen

Dort, wo das passende Material vorhanden war, konnte ich die Glossar-Einträge zusätzlich zum Text auch auch noch mit Bildern oder Listen ausstatten. Da „Accordion Items“ mit den Standard-WordPress-Blöcken arbeitet, können auch die jeweiligen Block-Einstellungen benutzt werden, wie z.B. die Vorschaubild-Größe in der abgerundeten Ansicht:

Individualisiertes Design

Da sich die Akkordeon-Blöcke standardmäßig dem Layout des verwendeten Themes anpassen, sehen sie ohne weitere Eingriffe ins Layout wie normaler Text aus. Das kann auch zu sehr großen Abständen führen, was nicht so schön aussieht. Außerdem wollte ich die einzelnen Teile auch optisch trennen. Deshalb habe ich das Gesamt-Akkordeon in einer Gruppe zusammengefasst und dafür sowie für die über- und untergeordneten Akkordeons CSS-Klassen vergeben, die ich dann im Customizer unter Zusätzliches CSS passend definiert habe. So kamen die Hintergrundfarbe, die abgerundeten Ecken und verschiedenen Trennlinien zustande.

Listenansicht für Struktur

Zur Erklärung der Struktur hier noch einmal die Listenansichten des Glossars im Detail:

Das gesamte Glossar ist eine Gruppe aus drei übergeordneten Akkordeon-Elementen, je einem pro Glossar-Teil:

Diese drei Akkordeon-Elemente enthalten wiederum untergeordnete Akkordeon-Elemente für die einzelnen Begriffe pro Teil. Hier der Anfang des 1. Teils „Personen“ mit dem Absatz für die alphabetischen Direktsprünge und den folgenden Akkordeon-Unterelementen für die einzelnen Begriffe sowie den Vermerken für die Ankerwörter:

Im zweiten und dritten Teil enthalten diese Unterelemente dann neben Texten und Bildern nochmals untergeordnete Akkordeon-Elemente:

Sobald diese Struktur erst einmal feststand, bestand der größte Teil der Arbeit dann eigentlich nur noch im Befüllen und Verlinken.

Kleiner Wermutstropfen

Wie eigentlich immer bei Akkordeons, auch wenn sie manuell gecodet statt in WordPress als Block verwendet werden bleibt, dass die Sprünge je nach Ausgabegerät mehr oder weniger akkurat ausfallen. Bei „Accordion Items“ kommt außerdem noch ein Problem beim nach oben Springen von aus einem Unterelement in einem weiter unten liegenden übergeordneten Akkordeon-Element zu einem Unterelement in einem darüber liegenden übergeordneten Teil. Aber dieser Anwendungsfall ist doch sehr speziell und wird vermutlich nicht allzu oft vorkommen…