无插件在WordPress集成Bootstrap轮播图的代码排障求助

你现有代码存在以下可直接导致运行/显示异常的问题：

• 语法不匹配：使用foreach遍历页面列表，但循环闭合错误使用了endwhile（仅适配while循环），会直接触发PHP解析错误
• 参数格式错误：get_pages()的入参数组多嵌套了一层中括号，传入了二维数组，会导致查询条件不生效
• 逻辑冗余错误：重复执行了两次相同的页面查询与循环，且第一个循环内所有轮播项都添加了active类——Bootstrap轮播仅允许首个轮播项携带active类，全加会导致轮播布局错乱、无法正常切换
• 内容硬编码问题：轮播指示器写死为3个，和实际子页面数量不匹配；同时重复输出图片标签，既调用the_post_thumbnail()输出特色图，又写了个空src的img标签，会产生裂图
• 兼容性问题：硬编码父页面ID为5，后续调整父页面时需要手动改代码，维护性差

<div class="direction-carousel">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <?php
        // 自动获取slug为carousel的父页面ID，避免硬编码，若要固定使用ID=5可直接给$parent_id赋值为5
        $parent_id = get_page_by_path('carousel')->ID;
        // 正确构造查询参数，去掉多余数组嵌套
        $args = array(
            'hierarchical' => 1,
            'child_of'     => $parent_id,
            'parent'       => $parent_id, // 仅取直接子页面，要获取所有层级后代页面就改为-1
            'post_type'    => 'page',
            'post_status'  => 'publish',
            'sort_column'  => 'menu_order', // 按WordPress后台设置的页面排序输出
        );
        $carousel_pages = get_pages($args);
        $slide_count = count($carousel_pages);
        ?>
        
        <!-- 动态生成轮播指示器，数量和实际幻灯片数自动匹配 -->
        <ol class="carousel-indicators">
            <?php for($i=0; $i<$slide_count; $i++): ?>
            <li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" <?php echo $i===0 ? 'class="active"' : ''; ?>></li>
            <?php endfor; ?>
        </ol>

        <div class="carousel-inner">
            <?php 
            if($carousel_pages):
                $index = 0;
                foreach($carousel_pages as $post):
                    setup_postdata($post);
                    // 仅第一个轮播项添加active类
                    $active_class = $index === 0 ? 'active' : '';
            ?>
            <div class="carousel-item <?php echo $active_class; ?>">
                <?php 
                // 直接输出带Bootstrap所需类的特色图，移除多余空src的img标签
                the_post_thumbnail('direction-carousel', array(
                    'class' => 'd-block w-100',
                    'alt'   => get_the_title()
                )); 
                ?>
                <!-- 如需显示轮播标题/描述可取消下方注释
                <div class="carousel-caption d-none d-md-block">
                    <h5><?php the_title(); ?></h5>
                    <?php the_excerpt(); ?>
                </div> -->
            </div>
            <?php 
                $index++;
                endforeach;
                wp_reset_postdata(); // 循环结束后统一重置全局文章数据
            endif;
            ?>
        </div>

        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">上一张</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">下一张</span>
        </a>
    </div>
</div>

• 确认主题的functions.php中已添加add_theme_support('post-thumbnails');开启特色图功能；如果未注册direction-carousel自定义图片尺寸，可以把the_post_thumbnail的第一个参数改为full调用原图，也可以通过add_image_size('direction-carousel', 自定义宽度, 自定义高度, true);注册对应尺寸
• 确认主题已正确引入Bootstrap的JS和CSS资源，否则轮播不会自动切换，控制按钮点击也不会生效
• 如果carousel父页面固定ID为5不需要自动获取，可直接将$parent_id = get_page_by_path('carousel')->ID;替换为$parent_id = 5;

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