博客吧轉(zhuǎn)載了零號相冊的Wordpress博客自帶嵌套回復(fù)教程。

自帶嵌套功能工作原理：

wordpress嵌套回復(fù)的工作原理是WP的數(shù)據(jù)庫里有個(gè)wp_comments的表中有一欄comment_parent ，即可以對comment指定父級，達(dá)到嵌套的目的。

非插件嵌套回復(fù)教程：

1.在博客后臺的已安裝插件列表中停用Wordpress Thread Comment插件。并在博客后臺點(diǎn)擊“設(shè)置”選項(xiàng)卡中的“討論”選項(xiàng)進(jìn)入配置頁面，開啟“允許嵌套X層評論”。

2.登陸博客后臺，點(diǎn)擊“外觀”選項(xiàng)卡下的“編輯”選項(xiàng)進(jìn)入主題編輯頁面，選擇主題（這里以WP自帶classic主題為例），編輯頭部文件header.php，在WP函數(shù)

<?php wp_head(); ?>

之前添上代碼

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

該代碼在文章/頁面調(diào)用嵌套回復(fù)的Javascript文件

3.打開主題的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（）;函數(shù)，即可輕松完成這些工作，把上面代碼替換為：

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

說明一下，原有的判斷有留言、取出、并顯示的部分用一個(gè)wp_list_comments();即可取代。原來的ol（有序列表）的id="commentlist"改為class="commentlist"，這是因?yàn)榈胶竺娑xCSS的時(shí)候可能會與其他產(chǎn)生沖突。

4.在評論模板comments.php中找到一個(gè)textarea，name=”comment”，就是訪客輸入留言的文本域，看看這個(gè) textarea中是否有個(gè)id=”comment”，如果有，把id=”comment”去掉（不是去掉textarea，而是去掉定義的ID）。

5.在評論模板comments.php中找到代碼：

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

將代碼替換為：

<?php comment_id_fields(); ?>

這是對回復(fù)框進(jìn)行定義，以便支持嵌套回復(fù)。

6.在評論模板comments.php中找到代碼：

從

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

至

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

的外部用一個(gè)id為”respond”的div包裹

<div id="respond">
……
</div>

這樣是為了在嵌套回復(fù)時(shí)，點(diǎn)擊留言者旁邊的“回復(fù)”，即可把評論框整體移至該評論附近。

7.在評論模板comments.php中的“Leave a Reply”下面增加代碼：

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

這是一個(gè)取消評論的鏈接。一般情況下，該鏈接不顯示，只有要針對某人進(jìn)行評論，而不想評論時(shí)可以點(diǎn)擊這個(gè)鏈接把評論框復(fù)位。

8.接下來是針對CSS的定義。國外網(wǎng)友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:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .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 {}

博客吧測試時(shí)發(fā)現(xiàn)，該CSS樣式的字體有些偏小，有些偏大，所以將其修改為如下（當(dāng)然博主也可以對該段CSS樣式再進(jìn)行修改）：

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 12px 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:1px 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:10px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:13px; 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:12px; }
ol.commentlist li div.reply a { font-weight:bold;}
ol.commentlist li #cancel-comment-reply {font-size:15px;}
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:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .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 {}

把該段CSS添加到style.css文件中，嵌套回復(fù)的效果就真正顯示出來了，不添加該段CSS樣式的效果，自己看去吧…。

9.以下是WordPress博客主題RBCSS通過該教程實(shí)現(xiàn)的效果：

點(diǎn)擊回復(fù)效果：

最新評論