Advanced Custom Fields (ACF) - Wiederholbare Felder und Styling

Das Repeater Field in ACF ist ein mächtiges Werkzeug. Es ermöglicht Kunden, eine beliebige Anzahl von Elementen hinzuzufügen (z.B. “Unsere Partner”, “Agenda”, “Zutaten”) ohne separate Beiträge erstellen zu müssen.

Aber wie zeigt man es an und styled es?

Basis-Schleife

<?php if( have_rows('mein_repeater') ): ?>
    <ul class="slides">
    <?php while( have_rows('mein_repeater') ): the_row(); 
        $image = get_sub_field('bild');
        $content = get_sub_field('text');
        ?>
        <li class="slide">
            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
            <p><?php echo $content; ?></p>
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>

Herausforderung: “Zebra” (Jedes zweite Element anders)

Designer wollen oft, dass z.B. jeder zweite Block einen dunklen Hintergrund hat. Wie macht man das in einer Schleife? Nutze eine Zählervariable ($i) und den Modulo-Operator (%).

<?php if( have_rows('sektionen') ): 
    $i = 0; // Zähler initialisieren
?>
    <div class="sections-container">
    <?php while( have_rows('sektionen') ): the_row(); 
        $i++; // Zähler erhöhen
        // Prüfen ob gerade
        $klasse = ($i % 2 == 0) ? 'bg-dark' : 'bg-light';
    ?>
        
        <div class="row <?php echo $klasse; ?>">
            <!-- Sektionsinhalt -->
        </div>

    <?php endwhile; ?>
    </div>
<?php endif; ?>

CSS nth-child (Alternative)

Im Jahr 2026 ist es oft besser, dies in CSS zu lösen, wenn die Unterschiede rein visuell sind:

.row:nth-child(even) {
    background-color: #333;
    color: #fff;
}

Nutze die PHP-Lösung nur, wenn die Parität die HTML-Struktur oder geladene Ressourcen beeinflusst.