WordPress评论ajax动态加载,解决静态缓存下评论不更新问题

这是一个历史遗留问题,自从博客部署了PHP纯静态缓存之后,所有页面都是html静态内容了,而且在七牛CDN静态分离之后,速度更是达到极致!WordPress评论ajax动态加载,解决静态缓存下评论不更新问题

不过也带来不少疑难问题,在之前写的《启用WP Super Cache纯代码版本之后的一些优化措施》一文中已经总结一些解决办法。其中为了解决用户无法看到最新回复的问题,我也想了多个办法,比如成功提交评论就会删除该页缓存、右下角集成清理缓存按钮等。在我多次改进之后,已经趋向于完美,而且这个php缓存优化也是张戈博客有偿服务最受欢迎的项目之一。

前不久,有朋友拿我的网站练手,用大量代理IP对我的博客进行DDos攻击,无奈之下博客临时转入到百度云加速。转入之后,如果把云加速的页面缓存也打开,那么就有了2层缓存:【CDN节点的html缓存】和【服务器的html缓存】。那么我之前写的ajax清理缓存以及评论删除缓存失去了效果,因为只能删除本地的html缓存,而CDN节点的缓存百度并未提供API控制接口,所以用户看到的还是缓存内容!

当然,不是强迫症的话,直接关闭百度的页面缓存就可以了!但这只是逃避问题,而没有解决问题!所以,本文就分享一下,强迫症是如何解决这个非必须问题的。

一、自动动态加载评论

这是我最初想到的、而且是老早就想实现一种方案:当静态的html页面加载时,评论部分实时从数据库动态拉取数据,由于是纯静态下的html页面,所以这个功能需要JS+Ajax来实现。

①、php评论动态拉取接口代码

Ps:代码的原理就不赘述了,主要用到wp_list_comments内置函数,感兴趣的可以自行了解下。

以上代码保存为php文件,比如ajax-comments.php,保存到网站根目录,备用。

②、Ajax评论请求代码

以上代码可以直接贴到网站的footer.php当中。如果你要添加到js文件中,请除去首尾的script标签,而且post_id值需要在外部通过php动态定义(搞不清的还是直接贴footer吧)

特别说明下,2段代码中的【.commentlist】是指评论列表的class,比如知更鸟主题的评论列表的是<ol class="commentlist">评论列表</ol>,实际上请根据主题的评论列表class或ID来自行修改!

部署无误之后,每次页面加载都会动态去拉取一次最新的评论,并呈现给用户。

优点:每次打开页面用户都能看到最新评论;

缺点:每次打开页面都会动态拉取评论,降低了纯静态效果,拉取的评论分页有点误差(影响不大)。

二、手动动态刷新评论

这个方法灵感源自网络上流行的评论分页Ajax加载:点击评论的下一页,不会刷新整个页面,而是通过ajax拉取被点击那个分页的全部内容,然后找到评论部分并加载。

简单解释下原理:

比如,张戈博客的留言板,有100页评论,那么第99页的评论地址应该是:http://zhangge.net/liuyan/comment-page-99/,当点击【99】这个分页链接时,将触发ajax函数,先隐藏当前分页的所有评论,然后ajax拉取第99页的内容,然后将评论部分加载出来,实现不刷新页面来加载评论。

分析了这个过程,我们可以发现一个特征关键字,那就是分页地址后面的 comment-page-xx !这是个好东西,因为我可以在云加速和本地的缓存中排除这个关键词的缓存即可!也就说,浏览器直接访问带comment-page-xx这类关键词的地址,就略过缓存,加载动态内容!

WordPress评论ajax动态加载,解决静态缓存下评论不更新问题

因此,当我们部署了ajax评论分页,点击其他分页将会显示非缓存内容!但是这还不是我需要的,因为我想要当前页面也实现动态评论。也许聪明人会说,你点到其他评论分页,再点回来不就好了嘛?

确实,实现ajax评论分页后,我点到其他评论分页,然后再点回来,确实可以实现评论刷新,但是却用了2次点击!

好,下面我们换个角度,既然 comment-page-xx 是动态页面,那么comment-page-1肯定也是动态页面咯!

于是就有2种情况:第一种,文章评论数量还不够生成分页,那这时候只要拉取comment-page-1就可以了;第二种,评论已经存在分页,那么只要拉取这个comment-page-【页码】即可,所以ajax拉取之前,我们只要通过js判断来决定要拉取的目标地址即可。

那么,js如何判断评论是否有分页了呢?很简单,先分析下网页代码:

WordPress评论ajax动态加载,解决静态缓存下评论不更新问题

可以发现分页是有分页对应的class的,那么js只要判断这个class是否存在就好啦!而且我还可以发现当前的分页和其他分页的class还是不一样的:当前分页的class是【page-numbers current】,而 其他分页则是【page-numbers】,如以此来,我们还可以用js代码 $('.page-numbers.current').html() 获得当前分页的页码!!!

那问题就好解决了,我们只要先判断是否存在分页,然后根据不同情况抓取不同的目标地址即可!

下面开始分享代码:

使用方法很简单,把这个代码添加到主题已有的js中,然后在任意位置新增一个ID为refresh的html元素即可,比如:

Ps:这个代码参考修改自:《WordPress Ajax 评论分页 | Kayo's Melody》,因此如果没看懂ajax评论分页,本文分享的也会看得稀里糊涂的,尤其是代码中的ID元素,不同主题是不一样的。

本文分享的方法和思路,如果不是真正需要,我想会看得很痛苦,因为我写的也很痛苦!很多地方不好解释,因为你没有需求,就可能看不懂!!但是,只要是我用心折腾过的功能,我都想分享出来,网络这个林子那么大,不可能就没有同样需求的人吧?!有时候,【解决思路】真心比【实现代码】来的更加难得!

这种看似很复杂的文章,实际上,光看文章是很费解的,个人建议结合自己的需求,然后对比张戈博客的页面源代码去参考,会更容易理解一些。

好了,废话说了够多了,还是那句话,文章是分享给真正有需要的人,没有需求,又说不出个甲乙丙丁的人,建议不要在本文浪费口水,说三道四比较好!

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:38   其中:访客  30   博主  8

  1. 忆楼阁 0 来自天朝的朋友 谷歌浏览器 Windows 8.1 山东省滨州市 电信

    学习了,强迫症啊!

  2. 梦想网络 5 来自天朝的朋友 火狐浏览器 Windows 10 四川省成都市 电信

    这个正是 :evil: 我想说的。。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      你想说啥?

  3. 幻杀博客 5 来自天朝的朋友 谷歌浏览器 Windows 10 山东省潍坊市 联通

    我想说,还是多说方便

    • 同盟源 5 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省芜湖市 电信

      我对多说是彻底死心了

  4. 度哥网 3 来自天朝的朋友 火狐浏览器 Windows 7 湖北省武汉市 联通

    我用的评论插件,好像没有这问题

  5. 灰常记忆 4 来自天朝的朋友 火狐浏览器 Windows XP 陕西省西安市 电信

    看着好麻烦的说!

  6. 大谋士网 0 来自天朝的朋友 谷歌浏览器 Windows 7 云南省昆明市呈贡县 电信

    方便了许多。

  7. 同盟源 5 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省芜湖市 电信

    不错学习了

  8. David 4 来自天朝的朋友 谷歌浏览器 Windows 8.1 北京市 中国学术信息中心

    这个功能值得搞,我用了你那个缓存后评论总是不更新。
    还有,Nginx+wordpress缓存值得借鉴的一点是,对于已经登录的不进行缓存,可以解决登录信息的缓存问题。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows Server 2003 湖南省长沙市 电信

      你说的也能实现,结合我之前的nginx下的wp super cache规则就可以,自己琢磨吧!

  9. 度娘程序员 0 来自天朝的朋友 谷歌浏览器 Windows 7 重庆市 电信

    测试一下

  10. 艾薇百科 3 来自天朝的朋友 Opera浏览器 Windows 7 北京市海淀区 北京舒华士科技有限公司

    我以前也用了缓存来加速,始终有强迫症,感觉文章不及时更新很别扭。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市罗湖区 电信

      本地的缓存已添加更新文章自动刷新首页和分类的机制,可惜云加速CDN没有提供更新借口,否则也不存在这个尴尬。

  11. IT十万为什么 1 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 联通

    速度好快啊,也是生成了html静态吗? :mrgreen:

  12. 软件海 3 来自天朝的朋友 谷歌浏览器 Windows 8.1 陕西省西安市 电信

    目前正急需这个,我现在用360全站缓存,就因为不能实时刷新评论,我不得已用了第三方社会化评论,但是加载速度确实不给力,而且这不是我想要的。
    很开心看见博主的这篇文章,只是确实有些复杂难懂,正在慢慢消化中

  13. 软件海 3 来自天朝的朋友 谷歌浏览器 Windows 8.1 陕西省西安市 电信

    谢谢,已经部署成功了,完全删除了第三方社会化评论

  14. E享乐 0 来自天朝的朋友 谷歌浏览器 Windows 7 福建省厦门市 电信

    感觉利用分页不大靠谱,分页并不是只加载评论,等于把整个页面加载了一遍,会成为累赘。

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      是这个理。

  15. 七支剑 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

    那个刷新评论无法点击 然后我用下面这个方法也无法刷新

  16. 交通事故律师 4 来自天朝的朋友 搜狗浏览器 Windows XP 广东省广州市 电信

    请问张哥,我的wordpress站点是自带的评论框,开启WPJAM七牛镜像存储插件所引发的评论错误,{“error”:”get from image source failed: E405″} ,我安装网上的方法:http://www.inlojv.com/errorget-from-source-failed-e405-qiniucdn.html,操作后还是出现一样的错误。如何解决呢?

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市福田区 电信

      因为你只改好了本地的,七牛已经缓存的并没有修改。用谷歌浏览器打开这个地址看下就可以看到你改的内容并没有出现:http://cdn.jtsg.org/wp-content/themes/begin/js/comments-ajax.js?ver=1439695137
      2个解决办法:1、去7牛刷新这个文件 2、修改文件名,并且修改模板引入文件名。

      • 交通事故律师 4 来自天朝的朋友 搜狗浏览器 Windows XP 广东省广州市 电信

        谢谢张哥,我查看后,已经是修改过的文件了,http://cdn.jtsg.org/@/wp-content/themes/begin/js/comments-ajax.js,里面就多了一句代码“js_url = js_url.replace(‘cdn.jtsg.org’,’www.jtsg.org’); ”这就奇怪了,明明是已经修改过的,重新上传的js文件,为何引用的却没有这句代码

      • 交通事故律师 4 来自天朝的朋友 搜狗浏览器 Windows XP 山西省太原市 联通

        谢谢张哥,我知道怎么回事了,解决了

  17. helsinglee 2 来自天朝的朋友 谷歌浏览器 Windows 10 贵州省贵阳市 联通

    没反应额,点击没发生什么事情…

  18. MCf服主网 1 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省惠州市 鹏博士长城宽带

    在根目录使用ajax-comments.php后500错误怎么破~这里

  19. sam 0 来自天朝的朋友 火狐浏览器 Windows 10 上海市浦东新区 电信

    测试一下

  20. 谢子扬 0 来自天朝的朋友 Safari浏览器  Android 5.1 smart-phone Build/LMY47D 北京市 移动

    为什么我的网站评论每次都要刷新页面。。

  21. 小雪 0 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省 电信

    测试后没效果,不会使用

  22. 丁春华 1 来自天朝的朋友 谷歌浏览器 Windows 10 四川省达州市 电信

    张哥:第一种方法自动提取评论,是不是失效了?我测试不下于10遍,没有成功,刷新后还是不能显示刚刚评论过的内容,用的阿里CDN+Super Static Cache,begin主题中的ol也已经更正为comment-list,请问是哪里的问题啊?

    • iot 1 来自天朝的朋友 谷歌浏览器 Windows 10 山东省滨州市 电信

      请问你的解决了么,我也是阿里CDN+Super Static Cache,遇到这个问题了。

  23. DIYgod 0 来自天朝的朋友 谷歌浏览器 Mac OS X 10_12_0 浙江省杭州市 电信

    现在是ajax评论么?

  24. iot 1 来自天朝的朋友 谷歌浏览器 Windows 10 山东省滨州市 电信

    张老师,阿里云CDN+Super Static Cache测试无效求解。

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      必须要在缓存中排除关键词 comment-page-

  25. 小1 0 来自天朝的朋友 谷歌浏览器 Windows 10 山西省大同市 联通

    我为什么不能评论,奇怪了?

  26. 李先生 0 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信

    张哥哥 现在你博客用的已经不是ajax刷新了吧 看了下response是静态的了

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      手动触发ajax刷新

加载中,请稍候...