本文详解如何在 wordpress 前端正确渲染 acf 多用户字段，实现结构化列表展示（含公司名、姓名、电话及可点击的 mailto 邮箱链接），并规避常见语法错误与安全风险。
本文详解如何在 wordpress 前端正确渲染 acf 多用户字段，实现结构化列表展示（含公司名、姓名、电话及可点击的 mailto 邮箱链接），并规避常见语法错误与安全风险。
在使用 Advanced Custom Fields（ACF）插件管理「多用户选择」字段（如 pds_construction_coordinators）时，前端需将关联的多个用户以清晰、语义化且可交互的方式呈现。原始代码存在三处关键问题：一是 PHP 标签嵌套错误（ 导致解析失败）；二是未转义输出内容，存在 XSS 风险；三是
被置于 而非
，导致列表闭合失效。
以下是经过重构、安全加固且语义规范的推荐写法：
<?php
$users = get_field('pds_construction_coordinators');
if ($users && is_array($users)) : ?>
<ul class="user-directory">
<?php foreach ($users as $user) :
$user_id = (int) $user['ID'];
$user_email = sanitize_email($user['user_email']);
$user_display_name = esc_html($user['display_name']);
$user_company = esc_html(get_field('company_name', 'user_' . $user_id));
$user_phone = esc_html(get_field('phone_number', 'user_' . $user_id));
// 邮箱 URL 编码确保安全性与兼容性
$mailto_url = 'mailto:' . rawurlencode($user_email);
?>
<li>
<strong><?php echo $user_company; ?></strong><br>
<?php echo $user_display_name; ?><br>
<?php echo $user_phone; ?><br>
<a href="<?php echo esc_url($mailto_url); ?>"
title="发送邮件给 <?php echo $user_display_name; ?>">
<?php echo $user_email; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>✅ 关键优化说明：
-
结构合规：所有
保留在 - 内部，
- 正确闭合；
- 安全防护：使用 esc_html() 过滤显示文本，esc_url() 和 rawurlencode() 处理 mailto: 链接，sanitize_email() 验证邮箱格式；
- 健壮性增强：增加 is_array() 和空值判断，避免 foreach 在空字段时触发警告；
- 可维护性提升：添加语义类名（如 user-directory），便于 CSS 定制；title 属性提升可访问性；
- 性能友好：避免重复调用 get_field()，必要时可预取用户元数据批量优化。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 确保 ACF 字段返回的是标准用户数组（含 ID, user_email, display_name 等键），若使用「用户对象」模式，需调整取值方式（如 $user->ID）；
- company_name 和 phone_number 等自定义用户字段需已在 ACF 中为「User」类型配置完成；
- 如需响应式布局或图标美化，建议通过 CSS 控制（例如使用 ::before 添加邮箱图标），而非硬编码 HTML 实体。
掌握此模式后，您可轻松扩展为卡片式布局、模态联系表单或集成 Gravatar 头像——核心逻辑始终围绕「安全获取 → 规范输出 → 语义标记」展开。
