通八洲科技

WordPress中AJAX“加载更多”按钮重复显示已有文章的解决方案

日期:2026-01-02 00:00 / 作者:花韻仙語

本文详解如何修复wordpress中ajax“加载更多”功能重复加载首页已显示内容的问题,核心在于正确传递并使用`paged`参数,确保每次请求获取全新分页数据。

在WordPress中实现AJAX驱动的“加载更多”功能时,一个常见却隐蔽的错误是:前端点击按钮后,后端返回的始终是前几篇(如第1页)的文章,而非预期的后续内容(如第2页、第3页)。正如您在front-page.php中初始展示4个热门商品,并希望通过按钮每次追加2个新商品,但实际却重复渲染了前两个商品——其根本原因在于:WP_Query未接收到有效的分页参数

在您当前的 functions.php 中,虽然从 $_POST['paged'] 正确提取了当前页码:

$paged = $_POST['paged'] ? $_POST['paged'] : 1;

但该变量并未传入查询参数 $args,导致 WP_Query 始终以默认值(即第1页)执行查询:

$args = array( 
    'post_type' => 'product',
    'posts_per_page' => 2,
    'post_status' => 'publish',
    'meta_key'  => 'hot',
    'meta_value' => true
    // ❌ 缺少 'paged' => $paged
);

修复方法:只需在 $args 中显式添加 'paged' => $paged

$args = array( 
    'post_type' => 'product',
    'posts_per_page' => 2,
    'paged' => $paged, // ✅ 关键修复:启用分页逻辑
    'post_status' => 'publish',
    'meta_key'  => 'hot',
    'meta_value' => true
);

此外,还需注意以下关键细节,避免衍生问题:

完成上述修正后,AJAX请求将严格按页码拉取对应区间的新商品,彻底解决重复加载问题,实现平滑、可扩展的无限加载体验。