WordPress分页评论Ajax载入

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

2014-03-11 19:10 Update
在js文件中beforeSend最后一行添加:
$body.animate({scrollTop: $('#comments').offset().top - 65}, 800 );

$body.animate({scrollTop: $(‘#comments-list-title’).offset().top – 65}, 800 );
/*
$body 代表 body 的 DOM,$(‘#comments-list-title’).offset().top – 65
是评论列表的标题到页面顶部的距离再减去 65。
因此这一句是控制整个页面向上滑动到评论列表标题的位置以下 65 像素(再往下 65 像素是为了确保能看到这个标题),
800 是滑动的时间,800毫秒。

WordPress Ajax 评论分页

$(selector).animate(styles,options)
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。
.animate : http://www.w3school.com.cn/jquery/effect_animate.asp

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。
scrollTop : http://www.w3school.com.cn/jquery/css_scrolltop.asp

offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
.offset : http://www.w3school.com.cn/jquery/css_offset.asp
*/

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


嗯,对了,今天是一位好兄弟的生日~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...

发表评论

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