WordPress 升级到4.4版本后源代码分页函数失效。只需要给paginate_comments_links函数加上个total参数就可以了。代码已更新。
如果某篇文章评论特别多的时候,我们可以启用分页,但是想查看其他分页的评论就要刷新页面,但是文章内容是相同的,所以这个动作用AJAX 来完成用户体验会好一些。
wp_list_comments有一个callback参数,这个参数是评论回调函数,可以自定义评论结构,不同主题回调函数可能不一样,由于WordPress 默认主题都没有使用这个参数,所以示例代码也不用了。如果你的主题使用了则需加上。
打开comments.php,我们会看到类似下面的代码
<div class="commentshow"> <ol class="commentlist"><?php wp_list_comments(); ?></ul> <nav class="commentnav" data-fuck="<?php echo $post->ID?>"><?php paginate_comments_links('prev_text=«&next_text=»');?></nav> </div>
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 '<ol class="commentlist" >'; wp_list_comments('page=' . $pageid . '&per_page=' . get_option('comments_per_page'), $comments);//如果你的主题使用了回调函数,则要设置 echo '</ol>'; echo '<nav class="commentnav" data-fuck="'.$postid.'">'; paginate_comments_links('total=' . get_comment_pages_count($comments). '¤t=' . $pageid . '&prev_text=«&next_text=»'); echo '</nav>'; 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注视的部分加上你自己想要的效果。如果你还有哪里没懂可以留言与我交流。
转自https://fatesinger.com/286
声明:本文采用 BY-NC-SA 协议进行授权,如无注明均为原创,转载请注明转自 你好!刘
本文地址:WordPress Ajax 评论分页+翻页代码
本文地址:WordPress Ajax 评论分页+翻页代码
发表评论