WordPress Ajax 评论分页+翻页代码

网站APP 5 年前 回复

, , , ,

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

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)