Advanced Custom Fields：如何在Elementor模板中实现WordPress ACF自定义复选框字段内容以项目符号列表展示

嘿，这个需求太常见了！很多用ACF+Elementor做房产类网站的开发者都会遇到这个问题，其实有几种简单的方式能把逗号分隔的复选框内容转成美观的项目符号列表，我给你整理了几个实用方法：

方法1：直接用HTML模块+PHP代码（最快上手） #

这是最直接的方式，不需要额外加过滤器或短代码：

1. 在Elementor编辑器里，拖一个HTML模块到你想展示配套设施的位置；
2. 把下面的代码粘贴进去，记得把'你的复选框字段名'替换成你ACF里实际的字段名称（比如'property_amenities'）：

<?php
// 获取ACF复选框字段值
$amenities = get_field('你的复选框字段名');
// 判断字段是否有内容
if( $amenities ): ?>
  <ul style="list-style-type: disc; margin-left: 20px;">
    <?php foreach( $amenities as $amenity ): ?>
      <li><?php echo esc_html($amenity); ?></li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>

3. 保存并预览页面，就能看到项目符号列表了。如果需要调整样式，直接修改<ul>里的style属性就行。

方法2：用自定义过滤器让Elementor自动转换 #

如果你不想每次都写PHP代码，可以给Elementor的动态标签加个过滤器，以后直接用动态标签就能输出列表：

1. 打开主题的functions.php文件（或者用自定义代码插件，比如Code Snippets，更安全）；
2. 粘贴下面的代码，同样替换'你的复选框字段名'为实际字段名：

function acf_checkbox_to_bullet_list( $value, $tag ) {
    // 只针对指定的ACF复选框字段生效
    if ( $tag->get_settings( 'key' ) !== '你的复选框字段名' ) {
        return $value;
    }
    // 如果字段为空，直接返回空
    if ( empty( $value ) ) return '';
    // 把逗号分隔的字符串转成数组
    $items = explode( ',', $value );
    // 清理掉空值和多余空格
    $items = array_filter( array_map( 'trim', $items ) );
    if ( empty( $items ) ) return '';
    // 生成项目符号列表
    $list_html = '<ul style="list-style-type: disc; margin-left: 20px;">';
    foreach ( $items as $item ) {
        $list_html .= '<li>' . esc_html( $item ) . '</li>';
    }
    $list_html .= '</ul>';
    return $list_html;
}
// 给Elementor动态标签绑定过滤器
add_filter( 'elementor/dynamic_tag/value', 'acf_checkbox_to_bullet_list', 10, 2 );

3. 回到Elementor编辑器，拖一个文本模块，插入ACF的复选框动态标签；
4. 保存后预览，动态标签输出的内容会自动变成项目符号列表。

方法3：自定义短代码（适合重复使用） #

如果这个配套设施列表要在多个页面或模板里用，写个短代码更方便：

1. 同样在functions.php或Code Snippets里添加这段代码：

function property_amenities_list_shortcode() {
    $amenities = get_field('你的复选框字段名');
    if( !$amenities ) return '';
    $output = '<ul style="list-style-type: disc; margin-left: 20px;">';
    foreach( $amenities as $amenity ) {
        $output .= '<li>' . esc_html($amenity) . '</li>';
    }
    $output .= '</ul>';
    return $output;
}
// 注册短代码
add_shortcode( 'property_amenities', 'property_amenities_list_shortcode' );

2. 在Elementor里拖一个短代码模块，输入[property_amenities]就可以调用了。

注意：不管用哪种方法，都要确保你用的字段名是正确的——如果ACF字段的“字段键”和“字段名”不一样，用字段键会更稳定哦。

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