WordPress中非插件实现嵌套回复效果的方法

概述Wordpress博客从2.7版本就自带了嵌套回复功能，但是很多主题都没有添加该效果，大部分博主也用博客插件来实现该功能，可博客插件的嵌套回复的内容样式与父评论不能保持一致，而使用自带的嵌套功能却可以和父评论的内容样式一样。

博客吧转载了零号相册的wordpress博客自带嵌套回复教程。

自带嵌套功能工作原理：

wordpress嵌套回复的工作原理是WP的数据库里有个wp_comments的表中有一栏comment_parent ，即可以对comment指定父级，达到嵌套的目的。

非插件嵌套回复教程：

1.在博客后台的已安装插件列表中停用wordpress Thread Comment插件。并在博客后台点击“设置”选项卡中的“讨论”选项进入配置页面，开启“允许嵌套X层评论”。

2.登陆博客后台，点击“外观”选项卡下的“编辑”选项进入主题编辑页面，选择主题（这里以WP自带classic主题为例），编辑头部文件header.PHP，在WP函数

之前添上代码

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

3.打开主题的comments.PHP评论模板。原有的模板代码大概是如下：

......

如今有了WP自带的wp_List_comments（）;函数，即可轻松完成这些工作，把上面代码替换为：

说明一下，原有的判断有留言、取出、并显示的部分用一个wp_List_comments();即可取代。原来的ol（有序列表）的ID="commentList"改为，这是因为到后面定义CSS的时候可能会与其他产生冲突。

4.在评论模板comments.PHP中找到一个textarea，name=”comment”，就是访客输入留言的文本域，看看这个 textarea中是否有个ID=”comment”，如果有，把ID=”comment”去掉（不是去掉textarea，而是去掉定义的ID）。

5.在评论模板comments.PHP中找到代码：

将代码替换为：

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

6.在评论模板comments.PHP中找到代码：

从

至

的外部用一个ID为”respond”的div包裹

……

这样是为了在嵌套回复时，点击留言者旁边的“回复”，即可把评论框整体移至该评论附近。

7.在评论模板comments.PHP中的“Leave a Reply”下面增加代码：

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

8.接下来是针对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: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样式的字体有些偏小，有些偏大，所以将其修改为如下（当然博主也可以对该段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 12px georgia,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文件中，嵌套回复的效果就真正显示出来了，不添加该段CSS样式的效果，自己看去吧…。

9.以下是wordpress博客主题RBCSS通过该教程实现的效果：

总结

以上是内存溢出为你收集整理的WordPress中非插件实现嵌套回复效果的方法全部内容，希望文章能够帮你解决WordPress中非插件实现嵌套回复效果的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。