WordPress Ajax高性能评论分页

方法一

一直想折腾那种非调用全页面的Ajax,也就是在外部请求fuctions.php中Ajax的评论函数而动态输出评论列表。这篇文章依然是来之大发的“高性能WordPress之Ajax评论分页” 。让我来好好学习一番是如何实现的~

一般来说,评论列表的基本结构如下

<code>
<div class="commentshow">
<!--这个ol标签是由函数输出的-->
    <ol class="comment-list">
            <li id="li-comment-24608">一个评论</li>          
    </ol>
    <nav class="commentnav">
        <a>翻页链接</a>
        <a>翻页链接</a>    
    </nav>
</div></code>

commentshowcommentnav分别是评论列表的容器、评论翻页的超链接的容器。

<code>
function fs_ajax_pagenavi(){  //创建函数
 if( isset($_GET['action'])&& $_GET['action'] == 'fs_ajax_pagenavi'  ){ //获取请求数据的参数
    global $post,$wp_query, $wp_rewrite; //创建全局变量
    $postid = isset($_GET['post']) ? $_GET['post'] : null; //获取文章ID
    $pageid = isset($_GET['page']) ? $_GET['page'] : null; //获取页面ID
    if(!$postid || !$pageid){  //判断Get的的文章ID和页面ID是否为空
        fail(__('Error post id or comment page id.'));
    }
    $comments = get_comments('post_id='.$postid); //依据ID调出文章评论列表
    $post = get_post($postid); //依据ID调出页面评论列表
    if(!$comments){ //判断是否有评论列表
        fail(__('Error! can\'t find the comments'));
    }
    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');
    }

    // response 注意修改callback为你自己的,没有就去掉callback
//这个要看你主题的comments.php 中的 wp_list_comments()函数以及函数里面的参数相同即可,
    echo '<ol class="comment-list">'; //这个也是跟主题的comments.php的相同
    wp_list_comments('callback=devecomment&type=comment&page=' . $pageid . '&per_page=' . get_option('comments_per_page'), $comments);
    echo '</ol>';//这个也是跟主题的comments.php的相同
    echo '<nav class="commentnav">'; 
    paginate_comments_links('current=' . $pageid . '&prev_text=«&next_text=»'); //评论翻页的链接
    echo '</nav>';
    die;
    }
}
add_action('init', 'fs_ajax_pagenavi');
</code>

js驱动部分

这是一段js代码~一般放在页面的头部来获取文章的ID、还有页面的url,其实这个可以写到div里,然后用jQuery的.text来获取内容,不过这个也行~

<code>
<script>
    <?php if ( is_singular() ){ ?>
        var fspostid ="<?php echo $post->ID?>"; //获取ID
        var fsajaxurl ="http:\/\/yefengs.com\/"; //获取初始url
    <?php } ?>
</script>
</code>

接下来就是js的主题部分了

<code>
jQuery(document).ready(function(a) {//Code By Mufeng
var l = a(".commentshow"), y = fspostid, r = fsajaxurl, z = '<div id="loading-comments"></div>';
    l.on("click", ".commentnav a", function(b) {
        b.preventDefault();
        var b = a(this).attr("href"), c = 1;
        /comment-page-/i.test(b) ? c = b.split(/comment-page-/i)[1].split(/(\/|#|&).*$/)[0] :/cpage=/i.test(b) && (c = b.split(/cpage=/)[1].split(/(\/|#|&).*$/)[0]);
        a.ajax({
            url:r + "?action=fs_ajax_pagenavi&post=" + y + "&page=" + c,
            beforeSend:function() {
                l.html(z);
            },
            error:function(a) {
                alert(a.responseText);
            },
            success:function(b) {
                l.html(b);
                a("body, html").animate({
                    scrollTop:l.offset().top - 50
                }, 1e3);
            }
        });
    });
});
</code>

至于样式,自行添加~

方法二

这种方法感觉比上面一种 好些,兼容性较好~

一般来说页面结构是这样的着这样的

<code>
<span id="cp_post_id" style="display:none;"><?php echo $post->ID; ?></span>
<?php //上面这个是定义一个id,为了js获取当前文章的ID ?>
        <ol class="commentlist">
            <?php wp_list_comments( array( 'type' => 'comment', 'callback' => 'comment_list_comments' ) ); 
            //这个是输出评论列表的函数 callback 指的是回调函数,用来自定义漂亮评论列表函数~ 
            ?>
            <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : 
            // 用来判断 评论页面是否大于1 也就是判断评论是不是只有一页,若只有一页,怎不输出翻页链接 ?>
                <div class="commentpages">
                    <?php paginate_comments_links( array( 'prev_text' => ' ', 'next_text' => ' ' ) );?></div>
                <div id="cpageleft" class="cornerLeft"></div><div id="cpageright" class="cornerRight"></div>
            <?php endif; //结束判断 ?>
        </ol>
</code>

下面的就是用来回应ajax的~~一般放在fuctions.php中

<code>
    <?php


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;
        //获取请求传递过来的值 id
        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 = user_trailingslashit(get_permalink($postid) . "/comment-page-%#%", "commentpaged");
        }
        // response 下一行 WinyskyComments注意修改callback为你自己的回调函数 
        wp_list_comments("type=comment&callback=comment_list_comments&page=" . $pageid . "&per_page=" . get_option("comments_per_page"), $comments);
        echo '<div class="commentpages">';
        paginate_comments_links( array(
            'prev_text' => ' ',
            'next_text' => ' ',
            'current' => $pageid,
            'base' => $baseLink
        ) );
        echo '</div><div id="cpageleft"></div><div id="cpageright"></div>';
        die;
    } else {
        return;
    }
}
add_action('init', 'AjaxCommentsPage');
    ?>
</code>

上面有些东西依据自己的主题修改~

下面就是js驱动的代码了

<code>
    <script type="text/javascript">
        $(".commentpages 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 这个id就是刚刚我定义的那个
        var url = wpurl.split(/#.*$/)[0]; //去除url里#后面的无意标签
        url += /\?/i.test(wpurl) ? "&" : "?";
        url += "action=AjaxCommentsPage&post=" + postId + "&page=" + commentPage;
        // alert(url); // 看看传入参数是否正确
        $.ajax({
            url: url,
            type: "GET",
            beforeSend: function() { //提交之前所做的动作
                $(".commentlist").css({cursor:"wait"});
                //鼠标箭头变等待
                var C = 0.6;
                $(".commentlist").css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:"alpha(opacity=" + C*100 + ")"});
                //评论列表变透明

                ////这么一大段就是为了通过查找主题载入的all.js的url 来获取 你主题的目录位置
                var i = 0, got = -1, len = document.getElementsByTagName("script").length;
                while (i <= len && got == -1) {
                    var js_url = document.getElementsByTagName("script")[i].src,
                        got = js_url.indexOf("all.js"); i++;
                }
                wp_theme_url = js_url.substr(0, js_url.indexOf("inc/all.js")),
                ///////获取到了主题目录,再加个images/ajaxload.gif就是加载时显示gif动画
                    pic_loading = wp_theme_url + "images/ajaxload.gif";
                var loading = '<div id="comment-loading"><img decoding="async" src="' + pic_loading + '" style="vertical-align:middle;" /> 正在载入,请稍候...</div>';
                $(".commentpages").html(loading);
                //把动画插入到.commentpages后面
            },
            error: function(jqXHR, textStatus) {
                //alert(textStatus);
                window.location.href = $(this).attr("href");
                //失败后再次尝试
            },
            success: function(data) {
                $(".commentlist").html(data);
                //返回的数据放在.commentlist里
                var C = 1;
                $(".commentlist").css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C*100 + ')'});
                //恢复不透明
                $("#comment-loading").remove();
                //移除加载动画
                $(".commentlist").css({cursor:"auto"});
                //恢复鼠标箭头样式
                $body.animate({scrollTop:$("#comments").offset().top-40}, 1000);
                //动画滚动到#comments ,就是评论列表顶部即评论第一条

                AjaxCommentsLoad();
               //重新执行以下可能在评论中用到的函数比如AjaxCommentsLoad();
            }
        });
        return false;
    });
</script>
</code>

文章到此结束~~以上内容只是我分析了一遍原理,但我未实际测试,可能存在某些错误~

0 thoughts on “WordPress Ajax高性能评论分页
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。