以前写过一些关于jQuery的ajax在wordpress中的应用,其中提到了评论分页采用ajax翻页的效果,实现评论分页无刷新翻页。国外早有相关的插件,国内也有mg12写的ajax commmet page。这些都是js实现的,既然用到了jQuery框架,改写下简洁点,当然基本还是mg12插件的方法。我也参考了philna2主题里的代码,提取出来适应其他主题,没啥技术。其实原作者也写过一篇教程,可惜直接copy是不行的,仅写了一半,我这里給补全。
基本原理是获取评论分页数,文章id,通过jQuery ajax过程传入参数,php部分响应用wp_list_comments函数获取评论输出。
1.、jQuery框架必须的。
2、在主题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,那也就不需要了。
3、js部分,放在模板最后,按照注释根据你的主题修改:
function ajacpload(){
$('#comment_pager a').click(function(){
var wpurl=$(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 =$('#cp_post_id').text();
//alert(postId);//获取postid
var url = wpurl.split(/#.*$/)[0];
url += /\?/i.test(wpurl) ? '&' : '?';
url += 'action=AjaxCommentsPage&post=' + postId + '&page=' + commentPage;
//alert(url);//看看传入参数是否正确
$.ajax({
url:url,
type: 'GET',
beforeSend: function() {
document.body.style.cursor = 'wait';
var C=0.7;//修改下面的选择器,评论列表div的id,分页部分的id
$('#thecomments,#comment_pager').css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
var loading='Loading';
$('#comment_pager').html(loading);
},
error: function(request) {
alert(request.responseText);
},
success:function(data){
var responses=data.split('');
$('#thecomments').html(responses[0]);
$('#comment_pager').html(responses[1]);
var C=1; //修改下面的选择器,评论列表div的id,分页部分的id
$('#thecomments,#comment_pager').css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
$('#cmploading').remove();
document.body.style.cursor = 'auto';
ajacpload();//自身重载一次
//single_js();//需要重载的js,注意
$body.animate( { scrollTop: $('#comment_header').offset().top - 200}, 1000);
}//返回评论列表顶部
});
return false;
});
}
4、下面是php响应部分,加到function里面:注意修改callback,参看你的主题comment.php里面wp_list_comments的写法。如果没有回调函数,就去掉callback。
<?php
/**ajax comment page
* @return unknown_type
*/
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 注意修改callback为你自己的,没有就去掉callback
wp_list_comments('callback=winyskyComments&type=comment&page=' . $pageid . '&per_page=' . get_option('comments_per_page'), $comments);
echo '<!--winysky-AJAX-COMMENT-PAGE-->';
echo '<div id="comment_pager" class="cf"><span class="pages">评论分页</span><span id="cpager">';
paginate_comments_links('current=' . $pageid . $baseLink);
echo '</span></div>';
die;
}
}
add_action('init', 'AjaxCommentsPage');
?>
最后根据你的主题修改下css,你也可以自定义loading的样式,改改js就好了。
端午节放假,抽空折腾一会儿,\(^o^)/~
WordPress评论非插件实现ajax翻页
以前写过一些关于jQuery的ajax在wordpress中的应用,其中提到了评论分页采用ajax翻页的效果,实现评论分页无刷新翻页。国外早有相关的插件,国内也有mg12写的ajax commmet page。这些都是js实现的,既然用到了jQuery框架,改写下简洁点,当然基本还是mg12插件的方法。我也参考了philna2主题里的代码,提取出来适应其他主题,没啥技术。其实原作者也写过一篇教程,可惜直接copy是不行的,仅写了一半,我这里給补全。
基本原理是获取评论分页数,文章id,通过jQuery ajax过程传入参数,php部分响应用wp_list_comments函数获取评论输出。
1.、jQuery框架必须的。
2、在主题comment.php里找到<?php paginate_comments_links(); ?>前面加上一段:
3、js部分,放在模板最后,按照注释根据你的主题修改:
4、下面是php响应部分,加到function里面:注意修改callback,参看你的主题comment.php里面wp_list_comments的写法。如果没有回调函数,就去掉callback。
最后根据你的主题修改下css,你也可以自定义loading的样式,改改js就好了。
端午节放假,抽空折腾一会儿,\(^o^)/~