实现高性能WordPress AJAX文章分页

本文来自发哥，此方法使用了html5的pushState和onpopstate，支持浏览器前进后退按钮并且无刷新改变url。需要有一定基础的童鞋才可操作~

pushState使用方法

var state = {
    title: title,
    url: options.url,
    otherkey: othervalue
};
window.history.pushState(state, document.title, url);

onpopstate使用方法

window.addEventListener('popstate', function(e){
  if (history.state){
    var state = e.state;
    //do something(state.url, state.title);
  }
}, false);

如何应用到WordPress？

首先我们需要对后端进行处理，使除了当前使用ajax可以无刷新浏览外，还可以直接请求改变的URL后也可以正常浏览。方法是对使用pushState的ajax发送一个特殊的头，当后端获取到的时候通用的部分不再输出~

感谢mufeng提供的技术支持。

大致代码如下，具体根据主题不同可以略微有差别，编辑index.php，改成如下结构

<?php
if(isset($_GET["action"]) && $_GET["action"] == "ajax_postsss"){
nocache_headers();?>
.....文章内容....
<?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 是翻页标签