index.php中无法同时使用两个Splide.js轮播组件求助

你遇到的复制轮播组件后页面无内容的问题，大概率和WordPress的全局数据冲突、PHP变量覆盖或调试缺失有关，以下是具体排查和解决步骤：

1. 先开启PHP错误调试 #

复制组件后无内容很可能是PHP代码报错导致输出中断，先开启WordPress的调试模式：
在wp-config.php中添加或修改以下代码：

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

之后查看wp-content/debug.log文件，就能找到具体的错误信息（比如自定义字段不存在、WP_Query参数错误等）。

2. 避免变量名重复导致的冲突 #

复制组件后，两个组件使用了相同的变量名（如$args、$carousel_query），会导致第二个组件的变量被第一个覆盖，修改第二个组件的变量名：

// 第二个组件的WP_Query部分修改为：
$args2 = array(
    'post_type' => 'my_carousel',
    'posts_per_page' => 5,
);
$carousel_query2 = new WP_Query($args2);

if ($carousel_query2->have_posts()) :
    while ($carousel_query2->have_posts()) :
        $carousel_query2->the_post();
// 后续循环内的代码保持不变，endwhile和endif对应修改为$carousel_query2

3. 确保全局Post数据正确重置 #

把wp_reset_postdata()移到endif外面，确保无论有没有帖子都能恢复全局Post数据，避免影响后续组件的循环：

<?php
    endwhile;
else :
    echo '<p>There is no content to display</p>';
endif;
wp_reset_postdata(); // 移到endif之后
?>

4. 测试静态内容排除动态数据问题 #

如果修改变量后还是无内容，把第二个组件的动态PHP部分换成静态HTML，比如：

<div class="splide__slide">
    <div class="card">
        <img src="https://example.com/test.jpg" alt="Test">
        <div class="main_text">
            <a href="#"><h1>测试标题</h1></a>
            <div class="author"><h2><i class="fa-solid fa-chalkboard-user"></i> 测试作者</h2></div>
            <div class="text_child_box">
                <div class="text_child_rate">
                    <h3>99 $ </h3>
                    <div class="main_rate">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-regular fa-star"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如果静态内容能显示，说明是动态数据（WP_Query或自定义字段）的问题，需要检查自定义post类型my_carousel是否有足够的帖子，或者自定义字段（如post_image、Author）是否正确设置。

5. 检查主题设置字段的唯一性 #

如果第二个组件的标题部分也没显示，说明get_theme_mod('landingpage_learnslider_title')对应的主题设置字段可能只配置了一次，若需要第二个组件显示不同的标题，需要在主题的自定义izer中添加新的设置字段（比如landingpage_learnslider_title2），然后修改第二个组件的标题代码：

<h1><?php echo get_theme_mod('landingpage_learnslider_title2'); ?></h1>
<h3><?php echo get_theme_mod('landingpage_learnslider_description2'); ?></h3>

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