最新消息:欢迎加入小松的QQ群一起讨论一起学习,服务器快到期了,新买了台服务器,最近要做服务器迁移

wordpress 修改ajax评论分页

wordpress 651浏览 0评论

今天小松又大修改了今天的评论,主要是发现【留下脚印】 评论太多,导致页面拉的很长,用户看起来也不是很好,于是就想对评论做个分页

①wordpress开启评论分页

评论分页的设置在后台【设置】-【讨论】,下面是我的配置参数

wordpress开启评论分页

②评论分页seo优化

这里设置好评论就会分页了,但是对seo方面就会有问题,评论分页的页面title,keywords ,description 都一样的,对搜索引擎来说这个是同一个页面,所以要把评论分页页面屏蔽搜索引擎抓取
有两种方式屏蔽
第一种用meta方式

<?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 '<meta name="robots" content="noindex, nofollow" />';
    echo "\n";
  }
}
?>

第二种用修改robots.txt,添加下面一行

Disallow: /*#comments

③添加ajax评论

这里已我的评论样式来讲,下面的我的comments.php显示评论的代码,主要是看id和class样式,要跟js选择器对应上

<div id="postcomments">
  <h3 id="comments">
  网友最新评论
  </h3>
  <ol class="commentlist">
    ....
  </ol>
  <div class="pagenav" id="comments-navi">
  .....
  </div>
</div>

在<ol class=”commentlist”>上面添加下面的代码,当然你也可以修改加载时候的样式,我的是Loading图片加”加载中,请稍候”的文字

<div id="loading-comments"><img src="<?php echo get_bloginfo('template_directory').'/img/Loading.gif' ?>">加载中,请稍候...</div>

对应上面的css样式

<style>
#loading-comments {background: #fff;
display: none;
width: 100%;
line-height: 45px;
text-align: center;
margin: 0 0 10px 0;
border: 1px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
border-radius: 2px; }
</style>

添加下面的js代码,首先你必须添加jquery,主要跟上面html代码的id和class对应上

<script>
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');
$('#comments-navi a').live('click', function(e){
  e.preventDefault();
  $.ajax({
    type: "GET",
    url: $(this).attr('href'),
    beforeSend: function(){
    $('#comments-navi').remove();
    $('.commentlist').remove();
    $('#loading-comments').slideDown();
    $body.animate({scrollTop: $('#comments').offset().top - 65}, 800 );
  },
  dataType: "html",
  success: function(out){
    result = $(out).find('.commentlist');
    nextlink = $(out).find('#comments-navi');
    $('#loading-comments').slideUp('fast');
    $('#loading-comments').after(result.fadeIn(500));
    $('.commentlist').after(nextlink);
  }
  });
});
</script>

修改之后ajax评论就实现了,但是我发现,我评论里的图片都使用了延时加载的方式,如果用ajax调出来的评论就不会显示图片,要把图片延时加载去除,用直接显示的方式。

最后修改好,如果有问题请留言,修改好的样式请查看http://www.phpsong.com/guestbook

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» wordpress 修改ajax评论分页
本文链接地址:https://www.phpsong.com/1579.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!

网友最新评论 (1)

加载中,请稍候...
  1. 写的真心不错,非常详细,强烈推荐
    浪荡天涯1年前 (2015-11-09)回复