WordPress自定义查询拉取文章，加载更多设每次拉6篇异常如何解决

核心问题根源 #

问题由两个原因共同导致：

1. 分页偏移计算逻辑不匹配：初始页拉取5篇文章，后续Ajax请求直接用paged参数计算分页的话，WordPress默认偏移公式是(分页页数 - 1) * 每页文章数，如果Ajax拉取时posts_per_page设为6、传page=2，偏移会被算成6，直接跳过前6篇文章，但你前台已经展示了前5篇，就会出现漏文、甚至总文章数不足时返回空的情况。
2. 参数类型未做校验转换：如果前端传的ppp是字符串类型，未转成整数直接传入WP_Query，会导致参数识别失败，查询不到文章。

解决步骤 #

1. 修正前端JS逻辑 #

抛弃原有的page分页计数逻辑，改为按加载次数自定义计算偏移量，避免和初始页的文章数冲突：

// 记录加载更多的触发次数，初始为1
var loadTimes = 1;
// 后续每次固定拉取6篇文章
var ajaxPpp = 6;

jQuery("body").on("click", ".btnLoadMoreblog", function(){
   var ajaxUrl = document.location.origin + '/';
   var ajaxurla = ajaxUrl + "wp-admin/admin-ajax.php";
   jQuery('.loading-image img').css('display', 'block');
   jQuery.post(ajaxurla, {
       action: "loadmoreblog",
       ppp: ajaxPpp,
       // 手动计算偏移：初始已加载5篇，每次加载追加offset
       offset: 5 + (loadTimes - 1) * ajaxPpp,
   })
   .done(function (postsa) {
       if(postsa.trim() !== ''){
           jQuery('.viewmore-btn').before(postsa);
           loadTimes++;
       }else{
           // 无更多文章时隐藏加载按钮
           jQuery('.btnLoadMoreblog').hide();
       }
       jQuery('.loading-image img').css('display', 'none');
   })
});

2. 修正后端Ajax处理逻辑 #

替换paged参数为前端传的自定义偏移，同时对传入参数做整数转换：

// 校验参数并转成整数，避免参数类型错误导致查询失败
$ppp = isset($_POST["ppp"]) ? intval($_POST["ppp"]) : 6;
$offset = isset($_POST["offset"]) ? intval($_POST["offset"]) : 5;

$args = array(  
       'post_type' => 'products',
       'post_status' => 'publish',
       'posts_per_page' => $ppp,
       // 用自定义偏移替代默认分页计算
       'offset' => $offset,
       'orderby' => 'ID',
       'order' => 'DESC',
       // 不需要统计总文章数，提升查询性能
       'no_found_rows' => true,
);
$posts = new WP_Query( $args );

// 后续正常循环输出文章即可，6篇刚好填充2行3列，不会出现空列

补充注意事项 #

如果存在单次加载不足6篇的情况，可以在循环输出文章结束后，补充对应数量的空占位块，保证布局不会错乱。

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