wordpress 修改ajax评论分页

今天小松又大修改了今天的评论，主要是发现【留下脚印】 评论太多，导致页面拉的很长，用户看起来也不是很好，于是就想对评论做个分页
①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
查看原文：http://www.phpsong.com/1579.html