Mit WordPress 5.8 und dem nächsten Schritt zum Full Site Editing liefert der Gutenberg-Editor nun den Abfrage Loop Block. Und mit diesem gibt es weitere Theme-Blöcke, die der Abfrage von Beiträgen dienen. Doch was bedeutet das eigentlich? Was kann man mit dem neuen Gutenberg-Block machen?
Anhand eines Beispiels werde ich zeigen, wie Sie mit diesem Block eine Seite gestalten können, die wie eine Blogseite erscheint und gleich mehrere dieser Abfrage Loop Blöcke zum Einsatz bringt.
Für ein Grundverständnis der neuen Möglichkeiten müssen wir uns aber erst einmal anschauen, was Abfrage und Loop in der WordPress-Welt eigentlich bedeuten. Die Erfahrung zeigt nämlich, dass der neue Block ohne ein solches Verständnis durchaus irritierend wirken kann.
Weitere Expertentipps zur Arbeit mit dem Gutenberg Editor finden Sie in unserem E-Book. Zum kostenlosen Download
Der WordPress Loop = Abfrage von Inhaltstypen
Wie kommen Ihre Beiträge eigentlich auf Ihr Blog? Haben Sie eine grundlegende Vorstellung davon? Wenn Ihnen Begriffe wie Abfrage und WordPress Loop etwas sagen, können Sie diesen Abschnitt getrost überspringen.
Wenn Sie sich allerdings bisher einfach noch keine Gedanken darüber gemacht haben, kann für das Arbeiten mit dem Gutenberg Abfrage Loop Block ein wenig Grundverständnis nicht schaden.
Die Templates Ihres Themes sorgen dafür, dass Ihre Beiträge auf Blog- oder Archivseiten (Kategorie, Schlagwort, Autor, Datum) ausgegeben werden. Auch für alle anderen Inhaltstypen, also nicht nur für die Beiträge an sich, sondern auch für Seiten und benutzerdefinierte Beitragstypen (Custom Post Types) gibt es solche Templates.
Die Funktion dieser Templates ist es, eine Vorlage zu sein. In der Vorlage für Ihre Blogseite steht also, wie sie aufgebaut sein soll. Wo soll sich der Beitragstitel befinden: ober- und unterhalb des Beitragsbildes? Wo sollen die Post-Meta-Angaben erscheinen: Autor und Datum oberhalb des Beitragstextes, Kategorien und Schlagwörter darunter? Und wie viel Text soll auf der Blogseite erscheinen: der gesamte Inhalt oder nur ein Auszug beziehungsweise der Teaser?
Diese Templates waren bislang (und sie sind es in den allermeisten Fällen immer noch) PHP-Dateien. Sie tragen so schöne Namen wie index.php, archive.php, single.php oder page.php (neuerdings auch singular.php) und sind wesentliche Bestandteile des Themes.
»If have post, while have post, the post«
Um nun eine bestimmte Menge von Beiträgen (zum Beispiel alle) auf einer Seite (zum Beispiel auf der Blogseite) ausgeben zu können, arbeiten diese Templates mit dem sogenannten WordPress Loop.
Loop bedeutet Schleife. Und Schleife wiederum bedeutet, dass hier ein Vorgang angestoßen wird, der so lange arbeitet, bis es nichts mehr abzuarbeiten gibt. »If have post, while have post, the post«, das beschreibt den WordPress Loop. Oder frei übersetzt: »Sofern es Beiträge gibt und solange es Beiträge gibt, gib Beiträge aus.«
Genau das macht eine Datei wie die index.php. Wobei sie das im Allgemeinen nicht alleine macht. Bevor ein Template alles selbst erledigt, ruft es lieber andere Templates auf, bei diesem Spiel mitzuspielen. So kommt es zu einer Verschachtelung von mehreren Templates, die zusammen an einem Ergebnis arbeiten: der Ausgabe Ihrer Inhalte in einer einheitlichen Gestalt.
An diesen Templates etwas zu ändern, war schon immer möglich. Eigene zu erstellen, ebenso. Allerdings war es dafür nötig, dies in der entsprechenden Sprache zu tun. Sprich: Es erforderte PHP-Kenntnisse.
Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten
Bye-bye PHP, willkommen Gutenberg Abfrage Loop Block
Von WordPress 5.8 an gibt es nun grundlegende Änderungen, unter anderem in Hinblick auf diese Templates. Denn diese genannten PHP-Dateien braucht man zukünftig nicht mehr. Stattdessen arbeitet alles mit Blöcken, somit mit HTML, JavaScript, React und der Rest API.
Für den Umgang mit Gutenberg-Blöcken ist es erst einmal nicht nötig, sich mit einer dieser (Skript)-Sprachen auszukennen. Was es aber auf jeden Fall braucht, ist eine grundlegende Vorstellung von der Funktionsweise und den Möglichkeiten des Abfrage Blocks.
Dass es zu größeren Verständnisproblemen kommen kann, wenn keine Erfahrung mit der Logik von Abfragen vorhanden ist, hat mir die Arbeit mit dem Plugin Custom Query Blocks gezeigt. Im Rahmen von Kundenprojekten hat sich Custom Query Blocks wirklich bezahlt gemacht. Allerdings wären die meisten meiner Kund*innen ohne Anleitung mit dem Plugin gar nicht zurechtgekommen.
Ein ähnliches Problem sehe ich für den Gutenberg Abfrage Loop Block. Zwar sind dessen Einstellungsoptionen im Vergleich zu Custom Query Blocks noch sehr überschaubar. Dennoch fürchte ich, dass sich so manche Benutzer*innen bei den ersten Versuchen mit dem neuen Block wie der Ochs (oder die Kuh) vorm Berg fühlen.
Einen Gutenberg Abfrage Loop Block einfügen
Der Abfrageblock ist wie jeder andere Gutenberg-Block einsetzbar. Zu finden ist er als einer von mehreren neuen Theme-Blöcken – oder im Rahmen der Block-Vorlagen.
Nun führen bekanntlich verschiedene Wege zum Block der Wahl. Einer ist der Klick auf das Pluszeichen in der oberen Editor-Leiste. Oder besser: über das Pluszeichen rechts in der Zeile, in der der neue Block entstehen soll. Oder noch besser: über das Eintippen von /BLOCKNAME in der Zeile, in der der Block entstehen soll. Im konkreten Fall wäre dies also /abfrage. Das reicht schon, denn dann drängt sich einem die Wahl förmlich auf.
Der Gutenberg Abfrage Loop Block bietet verschiedene Vorlagen und zeigt den aktuellsten Beitrag.
Der Abfrageblock bietet nun verschiedene Designs zur Auswahl an. Einige folgen dem Prinzip der Liste, andere arbeiten mit Spalten. Überdies ist es möglich, ohne eine solche Vorauswahl zu arbeiten und somit leer zu beginnen.
… mit einer Block-Vorlage
Die Vorlagen bestehen aus unterschiedlichen Varianten der Anordnung. So gibt es den Klassiker (wie oben im Bild zu sehen). Dieser folgt dem Prinzip der Liste, das heißt, hier erscheinen die Beiträge untereinander. Im Detail kann diese Vorlage alle üblichen Elemente zeigen oder zum Beispiel nur aus einem kleinen Bild und dem Titel bestehen.
Darüber hinaus gibt es aber auch die Anordnung der einzelnen Elemente Beitragsbild, -titel, -excerpt etc. im Rahmen von Spalten. Eine dieser Vorlagen sorgt so zum Beispiel dafür, dass das Beitragsbild in der linken, alle weiteren Elemente in der rechten Spalte erscheinen. Eine andere zeigt einen Drei-Spalter, der auf die jeweiligen Beitragsbilder verzichtet.
Egal, welche Auswahl Sie hier treffen: Zuerst erscheint immer nur ein einziger Beitrag. Das mag sehr verwirren. Ohne Filterung müsste der Abfrage Loop Block eigentlich für die Ausgabe aller Beiträge sorgen. Tut er aber nicht. Der Grund dafür sind die voreingestellten Display Settings. Dazu gleich mehr.
Alle Vorlagen lassen sich jedenfalls verändern, ohne dass die Änderungen Einfluss auf die Vorlage hätten. Sie modifizieren nur Ihre Instanz, mit der Sie gerade arbeiten.
… leer beginnen
»Leer beginnen« bietet vier verschiedene Optionen:
- Titel und Datum
- Titel und Excerpt
- Image, Datum und Titel sowie
- Titel, Datum und Excerpt
Wie auch immer Sie nun starten: Alles lässt sich bearbeiten. Die Variante Titel und Datum lässt sich zum Beispiel durchaus durch das Element Beitragsbild erweitern.
Im Gegensatz zu dem Vorgehen mit der Block-Vorlage erscheinen nun alle Beiträge – bis Sie die entsprechenden Filter setzen. Zu den Filtern gleich mehr.
Was für beide Vorgehensweisen nicht funktioniert: einem bereits erstellten Abfrage Loop Block eine andere Vorlage zuzuordnen oder sie auf leer beginnen zurückzusetzen. Im Zweifel bleibt also nichts anderes, als zurück auf Los zu gehen. Das heißt, alles zu löschen und von vorne zu beginnen.
Den Gutenberg Abfrage Loop Block bearbeiten
Das Bearbeiten des Abfrageblocks erweist sich als gewöhnungsbedürftig. Da ist zuerst einmal die Tatsache zu nennen, dass der Block immer auf die Auswahl der bereits vorhandenen Beiträge zugreift. Wenn ich als aktuellsten Beitrag in meinem Testblog also gerade einen Text über Hundesalons veröffentlicht hätte, würde der immer als Erstes im Rahmen des Abfrage Loop Blocks erscheinen.
Auch die voreingestellte Anzahl der anzuzeigenden Beiträge kann erst einmal verwirren. Der Wert steht auf 1, also zeigt der Block auch nur einen Beitrag an. In meinem Fall den Hundesalon. Für die Bearbeitung wäre es aber hilfreich, wenn zuerst alle Beiträge zu sehen wären. So müssen Sie also erst einmal für die Anzeige aller sorgen, um sie dann gegebenenfalls durch Filter wieder einzugrenzen.
Außerdem wird nur mit der Ausgabe mehrerer Beiträge deutlich, dass jede Änderung innerhalb des Blocks für die komplette Schleife gilt.
Ein Beispiel: Für das Ergänzen der Variante Titel und Datum um das Beitragsbild reicht es, dieses nur für einen Eintrag der Liste einzufügen. Schon nutzt jeder Eintrag des Loops das jeweilige Beitragsbild. Dasselbe gilt für das Löschen eines Elementes. Einmaliges Löschen des Datums sorgt dafür, dass kein Eintrag in der Liste mehr sein Datum ausgeben wird.
Auch wichtig zu wissen: Der Gutenberg Abfrage Loop Block erstellt immer noch einen zweiten Block, den Beitrags-Template Block. Dieser enthält alle Elemente, mit denen die Beiträge dargestellt werden sollen. Isoliert ist der Beitrags-Template Block nicht verfügbar. Denn damit alles funktioniert, braucht es die Schleife und damit den Abfrage Loop Block. Und nur über diesen lassen sich weitere Einstellungen wie Filter und Display Settings vornehmen.
Eine Seite mit Beiträgen erstellen (am Beispiel eines Reiseblogs)
Kommen wir nun zu dem angekündigten Beispiel der Seite mit Beiträgen.
Ich hätte hier auch was mit Tieren oder Obst und Gemüse machen können, der Inhalt ist also nicht wichtig. Wichtig ist vielmehr: Bei einem Theme wie Twenty Twenty-One wäre es bisher nicht möglich gewesen, eine Seite mit Beiträgen zu erstellen, ohne dafür ein Plugin wie Custom Query Blocks zu nutzen oder mit PHP ein Template schreiben zu müssen.
Nun aber braucht es keine Veränderung des Templates. Es reicht, eine Seite zu bearbeiten, die der Ausgabe von Beiträgen dienen soll. Diese Seite wird aber nicht über die Einstellungen > Lesen zur Ausgabe aller Beiträge herangezogen. Vielmehr soll sie wie jede andere Seite das Standardtemplate für die Darstellung von Seiten nutzen.
Etwas Vergleichbares können Sie auch für andere Seiten erstellen. Eine Angebotsseite, die den Custom Post Type Angebote ausgibt. Eine Glossar-Seite, die nur Beiträge der Kategorie Glossar zeigt. Alle diese Seiten arbeiten dann noch immer mit dem Standardtemplate für Seiten, geben aber Beiträge aus, weil ihr Inhalt dies mittels Abfrageblock so vorsieht.
Eine Seite mit Beiträgen: Hier arbeiten gleich vier Abfrage Loop Blöcke.
Vier Gutenberg Abfrage Loop Blöcke auf einer Seite
Der Gutenberg Abfrageblock arbeitet sowohl mit Beiträgen als auch mit Seiten sowie mit den bereits erwähnten Custom Post Types. Meine Konstruktion bedient sich aller drei Optionen.
Diese Reiseseite arbeitet aber mit insgesamt vier Abfrage Loop Blöcken. Denn die erste Abfrage zeigt nur den aktuellsten Beitrag der Kategorie »Reise«. Es folgt eine gruppierte Abfrage der aktuellsten drei Seiten zum Thema Transportmittel, wobei der Gruppe-Block die Hintergrundfarbe liefert.
Unterhalb der Transportmittel erscheint ein Spaltenblock mit zwei Spalten. Die breitere linke Spalte beinhaltet den dritten Abfrage Loop Block. Dieser zeigt die nächstälteren Reiseberichte – fünf Stück pro Seite – und überspringt dabei den aktuellsten (der ja schon oben zu sehen ist).
In der schmalen rechten Spalte hingegen gibt der vierte Abfrage Loop Block den Custom Post Type »Produkte1« aus, der sich mit dem Thema Sport beschäftigt. Auch hier sind es nur drei Sportbeiträge. Und wieder sorgt die Gruppierung für die Hintergrundfarbe des Bereiches.
Im Einzelnen sieht das Vorgehen dann wie folgt aus.
Der erste Gutenberg Abfrage Loop Block: der aktuellste Beitrag der Kategorie »Reise«
Der erste Gutenberg Abfrageblock fragt nur einen Beitrag der Kategorie Reise ab.
Als Vorlage für meine erste Abfrage dient das Design »Bild links« – und zwar in weiter Breite.
Vielleicht etwas unglücklich, aber Gutenberg verteilt die Einstellungsoptionen für den Abfrage Loop Block auf die Werkzeugleiste oberhalb des Blocks als auch auf die rechte Sidebar.
Block-Einstellungen und Filter in der rechten Sidebar
In der rechten Sidebar lassen sich die Art des Inhaltstyps (Beiträge, Seiten oder Custom Post Types) als auch ihre Sortierung auswählen. Der Standard: Beiträge in der Sortierung von neu nach alt. Möglich wäre aber auch alt nach neu sowie alphabetische Sortierung auf- und absteigend.
Je nach Inhaltstyp variieren die weiteren Optionen. Für Beiträge ist es möglich, die Ausgabe über die Wahl einer Kategorie, eines Schlagwortes, eines Autors oder eines Keywords einzugrenzen. Bei mir ist es die Kategorie »Reise«.
Damit gibt der Abfrageblock also nur noch Beiträge aus, die mit »Reise« kategorisiert sind. Insgesamt sind es bei mir sieben Stück. Ich möchte an dieser Stelle aber nur einen zeigen.
Display Settings in der Werkzeugleiste
Per Default steht in den Display Settings bei »Items per Page« der Wert 1. Ändert man nun den Wert auf 2 oder mehr, erscheinen dann auch im Backend entsprechend viele Beiträge.
Ein Offset, also das Überspringen von Beiträgen, ist hier nicht nötig. So auch nicht die Begrenzung der Anzahl der Seiten, auf denen die Beiträge ausgegeben werden sollen. Beide Werte bleiben also bei 0. Und ich muss für meinen einzelnen Beitrag nichts ändern.
Abfrage einfügen: alle Beiträge minus einen
Einen Beitrag habe ich groß oben ausgegeben. Unterhalb der Transportmittel folgen nun weitere Reiseberichte. Dafür habe ich die Vorlage »Kleines Bild und Titel« gewählt.
Damit diese Liste nur meine Reisebeiträge zeigt, steht der Filter für die Kategorie rechts wieder auf »Reise«. Und damit diese Liste alle Beiträge bis auf den ersten anzeigt, steht in den Display Settings bei Offset eine 1.
Dank Display Filter möglich: eine Abfrage, die fünf Beiträge pro Seite zeigt und den ersten überspringt.
Durch die Begrenzung auf fünf Beiträge pro Seite (und weil es tatsächlich noch einen weiteren gibt), fügt der Abfrage Loop Block nun automatisch eine Paginierung ein. Wollte ich keine Paginierung, wenngleich es mehr als insgesamt sechs Beiträge gibt, so hilft der Wert 1 bei »Max page to show«.
Kommt ein weiterer Reisebericht hinzu, rutscht »Reisebericht 1« automatisch runter und wird zum ersten Eintrag der Liste. Während »Reisebericht 6« dann zum ersten Eintrag der Liste auf Seite 2 wird.
Seiten abfragen
Der Abfrage Loop Block kann auch Seiten abfragen. Allerdings fehlt hier noch ein wesentlicher Filter.
Nun kennen Seiten keine Kategorien oder Schlagwörter. Aber sie haben IDs. Zukünftige Versionen des Blocks werden also hoffentlich diese Option berücksichtigen. Sonst dürfte man niemals wieder eine Seite zu einem anderen Thema veröffentlichen, die aktueller ist als jene, die hier abgefragt werden.
Zwar gibt es noch einen Filter für Keywords (und auch einen für Autor), aber das hilft im Zweifel nicht weiter. Ich habe es ausprobiert und bekam für das Keyword Auto lustige Ergebnisse.
Der Abfrageblock kann auch Seiten abfragen.
Custom Post Type abfragen
Arbeitet die Website mit Custom Post Types, dann kommt hier die gute Nachricht: Ja, der Gutenberg Abfrage Loop Block kann auch Ihre »Angebote« oder »Produkte« abfragen. In meinem Fall lautet der benutzerdefinierte Beitragstyp »Produkte1« und liefert Beiträge zum Thema Sport.
Auch Custom Post Types lassen sich nach Kategorie, Schlagwort, Autor und Keyword filtern. Nicht hingegen nach Custom Taxonomies, die man vielleicht für den Post Type erstellt hat. Hier wäre das oben erwähnte Plugin Custom Query Blocks noch immer überlegen. Ich gehe aber davon aus, dass diese Filteroption bereits in Planung für spätere Versionen ist.
Der Gutenberg Abfrage-Block fragt auch benutzerdefinierte Beitragstypen ab.
Eine Einführung in den neuen WordPress Gutenberg Abfrage Loop Block – Fazit
Es ist noch nicht alles Gold, was glänzt. Und doch glänzt schon eine Menge: Erstmals ist es möglich, bei einem Standardtheme wie Twenty Twenty-One Seiten mit Beiträgen zu erstellen, ohne dafür ein Plugin nutzen oder ein eigenes Template schreiben zu müssen.
Sicherlich braucht es mit dem neuen Gutenberg Abfrage Loop Block ein wenig Übung. Nicht alles erklärt sich irgendwie fast von selbst. Und noch lange lassen sich mit diesem Block keine komplexeren Abfragen erstellen. Dazu fehlen noch zu viele Optionen im Vergleich zu den Möglichkeiten von WP_Query. Wahrscheinlich ist das für den Start auch zu viel verlangt. Aber zumindest Filterung nach ID für Seiten und Custom Taxonomies für Custom Post Types wäre schön.
Bleibt dann noch die Frage nach dem Theme. Im Beispiel habe ich mit Twenty Twenty-One gearbeitet, das sofort verstanden hat, was ich von ihm wollte. Weshalb ich nicht eine Zeile zusätzliches CSS schreiben musste. Jegliche Änderung von Schriftgrößen oder Hintergrundfarben, Spaltenbreiten etc. – alles Gutenberg. Und so auch die problemlose Umsetzung für Mobilgeräte, für alles sorgt das Theme.
Das lässt sich wahrlich nicht von jedem anderen Theme in meiner Testumgebung so sagen. Aber nun gut, dafür befinden wir uns ja auch auf dem Weg zum Full Site Editing, das seine ganz eigenen Anforderungen an dafür geeignete Themes stellt.
Britta lebt und arbeitet seit vielen Jahren in Köln. Sie mag Bücher, Filme und Rockmusik und liebt ihre Katze Luz.