WordPress分页评论Ajax载入

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

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

<code>$body.animate({scrollTop: $('#comments').offset().top - 65}, 800 );</code>
 
$body.animate({scrollTop: $('#comments-list-title').offset().top - 65}, 800 );
/*
$body 代表 body 的 DOM，$(‘#comments-list-title’).offset().top – 65 
是评论列表的标题到页面顶部的距离再减去 65。
因此这一句是控制整个页面向上滑动到评论列表标题的位置以下 65 像素（再往下 65 像素是为了确保能看到这个标题），
800 是滑动的时间，800毫秒。
http://kayosite.com/?p=1916#comment-8925
 
$(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———
二货，生日快乐！

第一步准备

后台“设置-讨论”启用评论分页，本站设置的是10条评论每页。（这里的10条指的是主评论，不含回复）
如果您使用主题的评论分页导航只有“早期评论“”较新评论”两个链接那么请用以下代码替换默认导航。
```
  < ?php paginate_comments_links('prev_text=«&next_text=»');?>

 
```

评论分页后据说会对seo造成一定的影响，因为这几页内容差不多相同但地址不一样，因此可以通过<meta>标签解决：

 
//添加在主题header.php
<?php if( is_single() || is_page() ) {
  if(function_exists('get_query_var') ) {
    $cpage = intval(get_query_var('cpage'))
    $commentPage = intval(get_query_var('comment-page'));
  }
  if( !empty($cpage) || !empty($commentPage) ) {
    echo ''
    echo "n";
  }
}
?>

还需要设置一个Loading提示显示在加载评论时，不至于让用户感觉突然不知发生了什么。
在主题comment.php里插入，假设评论内容是这样的结构。（一般都是这样的）

<div id="comments" class="comments-area">
	<h2 class="comments-title">本文有%条评论

<!--评论分页的Loading-->
<div id="loading-comments">  Loading </div>

	<lnav id="comment-nav-above" class="comments-navi navigation comment-navigation paging-navigation " role="navigation">
		<?php paginate_comments_links('prev_text=«&next_text=»');?>
		
	</nav>

	<ol class="comment-list">
		< ?php
			wp_list_comments( array(
				'style'      => 'ol',
				'short_ping' => true,
				'avatar_size'=> 34,
			) );
		?>
	</ol>

	<nav id="comment-nav-below" class="comments-navi navigation comment-navigation paging-navigation " role="navigation">

		<?php paginate_comments_links('prev_text=«&next_text=»');?>
	</nav>

</div>

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

第二步加载jQuery库

是的，这是使用jquery库的代码。wordpress自带了jquery，但我们要的不是那个。（为什么？我怎么知道……）嗯，加载Google CDN的呗：

<script type=”text/javascript” src=”http://ajax.useso.com/ajax/libs/jquery/2.0.3/jquery.min.js”>

第三步关键代码

这货才是关键。。。

/*wordpress评论分页ajax载入
 *
 *关键代码来自Kayo
 *《WordPress Ajax 评论分页》
 *http://kayosite.com/ajax-turn-page-for-wordpress-comments-list.html
 *
 *参考 http://fatesinger.com/731.html
 *
 *注释由 霖博客 http://youthlin.com/?p=480
 *
 */
 
//代码写在ready里
jQuery(document).ready(function($) {
  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
  //以下选择器均需对应你自己的网站相应的修改！
  $(document).on('click', '.comments-navi a', function(e) {//点击页码时执行
    e.preventDefault();//禁止浏览器按常规载入新页面
    $.ajax({//ajax无刷新载入评论
    /*
    *请参考W3CSchool的教程
    *jQuery ajax - ajax() 方法
    *http://www.w3school.com.cn/jquery/ajax_ajax.asp
    */
      type: "GET",
      url: $(this).attr('href'), //获取要打开页面的地址
      beforeSend: function() {//发送数据之前执行的函数

         //移除评论导航和评论
         $('.comments-navi').remove();
         $('.comment-list').remove();
         
         $('#loading-comments').slideDown();//滑入Loading提示
          ////////////////////////////////这里加一句：
         $body.animate({scrollTop: $('#comments').offset().top - 65}, 800 );
         },//beforeSend
      dataType: "html",//返回的是html
      success: function(out) {//成功接收数据后执行的函数
         result = $(out).find('.comment-list');//从返回数据中(html类型)找到评论
         abovenav = $(out).find('#comment-nav-above');//上导航栏
         belownav = $(out).find('#comment-nav-below');//下导航栏
         $('#loading-comments').slideUp(550);//向上淡出Loading
         $('#loading-comments').after(result.fadeIn(800));//淡入评论(result)到Loading的后面(.after)
        result.before(abovenav);//插入上导航栏到评论之前
        result.after(belownav);//插入下导航栏到评论之后
         }//success
    });//$.ajax
  });//function(e)
});//ready
/*
 *如果您的主题只有评论下方的导航的话，
 *那么就不需要上面那个abovenav
 */

第四步 CSS设置

本站是这样的：（好吧，CSS也是来自Kayo）

<style> 
#loading-comments {
display: none; //不显示，只在触发关键代码时滑入页面
width: 100%; //宽度匹配页面宽度
height: 45px; //45像素高
background: #a0d536; //背景淡绿色
text-align: center; //文本居中
color: #fff; //文本颜色
font-size: 22px; //字体大小
line-height: 45px;//行高45像素
}
 </style>

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

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