分类
wordpress

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———
二货,生日快乐!


第一步 准备

  1. 后台“设置-讨论”启用评论分页,本站设置的是10条评论每页。(这里的10条指的是主评论,不含回复)
  2. 如果您使用主题的评论分页导航只有“早期评论“”较新评论”两个链接那么请用以下代码替换默认导航。
    
     
  3. 评论分页后据说会对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";
      }
    }
    ?> 
  4. 还需要设置一个Loading提示显示在加载评论时,不至于让用户感觉突然不知发生了什么。
    在主题comment.php里插入,假设评论内容是这样的结构。(一般都是这样的)

    <div id="comments" class="comments-area">
    	<h2 class="comments-title">本文有%条评论
    
    <!--评论分页的Loading-->
    <div id="loading-comments"> loading 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,使它样式和文章分页一样好看:

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


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

发表评论

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

[/鼓掌] [/难过] [/调皮] [/白眼] [/疑问] [/流泪] [/流汗] [/撇嘴] [/抠鼻] [/惊讶] [/微笑] [/得意] [/大兵] [/坏笑] [/呲牙] [/吓到] [/可爱] [/发怒] [/发呆] [/偷笑] [/亲亲]

Loading提交中

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据