Query Loop & Block Bindings in WordPress – Vertiefte Anleitung

Für das WordPress Meetup – Praktische Umsetzung mit dynamischen Inhalten

Diese Anleitung zeigt, wie du mit dem Query Loop Block und Block Bindings professionelle News- und Blog-Übersichten baust – ohne viel Code.

1. Voraussetzungen

• Block-Theme (FSE) aktiv
• Optional: Advanced Custom Fields (ACF) Pro für erweiterte Felder
• WordPress 6.5 oder neuer

Screenshot 1: Site Editor mit geöffnetem Query Loop [Hier Screenshot einfügen: Query Loop im Editor mit Grid-Layout]

2. Query Loop anlegen

1. Neue Seite oder Template öffnen.
2. Block hinzufügen → Query Loop suchen.
3. „Von vorne beginnen“ wählen oder ein Grid-Pattern.
4. Einstellungen:
   • Post-Typ: Beiträge oder Custom Post Type (z. B. News)
   • Anzahl, Kategorien, Sortierung
   • Layout → Grid (Spaltenanzahl anpassen)

Screenshot 2: Query Loop Einstellungen (Grid + Filter) [Screenshot: Query-Einstellungen Panel]

3. Post Template anpassen

Im Query Loop das Post Template bearbeiten. Hier kommen die einzelnen Beitrags-Karten hin.

Standard-Blöcke:

• Featured Image
• Post Title
• Post Excerpt
• Post Date / Autor

Screenshot 3: Post Template im Editor mit mehreren Blöcken [Screenshot: Inneres Post Template mit Blöcken]

4. Block Bindings aktivieren (Kernfunktion)

1. Im Post Template einen Paragraph-Block oder Heading einfügen.
2. Block auswählen → Rechts im Inspector auf die drei Punkte → Bindings (oder direkt im erweiterten Panel).
3. Quelle auswählen:
   • core/post-meta für normale Custom Fields
   • acf/field bei ACF
4. Meta-Key (Feldname) eingeben.

Beispiel:

• Paragraph für „Untertitel“ → Binding an ACF-Feld news_subtitle

Screenshot 4: Block Bindings Panel [Screenshot: Bindings-Einstellungen mit Source und Key]

Screenshot 5: Vergleich vor/nach Binding (Editor + Frontend) [Vorher: Statischer Text | Nachher: Dynamischer Inhalt aus Feld]

5. Beispiele für gängige Bindings

• Bild aus Custom Field: Image-Block → Binding auf URL-Feld
• Button/Link: Button-Block → Binding auf URL-Feld
• Bedingte Anzeige: Mit zusätzlichen Plugins oder CSS (z. B. Featured-Flag)

Screenshot 6: Fertige News-Grid mit gebundenen Feldern [Screenshot: Frontend-Ansicht der Grid mit Titel, Bild, Untertitel, Datum]

6. Fortgeschrittene Tipps

• Query nach Custom Fields filtern: Block Variation erstellen (siehe Developer Docs) oder PHP-Filter nutzen.
• Repeater-Felder: Mit ACF Dynamic Blocks oder zusätzlichen Tools.
• Performance: Weniger als 12 Items pro Loop auf der Startseite, Caching aktivieren.
• Styles: Globale Styles oder Additional CSS für Ränder, Farben, responsive Grid.

7. Häufige Probleme & Lösungen

• Binding wird nicht angezeigt → Cache leeren, richtigen Kontext prüfen.
• ACF-Felder nicht verfügbar → ACF-Version prüfen (≥ 6.2.8 für beste Integration).
• Mobile Ansicht → Grid-Spalten reduzieren.

Screenshot 7: Mobile Preview [Screenshot: Responsive Grid]