wordpress实现高性能的ajax文章分页功能。首先我们需要对后端进行处理,使除了当前使用AJAX可以无刷新浏览外,还可以直接请求改变的URL后也可以正常浏览。方法是对使用pushState的AJAX的发送一个特殊的头,当后端获取到的时候通用的部分不再输出〜
大致代码如下,具体根据主题不同可以略微有差别,编辑的index.php,改成如下结构
<?php
if(isset($_GET[“action”]) && $_GET[“action”] == “ajax_postsss”){
nocache_headers();?>
…..需要ajax调出来的部分….
<?php }else{
get_header() ;
?>
…..文章内容….
<?php get_sidebar() ;?>
<?php get_footer() ;?>
<?php }?>
在引用JQ库的情况下使用此代码实现:
jQuery(document).ready(function(a) {
var n = null, H = false, i = document.title, t, h = window.opera ? document.compatMode == “CSS1Compat” ? a(“html”) :a(“body”) :a(“html,body”);
if (window.history && window.history.pushState) {
a(document).on(“click”, “.content-page a”, function(b) {
b.preventDefault();
if (n == null) {
t = {
url:document.location.href,
title:document.title,
html:a(“#content”).html(),
top:h.scrollTop()
};
} else {
n.abort();
}
t.top = h.scrollTop();
var q = a(this).attr(“href”).replace(“?action=ajax_postsss”, “”);
a(“.content-page”).text(“\u6587\u7ae0\u52a0\u8f7d\u4e2d\x2e\x2e\x2e”);
n = a.ajax({
url:q + “?action=ajax_postsss”,
success:function(v) {
H = true;
var state = {
url:q,
title:i,
html:v
};
history.pushState(state, i, q);
document.title = i;
h.animate({
scrollTop: 0
},
0);
a(“#content”).html(v);
}
});
return false;
});
window.addEventListener(“popstate”, function(i) {
if (n == null) {
return;
} else {
if (i && i.state) {
H = true;
document.title = i.state.title;
a(“#content”).html(i.state.html);
} else {
H = false;
document.title = t.title;
a(“#content”).html(t.html);
h.animate({
scrollTop: t.top
},
0)
}
}
});
}
});
#content 标签要包含文章列表和翻页导航, .content-page a 是翻页标签,内容请根据你自己的网页模板修改。