ACF插件字段组无法显示，如何在页面模板中正确调用？

问题描述 #

在ACF插件中创建了字段组及对应字段，使用PHP代码在页面模板中调用时，整个布局区块完全不显示，需解决该问题。

用户提供的调用代码 #

<?php
    $cifr = get_field('cifr');
    if ($cifr) :
        $client = $cifr['client'];
        $workout = $cifr['workout'];
        $teams = $cifr['teams'];
        $projectworks = $cifr['projectworks'];
?>
<section id="counter" class="section-padding">
  <div class="overlay dark-overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-sm-6 col-md-6">
        <div class="counter-stat">
          <i class="icofont icofont-heart"></i>
          <span class="counter"><?php echo esc_html($client); ?></span>
          <h5>client</h5>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-md-6">
        <div class="counter-stat">
          <i class="icofont icofont-rocket"></i>
          <span class="counter"><?php echo esc_html($workout); ?></span></span>
          <h5>workout</h5>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-md-6">
        <div class="counter-stat">
          <i class="icofont icofont-hand-power"></i>
          <span class="counter"><?php echo esc_html($teams); ?></span></span>
          <h5>team</h5>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-md-6">
        <div class="counter-stat">
          <i class="icofont icofont-shield-alt"></i>
          <span class="counter"><?php echo esc_html($projectworks); ?></span></span>
          <h5>projectworks</h5>
        </div>
      </div>
    </div>
  </div>
</section>
<?php
    endif;
?>

排查与修复步骤 #

• 验证字段组显示规则：进入ACF字段组设置，确认「位置」规则已正确匹配当前页面/文章类型（比如选择「页面」等于目标页面，或「文章类型」对应模板所属类型），规则不匹配会直接导致字段值无法被获取。
• 核对字段Slug一致性：确认代码中get_field('cifr')的cifr与ACF中创建的组字段Slug完全一致（大小写敏感），同时子字段client、workout、teams、projectworks的Slug也需和ACF后台设置完全对应。
• 调试变量确认取值：在$cifr = get_field('cifr');后添加var_dump($cifr); die;，查看页面输出：
  • 若输出bool(false)或NULL，说明未获取到字段组数据，需回到前两步检查规则和Slug；
  • 若输出数组结构，说明字段数据已获取，继续排查其他问题。
• 修复HTML语法错误：代码中第2、3、4个统计区块存在多余的</span>闭合标签，会破坏HTML结构导致渲染异常，修正后对应代码块如下：

<div class="col-lg-3 col-sm-6 col-md-6">
  <div class="counter-stat">
    <i class="icofont icofont-rocket"></i>
    <span class="counter"><?php echo esc_html($workout); ?></span>
    <h5>workout</h5>
  </div>
</div>
<div class="col-lg-3 col-sm-6 col-md-6">
  <div class="counter-stat">
    <i class="icofont icofont-hand-power"></i>
    <span class="counter"><?php echo esc_html($teams); ?></span>
    <h5>team</h5>
  </div>
</div>
<div class="col-lg-3 col-sm-6 col-md-6">
  <div class="counter-stat">
    <i class="icofont icofont-shield-alt"></i>
    <span class="counter"><?php echo esc_html($projectworks); ?></span>
    <h5>projectworks</h5>
  </div>
</div>

• 确认模板应用正确：检查当前页面是否使用了包含这段代码的模板，可通过WordPress后台「页面」编辑界面的「模板」选项确认。

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