本文介绍如何在 wordpress 中通过 acf（advanced custom fields）选择字段动态渲染前端功能列表，为每个选中的选项添加独立 css 类与 font awesome 图标，并确保语义化、可维护且安全地输出内容。

本文介绍如何在 wordpress 中通过 acf（advanced custom fields）选择字段动态渲染前端功能列表，为每个选中的选项添加独立 css 类与 font awesome 图标，并确保语义化、可维护且安全地输出内容。

在使用 ACF 的 Select（单选）或 Checkbox（多选）字段管理餐厅或场所的“设施/服务”（如预订、外带、配送）时，常见需求是：仅显示后台勾选的项目，每项独占一行，并各自对应专属图标。你最初的代码存在两个关键问题：

1. get_field('amenities_rest') 返回的是数组（即使为单选，ACF 在新版中默认返回含 value/label 键的关联数组；若为多选则返回数组的数组），而你直接用 $amenities['value'] 访问，会导致错误或空值；
2. 尝试将整个数组作为类名拼接，语法不合法且无法匹配多个选项。

   ✅ 正确做法是：遍历所有选中项，为每一项生成独立的 HTML 元素（推荐

3. ），并基于其 value 动态添加 CSS 类
。你已发现的 foreach 方案是标准解法，以下是优化后的完整教程：

✅ 推荐实现（支持多选 & 单选，安全可靠）

<?php 
$amenities = get_field('amenities_rest');
if ($amenities && is_array($amenities)) : ?>
  <ul class="amenities-list nodecoration">
    <?php foreach ($amenities as $amenity) :
      // 确保 $amenity 是关联数组（ACF >= 6.2 多选返回数组，单选返回单个数组）
      $value = isset($amenity['value']) ? $amenity['value'] : (is_string($amenity) ? $amenity : '');
      $label = isset($amenity['label']) ? $amenity['label'] : (is_string($amenity) ? $amenity : '');
      ?>
      <li class="amenities-<?php echo esc_attr(sanitize_html_class($value)); ?>">
        <?php echo esc_html($label); ?>
      </li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>

? 对应 CSS（Font Awesome 5/6 兼容写法）

.amenities-list {
  list-style: none;
  padding: 0;
}
.amenities-list li {
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 各设施专属图标（使用伪元素 + Font Awesome） */
.amenities-reservation::before { content: "\f59f"; } /* ? reservation */
.amenities-takeout::before   { content: "\f07a"; } /* ? takeout */
.amenities-delivery::before { content: "\f48e"; } /* ? delivery */
.amenities-parking::before  { content: "\f1b9"; } /* ? parking */

.amenities-list li::before {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 400;
  display: inline-block;
  width: 1.2em;
  text-align: center;
  margin-right: 8px;
}

? 提示：sanitize_html_class() 比 esc_attr() 更适合处理 CSS 类名，它会自动移除非法字符并转换空格为连字符，避免因选项值含空格/特殊符号导致类名失效。

⚠️ 注意事项与增强建议

• 字段类型确认：确保 ACF 字段「Return Format」设为 Array（默认），而非 Value 或 Label。若设为 Value，$amenities 将是字符串或字符串数组，需调整遍历逻辑；
• 图标字体加载：确保已在主题中正确引入 Font Awesome（推荐 CDN 或本地集成），并注意 v5/v6 的字体族名称差异；
• 无障碍增强：如需更高可访问性，可为图标添加 aria-hidden="true"，并在
• 内包裹 包裹文本；
• 备用方案（纯 PHP 切换）：若不想依赖 CSS 伪元素，也可在 PHP 中直接输出 标签，但会增加模板复杂度，降低样式灵活性。

此方案结构清晰、安全严谨，完美支持 ACF 多选/单选场景，且易于扩展新设施项——只需新增 CSS 规则，无需修改 PHP 逻辑。