WordPress插件自定义文章类型AJAX加载更多按钮重复加载数据求助

你遇到的重复加载相同数据的核心问题在于offset的计算错误，还有前后端参数不匹配、变量未持久化这些细节问题，咱们一步步来修复：

1. 前端脚本：修复offset变量的持久化与初始值 #

你的前端代码每次点击按钮时都会把offset重置为1，导致每次AJAX请求都加载相同的偏移量数据。而且初始offset应该从已加载的文章数量开始，不是固定1。

修改后的前端脚本：

(function ($) {
    $(document).ready(function () {
        // 从按钮的data属性获取初始参数（后面会在短码里添加这些属性）
        const loadMoreBtn = $(".more-posts");
        let offset = parseInt(loadMoreBtn.data('initial-offset'));
        const postsPerPage = parseInt(loadMoreBtn.data('posts-per-page'));

        loadMoreBtn.on("click", function (e) {
            e.preventDefault();
            // 禁用按钮防止重复点击
            $(this).prop('disabled', true).text('Loading...');

            $.ajax({
                url: wp_ajax_object.ajax_url,
                data: {
                    action: "more_listings_ajax",
                    offset: offset,
                    posts_per_page: postsPerPage // 把每页数量传给后端
                },
                success: function (data) {
                    if (data) {
                        $('.list-items').append(data);
                        offset += postsPerPage; // 每次偏移量增加每页数量
                        loadMoreBtn.prop('disabled', false).text('Load more');

                        // 如果没有更多数据，隐藏按钮
                        if (data.trim().length === 0) {
                            loadMoreBtn.hide();
                        }
                    } else {
                        loadMoreBtn.hide();
                    }
                },
                error: function (data) {
                    console.log(data);
                    loadMoreBtn.prop('disabled', false).text('Load more');
                }
            });
        });
    });
})(jQuery);

2. 短码代码：修复orderby错误并传递参数给前端 #

你的短码里orderby的值'post__in date'是无效语法（除非你有post__in参数），而且需要把初始偏移量和每页数量通过data属性传给前端按钮：

修改后的短码函数：

public function list($atts) {
    // 提取短码属性，设置默认值
    $atts = shortcode_atts(array(
        'limit' => 3, // 设置默认每页数量
    ), $atts);

    $loop_args = array(
        'orderby' => 'date', // 修复无效的orderby值
        'order' => 'DESC',
        'post_type' => 'listing',
        'posts_per_page' => $atts['limit'],
    );
    $loop = new WP_Query($loop_args);
    ob_start();
?>
<div class="listings-wrapper">
    <div class="js-filter container <?php echo $single_cas; ?>">
        <div class="list-items">
            <?php while ($loop->have_posts()) : $loop->the_post();
                include LISTINGS_BASE_DIR . 'templates/shortcodes/list-toplist.php';
            endwhile; ?> <!-- 补全之前遗漏的endwhile闭合 -->
        </div>
    </div>
    <?php if ($loop->max_num_pages > 1) : ?>
        <div class="more-posts" 
             data-initial-offset="<?php echo $atts['limit']; ?>" 
             data-posts-per-page="<?php echo $atts['limit']; ?>">
            Load more
        </div>
    <?php endif; ?>
</div>
<?php
    wp_reset_postdata();
    return ob_get_clean();
}

• 修复了orderby的错误语法，去掉了无效的post__in部分
• 添加了shortcode_atts来设置默认的limit值，避免属性未定义的问题
• 在加载更多按钮上添加了data-initial-offset和data-posts-per-page属性，把初始偏移量（已加载的文章数）和每页数量传给前端
• 补全了endwhile;的闭合标签（之前的代码注释掉了，会导致语法错误）

3. AJAX处理函数：匹配前后端参数与排序规则 #

你的后端函数里posts_per_page硬编码为1，而且排序是ASC，和短码的DESC不一致，导致加载的顺序混乱，同时需要接收前端传来的posts_per_page参数：

修改后的AJAX处理函数：

add_action('wp_ajax_nopriv_more_listings_ajax', 'more_listings_ajax');
add_action('wp_ajax_more_listings_ajax', 'more_listings_ajax');
function more_listings_ajax() {
    // 验证参数，避免恶意请求
    $offset = isset($_REQUEST["offset"]) ? intval($_REQUEST["offset"]) : 0;
    $posts_per_page = isset($_REQUEST["posts_per_page"]) ? intval($_REQUEST["posts_per_page"]) : 3;

    $loop_args = array(
        'post_type' => 'listing',
        'post_status' => 'publish',
        'posts_per_page' => $posts_per_page,
        'orderby' => 'date',
        'order' => 'DESC', // 和短码排序保持一致
        'offset' => $offset,
    );
    $loop = new WP_Query($loop_args);
    ob_start(); // 使用输出缓冲来捕获模板内容
    while ($loop->have_posts()) : $loop->the_post();
        include LISTINGS_BASE_DIR . 'templates/shortcodes/list-toplist.php';
    endwhile;
    wp_reset_postdata();
    // 输出捕获的内容
    echo ob_get_clean();
    die();
}

• 添加了参数验证，确保offset和posts_per_page是合法的整数
• 把status改成post_status（WP_Query的正确参数名）
• 匹配短码的排序规则（orderby和order）
• 使用输出缓冲来正确获取模板内容，避免直接输出可能导致的问题
• 移除了硬编码的posts_per_page，改用前端传来的值

额外优化说明 #

前端脚本里添加了按钮禁用状态，防止用户重复点击；当没有更多数据时自动隐藏按钮，提升用户体验。

现在按照这些修改后，应该就能解决重复加载相同数据的问题了，前后端的参数保持一致，offset也会正确递增，加载的内容顺序也和初始列表保持一致。

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