WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 实现高性能WordPress AJAX文章分页

实现高性能WordPress AJAX文章分页

PCDotFan9年前

实现高性能WordPress AJAX文章分页-WP酷本文来自发哥,此方法使用了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 是翻页标签

 

10
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (5)
再想想
  • 购物生活(好店品)

    暂时用不到,把网站尽量精简吧

    9年前
  • Fefa

    哎呀呀,搜什么总能跳到这来(表情在哪2333)

    9年前
    • WP酷

      @Fefa =w=表情已开

      9年前
    • 有逗比

      @WP酷 [织]

      9年前
  • 奥特幸运熊

    研究了一个晚上了,还是无法实现,我刚好就是使用mufeng的模版,能帮忙实现一下吗?我想要分页ajax效果。折腾一直没成功…

    7年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
付费主题推荐:Grace – 天生属于自媒体/极客用户 WordPress博客主题
7年前
多说新玩法系列 – 回复可见、站长回复、UA显示
8年前
BlueBox – 淘宝UED风格WordPress主题
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1