如何在WordPress中设置首个FAQ手风琴展开其余收起

要实现首个手风琴标签默认展开、其余收起的效果，你可以利用WP_Query内置的current_post属性（从0开始计数）判断当前条目是否为第一个，动态添加Bootstrap的show类，同时修正按钮的无障碍属性。另外需要注意原代码中手风琴容器的位置错误——每个条目不应单独包裹在accordion容器里，需统一放在同一个容器下才能保证手风琴功能正常。

修改后的完整代码 #

<?php
$mypost = array( 'post_type' => 'faqs', );
$loop = new WP_Query( $mypost );
?>
<div class="accordion" id="accordionPanelsStayOpenExample">
    <?php while ( $loop->have_posts() ) : $loop->the_post();?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-<?php the_ID(); ?>">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" 
                            data-bs-target="#panelsStayOpen-collapse<?php the_ID(); ?>" 
                            aria-expanded="<?php echo $loop->current_post === 0 ? 'true' : 'false'; ?>" 
                            aria-controls="panelsStayOpen-collapse<?php the_ID(); ?>">
                        <?php the_title(); ?>
                    </button>
                </h2>
                <div id="panelsStayOpen-collapse<?php the_ID(); ?>" 
                     class="accordion-collapse collapse <?php echo $loop->current_post === 0 ? 'show' : ''; ?>" 
                     aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">
                    <div class="accordion-body">
                        <strong><?php the_content(); ?></strong>
                    </div>
                </div>
            </div>
        </article>
    <?php endwhile; ?>
</div>
<?php wp_reset_query(); ?>

关键修改说明 #

• 手风琴容器位置调整：将<div class="accordion">移至循环外部，确保所有FAQ条目属于同一个手风琴组件，这是Bootstrap手风琴正常工作的核心前提。
• 动态添加show类：通过$loop->current_post === 0判断是否为第一个条目，为其折叠面板追加show类，实现默认展开效果。
• 修正无障碍属性：第一个按钮的aria-expanded设为true，其余设为false，符合Bootstrap的无障碍规范。
• 修复HTML错误：闭合了原代码中未关闭的<strong>标签，避免页面结构异常。

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