求助：基于ACF重复字段生成带递增计数器的列表元素

没问题，咱们可以直接复用你现有代码里的计数器逻辑，把列表生成和你的referenz-slide循环整合到一起，这样就能保证列表的data-id、内容和你右侧的referenz-content完全同步递增。

修改后的完整代码 #

<?php 
$i = 1; 
if (have_rows('referenz-slide')) : 
    // 先输出列表容器
    echo '<ul class="referenz-list">';
    while (have_rows('referenz-slide')) : the_row(); 
        // 第一个列表项添加active类，其余正常
        $li_class = $i == 1 ? 'active' : '';
?>
        <!-- 生成递增的列表项 -->
        <li data-id="<?php echo esc_attr($i); ?>" class="<?php echo esc_attr($li_class); ?>">
            <?php echo esc_html($i); ?>
        </li>
        <!-- 你原有的referenz-content内容 -->
        <div class="referenz-content <?php echo $i == 1 ? 'active' : 'hidden'; ?>" id="ref-<?php echo esc_attr($i); ?>" data-referenz="<?php echo esc_attr($i); ?>">
            <h4 class="referenz-headline"><?php echo esc_html(get_sub_field('title')); ?></h4>
            <p><?php echo wp_kses_post(get_sub_field('text')); ?></p>
            <?php 
            $link = get_sub_field('link');
            if ($link) : ?>
                <a href="<?php echo esc_url($link['url']); ?>" target="<?php echo esc_attr($link['target'] ?: '_blank'); ?>" title="Jetzt mehr erfahren" class="btn btn-referenz">Jetzt mehr erfahren</a>
            <?php endif; ?>
        </div>
<?php 
        $i++; 
    endwhile; 
    // 闭合列表容器
    echo '</ul>';
else : 
    // 没有重复字段时的提示（可按需修改）
    echo '<ul class="referenz-list"><li>Keine Referenzen verfügbar.</li></ul>';
endif; 
wp_reset_postdata(); 
?>

关键说明 #

1. 计数器同步：复用了你原本的$i变量，确保列表项的data-id、内容和referenz-content的id、data-referenz完全对应，新增ACF行时会自动递增计数。
2. 安全输出：添加了esc_attr()、esc_html()、wp_kses_post()这些WordPress安全函数，避免XSS风险，这是开发时的规范操作哦。
3. 链接优化：给链接的target属性加了判断，优先用ACF字段里设置的目标，没有的话才默认用_blank，灵活性更高。
4. 结构整合：把列表的<ul>和循环里的<li>直接和内容放在同一个循环里，不会出现计数不一致的问题，逻辑更清晰。

如果你的列表需要和内容放在页面不同位置（比如列表在左侧，内容在右侧），可以先把列表项存到数组里，循环结束后再输出，示例如下：

<?php 
$i = 1;
$list_items = []; // 存储列表项的数组
if (have_rows('referenz-slide')) : 
    while (have_rows('referenz-slide')) : the_row(); 
        $li_class = $i == 1 ? 'active' : '';
        // 把列表项HTML存入数组
        $list_items[] = sprintf(
            '<li data-id="%s" class="%s">%s</li>',
            esc_attr($i),
            esc_attr($li_class),
            esc_html($i)
        );
        // 输出referenz-content（可放在页面任意位置）
?>
        <div class="referenz-content <?php echo $i == 1 ? 'active' : 'hidden'; ?>" id="ref-<?php echo esc_attr($i); ?>" data-referenz="<?php echo esc_attr($i); ?>">
            <!-- 内容和之前一致 -->
        </div>
<?php 
        $i++; 
    endwhile; 
    // 在需要的位置输出列表
    echo '<ul class="referenz-list">' . implode('', $list_items) . '</ul>';
endif; 
wp_reset_postdata(); 
?>

这样不管列表和内容在页面哪个位置，计数器都是完全同步的，新增ACF行时会自动生成对应的列表项~

内容的提问来源于stack exchange，提问作者tom84