一些访问量大的博客某篇文章评论很多是常事儿,就算是我这等小博客,留言页面评论也很多,所以解决这个问题是有必要的。以前写过一篇《 WordPress评论非插件实现ajax翻页》用来解决这个问题。现在我这个W1主题上也采用了wordpress后台设置分页,前台利用ajax方法切换评论分页。其实这种方法,感觉也不是很好,我觉得还是采用无限分页的方法比较好玩。主要看到某熊猫写了个评论伪ajax载入的东东,我就把原来的ajax评论翻页改造一下。另外我觉得把旧评论放在首页不是一个好办法,就重新设计了一下,具体说来需求就是:
1、页面开始只显示最后的评论,排列顺序由旧到新。开启自带的分页,每页n条评论,数量由后台控制。
2、点击下一页载入前面的评论,每次ajax请求n条评论。
我这样做是优先显示最后的评论,感觉这样处理比较好用。当然有点不符合一般习惯,是逆序排列评论。遇到一个问题,不管是开始展示的评论还是ajax载入逆序评论楼层数必须对的上,应该是10.9.8…<<点击上一页>>..4.3.2这样的顺序,处理起来稍微麻烦了一点。废话不说了,看demo,点击评论看看。
<<<<<<<<<<<<<<<<<分割>>>>>>>>>>>>>>
下面附上代码,我保证一定很复杂,不是老手就不要尝试了,我不负责回答基本问题,请google☞,修改不成功风险自担。
一、前提准备:
1. 主题必须支持嵌套
2.设置WP嵌套评论排序为“由新到旧”
3. 主题有使用 mytheme_comment 回调函数(http://codex.wordpress.org/Template_Tags/wp_list_comments)
4.准备逆序显示评论。参考zww的倒序显示主评论楼层号(支持评论分页)(顺序显示评论当然跳过这一步)
二、Wordpress无限评论翻页
1.显示评论的分页
在主题comment.php里找到<?php paginate_comments_links(); ?>前面加上一段:
<span id=”cp_post_id" style=”display:none;”>
<?php echo $post->ID; ?>
</span>
如果找不到<?php paginate_comments_links(); ?>,那就在分页代码,如上一页、下一页(具体看你主题)前加这个,其实也可以加到评论部分之前或之后的任意地方。这段的代码的作用是输出postid以便传入参数,如果你的文章div给出了postid,那也就不需要了。
另外,应该有paginate_comments_links这个函数改造成下面这样的形式。(没有请自行添加在wp_list_comments函数之后)
paginate_comments_links('prev_text=>>查看更多留言&echo=0')
'prev_text‘参数是用来自定义显示的文字。替换默认的“上一页”
2.Ajax的php响应
<?php
//ajax无限评论翻页by winy
function AjaxCommentsPage(){
if( isset($_GET['action'])&& $_GET['action'] == 'AjaxCommentsPage' ){
global $post,$wp_query, $wp_rewrite;
$postid = isset($_GET['post']) ? $_GET['post'] : null;
$pageid = isset($_GET['page']) ? $_GET['page'] : null;
if(!$postid || !$pageid){
fail(__('Error post id or comment page id.'));
}
// get comments
$comments = get_comments('post_id='.$postid);
$post = get_post($postid);
if(!$comments){
fail(__('Error! can\'t find the comments'));
}
if( 'desc' != get_option('comment_order') ){
$comments = array_reverse($comments);
}
// set as singular (is_single || is_page || is_attachment)
$wp_query->is_singular = true;
// base url of page links
$baseLink = '';
if ($wp_rewrite->using_permalinks()) {
$baseLink = '&base=' . user_trailingslashit(get_permalink($postid) . 'comment-page-%#%', 'commentpaged');
}
// response 下一行WinyskyComments注意修改callback为你自己的回调函数
wp_list_comments('reverse_top_level=1&callback=WinyskyComments&type=comment&max_depth=10000&page=' . $pageid . '&per_page=' . get_option('comments_per_page'), $comments); //reverse_top_level保证逆序
echo '<!--winysky-AJAX-COMMENT-PAGE-->';
echo '<div id="comment_pager">';
paginate_comments_links('prev_text=>>查看更多留言¤t=' . $pageid . $baseLink);
echo '</div>';
die;
}
}
add_action('init', 'AjaxCommentsPage');
和以前那一篇ajax翻页的响应部分一样,唯一修改的就是逆序显示评论。
3、Ajax评论的js处理
先写个函数
//ajax事件
function ajacpload(){
jQuery('#comment_pager a').click(function(){//注意修改锚点,下同
var wpurl=jQuery(this).attr("href").split(/(\?|&)action=AjaxCommentsPage.*$/)[0];
var commentPage = 1;
if (/comment-page-/i.test(wpurl)) {
commentPage = wpurl.split(/comment-page-/i)[1].split(/(\/|#|&).*$/)[0];
} else if (/cpage=/i.test(wpurl)) {
commentPage = wpurl.split(/cpage=/)[1].split(/(\/|#|&).*$/)[0];
};
//alert(commentPage);
var postId =jQuery('#cp_post_id').text();
//alert(postId);
var url = wpurl.split(/#.*$/)[0];
url += /\?/i.test(wpurl) ? '&' : '?';
url += 'action=AjaxCommentsPage&post=' + postId + '&page=' + commentPage;
//alert(url);
var loading='<div id="qs-info">正在努力读取中......</div>';
var pager=jQuery('#comment_pager').html();
jQuery.ajax({
url:url,
type: 'GET',
beforeSend: function() {
jQuery('#comment_pager').empty().html(loading);
},
error: function(request) {
alert(request.responseText);
},
success:function(data){
var responses=data.split('<!--winysky-AJAX-COMMENT-PAGE-->');
jQuery('#thecomments').append(responses[0]).slideDown("1000");
jQuery('#comment_pager').empty().html(responses[1]);
jQuery('#comment_pager').show();
//下面是js的重载,重要!!
ajacpload();
//添加其他需要重载的函数
}
});
return false;
});
}
注意根据自己主题修改,还有函数的重载。至少自身当然要重载一次,因为DOM变化了,当然用jQury1.4版本以后的.live()方法也可以,只是不支持IE。其他需要重载的函数指的是什么回复引用按钮点击什么的,这么说吧,只要是评论部分的特效,全部再调用一次,推荐写成函数形式。
上面的函数在jQuery(document).ready里面调用就好了。
还有一个问题,paginate_comments_links显示了评论页码,觉得不爽,我想个办法给去掉,只显示上一页。用jQuery来处理:
$('#comment_pager').find("a").eq(0).nextAll().remove();//只显示上一页链接
$('#comment_pager').find("span").parent().remove();//到第一页了,分页全部移除
这个也放在.ready()里面,当然ajax后也需要再调用一次。
总结,可以看到,其实这和ajax翻页评论的原理基本一样,只是前段处理的方法略有不同而已。
最后,如果你想顺序显示评论,那更简单,相信上面的方法稍微改改就行。这里就不再赘述了。教程什么的真费事~