WordPress 文章列表实现AJAX无刷新翻页方法

我们通常在用WordPress做网站翻页，会制作分页导航，用户可以点击第一页、第二页……第 N 页。这样的分页功能就是通过超链接加载新的页面。效果例如下图：

除了这种点击加载型分页之外，还有一种无刷新翻页功能，现在也在很多网站中使用，就是 AJAX 无刷新翻页。点击后，不刷新页面的情况下，加载下一页的内容。下面就来介绍一下 AJAX 无刷新翻页的制作方法。

第一步：在页面的底部放上以下的代码，用于显示加载文字按钮；

<div class="post-read-more">
<?php next_posts_link('更多+','');//下一页的链接 ?>
</div>

第二步：将以下的 JS 加载代码保存到一个 JS 文件，保存名为 ajax.js；并且上传到自己模板文件夹下；

jQuery(document).ready(function($) {
//点击下一页的链接(即那个a标签)
$('div.post-read-more a').click( function() {
$this = $(this);
$this.addClass('loading'); //给a标签加载一个loading的class属性，可以用来添加一些加载效果
var href = $this.attr("href"); //获取下一页的链接地址
if (href != undefined) { //如果地址存在
$.ajax( { //发起ajax请求
url: href, //请求的地址就是下一页的链接
type: "get", //请求类型是get
 
error: function(request) {
//如果发生错误怎么处理
},
success: function(data) { //请求成功
$this.removeClass('loading'); //移除loading属性
var $res = $(data).find(".post"); //从数据中挑出文章数据，请根据实际情况更改
$('.posts-loop').append($res); //将数据加载加进posts-loop的标签中。
var newhref = $(data).find(".post-read-more a").attr("href"); //找出新的下一页链接
if( newhref != undefined ){
$(".post-read-more a").attr("href",newhref);
}else{
$(".post-read-more").hide(); //如果没有下一页了，隐藏
}
}
});
}
return false;
});
 
});

第三步：加载 ajax.js。在自己网页的底部放上以下的 JS 调用代码来加载 ajax.js 文件；

<script src="<?php echo get_template_directory_uri();?>/ajax.js"></script>

第四步：最后在分类列表的父 DIV 中添加一个 class 类：posts-loop；

如下：<div class="newslist posts-loop">

实现的加载结果：

<div class="newslist posts-loop">
<div id="post-1" class="post"><!--第一篇文章--></div>
<div id="post-2" class="post"><!--第二篇文章--></div>
<div id="post-3" class="post"><!--第三篇文章--></div>
<div id="post-4" class="post"><!--第四篇文章--></div>
</div>

完毕。