Inhaltsübersichten in WordPress flexibel abfragen und redaktionell gestalten

Dynamische Inhaltsübersichten wählen verschiedene Inhaltstypen aus, sortieren sie und zeigen passende Vorschauen. Zwei aufeinander abgestimmte Gutenberg-Plugins trennen die Auswahl der Inhalte von ihrer redaktionell gepflegten Darstellung.

5 Min. von Matthias Ulrich

Aktuelle Meldungen, Veranstaltungen, Bildungsangebote und Unterseiten folgen jeweils einer auf ihre redaktionelle Aufgabe abgestimmten Inhaltsstruktur. Gemeinsame Übersichten führen diese Inhalte in einer definierten Auswahl, Reihenfolge und Vorschau zusammen.

Für diese Aufgabe haben wir zwei aufeinander abgestimmte Gutenberg-Plugins entwickelt. Der «UD Loop Block» steuert die Abfrage. Der «Content for Loop Block» legt innerhalb eines Inhalts fest, was später als Vorschau erscheint. Diese Trennung verbindet automatische Übersichten mit einer redaktionell gepflegten Darstellung.

Auswahl und Vorschau getrennt steuern

Eine dynamische Übersicht beantwortet zwei unterschiedliche Fragen: Welche Inhalte gehören in die Auswahl? Und welche Informationen zeigt jeder einzelne Treffer? Der Loop-Block übernimmt die erste Frage. Die Inhaltsvorlage beantwortet die zweite.

Dadurch bleibt die Abfragelogik unabhängig vom konkreten Aufbau einer News-Kachel, einer Veranstaltungsanzeige oder eines Bildungsangebots. Gleichzeitig kann die Redaktion die Vorschau mit vertrauten WordPress-Blöcken gestalten. Beide Ebenen werden über strukturierte Blockattribute und den Inhaltstyp miteinander verbunden.

Auswahl und redaktionelle Vorlage verbinden sich zu einer automatisch aktualisierten Übersicht aus einheitlich gestalteten Inhaltskarten.
Auswahl und redaktionelle Vorlage verbinden sich zu einer automatisch aktualisierten Übersicht aus einheitlich gestalteten Inhaltskarten.

Die Vorschau direkt beim Inhalt pflegen

Der «Content for Loop Block» wird innerhalb des jeweiligen Beitrags oder der jeweiligen Seite eingefügt. Er bündelt genau jene Angaben, die in einer späteren Übersicht erscheinen sollen. Je nach Inhaltstyp stellt das Plugin eine passende Ausgangsstruktur bereit.

Für Meldungen kann diese Struktur beispielsweise aus Galerie, Datum, Überschrift, Text und weiterführendem Link bestehen. Veranstaltungen erhalten zusätzlich einen Datumsblock und den Veranstaltungsort. Bildungsangebote und Unterseiten verwenden wiederum eigene, auf ihre Inhalte abgestimmte Vorlagen.

Die Vorlagen bestehen aus Gutenberg-Blöcken. Die Redaktion sieht dadurch direkt, welche Bestandteile später in der Übersicht erscheinen. Sie bearbeitet deren Reihenfolge im vorgesehenen Rahmen und ergänzt die Inhalte an derselben Stelle wie den übrigen Beitrag.

Gutenberg-Editor mit einer strukturierten Inhaltsvorlage, welche Bild, Datum, Überschrift, Text und Link für eine dynamische WordPress-Übersicht bündelt.
Die redaktionelle Vorlage legt im jeweiligen Inhalt fest, welche Angaben später in der dynamischen Übersicht erscheinen.

Der Loop bestimmt Auswahl und Reihenfolge

Der «UD Loop Block» wird dort eingefügt, wo die Übersicht erscheinen soll. In den Block-Einstellungen wählt die Redaktion den Inhaltstyp sowie Anzahl, Sortierung und Reihenfolge der Einträge. Bei hierarchischen Seiten kann eine übergeordnete Seite als Ausgangspunkt dienen. Bildungsangebote lassen sich zusätzlich nach der passenden Taxonomie auswählen.

Die verfügbaren Einstellungen richten sich nach dem gewählten Inhaltstyp. So erscheinen Datumsoptionen bei zeitlich strukturierten Inhalten und Taxonomiefilter bei entsprechend aufgebauten Angeboten. Das Plugin merkt sich die jeweiligen Werte pro Inhaltstyp und stellt sie beim erneuten Wechsel wieder bereit.

Zusätzlich legt die Redaktion fest, wie viele Elemente bei verschiedenen Bildschirmbreiten gleichzeitig erscheinen. Eine serverseitig erzeugte Vorschau zeigt die gefundenen Inhalte direkt im Editor und entspricht weitgehend ihrer späteren Darstellung auf der Website.

Gutenberg-Editor mit einer automatisch erzeugten Übersicht aus sechs Bildungsangeboten und Einstellungen für Inhaltstyp, Bildungsbereich, Sortierung und Anzahl.
Die Inhaltsübersicht verbindet Auswahl und Sortierung mit einer serverseitig erzeugten Vorschau der gefundenen Bildungsangebote.

WordPress führt Abfrage und Vorlage zusammen

Im Frontend fragt das Plugin die passenden Beiträge über WP_Query ab. In der Blockstruktur jedes gefundenen Beitrags sucht es anschliessend nach der Vorlage für den gewählten Inhaltstyp. Diese Vorlage wird im Kontext des jeweiligen Beitrags ausgegeben. Dynamische Blöcke wie das Beitragsdatum erhalten dadurch die Werte des Eintrags, der gerade in der Übersicht erscheint.

Das Plugin verwendet dafür direkt die in WordPress gespeicherte Blockstruktur. Die redaktionelle Vorlage liefert die Darstellung, während der Loop Auswahl und Reihenfolge steuert. Änderungen an einem Beitrag erscheinen dadurch auch in seiner nächsten Ausgabe innerhalb der Übersicht.

Termine anhand ihrer Inhaltsdaten sortieren

Veranstaltungen und andere zeitlich strukturierte Inhalte werden nach ihrem tatsächlichen Startzeitpunkt geordnet. Das Plugin liest diesen Wert aus den eingebetteten Datumsblöcken. Ein zusätzlicher Filter wählt gezielt kommende Termine aus.

Auch einzelne Seiten mit mehreren Datumsabschnitten lassen sich als Quelle wählen. Der Loop liest die entsprechenden Inhaltsblöcke aus, ordnet sie nach ihrem Datum und gibt die gewünschte Anzahl aus. Standard- und Kompaktansicht bieten dafür zwei passende Darstellungsformen.

Eine spezialisierte Variante für Projekte und Magazinbeiträge

Für das Webportal an der Muota entstand zusätzlich ein eigenständiger Loop-Block. Seine Abfrage ist gezielt auf Projekte, Magazinbeiträge und Inhalte aus «Muota erleben» ausgerichtet. Der aktuelle Seitenkontext kann in die Auswahl einfliessen und thematisch verknüpfte Magazinbeiträge zusammenführen.

Beiträge, die in WordPress als «oben gehalten» markiert sind, erscheinen zuerst. Die reguläre Abfrage ergänzt anschliessend die weiteren passenden Inhalte. Die Redaktion wählt zwischen einer kompakten Vorschau mit Bild und Titel und einer ausführlichen Variante mit zusätzlichem Textauszug.

Gutenberg-Editor mit einer projektspezifischen Übersicht für Magazinbeiträge sowie Einstellungen für Inhaltstyp, Anzahl, Darstellung und Projektverknüpfung.
Die Muota-Variante ordnet oben gehaltene Magazinbeiträge zuerst ein und kann die weitere Auswahl auf Inhalte begrenzen, die mit dem aktuellen Projekt verknüpft sind.

Die Muota-Variante übernimmt das Grundprinzip aus Abfrage und redaktioneller Vorlage. Inhaltstypen, Projektverknüpfungen und Darstellungsformen sind gezielt auf das Portal abgestimmt.

Mehrere Inhaltsformate in einem Magazin bündeln

Auf der WordPress-Plattform des ISSV führt ein gemeinsames Magazin Neuigkeiten, Blogbeiträge und digitale Editionen in einer Übersicht zusammen. Die Ausgabe ordnet die Beiträge nach Datum und kennzeichnet sie als Neuigkeit, Blogbeitrag oder Edition IS*V.

Redaktionell gepflegte Kategorien bilden kombinierbare Filter. Kennzeichnungen für Audio und Video machen ergänzende Medien bereits in der Übersicht sichtbar; oben gehaltene Beiträge erhalten eine hervorgehobene Position.

Die projektspezifische Lösung nutzt die strukturierten Daten der verschiedenen Inhaltstypen für Auswahl, Kennzeichnung und Darstellung.

Neue Inhalte automatisch in Übersichten aufnehmen

Autorinnen und Autoren legen direkt im jeweiligen Inhalt fest, welche Angaben in der Vorschau erscheinen. Nach der Veröffentlichung berücksichtigt der Loop den neuen Eintrag anhand von Inhaltstyp, Taxonomie, Seitenhierarchie oder Datum.

Die Redaktion pflegt jeden Inhalt an einer zentralen Stelle. Bestehende Übersichten greifen bei der nächsten Ausgabe auf die aktualisierten Angaben zurück und ordnen den Eintrag gemäss ihrer Konfiguration ein.

Ergebnis

Inhalte einmal pflegen, flexibel ausgeben

Der Loop bestimmt, welche Inhalte in einer Übersicht erscheinen. Die im jeweiligen Inhalt gepflegte Vorlage legt ihre Darstellung fest. So lassen sich Übersichten zentral steuern, automatisch aktualisieren und an unterschiedliche Projekte anpassen.

Vorschau im Inhalt pflegen

Eine Gutenberg-Vorlage legt direkt im Beitrag fest, welche Angaben in der Übersicht erscheinen.

Die Redaktion pflegt sie zusammen mit dem übrigen Inhalt.

Auswahl und Reihenfolge steuern

Der Loop steuert Inhaltstyp, Anzahl, Sortierung und Reihenfolge.

Taxonomien, Seitenhierarchien und Datumsblöcke verfeinern die Auswahl.

Lösung an Projekte anpassen

Serverseitige Vorschauen verbinden Editor und Frontend.

Eigene Varianten ergänzen projektspezifische Abfragen und Darstellungsformen.