WordPress中非插件完成嵌套回复成果的办法

博客吧转载了零号相册的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”的p包裹

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


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

7.在评论模板comments.php中的“Leave a Reply”上面添加代码:

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


这是一个勾销评论的链接。普通状况下,该链接不显示,只有要针对某人进行评论,而不想评论时能够点击这个链接把评论框复位。

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 p.comment-author {}
ol.commentlist li p.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li p.vcard cite.fn { font-style:normal; }
ol.commentlist li p.vcard cite.fn a.url {}
ol.commentlist li p.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li p.vcard img.avatar-32 {}
ol.commentlist li p.vcard img.photo {}
ol.commentlist li p.vcard span.says {}
ol.commentlist li p.commentmetadata {}
ol.commentlist li p.comment-meta { font-size:9px; }
ol.commentlist li p.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 p.reply { font-size:11px; }
ol.commentlist li p.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 p.comment-author {}
ol.commentlist li p.vcard { font:normal 12px georgia,times,serif; }
ol.commentlist li p.vcard cite.fn { font-style:normal; }
ol.commentlist li p.vcard cite.fn a.url {}
ol.commentlist li p.vcard img.avatar { border:1px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li p.vcard img.avatar-32 {}
ol.commentlist li p.vcard img.photo {}
ol.commentlist li p.vcard span.says {}
ol.commentlist li p.commentmetadata {}
ol.commentlist li p.comment-meta { font-size:10px; }
ol.commentlist li p.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 p.reply { font-size:12px; }
ol.commentlist li p.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
版权声明:本文为 安达网络工作室 转载文章,如有侵权请联系我们及时删除。
相关文章
WordPress退出短代码运转框(运转代码/复制代码/清空代码无插件)

很多冤家可能常常在一些网站上看到相似于&ldquo;运转代码、复制代码、清空代码、另存为代码的动态代码运转框...

wordpress装置出错的处理办法

明天在装置wordpress3.0.1的时分,写入数据库阶段时呈现了一大片谬误提醒信息: 复制代码代码如下:WordPres...

优化WordPress中文章与评论的工夫显示

很多博客都喜爱用 评论宣布于 “XXX 分钟 之前”、文章宣布于 “XXX 分钟 之前”来显示文章评论的工夫,改善...

wordpress经过以后文章的ID获取文章题目内容简介的信息

wordpress经过以后文章的ID获取文章的信息用的极多,在wordpress二次开发中,上篇文章说过,获取以后文章id...

jQuery完成页面评论栏中访客信息主动填写性能的办法

首先简略说一说仿登陆的详细操作,用户第一次登陆时会呈现用于填写评论者材料的框,当用户评论实现后,将会...

应用jQuery完成WordPress中的Ctrl+Enter和@评论回复

增加 Ctrl+Enter 快捷回复 这里送上两种办法,首先是 jQuery 办法,前段工夫不断在钻研 jQuery ,因而对 jQ...

需求提交

客服服务