以前写过一些关于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^)/~

  1. 皇家元林 (2012.04.25 at 19:40) 33楼

    这个js怎么用啊。。。我直接放后面,没反应啊

  2. 皇家元林 (2012.04.25 at 20:25) 34楼

    知道你的js用法了,不过点击下一页,所有的评论不显示了

评论分页: 1 ... 3 4 5

发布评论

邮箱(必填)

换个背景