如何在 ACF 短代码中基于字段名动态输出不同 HTML 结构？

本文介绍一种使用 php `switch` 语句统一处理多个 acf 字段的短代码方案，避免为每个字段重复编写函数，提升可维护性与扩展性。

在 WordPress 中结合 Advanced Custom Fields（ACF）开发短代码时，若需为不同字段（如 distance、time、price 等）渲染带图标和标签的定制化 HTML，硬编码多个独立短代码函数（如 acf_shortcode_distance、acf_shortcode_time）会导致大量重复逻辑，显著增加维护成本。理想方案是复用单一短代码函数，根据传入的 field 参数动态匹配渲染规则。

推荐采用 switch 语句替代冗长的 if/elseif 链——它语义清晰、执行高效，且便于后续新增字段类型：

function acf_field_shortcode( $atts ) {
    // 解析短代码参数，默认值预设
    $atts = shortcode_atts( array(
        'field'       => '',
        'post_id'     => false,
        'format_value' => true,
    ), $atts );

    // 字段名为空则直接返回空字符串
    if ( empty( $atts['field'] ) ) {
        return '';
    }

    // 获取 ACF 字段值
    $value = get_field( $atts['field'], $atts['post_id'], $atts['format_value'] );
    if ( empty( $value ) ) {
        return '';
    }

    // 若值为数组，转为逗号分隔字符串（抑制警告使用 @ 已不推荐，改用 is_array + implode 更安全）
    if ( is_array( $value ) ) {
        $value = implode( ', ', array_map( 'esc_html', $value ) );
    } else {
        $value = esc_html( $value );
    }

    // 根据字段名动态生成 HTML —— 核心逻辑区
    switch ( strtolower( $atts['field'] ) ) {
        case 'distance':
            $html = '@@##@@<br><p>Distance: ' . $value . '</p>';
            break;
        case 'time':
            $html = '@@##@@<br><p>Time: ' . $value . '</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>';
            break;
        case 'price':
            $html = '@@##@@<br><p>Price: ' . $value . '</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/2158" title="拍我AI"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175680310874179.png" alt="拍我AI"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2158" title="拍我AI">拍我AI</a>
                                                                        <p>AI视频生成平台PixVerse的国内版本</p>
                                                                </div>
                                                                <a href="/ai/2158" title="拍我AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>';
            break;
        case 'location':
            $html = '<span class="icon-location"></span><p>Location: ' . $value . '</p>';
            break;
        default:
            // 未匹配字段：返回纯文本值（或自定义兜底样式）
            $html = '<p>' . $value . '</p>';
            break;
    }

    return $html;
}
add_shortcode( 'acf_field', 'acf_field_shortcode' );

使用方式示例：

[acf_field field="distance"]  
[acf_field field="time" post_id="123"]  
[acf_field field="price" format_value="false"]

✅ 关键优化点说明：

• 安全性强化：所有输出均经 esc_html() 或 esc_url() 过滤，防止 XSS；SVG 路径使用 get_template_directory_uri() 确保主题路径正确；
• 健壮性提升：strtolower() 统一字段名大小写，避免因输入 DISTANCE 或 Distance 导致匹配失败；
• 可扩展性强：新增字段只需在 switch 中添加 case 分支，无需改动函数结构；
• 语义清晰：switch 明确表达“字段名 → 渲染模板”的映射关系，远优于嵌套条件判断。

⚠️ 注意事项：

• 图标路径建议存放在主题 /assets/images/ 下，并通过 get_template_directory_uri() 引用，确保子主题兼容；
• 若字段值含富文本（如 WYSIWYG），需改用 apply_filters('the_content', $value) 替代 esc_html()；
• 复杂模板建议抽离为独立模板文件（如 acf-field-templates.php），通过 include 加载，进一步解耦逻辑与视图。

此方案将 15+ 字段的短代码维护量降至单函数级别，兼顾性能、安全与可读性，是 ACF 高阶集成的推荐实践。