WordPress 升级到4.4版本后源代码分页函数失效。只需要给paginate_comments_links函数加上个total参数就可以了。代码已更新。
如果某篇文章评论特别多的时候,我们可以启用分页,但是想查看其他分页的评论就要刷新页面,但是文章内容是相同的,所以这个动作用AJAX 来完成用户体验会好一些。
wp_list_comments有一个callback参数,这个参数是评论回调函数,可以自定义评论结构,不同主题回调函数可能不一样,由于WordPress 默认主题都没有使用这个参数,所以示例代码也不用了。如果你的主题使用了则需加上。
打开comments.php,我们会看到类似下面的代码
wp_list_comments就是输出评论结构的。
paginate_comments_links是分页导航,不同主题可能不一样,注意最外层的nav标签有data-fuck熟悉,是传递文章id的,必须设置。
同时用一个容器包裹评论列表和分页导航,我这里用的是commentshow。
AJAX 回调函数代码,把下面的代码加到functions.php中即可。
add_action('wp_ajax_nopriv_ajax_comment_page_nav', 'ajax_comment_page_nav');
add_action('wp_ajax_ajax_comment_page_nav', 'ajax_comment_page_nav');
function ajax_comment_page_nav(){
global $post,$wp_query, $wp_rewrite;
$postid = $_POST["um_post"];
$pageid = $_POST["um_page"];
$comments = get_comments('post_id='.$postid);
$post = get_post($postid);
if( 'desc' != get_option('comment_order') ){
$comments = array_reverse($comments);
}
$wp_query->is_singular = true;
$baseLink = '';
if ($wp_rewrite->using_permalinks()) {
$baseLink = '&base=' . user_trailingslashit(get_permalink($postid) . 'comment-page-%#%', 'commentpaged');
}
echo '
- ';
wp_list_comments('page=' . $pageid . '&per_page=' . get_option('comments_per_page'), $comments);//如果你的主题使用了回调函数,则要设置
echo '
';echo '';
paginate_comments_links('total=' . get_comment_pages_count($comments). '¤t=' . $pageid . '&prev_text=«&next_text=»');
echo '';
die;
}
js代码,on事件需要1.7以上jquery版本。
$(document).on("click", ".commentnav a",
function() {
var baseUrl = $(this).attr("href"),
commentsHolder = $(".commentshow"),
id = $(this).parent().data("fuck"),
page = 1,
concelLink = $("#cancel-comment-reply-link");
/comment-page-/i.test(baseUrl) ? page = baseUrl.split(/comment-page-/i)[1].split(/(\/|#|&).*jQuery/)[0] : /cpage=/i.test(baseUrl) && (page = baseUrl.split(/cpage=/)[1].split(/(\/|#|&).*jQuery/)[0]);
concelLink.click();
var ajax_data = {
action: "ajax_comment_page_nav",
um_post: id,
um_page: page
};
//add loading
jQuery.post(ajax.ajax_url, ajax_data,
function(data) {
commentsHolder.html(data);
//remove loading
$("body, html").animate({
scrollTop: commentsHolder.offset().top - 50
},
1e3)
});
return false;
})
至于等待的效果,你可以在js注视的部分加上你自己想要的效果。如果你还有哪里没懂可以留言与我交流。
以上。