Advanced custom fields (ACF) - Campos repetíveis e estilização

O Repeater Field do ACF é uma ferramenta poderosa. Permite aos clientes adicionar qualquer número de elementos (ex: “Nossos Parceiros”, “Agenda”, “Ingredientes”) sem ter de criar posts separados.

Mas como exibir e estilizar isto?

Loop básico

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

Desafio: “Zebra” (cada segundo elemento diferente)

Os designers frequentemente querem, por exemplo, que cada segundo bloco tenha um fundo escuro. Como fazer isso num loop? Usa uma variável de contador ($i) e o operador módulo (%).

<?php if( have_rows('seccoes') ): 
    $i = 0; // Inicializar contador
?>
    <div class="sections-container">
    <?php while( have_rows('seccoes') ): the_row(); 
        $i++; // Incrementar contador
        // Verificar se é par
        $classe = ($i % 2 == 0) ? 'bg-dark' : 'bg-light';
    ?>
        
        <div class="row <?php echo $classe; ?>">
            <!-- Conteúdo da secção -->
        </div>

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

CSS nth-child (alternativa)

Em 2026, é frequentemente melhor fazer isto em CSS, se as diferenças forem puramente visuais:

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

Usa a solução PHP apenas quando a paridade afeta a estrutura HTML ou os recursos carregados.