• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
小妖花满楼满fx 显示全部楼层 发表于 2021-8-15 19:21:06 |阅读模式 打印 上一主题 下一主题
博客吧转载了零号相册的Wordpress博客自带嵌套复兴教程。
自带嵌套功能工作原理:
wordpress嵌套复兴的工作原理是WP的数据库里有个wp_comments的表中有一栏comment_parent ,即可以对comment指定父级,达到嵌套的目的。
非插件嵌套复兴教程:
1.在博客配景的已安装插件列表中停用Wordpress Thread Comment插件。并在博客配景点击“设置”选项卡中的“讨论”选项进入设置页面,开启“允许嵌套X层评论”。
2.登岸博客配景,点击“外观”选项卡下的“编辑”选项进入主题编辑页面,选择主题(这里以WP自带classic主题为例),编辑头部文件header.php,在WP函数
<?php wp_head(); ?>

之前添上代码
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

该代码在文章/页面调用嵌套复兴的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();函数,即可轻松完成这些工作,把上面代码替换为:
<?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; ?>

阐明一下,原有的判断有留言、取出、并体现的部分用一个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中找到代码:
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />

将代码替换为:
<?php comment_id_fields(); ?>

这是对复兴框举行定义,以便支持嵌套复兴。
6.在评论模板comments.php中找到代码:

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


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

的外部用一个id为”respond”的div包裹
<div id="respond">
……
</div>

这样是为了在嵌套复兴时,点击留言者旁边的“复兴”,即可把评论框整体移至该评论附近。
7.在评论模板comments.php中的“Leave a Reply”下面增长代码:
<div id="cancel-comment-reply">
<small><?php cancel_comment_reply_link() ?></small>
</div>

这是一个取消评论的链接。一样平常环境下,该链接不体现,只有要针对或人举行评论,而不想评论时可以点击这个链接把评论框复位。
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,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文件中,嵌套复兴的效果就真正体现出来了,不添加该段CSS样式的效果,自己看去吧…。
9.以下是WordPress博客主题RBCSS通过该教程实现的效果:

点击复兴效果:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作