80后向前冲

松鼠男的博客自留地

WordPress2.7以上版本自带嵌套回复配置教程

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

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

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

接下来就来进行DIY吧。

DIY第一步

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

DIY第二步

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

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

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

DIY第三步

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

<?php if ( $comments ) : ?>
 <ol id="commentlist">
 <?php foreach ($comments as $comment) : ?>
 <li>
 ...
 <?php comment_text() ?>
 ...
 </li>
 <?php endforeach; ?>
 </ol>
 <?php else : // If there are no comments yet ?>
 <p><?php _e('No comments yet.'); ?></p>
 <?php endif; ?>

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

<?php if ( $comments ) : ?>
 <ol>
 <?php wp_list_comments();?>
 </ol>
 <?php else : // If there are no comments yet ?>
 <p><?php _e('No comments yet.'); ?></p>
 <?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第五步

找到

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

去除该段,替换为

<?php comment_id_fields(); ?>

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

DIY第六步

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

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

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

DIY第七步

在“Leave a Reply”下面增加

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

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

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

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

DIY第八步

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

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
 ol.commentlist li { }
 ol.commentlist li.alt { }
 ol.commentlist li.bypostauthor {}
 ol.commentlist li.byuser {}
 ol.commentlist li.comment-author-admin {}
 ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
 ol.commentlist li div.comment-author {}
 ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
 ol.commentlist li div.vcard cite.fn { font-style:normal; }
 ol.commentlist li div.vcard cite.fn a.url {}
 ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right;margin:0 0 1em 1em; }
 ol.commentlist li div.vcard img.avatar-32 {}
 ol.commentlist li div.vcard img.photo {}
 ol.commentlist li div.vcard span.says {}
 ol.commentlist li div.commentmetadata {}
 ol.commentlist li div.comment-meta { font-size:9px; }
 ol.commentlist li div.comment-meta a { color:#ccc; }
 ol.commentlist li p { font-size:11px; margin:0 0 1em; }
 ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
 ol.commentlist li div.reply { font-size:11px; }
 ol.commentlist li div.reply a { font-weight:bold; }
 ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0;}
 ol.commentlist li ul.children li {}
 ol.commentlist li ul.children li.alt {}
 ol.commentlist li ul.children li.bypostauthor {}
 ol.commentlist li ul.children li.byuser {}
 ol.commentlist li ul.children li.comment {}
 ol.commentlist li ul.children li.comment-author-admin {}
 ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:00 .25em .25em; }
 ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:00 .25em .25em; }
 ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:00 .25em .25em; }
 ol.commentlist li ul.children li.depth-5 {}
 ol.commentlist li ul.children li.odd {}
 ol.commentlist li.even { background:#fff; }
 ol.commentlist li.odd { background:#f6f6f6; }
 ol.commentlist li.parent { border-left:5px solid #111; }
 ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
 ol.commentlist li.thread-alt { }
 ol.commentlist li.thread-even {}
 ol.commentlist li.thread-odd {}

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

本文转自:零号相册

发表评论

电子邮件地址不会被公开。 必填项已用*标注