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

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

自带嵌套功能工作原理:

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

非插件嵌套回复教程:

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

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

之前添上代码

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

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

  1. ......

如今有了WP自带的wp_list_comments();函数,即可轻松完成这些工作,把上面代码替换为:

说明一下,原有的判断有留言、取出、并显示的部分用一个wp_list_comments();即可取代。原来的ol(有序列表)的id="commentlist"改为class="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通过该教程实现的效果:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


我想将wordpress的默认接口路由改掉,愿意是默认的带一个 wp-json,我想换成 api,直接简单明了。默认路由https://www.xxzhuti.com/wp-json/wp/v2/posts/1新的路由https://www.xxzhuti.com/api/wp/v2/posts/1路由修改wordpress提供了一个钩子来修改 wp-json 的地址,代码入汛function r
wordpress自定义分类法之后,我看到链接都自动在后面添加了一个斜杠,如下图所示打开链接后都是先从一个链接301后到另外一个链接,我这个纳闷,然后一顿找原因,最后竟然是因为固定链接看我后台的固定链接是 /%post_id%/ 这么写的,然后每次都会301自动跳转。正确的写法是 /%post_id%.html 这样写才不会301跳转。一个小问题,往往一个小问题就会折腾好长时间,在这记录一下吧..
事情是这样的,我用 get_post_type 函数创建了一个自定义分类法类型,然后自定义了文件的访问路径代码如下。function tblog_chat_template( $template_path ){    if ( get_post_type() == 'aichat' ) {         if ( is_single() )         {             $temp
最近网站莫名其妙的被顶上了,过一个多小时,就注册一个账号,虽然不多,但是也挺烦,时间一长垃圾注册的就多了。由于我前台把注册关掉了,只允许用第三方登录,经过查找发现是通过后台注册的,后台无须邮箱验证即可注册,也是就想着在后台加个验证码。效果如下实现方法一将下面的代码加入到 function.php 中,刷新页面就会看到。//WordPress新用户注册随机数学验证码function add_s...
最近服务器要到期了,就想着把网站转移到另外一台服务器,本来打算要续费的,但是腾讯云的服务器有了新的规定,域名必须在腾讯云备案才能使用,在别的地方备案的域名需要转到腾讯云,在腾讯云在走一遍备案流程,若是备案简单,时间短也就无所谓了,就转一下,可是这个备案大家也知道,至少得一个月,于是就只能放弃腾讯云了,将站点转回备案的阿里云,以后就用阿里云了,贵点就贵点吧。这不网站迁移过去了,死活图片不显示,各..
今天在写wordpress的接口,然后碰到个奇怪的问题,怎么访问都提示 rest_no_route 的错误,然后就一直跟踪代码,终于找到原因所在。报错信息{'code': 'rest_no_route','message': '未找到匹配URL和请求方式的路由。','data': {'status': 404}}原因分析register_rest_route( string $namespace,
今天看到群友突然滴滴滴的找我QQ,好像出什么大事情一样。原来他由于误操作导致网站文章被删除。
今天遇到一个网友提示网站访问速度比较慢,然后通知日志看到有他的网站WordPress默认登录地址wp-login.php一直在被爬虫抓取,因为是有被破解后台账户信息,导致的占用数据库资源使得网站资源带宽不足后访问降低导致
今天老左在帮助客户升级WordPress的时候我看他网站也比较简单就直接在后台手工升级的。升级后打开网站有出现"There has been a critical error on your website."的错误提示。
我们在使用WordPress搭建的网站是否有留意查看源代码的时候看到标题中的原本"-",被转义成"&#8211"。其实这样并不影响用户阅读体验和搜索引擎,搜索引擎在收录后也会反向转义的。就是感觉看
WordPress默认是无法上传.webp格式的文件,如果要上传需要对上传文件限制进行解除后才能上传。
GTranslate 是一个流行的翻译插件,在免费和付费版本中提供不同的体验。 使用免费版本,您可以轻松提供任何语言的动态翻译,而付费版本提供可索引、可编辑的翻译版本,就像 Weglot 一样。
时下主流的浏览器都自带了广告屏蔽功能,还有ADSafe、ADB等软件插件,不断更新,屏蔽网站代码!
您是否正在寻找可用于显示数据的 WordPress 表格插件? WordPress 表格插件可让您以表格格式存储和呈现数据,以方便访问者阅读。
wordPress数据库除了本身的表以外,部分插件会增加表来存储数据。如果插件已经删除了,这些插件生成的表还在数据库中,那么怎么删除呢?
WordPress几乎是世界上最安全的开源程序,但其后台登录注册的地址始终是众所周知的,所以不少人觉得隐藏WordPress的登录地址后可能会更加安全。下面浩子就针对这个问题来简单说明一下方法。WordPress隐藏后台登录地址
自 WordPress 5.8 正式版发布 以后,后台的小工具就默认是块编辑器的界面样式,很多老用户还没有来得及学习就一脸茫然了,今天浩子就来教大家如何恢复WordPress经典小工具。
您想用您的语言翻译 WordPress 插件吗?许多 WordPress 插件是完全可翻译的,世界上任何人都可以轻松翻译。在本文中,我们将向您展示如何轻松地将 WordPress 插件翻译成您的语言(无需任何代码)。
WordPress新手不清楚WordPress调试模式怎么开启,今天来教大家认识和开启。什么是WordPress的调试模式
最近不少用户反馈说WordPress后台的外观-自定义点开后直接报错,错误信息如下: