WordPress 分开显示评论与 Pingback

WordPress 中的留言有三种类型，分别是普通评论、Pingback 和 Traceback。Pingback 和 Trackback 都是别人对你文章的引用，两者有一些区别，但是实际上差不多。就我博客上的评论来说 Pingback 类型的居多，因为这种引用是自动完成的。

当你在文章中引用另外一篇文章的地址时，Wordpress 就会给对应的网站发送Pingback，当这些网站收到回复时，就会将 Pingback 的信息显示在评论中。关于这 Pingback 和 Trackback 的更多对比，可以阅读下这篇文章 WordPress中的Ping、Trackback与Pingback：概念、区别与运用。

当然，最终是否显示 Pingback/Trackback 类型的评论完全由主题自行决定。有些主题选择干脆只显示普通类型的评论，而有些主题显示全部评论。dangopress 主题选择了后者，这也是大多数主题的方式。但是如果将这几种类型的评论混杂在一起，难免显得有点混乱，所以在这里本文介绍一种将普通评论与 Pingback/Trackback 区分显示的方法，这个方法参考自 WordPress 2.7 Trackbacks 的两种处理方法 - NeoEase。

除了做基本的区分之外，我们还希望能够分别显示普通评论与 Pingback/Trackback 的数目。最终的显示效果参考本博客：

下面我们一步步介绍如何实现。

步骤一：获取 Pingback/Trackback 和普通评论的数目

get_comments_number 方法可以返回文章的评论个数，但是无法返回单个类型的评论个数，所以我们得想另外一种途径来解决。

在 comment_template 方法中声明了 $comments 数组，它保存了文章的所有评论（阅读了这个函数后，才发现 comment.php 中 $commenter['comment_author'] 这种用法是多么的多余 ）。接下来，我们利用 WordPress 提供的 separate_comments 方法来分离不同类型的评论：

$comments_by_type = &separate_comments($comments);
$trackbacks = $comments_by_type['pings']; // 这里我们不区分 pingback 和 trackback

分别计算它们的数目：

$comment_count = get_comments_number();

$tb_count = count($trackbacks);  // pingback 和 trackback 的数目
$co_count = $comment_count - $tb_count; // 普通评论的数目

步骤二: 生成评论列表

普通评论列表我们通过wp_list_comments方法来获取，不过这里我们需要指定type => comment：

<div id="reviews">
<?php if ( have_comments() ): ?>

    <ol class="commentlist">
        <?php 
            wp_list_comments(array(
                'callback' => 'dangopress_comments_callback', 
                'type' => 'comment',
                'max_depth' => 30
            ));
        ?>
    </ol>

<?php endif; ?>
</div>

Pingback/Trackback 列表我们可以遍历之前获取的$trackbacks数组生成：

<div id="trackbacks">
    <ol class="trackback-list">

    <?php foreach ($trackbacks as $comment) : ?>
        <li id="comment-<?php comment_ID( ); ?>" class="trackback">
            <?php comment_author_link(); ?>
            <small><?php comment_time();?></small>
        </li>
    <?php endforeach; ?>

    </ol>
</div>

步骤三：设计评论和 Pingback/Trackback 切换标签栏

为了合理利用空间，我们采用标签的形式来切换显示两种类型的评论，实现的方法类似 WordPress 侧栏实现 Tab 选项卡。

下面是代码：

HTML + PHP 部分

<div id="comments-tabber" class="clearfix">
    <a id="reviews-tab" class="curtab" rel="nofollow">
        <span><?php echo $co_count; ?></span> 条评论
    </a>

<?php if ($tb_count != 0): ?>
    <a id="trackbacks-tab" class="tab" rel="nofollow">
        <span><?php echo $tb_count; ?></span> 次引用
    </a> 
<?php endif; ?>
</div>

CSS 部分

以下样式请根据主题自行调整：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height:0;
}

.clearfix {
    *+height: 1%;
}

#comments-tabber {
    padding: 10px 0 0 15px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

#comments-tabber a { 
    height: 30px; 
    line-height: 30px; 
    padding: 0 20px; 
    display: block; 
    float: left; 
    color: #888; 
    text-decoration: none; 
    border: 1px solid #ddd; 
    margin: 0 0 -1px -1px; 
} 
 
#comments-tabber a span { 
    margin-right: 2px; 
    font-family: georgia; 
} 
 
#comments-tabber a.tab { 
    cursor:pointer; 
    background:#fafafa; 
} 
 
#comments-tabber a.tab:hover, 
#comments-tabber a.curtab { 
    background: #fff; 
} 
 
#comments-tabber a.curtab { 
    border-bottom: 1px solid #FFF; 
}

#trackbacks {
    display:none;
    margin-top:15px;
    padding:0 20px;
}

.trackback {
    list-style: disc;
    margin-top:15px;
    color:#888;
}

.trackback a {
    display:block;
}

Javascript 部分

/* Comment tabber */
$('#comments-tabber a').on('click', function() {
     if (this.className == 'curtab')
         return;

     $(this).attr('class', 'curtab')
           .siblings().attr('class', 'tab');

     $('#comments-tabber').nextAll().toggle();
});

现在，再看看网站的效果。完整的代码请参考dangopress主题的 comment.php 文件。