WordPress中如何设置首个手风琴标签展开其余折叠

原代码存在的问题： #

• 变量$i未提前初始化，循环时无法正确判断是否为第一个项目
• 在echo字符串拼接里直接写if语句属于语法错误，PHP不支持这种写法
• 使用the_content()会直接输出内容，导致它脱离当前echo结构，打乱HTML布局
• 所有手风琴按钮的aria-expanded都设为true，不符合语义规范，只有展开面板的对应按钮才应设为true

修正后的代码： #

<?php
if ( $the_query->have_posts() ) {
    echo '<div class="accordion" id="accordionPanelsStayOpenExample">';
    // 初始化计数器变量
    $i = 0;
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        // 判断是否为第一个项目，控制show类和aria-expanded状态
        $is_first = $i === 0;
        $show_class = $is_first ? 'show' : '';
        $aria_expanded = $is_first ? 'true' : 'false';
        
        echo '<div class="accordion-item">';
        echo ' <h2 class="accordion-header" id="panelsStayOpen-heading'.get_the_ID().'">
                <button class="accordion-button '.($is_first ? '' : 'collapsed').'" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse'.get_the_ID().'" aria-expanded="'.$aria_expanded.'" aria-controls="panelsStayOpen-collapse'.get_the_ID().'">'
                  . get_the_title() . '
                </button>
              </h2>';
        echo '<div id="panelsStayOpen-collapse'.get_the_ID().'" class="accordion-collapse collapse '.$show_class.'" aria-labelledby="panelsStayOpen-heading'.get_the_ID().'">
              <div class="accordion-body">
              '
                  . get_the_content() . '
              </div>
            </div>';
        // 计数器递增
        $i++;
    }
    echo '</div>';
    wp_reset_postdata(); // 重置查询，避免影响后续全局变量
} else {
    echo '<p>暂无内容</p>';
}
?>

关键修正点说明： #

• 提前初始化$i = 0，循环结束后执行$i++实现计数
• 用三元运算符替代错误的if写法，通过$i === 0判断是否为第一个项目，动态添加show类
• 同步调整手风琴按钮的collapsed类和aria-expanded属性：第一个按钮不添加collapsed，aria-expanded设为true，其余项目相反
• 把the_content()换成get_the_content()，确保内容以字符串形式返回，而非直接输出，保证HTML结构完整
• 添加wp_reset_postdata()，这是WordPress循环后的标准操作，避免全局post变量混乱

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