Diese Anleitung richtet sich an WordPress-Administratoren, die im Site Editor (Full Site Editing) den Query Loop Block verwenden, um Beitraege, Archive oder andere Post-Typen als modernes Grid-Layout darzustellen – inklusive Textauszug, Weiterlesen-Button und optimierter Seitenbreite.
1 Was ist der Query Loop Block?
Der Query Loop Block (frueherer Name: „Posts Loop“) ist der zentrale Baustein im WordPress Full Site Editing (FSE), um dynamisch Beitraege abzufragen und darzustellen. Er ersetzt klassische PHP-Templates wie archive.php oder home.php.
Innerhalb des Query Loop Blocks gibt es den Post Template Block, der das Layout eines einzelnen Beitrags-„Karte“ definiert. Genau hier stellen wir das Layout von Liste auf Grid um.
Voraussetzungen
WordPress 6.0 oder höher
Ein Block-Theme (z. B. Twenty Twenty-Five, Twenty Twenty-Four, Kadence, GeneratePress Block Theme)
Administrator- oder Editor-Berechtigung mit Zugriff auf den Site Editor
Kein Page Builder (Elementor, Divi etc.) – diese haben eigene Grid-Loesungen
⚠️ Wichtig Klassische Themes (mit functions.php und PHP-Templates) unterstuetzen den Site Editor NICHT. Pruefen Sie unter Design > Editor, ob der Menuepunkt verfuegbar ist.
2 SITE EDITOR OEFFNEN & TEMPLATE AUSWAEHLEN
Schritt-fuer-Schritt: Zum richtigen Template navigieren
Templates oeffnen Im linken Panel: Templates waehlen
3
Passendes Template auswaehlen z. B. „Index“, „Archiv“, „Blog-Startseite“ oder „Suchergebnisse“
4
Template bearbeiten Auf das Template klicken, dann oben rechts auf den Bearbeiten-Button (Stift-Symbol)
5
Query Loop Block finden Im Editor den Query Loop Block anklicken (umrandeter Bereich mit Beitraegen)
✅ Tipp Falls kein Query Loop Block im Template vorhanden ist: Block hinzufuegen (+) > „Query Loop“ suchen und einfuegen. WordPress bietet dabei Startmuster („Raster“, „Liste“ usw.) an.
3 GRID-LAYOUT IM POST TEMPLATE BLOCK AKTIVIEREN
Post Template Block auf Grid umstellen
Der entscheidende Schritt: Im Post Template Block (nicht im Query Loop selbst) wird das Layout von „Liste“ (Stack/List) auf „Raster“ (Grid) umgestellt.
1
Post Template Block auswaehlen Innerhalb des Query Loop Blocks den „Post Template“ Block anklicken – nicht einzelne Beitrags-Elemente
2
Block-Toolbar beachten Oben erscheint die Toolbar mit Layout-Optionen (Liste / Raster-Symbol)
3
Grid-Symbol anklicken Das Raster-Symbol in der Toolbar auswaehlen
4
Spaltenanzahl festlegen Rechts im Panel unter „Einstellungen“ > „Raster“: Spaltenanzahl einstellen (empfohlen: 2-3)
5
Einstellungen speichern Oben rechts auf „Speichern“ klicken und bestaetigen
Empfohlene Raster-Einstellungen
Einstellung
Empfohlener Wert
Beschreibung
Columns (Spalten)
3
Standard fuer Blog-Uebersichten, gut lesbar
Min. Spaltenbreite
300px
Responsiv: Unter 300px bricht auf weniger Spalten um
Zeilenabstand
var(–wp–preset–spacing–50)
Nutzt Theme-Spacing-Preset fuer Konsistenz
Spaltenabstand
var(–wp–preset–spacing–40)
Passt sich dem Theme an
4 BEITRAGS-KARTE KONFIGURIEREN
4.1 Beitragsbild hinzufuegen
Innerhalb des Post Template Blocks auf „+“ klicken
„Beitragsbild“ (Featured Image) Block einfuegen
Im rechten Panel: Bildgroesse und -format waehlen
Empfehlung: Festes Seitenverhaeltnis aktivieren (z. B. 16:9 oder 4:3) fuer einheitliches Grid
✅ Tipp Aktivieren Sie „Auf festes Seitenverhaeltnis beschneiden“ damit alle Grid-Karten gleich hoch sind, unabhaengig vom Originalbild.
Im rechten Panel: Anzahl der Woerter festlegen (empfohlen: 20-30 Woerter)
„Weiterlesen-Link anzeigen“ deaktivieren (wir nutzen stattdessen einen eigenen Button)
Optionaler Suffix: „…“ oder „[…]“ im Feld „Auszug-Suffix“ eintragen
ℹ️ Hinweis Der Textauszug (Excerpt) verwendet automatisch das manuell hinterlegte Kurzfassung-Feld des Beitrags. Ist keines vorhanden, werden die ersten N Woerter des Inhalts verwendet.
Wenn die Standard-Breiten des Themes nicht optimal sind, koennen sie in der theme.json-Datei des Child-Themes angepasst werden:
{
„version“: 2,
„settings“: {
„layout“: {
„contentSize“: „720px“,
„wideSize“: „1200px“
}
}
}
⚠️ Wichtig Aendern Sie niemals die theme.json des Parent-Themes direkt – immer ein Child-Theme verwenden! Sonst gehen die Aenderungen beim naechsten Theme-Update verloren.
6 ADMIN-CHECKLISTE
Verwenden Sie diese Checkliste um sicherzustellen, dass alle Schritte korrekt durchgefuehrt wurden:
Beitragsbild mit festem Seitenverhaeltnis eingefuegt
☐
Beitragstitel als H2/H3 mit Link eingefuegt
☐
Beitragsauszug mit Wortlimit konfiguriert
☐
Weiterlesen-Button hinzugefuegt und gestaltet
☐
Query Loop auf Breite „Breit“ eingestellt
☐
Template gespeichert und im Frontend geprueft
☐
Responsivitaet auf Mobilgeraet getestet
☐
Optionales CSS fuer Karten-Styling hinzugefuegt
7 HAEUFIGE PROBLEME & LOESUNGEN
Problem
Loesung
„Editor“ fehlt im Design-Menue
Kein Block-Theme aktiv. Unter Design > Themes ein FSE-Theme installieren und aktivieren.
Grid-Symbol nicht sichtbar
Nicht den Post Template Block, sondern einen Unter-Block ausgewaehlt. Den äusseren Post Template Block gezielt anklicken.
Alle Karten haben unterschiedliche Hoehe
Festes Seitenverhaeltnis beim Beitragsbild aktivieren. Alternativ: CSS mit object-fit: cover und fester Hoehe.
Breite „Breit“ hat keine Wirkung
Theme definiert keine wideSize. In theme.json des Child-Themes erganzen: „wideSize“: „1200px“
Aenderungen gehen verloren
Template nicht gespeichert. Nach jedem Bearbeitungsschritt oben rechts „Speichern“ klicken.
Beitragsauszug leer
Kein manueller Excerpt eingetragen und der Beitragsinhalt beginnt mit einem Block-Element (z. B. Tabelle). Manuellen Excerpt im Beitragseditor erganzen.
Grid sieht auf Mobil schlecht aus
Responsive CSS-Breakpoints ergaenzen oder „Mindestbreite“ im Post Template Block verringern.
Keine Vektordaten für diesen Beitrag oder keine Beiträge vektorisiert.
