Abfrage-Loop: Neueste Beiträge mit Schlagwörtern

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:

WordPress: Abfrage-Loop und neueste Beiträge
Die Blöcke Abfrage-Loop und neueste Beiträge

Ü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:

Die durchgestrichenen Blöcke sollen entfernt werden
Den Block „Keine Ergebnisse“ löschen

Jetzt ist so weit alles vorbereitet, so dass wir uns mit der Anpassung des Blocks beschäftigen können.

Abfrage-Loop anpassen
Abfrage-Loop anpassen
CSS-Klasse für Abfrage-Loop
CSS-Klasse für Abfrage-Loop

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.:

WordPress: Abfrage-Loop mit dem Schlagwort Technik als Beispiel
Abfrage-Loop mit dem Schlagwort Technik als Beispiel

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.

Abfrage-Loop als Variation
Abfrage-Loop als Variation
Abfrage-Loop als Variation im Dashboard

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:

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

Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über deine 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.

Weitere interessante Beiträge rund um WordPress findest du hier

Neu: Jetzt immer direkt informiert werden, wenn ein neuer Beitrag veröffentlicht wird.
Zur Anmeldung beim Newsletter

Schreibe einen Kommentar