昨

晚看了bigfa的一篇文章，也想试试wordpress文章无限加载ajax，不过他的代码比较难看懂，毕竟不是专业的。于是想到了用卢哥主题，从他那儿扒了一段下来。怎么说呢？分页加载和无限加载，还有一种无限下拉加载，三种各有优缺点。分页加载有那么一点利于SEO，对于单页显示的主题来说无限加载比较适应用户的体验，无限下拉没研究过，个人也不大喜欢。昨晚在修改本站底部的时候，想到了无限加载，于是就摆弄了一下，隐藏分页换上无限加载ajax。
下面这些代码来自卢哥主题，需要jQuery库的支持，本站使用的是1.8.3版。

首先是在首页文章列表下调用“下一页”函数。
在此之前有分页导航的要先去掉，类似pagination()这样的函数。用下面的代码进行替换。

<?php
$link_next_page = get_next_posts_link(__('加载更多...'));
if(!empty($link_next_page)){
?>
<div id="load-posts" class="load-more">
<div class="next-page">
<?php echo $link_next_page; ?>
</div>
</div>
<?php } ?>

然后是js，可以直接放到jquery里面。注意里面几个ID和类。

// 文章无限加载ajax
// 处理浏览器地址
function addUrlPara(url, para) {
var strArray = new Array();
strArray = url.split('?');
if (strArray.length == 1) {
if (url.indexOf('#') != -1) {
strArray = url.split('#');
return strArray[0] + '?' + para + '#' + strArray[1]
}
return url + '?' + para
} else {
if (url.indexOf(para) != -1) return url;
return strArray[0] + '?' + para + '&' + strArray[1]
}
}
function removeUrlPara(url, para) {
var strArray = new Array();
strArray = url.split(para);
if (strArray.length == 1) {
strArray = url.split('?' + para);
return strArray[0]
} else {
if (strArray[1].indexOf('&') != -1) {
strArray = url.split(para + '&');
return strArray[0] + strArray[1]
} else {
strArray = url.split('?' + para);
return strArray[0] + strArray[1]
}
}
}
// ajax部分
$("#load-posts a").live("click",
function() {
window.history.pushState({time: new Date().getTime()},"", removeUrlPara($(this).attr("href"), 'target=post'));
$('.load-more').fadeTo("normal", 0.4);
$.ajax({
type: "POST",
url: addUrlPara($(this).attr("href"), 'target=post'),
success: function(data) {
result = $(data).find(".post-box");
link = $(data).find(".load-more");
$(".load-more").remove();
$("#left").append(result);
$("#left").append(link);
document.title = $(data).filter("title").text();
$('.load-more').fadeTo("normal", 1);

}
});
return false
});

剩下就是CSS了，根据个人的站点进行样式化。That's all.