如何在Gutenberg自定义ACF块的render_callback中迭代div类名？

我来给你一个简单易实现的方案，核心是用全局计数器跟踪每个H2块的渲染顺序，自动生成带序号的类名，完全在PHP渲染层处理，不需要修改编辑器端的逻辑，很适合你当前的需求。

步骤1：修改渲染回调函数 #

直接修改你的h2_block_render_callback函数，加入计数器逻辑：

// 初始化全局计数器，放在functions.php的顶部（或者渲染函数之前）
$GLOBALS['h2_block_count'] = 1;

function h2_block_render_callback( $block ) {
    // 调用全局计数器变量
    global $h2_block_count;

    // 方案1：生成数字后缀的类名（section_1、section_2...）
    $section_class = 'section_' . $h2_block_count;

    // 方案2：生成英文单词后缀的类名（section_one、section_two...），取消注释即可使用
    // $number_words = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
    // $section_class = 'section_' . (isset($number_words[$h2_block_count - 1]) ? $number_words[$h2_block_count - 1] : $h2_block_count);

    ?>
    <div class="<?php echo esc_attr($section_class); ?>">
        <div class="intro_title">
            <?php echo '<h2><b>'.esc_html(get_field('h2_content')).'</b></h2>'; ?>
        </div>
    </div>
    <?php

    // 每次渲染后计数器+1
    $GLOBALS['h2_block_count']++;
}

关键细节说明 #

• 全局计数器：通过$GLOBALS存储计数器，确保每个块渲染时能继承上一个块的计数。
• 安全转义：用esc_attr()处理类名、esc_html()处理内容，这是WordPress开发的标准安全做法，避免XSS漏洞。
• 两种类名格式：你可以根据需求选择数字后缀（section_1）或英文单词后缀（section_one），英文单词方案里还做了边界处理，超过预设单词数时自动 fallback 到数字。

优化：每个页面独立计数 #

如果希望每个页面的H2块都从section_1开始计数（而不是全站累计），可以在你的主题模板（比如header.php）的开头添加重置逻辑：

// 页面加载时重置计数器
$GLOBALS['h2_block_count'] = 1;

这样每个页面的块都会重新从1开始编号，更符合大多数场景的需求。

内容的提问来源于stack exchange，提问作者Francis Alvin Tan