Verwendung vom Abfrage-Loop bei WordPress-Websites: Neueste Beiträge mit Schlagwörtern
Bei unseren Beiträgen hier auf haurand.com wollten wir den Block „Neueste Beiträge“ nach Schlagwörtern filtern. Das ist aber zum jetzigen Zeitpunkt offensichtlich nicht möglich. Wie man aber den Abfrage-Loop auf einer WordPress-Website statt des Blocks „Neueste Beiträge“ dafür verwenden kann, beschreibe ich in diesem Beitrag.
Das Problem ist offensichtlich schon länger bekannt und bereits 2018 als Vorschlag gemeldet worden: https://github.com/WordPress/gutenberg/issues/13027. Hier wurde als Lösungsmöglichkeit auf den Abfrage-Loop hingewiesen, den man für diesen Zweck in ähnlicher Weise nutzen kann. Das habe ich mir etwas genauer angesehen und festgestellt, dass diese Option in der Tat sehr viele Möglichkeiten für die Anpassung bietet.
Schauen wir uns also zunächst den Abfrage-Loop ohne irgendwelche Änderungen an, wenn man bei Auswahl des Blocks die Option „Leer beginnen“ und als Variante „Titel und Datum“ wählt:
Überflüssige Blöcke im Abfrage-Loop löschen
Der Abfrage-Loop soll jetzt entsprechend angepasst werden. Dazu schauen wir uns das zunächst mal in der Listenansicht an. In dem linken Screenshot habe ich die Blöcke innerhalb des Abfrage-Loops durchgestrichen, die gelöscht werden sollen. Im rechten Screenshot sieht man wie man nach Klick auf die drei Punkte beim Block „Keine Ergebnisse“ diesen Block entfernen kann:
Jetzt ist so weit alles vorbereitet, so dass wir uns mit der Anpassung des Blocks beschäftigen können.
CSS-Klasse für Anpassungen
Um den Abfrage-Loop ähnlich zu gestalten wie den Block „Neueste Beiträge“ weisen wir dem Block noch die Klasse abfrage_tags zu. Die entsprechenden relativ simplen CSS-Regeln erstellen wir unter Design > Customizer > Zusätzliches CSS. Nachfolgend ein Beispiel dazu, mit dem man die Ränder für den Block und die Zeilenhöhe für die einzelnen Einträge modifizieren kann:
/* Ränder und Zeilenhöhe beim Abfrage-Loop */
div.abfrage_tags {
margin: 0 0 1.5em 3em;
}
div.abfrage_tags li {
line-height: 1;
}
Damit haben wir jetzt einen Block erstellt, der dem Block „Neueste Beiträge“ sehr ähnlich ist, aber zusätzlich u. a. die Möglichkeit bietet, Beiträge mit einem Schlagwort anzuzeigen.:
Eine Variation für den Abfrage-Loop
Nachfolgend zeige ich eine denkbare Variante für diesen Abfrage-Loop, wenn man den Block ein wenig anders gestalten möchte. In dem Fall habe ich einen Spalten-Block mit zwei Spalten eingefügt. Links ist der Auszugstext mit einem „Weiterlesen“-Link zu sehen und in der rechten Spalte befindet sich das Beitragsbild. In dem Fall sollte man allerdings die CSS-Regel div.abfrage_tags li unter Design > Customizer > Zusätzliches CSS löschen.
Weitere Optionen
- Wenn man diesen Block exakt immer in der Art verwenden möchte, kann man den Block auch als wiederverwendbaren Block speichern.
- Noch flexibler ist man natürlich, wenn man den Block als Block Pattern nutzt. Wie das funktioniert, habe ich in der folgenden Beitragsreihe erläutert.
Fazit
In dem Beitrag habe ich gezeigt, wie leistungsfähig der Abfrage-Loop ist. Wenn man beispielsweise nach Schlagwörtern filtern möchte, dann kann man statt des doch sehr beschränkt anpassbaren Blocks „Neueste Beiträge“ den Abfrage-Loop verwenden. Dieser Block bietet eine Fülle für individuelle Anpassungen, die auch grafisch ein schöneres Erscheinungsbild ermöglichen.
Quellen und Lesetipps:
- „Latest Posts“ block should filter by Tag (and other taxonomies) #13027:
https://github.com/WordPress/gutenberg/issues/13027 - WordPress Gutenberg Query Loop Block – A Beginners Guide:
https://www.pootlepress.com/2021/11/wordpress-gutenberg-query-loop-block-beginners-guide/ - Der WordPress Query-Block vorgestellt:
https://www.elmastudio.de/wordpress-query-block/ - WordPress: Der Abfrage-Loop – Fluch oder Segen?
https://www.perun.net/2021/07/12/wordpress-abfrage-loop-fluch-segen/
Weitere Beiträge zum Thema
Übrigens: der Block oberhalb dieses Textes ist ein Beispiel für einen angepassten Abfrage-Block. In dem Fall habe ich Beiträge mit dem Schlagwort „Block-Patterns“ gefiltert.
Mehr erfahren auf dieser Webseite
Wir freuen uns über eine Kontaktaufnahme
Was hältst du davon?
Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.
- Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
- Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.
Beitrags-Kategorien
Allgemein (104) Anleitung (67) Block-Editor (44) CSS (10) Full Site Editing (32) Keine Anzeige (1) Plugins (28) Short News (1) Theme (21) Tipps (69) Veranstaltungen (3) WordPress (112)