WordPress Ajax 评论分页/翻页

Wordpress Ajax 评论翻页

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).  '&current=' . $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注视的部分加上你自己想要的效果。如果你还有哪里没懂可以留言与我交流。

以上。

12

Related Posts

Comments : 12

  1. 你好,我用这个方法:http://kayosite.com/ajax-turn-page-for-wordpress-comments-list.html ,实现了ajax评论分页,请问怎么让他在翻页的时候浏览器地址栏里的链接也相应的改变呢,如:网址/comment-page-1?

    1. @龙笑天

      个人建议如果没一定基础不要尝试了,如仍要尝试可搜一下pjax的相关内容。

    2. @bigfa 好吧,那就暂时这样了….. :???:

  2. 评论的统计数目也有错误,只记录当前页的评论数目。

    1. @红火火

      那里统计数啊,这个功能用不到统计数吧。

  3. 今天试了倒序,就混乱了。。。

    1. @林木木

      倒序是新的在上面么?理论上正序倒序和分页应该没啥关系,因为正序倒序都是对于当页的啊。

  4. 整个 paginate_comments_links 用来构造链接地址的函数都有问题: $wp_query 无法判断在什么页面, 我是想了很多方法, 加上single/page_count, 都是没能解决这个问题

    1. @牧风

      $wp_query->is_singular = true;设置后paginate_comments_links就可以正常构造链接了啊,我测试是没问题的。

  5. 好吧,我是来问,Puma评论框怎么加载和显示emoji的。。。 ????

  6. 一直不成功,貌似是js的问题啊,直接用script标签输出就可以了吗

  7. 不知道错在哪里 求更新pure的 看看哪里不对 :smile:

发表留言

Post Comment