如何将两个ACF Group字段正确应用到同一个div元素
解决ACF两个Group字段应用到同一div的问题
你的核心错误是把Group字段当成了Repeater/Flexible Content这类可重复字段来处理,have_rows()函数是专门用来遍历可重复字段的,而Group是单一的字段组,直接调用子字段即可,不需要循环。
正确写法(基础场景)
如果两个Group字段是直接添加到文章/页面的自定义字段中,用以下代码即可:
<?php // 先获取整个Group字段的数据 $desktop_padding = get_field('desktop_padding'); $mobile_padding = get_field('mobile_padding'); // 确保两个Group字段都有值再输出div if ($desktop_padding && $mobile_padding) { // 拼接padding类名,同时用esc_attr转义避免XSS风险 $padding_classes = sprintf( 'padding-top-%s padding-bottom-%s mobile-padding-top-%s mobile-padding-bottom-%s', esc_attr($desktop_padding['desktop_padding_top']), esc_attr($desktop_padding['desktop_padding_bottom']), esc_attr($mobile_padding['mobile_padding_top']), esc_attr($mobile_padding['mobile_padding_bottom']) ); ?> <div class="<?php echo $padding_classes; ?>"> <!-- 这里放置div的内容 --> </div> <?php } ?>
如果你需要在Repeater/Flexible Content中使用
如果这两个Group字段是嵌套在某个可重复字段(比如Repeater)里的,需要先遍历外层的重复字段,再在循环内调用Group子字段:
<?php if (have_rows('your_repeater_field_name')): ?> <?php while (have_rows('your_repeater_field_name')): the_row(); ?> <?php $desktop_padding = get_sub_field('desktop_padding'); $mobile_padding = get_sub_field('mobile_padding'); if ($desktop_padding && $mobile_padding) { $padding_classes = sprintf( 'padding-top-%s padding-bottom-%s mobile-padding-top-%s mobile-padding-bottom-%s', esc_attr($desktop_padding['desktop_padding_top']), esc_attr($desktop_padding['desktop_padding_bottom']), esc_attr($mobile_padding['mobile_padding_top']), esc_attr($mobile_padding['mobile_padding_bottom']) ); ?> <div class="<?php echo $padding_classes; ?>"> <!-- 重复项的内容 --> </div> <?php } ?> <?php endwhile; ?> <?php endif; ?>
为什么你之前的写法失效?
- 嵌套循环:
have_rows('desktop_padding')会返回false,因为Group不是可重复字段,外层循环根本不会执行,自然输出不了div。 - 同时判断两个
have_rows():同理,两个条件都不成立,if语句块内的代码完全不会运行。
内容的提问来源于stack exchange,提问作者chrishughs
相关产品推荐
相关产品推荐

