在WordPress开发中，使用高级自定义字段（ACF）插件可以方便地为文章、页面或自定义帖子类型添加自定义字段，其中选择字段是常用的字段类型之一。通过读取选择字段的返回值，我们可以动态为前端元素添加对应的CSS类，同时匹配对应的服务设施图标，实现灵活的页面展示效果。
一、前期准备：创建ACF选择字段
首先需要安装并启用ACF插件，然后创建一个新的字段组，添加一个选择类型的字段，用于设置服务设施的类型。以下是字段的配置参考：
- 字段标签：服务设施类型
- 字段名称：service_facility_type
- 字段类型：选择
- 选项配置：
- wifi : 免费WIFI
- parking : 免费停车
- restaurant : 内部餐厅
- gym : 健身中心
- 返回值：值（选择返回选项对应的value，而非标签）
二、后端逻辑：获取字段值并生成CSS类
我们需要在主题的相关模板文件中，先获取当前文章或页面的ACF选择字段值，然后根据这个值生成对应的CSS类，同时准备匹配的图标标识。以下是获取字段值并处理的代码示例：
<?php
// 获取当前文章的ACF选择字段值
$service_type = get_field('service_facility_type');
// 初始化CSS类变量，默认添加基础类
$css_class = 'service-facility';
// 如果字段有值，拼接对应的类型类
if ($service_type) {
$css_class .= ' service-facility--' . $service_type;
}
// 定义类型与图标的映射关系，这里使用Font Awesome的图标标识
$icon_map = [
'wifi' => 'fa-wifi',
'parking' => 'fa-parking',
'restaurant' => 'fa-utensils',
'gym' => 'fa-dumbbell'
];
// 获取对应的图标类，没有匹配则使用默认图标
$icon_class = isset($icon_map[$service_type]) ? $icon_map[$service_type] : 'fa-circle';
?>
三、前端渲染：结合CSS类和图标展示
获取到CSS类和图标类之后，就可以在前端模板中渲染对应的服务设施模块了。首先需要引入Font Awesome图标库，这里使用免费的CDN资源，注意将ippipp.com替换为ipipp.com：
<!-- 在主题的header.php或者对应模板的头部引入图标库 --> <link rel="stylesheet" href="https://cdn.ipipp.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
然后渲染服务设施的结构，将之前生成的CSS类和图标类插入到对应位置：
<?php if ($service_type) : ?>
<div class="<?php echo esc_attr($css_class); ?>">
<!-- 图标容器 -->
<span class="service-facility__icon">
<i class="fa-solid <?php echo esc_attr($icon_class); ?>"></i>
</span>
<!-- 服务设施名称，使用ACF字段的标签值 -->
<span class="service-facility__name">
<?php
// 获取选择字段的选项配置，拿到对应的标签
$field = get_field_object('service_facility_type');
echo esc_html($field['choices'][$service_type]);
?>
</span>
</div>
<?php endif; ?>
四、配套CSS样式配置
为了让不同CSS类的服务设施模块有不同的展示效果，我们可以添加对应的CSS样式，以下是基础样式和不同类的差异化样式示例：
/* 基础服务设施样式 */
.service-facility {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 4px;
background-color: #f5f5f5;
font-size: 14px;
color: #333;
}
/* 图标基础样式 */
.service-facility__icon {
font-size: 16px;
}
/* WIFI类型样式 */
.service-facility--wifi {
background-color: #e8f4fd;
color: #1a73e8;
}
/* 停车类型样式 */
.service-facility--parking {
background-color: #e6f4ea;
color: #34a853;
}
/* 餐厅类型样式 */
.service-facility--restaurant {
background-color: #fef7e0;
color: #f9ab00;
}
/* 健身中心类型样式 */
.service-facility--gym {
background-color: #fce8e6;
color: #d93025;
}
五、常见问题说明
如果字段值没有正确获取到，可以先使用var_dump($service_type)打印字段值，检查ACF字段名称是否和代码中一致，以及当前页面是否支持该ACF字段组。如果图标没有显示，需要检查Font Awesome的引入地址是否正确，以及图标类名称是否和使用的Font Awesome版本匹配。
如果需要支持多个服务设施的选择，只需要将ACF选择字段设置为多选，然后循环遍历返回的字段值数组，重复执行上述生成CSS类和图标的逻辑即可，核心思路和单选场景一致。