WordPress2.7自带嵌套回复配置教程

发表于 2009年01月03日 由 neekey

WordPress2.7从2.7开始自带了“嵌套回复”功能，而以前使用这个功能需要依靠第三方插件WordPress Thread Comment来实现。嵌套回复的工作原理其实并不难，WP的数据库里有个wp_comments的表中有一栏comment_parent ，即可以对comment指定父级，达到嵌套的目的。

thread-comment-plugin

这是使用插件生成的嵌套回复，由于工作原理不同，嵌套回复的内容样式不能与父评论保持一致，而需要在后台对插件进行设置

thread-comment-default

由WP生成的嵌套回复，父评论与子评论保持风格一致，便于编辑风格，也节省了插件的资源。而且，如果用原生的嵌套回复取代插件，所有原有的嵌套回复都依然存在。

接下来就来进行DIY吧。

DIY第一步

停用Wordpress Thread Comment插件。并到后台设置-》讨论，开启“允许嵌套X层评论”。

DIY第二步

选择主题（这里以WP自带classic主题为例），打开header.php，在wp_head();这个函数之前添上

  1. <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

该代码在文章/页面调用嵌套回复的Javascript文件。

DIY第三步

打开comments.php编辑评论模板。原有的模板大概是：

  1. <?php if ( $comments ) : ?>
  2. <ol id="commentlist">
  3. <?php foreach ($comments as $comment) : ?>
  4.     <li>
  5.     ...
  6.     <?php comment_text() ?>
  7.     ...
  8.     </li>
  9. <?php endforeach; ?>
  10. </ol>
  11. <?php else : // If there are no comments yet ?>
  12.     <p><?php _e('No comments yet.'); ?></p>
  13. <?php endif; ?>

如今有了WP自带的wp_list_comments();函数,即可轻松完成这些工作

  1. <?php if ( $comments ) : ?>
  2. <ol class="commentlist">
  3. <?php wp_list_comments();?>
  4. </ol>
  5. <?php else : // If there are no comments yet ?>
  6.     <p><?php _e('No comments yet.'); ?></p>
  7. <?php endif; ?>

说明一下，原有的判断有留言、取出、并显示的部分用一个wp_list_comments();即可取代。原来的ol（有序列表）的id=”commentlist”改为class=”commentlist”，这是因为到后面定义CSS的时候可能会与其他产生冲突。关于wp_list_comments函数更多请参阅官方文档。

DIY第四步

找到一个textarea，name=”comment”，就是访客输入留言的文本域，看看是否这个textarea中还有个id=”comment”，如果存在，把id=”comment”去掉（不是去掉textarea，而是去掉定义的ID）。

DIY第五步

找到

  1. <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />

去除该段，替换为

  1. <?php comment_id_fields(); ?>

这是对回复框进行定义，以便支持嵌套回复。

DIY第六步

从

  1. <h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>

到

  1. <?php endif; // If registration required and not logged in ?>

的外部用一个id为”respond”的div包裹。这样做是为了在嵌套回复时，点击留言者旁边的“回复”，即可把评论框整体移至该评论附近。效果见本站。

DIY第七步

在“Leave a Reply”下面增加

  1. <div id="cancel-comment-reply"> 
  2.     <small><?php cancel_comment_reply_link() ?></small>
  3. </div>

这是一个取消评论的链接。一般情况下，该链接不显示，只有要针对某人进行评论，而不想评论时可以点击这个链接把评论框复位。

OK，针对文件的修改就完成了，我这里提供了修改后的comments.php，请直接下载后参考即可。

WordPress官方已经有朋友给出了该方法。详情参阅。

DIY第八步

接下来是针对CSS的定义。国外网友Chris Harrison提供了CSS部分的几种配色方案。

  1. ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
  2. ol.commentlist li { }
  3. ol.commentlist li.alt { }
  4. ol.commentlist li.bypostauthor {}
  5. ol.commentlist li.byuser {}
  6. ol.commentlist li.comment-author-admin {}
  7. ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
  8. ol.commentlist li div.comment-author {}
  9. ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
  10. ol.commentlist li div.vcard cite.fn { font-style:normal; }
  11. ol.commentlist li div.vcard cite.fn a.url {}
  12. ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
  13. ol.commentlist li div.vcard img.avatar-32 {}
  14. ol.commentlist li div.vcard img.photo {}
  15. ol.commentlist li div.vcard span.says {}
  16. ol.commentlist li div.commentmetadata {}
  17. ol.commentlist li div.comment-meta { font-size:9px; }
  18. ol.commentlist li div.comment-meta a { color:#ccc; }
  19. ol.commentlist li p { font-size:11px; margin:0 0 1em; }
  20. ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
  21. ol.commentlist li div.reply { font-size:11px; }
  22. ol.commentlist li div.reply a { font-weight:bold; }
  23. ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
  24. ol.commentlist li ul.children li {}
  25. ol.commentlist li ul.children li.alt {}
  26. ol.commentlist li ul.children li.bypostauthor {}
  27. ol.commentlist li ul.children li.byuser {}
  28. ol.commentlist li ul.children li.comment {}
  29. ol.commentlist li ul.children li.comment-author-admin {}
  30. ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
  31. ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
  32. ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
  33. ol.commentlist li ul.children li.depth-5 {}
  34. ol.commentlist li ul.children li.odd {}
  35. ol.commentlist li.even { background:#fff; }
  36. ol.commentlist li.odd { background:#f6f6f6; }
  37. ol.commentlist li.parent { border-left:5px solid #111; }
  38. ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
  39. ol.commentlist li.thread-alt { }
  40. ol.commentlist li.thread-even {}
  41. ol.commentlist li.thread-odd {}

这里就不说如何更改了，这个效果已经相当不错，如果还要优化的不妨用Firefox+Firebug调试出适合自己的结果。请务必把该段CSS添加到style.css文件中，否则效果就惨不忍睹了。

此条目发表在 wordpress 分类目录，贴了 标签。将固定链接加入收藏夹。

《WordPress2.7自带嵌套回复配置教程》有 23 条评论

  1. Dianso 说：
    2009年01月03日1:11 下午

    太复杂啊，改了很久没成功，只能用插件了

  2. ZH CEXO 说：
    2009年01月03日2:59 下午

    效果还行，不过我现在不太喜欢套嵌了，有点烦人，还是@好~

  3. Sivan 说：
    2009年01月03日6:45 下午

    正在筹划把主题改成支持WP2.7的嵌套评论

  4. 醉倚西风 说：
    2009年01月04日1:31 下午

    主题不错哈哈

  5. 花果山寨 说：
    2009年01月04日9:26 下午

    还是喜欢插件回复，自带的不支持邮件发送！
    另提点建议：能不能将那个验证码往上摆，感觉在下面不太友好！

    • neekey 说：
      2009年01月06日12:00 下午

      是不太友好，很多人反应过，一直没时间改，因为这涉及到插件钩子的问题。我会尽快解决，或者更换验证方式

  6. MY-Hou 说：
    2009年01月07日12:47 上午

    无力折腾啊…

    把验证码撤掉会让人感觉更好

  7. 小落 说：
    2009年01月10日2:10 上午

    嘿嘿~
    我放寒假了呢
    每天都大把大把时间任我挥霍
    真是爽死了

  8. Pingback 引用通告： 总算折腾完了！！庆祝一下 | EISEN BLOG|小E的博客

  9. Pingback 引用通告： 10个 WordPress 主题设计高级功能进阶实现 - 菠菜博

  10. 冬大重重 说：
    2009年04月06日11:31 下午

    请教一下：“第八步 接下来是针对CSS的定义”这些代码应该放到哪个地方啊？我打开了style.css文件，看不知从何下手啊！

  11. 橘白婪 说：
    2009年08月01日12:49 上午

    经过一番艰苦卓绝的测试，结果：失败。。

    最终发现是第一步开启“允许嵌套X层评论”没有做。。。。

  12. Calvin 说：
    2009年08月15日10:28 上午

    嵌套回复在备份成 wordpress　的 wxr 之后重新恢复，会统统变成一级回复，嵌套被打乱。这是当前版本（2.8.3）的一大 bug　。

  13. LAONB 说：
    2009年11月26日2:08 下午

    我真恨我自己早没发现你的文章，原来2.7开始后台讨论有开启嵌套的选项，之前白白浪费了那么多时间。