Advanced custom fields (ACF) - Pola powtarzalne i stylowanie

Pole Powtarzalne (Repeater Field) w ACF to potężne narzędzie. Pozwala klientowi dodać dowolną liczbę elementów (np. “Nasi Partnerzy”, “Agenda”, “Składniki”) bez konieczności tworzenia osobnych postów.

Ale jak to wyświetlić i ostylować?

Podstawowa pętla

<?php if( have_rows('moj_repeater') ): ?>
    <ul class="slides">
    <?php while( have_rows('moj_repeater') ): the_row(); 
        $image = get_sub_field('obrazek');
        $content = get_sub_field('tekst');
        ?>
        <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; ?>

Wyzwanie: “Zebra” (co drugi element inny)

Często designerzy chcą, aby np. co drugi blok miał ciemne tło. Jak to zrobić w pętli? Użyj zmiennej licznika ($i) i operatora modulo (%).

<?php if( have_rows('sekcje') ): 
    $i = 0; // Inicjujemy licznik
?>
    <div class="sections-container">
    <?php while( have_rows('sekcje') ): the_row(); 
        $i++; // Zwiększamy licznik
        // Sprawdzamy czy parzysty
        $klasa = ($i % 2 == 0) ? 'bg-dark' : 'bg-light';
    ?>
        
        <div class="row <?php echo $klasa; ?>">
            <!-- Treść sekcji -->
        </div>

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

CSS n-th child (alternatywa)

W 2026 roku często lepiej zrobić to w CSS, jeśli różnice są czysto wizualne:

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

Używaj rozwiązania PHP tylko wtedy, gdy parzystość wpływa na strukturę HTML lub ładowane zasoby.