北极寒流 » 网络资源 » 实现高性能wordpress ajax文章分页功能 - 2018.12.05

实现高性能wordpress ajax文章分页功能

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 是翻页标签,内容请根据你自己的网页模板修改。

发表评论 【登录·注册】

所有留言都会被审核,请勿发布垃圾评论!

(必填)*