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 文件。
目测dangopress要火,静候团团发布试用。
@ydzhang:低调,我这种门外汗做的兼容设计感太差了,我总感觉文字排版差那么一点。dangopress我已经上传到 github了。
@kodango:我最担心的也是兼容问题,空了我换上这个主题试试