WPLake > Blog > ACF Repeater Feld, Verwendung und Anzeige
  • English
  • Español
  • Français
  • Italiano

ACF Repeater Feld, Verwendung und Anzeige

Zeit zum Lesen: 8 Minuten

-

Aktualisiert 09.08.23

-

ACF Anleitungen Plugins
Lernen Sie das ACF Repeater-Feld und seine Unterfelder kennen und erfahren Sie, wie Sie die Werte mit PHP-Code und mit einem Shortcode anzeigen können.
hot air balloons are kinda like repeater fields

Inhaltsübersicht

Über das Feld Repeater

#Link kopiert

Das ACF-Repeater-Feld ist eines von vielen ACF-Feldtypen und wird als komplexes Feld bezeichnet, vor allem weil es Ihnen erlaubt, Unterfelder hinzuzufügen, die bei der Bearbeitung von Inhalten immer wieder wiederholt werden können. Es macht also seinem Namen alle Ehre.

Das Repeater-Feld ähnelt dem ACF-Gruppenfeld, indem es Ihnen erlaubt, Unterfelder zu "gruppieren", obwohl Sie mit dem Gruppenfeld die Unterfelder nicht "wiederholen" können, es ist nur ein Satz von Unterfeldern erlaubt.

Ein großer Vorteil des Repeater-Feldes ist, dass Sie keinen weiteren Custom Post Type (CPT) erstellen müssen, aber trotzdem eine Liste von Elementen anzeigen können. Es ist oft nützlich für die Optionsseite.

Layout-Optionen

#Link kopiert

Das Feld Repeater hat Layout-Einstellungen mit 3 Optionen, diese sind Tabelle, Block und Zeile. Die hier gewählte Option beeinflusst das Aussehen des Feldes für Administratoren und Redakteure.

Wenn Sie das Layout "Tabelle" wählen, wird Ihnen auf dem Bearbeitungsbildschirm eine Tabelle mit Unterfeldern angezeigt, deren Bezeichnungen in der Kopfzeile der Tabelle stehen. Wenn Sie das Layout "Block" wählen, werden die Unterfelder in Blöcken nacheinander angezeigt, und bei "Zeile" werden die Unterfelder in einer zweispaltigen Tabelle angezeigt, mit Beschriftungen in der ersten Spalte.

acf repeater layout settings
Die drei Arten von Layout-Optionen für das ACF Repeater Feld. Fltr: Blocklayout, Tabellenlayout und Zeilenlayout

Die aktivierte Paginierung bei der Felderstellung ist nützlich, wenn Sie eine große Anzahl von Wiederholerzeilen haben, da dies die Leistung beim Speichern verbessert (vorher dauerte das Speichern von nur 10 Zeilen einige Zeit).

acf repeater pagination
Repeater-Paginierung für eine große Anzahl von Zeilen zur Verbesserung der Leistung.

Hinter den Kulissen von ACF

#Link kopiert

Hinter den Kulissen speichert das ACF-Repeater-Feld die Daten in der Meta der benutzerdefinierten Felder der aktuellen Seite (oder des Beitrags).

Wie Sie wissen, können Sie mit dem Repeater-Feld mehrere Zeilen mit denselben Unterfeldern haben und diese in einem einzigen Hauptfeld speichern. Das hört sich einfach an, aber es könnte dazu führen, dass man denkt, dass es in der Datenbank auch als ein einziges Metafeld gespeichert wird, was aber nicht der Fall ist.

Feld-Suchanfragen

#Link kopiert

Denken Sie daran, dass Benutzer und Entwickler die Möglichkeit haben sollten, Suchabfragen nach diesem Feld zu machen. Wenn Sie z.B. mehrere Beiträge haben, von denen jeder einen Repeater mit mehreren Zeilen hat, und Sie müssen sie alle finden, woher wollen Sie wissen, dass der bestimmte Wert in einer der Zeilen existiert? Diese Aufgabe kommt viel häufiger vor, als Sie vielleicht denken.

Die Entwickler von Advanced Custom Fields (ACF) haben sich darüber bereits Gedanken gemacht und beschlossen, jedes Unterfeld in einem eigenen Metafeld zu speichern, allerdings mit einer speziellen Struktur.

repeater in db
Wiederholte Unterfelder in der WP-Metatabelle.

Wie oben zu sehen, wird jedem Unterfeld die Zeilennummer und der Name des Wiederholers vorangestellt.

So, zum Beispiel, Sie haben Ihr Repeaterfeld 'datasheets' genannt, und Ihre Unterfelder heißen 'datasheet' und 'attachment', dann werden sie in der Datenbank wie folgt gespeichert:

datasheets_{row-number}_datasheet and 
datasheets_{row-number}_attachment, 
where {row-number} begins from zero.

Wenn Sie dieses Feld von ACF mit der Funktion get_field "anfordern", macht ACF einen Trick und wandelt diese Struktur in ein Array um, so dass Sie in PHP auf ähnliche Weise arbeiten können wie mit einem einfachen Array. Wenn wir in unserem Beispiel das Unterfeld aus der ersten Zeile abrufen wollen, könnten wir dies mit folgendem Code tun:

$datasheets = get_field(‘datasheets’);
echo $datasheets[0][‘datasheet’];
echo $datasheets[0][‘attachment’];

Es ist wichtig, diesen Ansatz zu kennen und zu verstehen, da die Abfrage von Beiträgen nach Repeater-Unterfeldern die Kenntnis der Struktur erfordert, um die richtige WP_Query schreiben zu können. Wie man eine WP_Query für Repeater-Unterfelder erstellt, kann man in den offiziellen Docs nachlesen.

Leistung

#Link kopiert

Das Repeater-Feld ist eine nützliche Funktion, die Ihnen hilft, mehrere Dateneinträge zu speichern, aber es hat auch einen Nachteil, nämlich die Suchleistung bei größeren Datenmengen.

Die Abfrage nach Unterfeldern ist zwar möglich, beansprucht aber im Vergleich zu Custom Post Type (CPT)-Einträgen und Taxonomien viel mehr Serverressourcen und braucht mehr Zeit.

Sie werden den Unterschied nicht bemerken, wenn Sie mehrere Beiträge mit jeweils 5 bis 10 Zeilen abfragen, aber wenn es sich um einige hundert Beiträge mit vielen Zeilen handelt, dann wird es viel langsamer sein als der alternative CPT-Ansatz. Wenn Sie also wissen, dass es viele Daten geben wird und Sie diese abfragen müssen, sollten Sie stattdessen die Erstellung eines CPT in Betracht ziehen. Die Erstellung von CPTs ist mit dem ACF-Plugin seit Version 6.1 beta möglich

Anzeigen von ACF Repeater mit einem Shortcode

#Link kopiert

Die Anzeige der Felder über einen Shortcode ist sehr flexibel, hat aber viele Nachteile;

  • Es braucht einige Zeit, den Code zu schreiben.
  • Sie müssen die Rückgabetypen der Unterfelder kennen.
  • Spezifische Schlüsselnamen für das Antwort-Array merken.
  • Sie müssen manuell die richtige Seitenvorlage in Ihrem Thema finden und sie anpassen.

Auf der anderen Seite gibt es eine andere Möglichkeit, das ACF Repeater-Feld (und seine Unterfelder) anzuzeigen, ohne den Code schreiben zu müssen. Das ACF Views Plugin ermöglicht die Anzeige von ACF-Feldern, und mit ACF Views Pro können Sie komplexe Felder anzeigen, die auch das Repeater-Feld enthalten, was die Sache sehr einfach macht und viel Zeit spart.

ACF Views kümmert sich um das HTML-Markup. Wir müssen nur die ACF-Felder auswählen, die angezeigt werden sollen, dann den automatisch generierten Shortcode kopieren und an einer beliebigen Stelle auf der Seite einfügen, das war's, wir müssen nichts weiter tun als die Ausgabe zu stylen.

Sehen Sie sich unten ein kurzes Video-Tutorial an, wie man ACF Repeater-Felder mit Hilfe von Shortcodes anzeigt.
Es gibt weitere Video-Tutorials auf dem Offiziellen YouTube-Kanal.

Skip over the video for a full texted based, step-by-step guide for displaying the ACF Repeater.

repeater video thumb

Schritt-für-Schritt-Anleitung

#Link kopiert

Wenn Sie uns folgen möchten, dann kaufen, installieren und aktivieren Sie bitte das ACF Views Pro Plugin auf Ihrer WordPress Website. Sie müssen auch Advanced Custom Fields Pro installieren und aktivieren, um den Feldtyp Repeater freizuschalten.

Nun, da Sie bereit sind, machen wir weiter.

Schritt 1. Erstellen einer Ansicht

#Link kopiert

Wenn Sie das ACF Views Plugin aktivieren, erscheint ein neuer Punkt im Admin-Menü, der "ACF Views" heißt. Dieser Punkt hat mehrere Unterpunkte, aber in unserem Fall werden wir nur mit dem Punkt "ACF Views" arbeiten.

Klicken Sie auf diesen Menüpunkt, um die Seite "Ansichten" zu öffnen und klicken Sie dann auf die Schaltfläche "Neu hinzufügen", um eine Ansicht zu erstellen.

Auf der neuen Seite gibst du deiner Ansicht einen Namen, der die Ansicht beschreiben kann. Ich habe meine Ansicht "Datenblätter herunterladen" genannt.

Zuweisung von Feldern

#Link kopiert

Es ist an der Zeit, das Repeater-Feld und die Unterfelder Ihrer Ansicht zuzuweisen. Klicken Sie auf die Schaltfläche "Feld hinzufügen" und wählen Sie Ihre "Gruppe" aus dem Dropdown-Menü. In meinem Fall habe ich die Gruppe "Download Datasheets" genannt.

Wählen Sie dann das Zielfeld aus der Liste aus. Ich habe "Datasheet" ausgewählt.

assigning acf fields to view
Zuweisung von ACF-Feldern zu Ihrer ACF-Ansicht mit einem Dropdown.

Sie werden feststellen, dass für jedes Feld der Feldtyp in Klammern angezeigt wird. In diesem Fall sollte der Typ "Wiederholer" lauten. Fahren Sie fort, indem Sie auf die Registerkarte "Unterfelder" wechseln und dann Ihre Unterfelder aus der Liste hinzufügen, eines nach dem anderen, und fügen Sie dann eine Beschriftung für jedes Feld wie erforderlich ein.

Pro-Tipp: Fügen Sie das erste Feld hinzu, duplizieren Sie dann die Zeile und ändern Sie das Feld in ein anderes. Das spart Zeit, da Sie nicht jedes Mal erst die Feldgruppe und dann das Feld auswählen müssen.

repeater sub field options
Zuweisung von Unterfeldern zu einer ACF-Ansicht.

Klicken Sie auf die Schaltfläche "Veröffentlichen", um Ihre Ansicht zu speichern und zu veröffentlichen. Die Shortcodes werden dann generiert und auf der rechten Seite des Bearbeitungsbildschirms der Ansicht angezeigt. Lesen Sie mehr über die verschiedenen Shortcodes und ihre Verwendung in den ACF Views docs.

Kopieren Sie den ersten Shortcode ohne den Parameter object-id in die Zwischenablage.
Z.B. [acf_views view-id="123" name="Name der Ansicht"]

Schritt 2. Füge den Shortcode an der richtigen Stelle ein

#Link kopiert

Jetzt sollte alles bereit sein, um Ihr ACF-Repeater-Feld anzuzeigen. Gehen Sie zu Ihrer Zielseite (die Seite, auf der Sie Ihre ACF-Felder platziert haben) und fügen Sie auf der Bearbeitungsseite den kopierten Shortcode an einer beliebigen Stelle im Seiteninhalt ein.

Wenn du den Gutenberg-Editor verwendest: Klicke auf den Plus-Button in der oberen Leiste und wähle den "Shortcode"-Block aus der Liste aus, dann füge deinen Shortcode in den Block ein.

Nun müssen Sie nur noch die Felder (eigentlich Unterfelder) ausfüllen. Fügen Sie bei Bedarf weitere Zeilen mit Unterfeldern hinzu.

In meinem Fall habe ich ein Textfeld "Datenblatt" und ein Dateifeld, das ich "Anhang" genannt habe. Am Ende habe ich drei Repeater-Zeilen für englische, französische und deutsche Datenblätter verwendet.

repeater row layout
Zeilen von Wiederholerfeldern für meine Feldgruppen-Datenblätter.

Sichern Sie Ihre Seite, indem Sie auf "Aktualisieren" oder "Veröffentlichen" klicken, und besuchen Sie dann Ihre Seite. Als Ergebnis und wenn Sie alles richtig gemacht haben, sollten Sie die Liste der Repeater-Elemente sehen.

repeater datasheets styled output
Das Endergebnis meiner Repeater-Datenblatt-Feldgruppe mit CSS-Styles.

Wenn Sie Ihre Liste der Elemente nicht sehen, gehen Sie zurück und bearbeiten Sie die Seite. Vergewissern Sie sich zum Beispiel, dass Sie die Felder ausgefüllt und die Seite gespeichert haben. Wenn sie tatsächlich ausgefüllt sind, dann gehen Sie weiter zurück zu Ihrer Ansicht Bearbeitung, wo Sie die Felder zugewiesen haben. Vergewissern Sie sich dann, dass sie aus der richtigen Feldgruppe zugewiesen wurden. Wenn Sie also die Felder auf der Seite oder im Beitrag nicht ausgefüllt haben, wird nichts angezeigt.

Erfahren Sie, wie Sie Wiederholfelder auf WooCommerce-Produktseiten anzeigen, damit potenzielle Kunden relevante Informationen sehen können.

Anzeige des ACF-Repeaters mit PHP-Code

#Link kopiert

Die Anzeige von Repeater-Unterfeldern bedeutet, dass Sie HTML-Markup für die Felder und für die Variablen erstellen müssen, wenn die Felder ausgefüllt sind.

Hier sind einige Beispiele für PHP-Code, der benötigt wird, um Unterfelder und einen einfachen Bildslider anzuzeigen.

PHP-Code zur Anzeige der Werte von Repeater-Unterfeldern mit der Basic-Schleife.

$items = get_field('repeater');
// value can be null, convert in case the array is empty
$items = $items ?: [];

echo "<div class='view'>";
foreach ($items as $item) {
	printf("<div class='view__address'>%s</div>", $item['address']);
}
echo "</div>";

PHP-Code zur Anzeige eines einfachen Bildsliders.

$items = get_field('repeater');
// value can be null, convert in case the array is empty
$items = $items ?: [];

echo "<ul class='slides'>";
foreach ($items as $item) {
	// Return Format of the image must be 'ID'
	$imageId = $item['image'];

	// skip if the image is not selected
	if (!$imageId) {
    	continue;
	}

	// wp_get_attachment_image() will create HTML markup for the selected image (the img tag)
	printf("<div class='slides__slide'>%s</div>", wp_get_attachment_image($imageId, 'full'));
}
echo "</ul>";

Weitere Informationen finden Sie im folgenden Video und im offiziellen ACF-Artikel.

ACF Repeater type with code, video cover

Wenn Sie sich für die eher technische Seite von WordPress interessieren, sollten Sie lesen was gute WordPress-Entwickler wissen müssen.

inside a hot air balloon

Abschließende Gedanken

#Link kopiert

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie ACF Repeater-Felder auf zwei Arten nutzen und anzeigen können, zum einen durch Codierung und zum anderen auf die praktischere und einfachere Art durch die Verwendung eines Shortcodes.

Eine Ansicht kann eine beliebige Anzahl von Feldern verschiedener Typen enthalten, was bedeutet, dass Sie Ihre Ansicht jederzeit erweitern können, ACF Views unterstützt alle verfügbaren Feldtypen mit erweiterter Unterstützung für komplexe Felder.

Weitere Informationen über das Plugin, das wir in unserem Shortcode-Beispiel verwendet haben, finden Sie auf der offiziellen Plugin-Seite.

fill repeater fields

Nur der Himmel ist jetzt die Grenze mit dem, was Sie mit WordPress, Advanced Custom Fields und ACF Views erreichen können. Viel Glück.

Über den Autor
Baxter Jones

Working in the web industry for over 15 years gaining experience in design,user experience and web best practices. Has a keen eye for detail and enjoys having a process when working and creating. He thinks WordPress is the best thing since sliced bread and when he’s not behind his computer he’ll be in the garden.

Got it