WordPress分页评论Ajax载入

很久以前在网上乱逛,发现一种很好的效果,那就是评论分页可以ajax无刷新载入。当时就搜了一下教程只搜到了Kayo的文章,可是不知我哪里弄错了没成功。今年过年后在家无聊一鼓捣竟然被我整好了。分页的评论ajax无刷新载入其实多说就自带了这种效果,还有许多评论插件也有这些效果,不过本文介绍的是纯代码实现!

2014-03-11 19:10 Update
在js文件中beforeSend最后一行添加:

(所以多说用户就不需要折腾了。。。)好了,废话少说~
等等,还有一句废话。您可以先去留言板看看分页载入效果。


嗯,对了,今天是一位好兄弟的生日~So~特意选一个特殊的时间定时发布,22:22:22———
二货,生日快乐!


第一步 准备

  1. 后台“设置-讨论”启用评论分页,本站设置的是10条评论每页。(这里的10条指的是主评论,不含回复)
  2. 如果您使用主题的评论分页导航只有“早期评论“”较新评论”两个链接那么请用以下代码替换默认导航。
  3. 评论分页后据说会对seo造成一定的影响,因为这几页内容差不多相同但地址不一样,因此可以通过<meta>标签解决:
  4. 还需要设置一个Loading提示显示在加载评论时,不至于让用户感觉突然不知发生了什么。
    在主题comment.php里插入,假设评论内容是这样的结构。(一般都是这样的)

    这里我们需要记住各个模块的id和/或class,等下的关键代码需要对应你的结构修改选择器

第二步 加载jQuery库

是的,这是使用jquery库的代码。wordpress自带了jquery,但我们要的不是那个。(为什么?我怎么知道……)嗯,加载Google CDN的呗:

第三步 关键代码

这货才是关键。。。

第四步 CSS设置

本站是这样的:(好吧,CSS也是来自Kayo)

——————————————————————————————————————
OK!大功告成!!
主要参考自《WordPress Ajax 评论分页—KayoSite》

PS:使用2014默认主题的用户——
可以给评论导航加一个class,使它样式和文章分页一样好看:

<nav id=”comment-nav-above” class=”comments-navi navigation comment-navigation paging-navigation ” role=”navigation”>


“WordPress分页评论Ajax载入”的80个回复

Loading...
  1. 没有成功:没有效果…:(
    加了js后能出现loading,但就没下文了,你最后是怎么解决的呢?

  2. 看到博主分享这么多内容,特别想把这些内容让更多博友看到,如果博主能够经常跟其他博友互动,希望博主能够加入到“博客互推联盟”,这里有很多很勤奋的博友,和您一样,每天在坚持为大家分享好的内容。
    在这个互联网快速变革的时代,我们还在坚持,但我们不想孤军奋战,让更多博友看到你,让我们彼此多一点交流,一起发展。

发表评论

电子邮件地址不会被公开。 必填项已用*标注