如何在HTML字符串拼接时嵌入while循环输出WordPress自定义文章类型元数据

你的代码核心是PHP语法错误：PHP不支持直接在字符串拼接语句中嵌入while这类流程控制结构，你现在的写法把while循环直接放在了return语句的字符串拼接操作符中间，PHP无法正常解析。

正确的实现逻辑是先初始化一个空字符串变量存储HTML内容，分段拼接内容：

1. 先拼接section、容器、行标签的开头部分
2. 在while循环内逐次拼接每篇文章对应的员工卡片HTML片段
3. 循环结束后重置文章数据，再拼接剩余的闭合标签
4. 最后返回完整的HTML字符串

另外你代码里还有两个容易忽略的问题：

• get_post_meta第三个参数传false时会返回数组，直接输出会显示Array文本，需要改成true获取单个字符串值
• 所有输出到HTML的变量需要加转义处理，避免XSS安全隐患，属性值用esc_attr()，文本内容用esc_html()

修正后的完整代码：

function staffSectionOutput($props) {
    $args = array(  
        'post_type' => 'staff_section',
        'category_name' => 'senior'
    );
    
    $loop = new WP_Query( $args ); 
    // 初始化HTML变量
    $html = '<section class="staff">
                <div class="container">
                    <div class="row">';
    
    while ( $loop->have_posts() ) { 
        $loop->the_post(); 
        // 第三个参数传true获取单值
        $employeeName = get_post_meta( get_the_ID(), 'staff-employee-name', true );
        $employeJob = get_post_meta( get_the_ID(), 'staff-employee-job-title', true );
        $employeDescription = get_post_meta( get_the_ID(), 'staff-employee-description', true );
        $employeUrl = get_post_meta( get_the_ID(), 'staff-employee-url', true );
        // 追加当前员工卡片HTML，增加转义
        $html .= '<div class="col-12 col-sm-6 col-md-4">
                    <div data-description="'. esc_attr($employeUrl) .'">
                        <div class="card-head">
                            <img src="'. esc_attr($employeUrl) .'">
                        </div>
                        <div class="card-body">
                            <div class="text">
                                <h4>'. esc_html($employeeName) .'</h4>
                                <span>'. esc_html($employeJob) .'</span>
                            </div>
                            <div class="btn-a">Learn More</div>
                        </div>
                    </div>
                </div>';
    }
    wp_reset_postdata();
    // 拼接尾部闭合标签
    $html .= '</div>
            </div>
        </section>';
    return $html;
}

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