Nana主题自带的评论框已经集成了垃圾评论过滤、插入表情、评论邮件提醒等功能,为了使得评论的玩法更丰富,所以就给Nana主题的评论框加了一个工具条,今天就跟大家分享一下如何为Nana主题评论框增加多功能工具条。
注:本教程仅针对Nana主题,其它主题虽异曲同工,但需要改动才能适配。具体的自己尝试。
为Nana主题评论框增加多功能工具条具体步骤:
方法一:直接替换文件法
1、点击下载“Nana主题评论框增加多功能工具条文件”压缩包并解压得到5个文件,分别是comment-tools.css、comment-tools.js、comment-tools.php、comments.php和functions.php文件。
2、将以上5个文件上传到Nana主题文件夹内覆盖原文件即可,其中comment-tools.js上传到JS文件夹,comment-tools.php上传到inc文件夹。
PS:如果已经修改过functions.php文件的,建议直接根据方法二的步骤五自行折腾。
方法二:自己动手折腾法
1、打开Nana主题的目录(/wp-content/themes/Nana),新建一个 css 文件,命名为 “comment-tools.css”,往里面贴入如下代码:
2、再打开 Nana 主题目录下的 js 文件夹,在里面新建一个js文件,命名为 “comment-tools.js” ,并往里面贴入以下代码:
- $(function () {
- $("#comment-smiley").click(function(){
- $('.smiley-box').animate({
- opacity: 'toggle',
- left: '50px'
- }, 1000).animate({
- left: '10px'
- }, 'fast');
- return false;
- });
- $("#font-color").click(function(){
- $("#fontcolor").toggle(500);
- });
- $("#comment").click(function(){
- $("#fontcolor").hide(500);
- });
- });
- jQuery(function() {
- function addEditor(a, b, c) {
- if (document.selection) {
- a.focus();
- sel = document.selection.createRange();
- c ? sel.text = b + sel.text + c: sel.text = b;
- a.focus()
- } else if (a.selectionStart || a.selectionStart == '0') {
- var d = a.selectionStart;
- var e = a.selectionEnd;
- var f = e;
- c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length);
- c ? f += b.length + c.length: f += b.length - e + d;
- if (d == e && c) f -= c.length;
- a.focus();
- a.selectionStart = f;
- a.selectionEnd = f
- } else {
- a.value += b + c;
- a.focus()
- }
- }
- var myDate = new Date();
- var mytime=myDate.toLocaleTimeString()
- var g = document.getElementById('comment') || 0;
- var h = {
- strong: function() {
- addEditor(g, '[b]', '[/b]');
- },
- em: function() {
- addEditor(g, '[i]', '[/i]');
- },
- del: function() {
- addEditor(g, '[del]', '[/del]');
- },
- underline: function() {
- addEditor(g, '[u]', '[/u]');
- },
- quote: function() {
- addEditor(g, '[blockquote]', '[/blockquote]');
- },
- ahref: function() {
- var a = prompt('请输入链接地址', 'http:
- var b = prompt('请输入链接内容', '');
- if (a) {
- addEditor(g, '[url=' + a + ']' + b + '[/url]', '');
- }
- },
- img: function() {
- var a = prompt('请输入图片地址', 'http:
- if (a) {
- addEditor(g, '[img]' + a + '[/img]', '');
- }
- },
- sign: function() {
- addEditor(g, '好文帮顶 & 顺便留个名~时间:' + mytime, '');
- },
- code: function() {
- addEditor(g, '[pre]', '[/pre]');
- },
- red: function() {
- addEditor(g, '[color=red]', '[/color]');
- },
- fuchsia: function() {
- addEditor(g, '[color=fuchsia]', '[/color]');
- },
- purple: function() {
- addEditor(g, '[color=purple]', '[/color]');
- },
- orange: function() {
- addEditor(g, '[color=orange]', '[/color]');
- },
- yellow: function() {
- addEditor(g, '[color=yellow]', '[/color]');
- },
- olive: function() {
- addEditor(g, '[color=olive]', '[/color]');
- },
- lime: function() {
- addEditor(g, '[color=lime]', '[/color]');
- },
- maroon: function() {
- addEditor(g, '[color=maroon]', '[/color]');
- },
- aqua: function() {
- addEditor(g, '[color=aqua]', '[/color]');
- },
- teal: function() {
- addEditor(g, '[color=teal]', '[/color]');
- },
- green: function() {
- addEditor(g, '[color=green]', '[/color]');
- },
- blue: function() {
- addEditor(g, '[color=blue]', '[/color]');
- },
- navy: function() {
- addEditor(g, '[color=navy]', '[/color]');
- },
- gray: function() {
- addEditor(g, '[color=gray]', '[/color]');
- },
- deepskyblue: function() {
- addEditor(g, '[color=deepskyblue]', '[/color]');
- },
- gold: function() {
- addEditor(g, '[color=gold]', '[/color]');
- }, silver: function() {
- addEditor(g, '[color=silver]', '[/color]');
- },
- black: function() {
- addEditor(g, '[color=black]', '[/color]');
- }
- };
- window['SIMPALED'] = {};
- window['SIMPALED']['Editor'] = h
- });
3、打开Nana主题目录下的 inc 文件夹,在里面新建一个php文件,命名为 “comment-tools.php” 并在里面贴入如下代码:
- <!-- 评论框工具条 inc->comment-tools.php -->
- <div id="editor_tools">
- <div id="editor">
- <a href="javascript:;" id="comment-smiley" title="点击插入表情">
- <i class="fa fa-smile-o" aria-hidden="true"></i><span class="tools_tip">表情</span>
- </a>
- <a href="javascript:SIMPALED.Editor.img()" title="点击插入图片">
- <i class="fa fa-picture-o" aria-hidden="true"></i><span class="tools_tip">图片</span>
- </a>
- <a href="javascript:SIMPALED.Editor.ahref()" title="点击插入超链接">
- <i class="fa fa-link" aria-hidden="true"></i><span class="tools_tip">链接</span>
- </a>
- <a href="javascript:;" id="font-color" title="点击插入彩色文字">
- <i class="fa fa-eyedropper" aria-hidden="true"></i><span class="tools_tip">颜色</span>
- </a>
- <a href="javascript:SIMPALED.Editor.strong()" title="点击插入粗体文字">
- <i class="fa fa-bold" aria-hidden="true"></i><span class="tools_tip">加粗</span>
- </a>
- <a href="javascript:SIMPALED.Editor.em()" title="点击插入斜体文字">
- <i class="fa fa-italic" aria-hidden="true"></i><span class="tools_tip">倾斜</span>
- </a>
- <a href="javascript:SIMPALED.Editor.del()" title="点击插入删除线">
- <i class="fa fa-strikethrough" aria-hidden="true"></i><span class="tools_tip">删除线</span>
- </a>
- <a href="javascript:SIMPALED.Editor.underline()" title="点击插入下划线">
- <i class="fa fa-underline" aria-hidden="true"></i><span class="tools_tip">下划线</span>
- </a>
- <a href="javascript:SIMPALED.Editor.quote()" title="点击插入引用内容">
- <i class="fa fa-quote-left" aria-hidden="true"></i><span class="tools_tip">引用</span>
- </a>
- <a href="javascript:SIMPALED.Editor.code()" title="点击插入代码段">
- <i class="fa fa-code" aria-hidden="true"></i><span class="tools_tip">代码</span>
- </a>
- <a href="javascript:SIMPALED.Editor.sign()" title="点击插入签到代码">
- <i class="fa fa-check-circle" aria-hidden="true"></i><span class="tools_tip">签到</span>
- </a>
- </div>
- </div>
- <div id="fontcolor">
- <a href="javascript:SIMPALED.Editor.red()" style="background-color: red"></a>
- <a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a>
- <a href="javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a>
- <a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a>
- <a href="javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a>
- <a href="javascript:SIMPALED.Editor.gold()" style="background-color: gold"></a>
- <a href="javascript:SIMPALED.Editor.olive()" style="background-color: olive"></a>
- <a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a>
- <a href="javascript:SIMPALED.Editor.aqua()" style="background-color: aqua"></a>
- <a href="javascript:SIMPALED.Editor.deepskyblue()" style="background-color: deepskyblue"></a>
- <a href="javascript:SIMPALED.Editor.teal()" style="background-color: teal"></a>
- <a href="javascript:SIMPALED.Editor.green()" style="background-color: green"></a>
- <a href="javascript:SIMPALED.Editor.blue()" style="background-color: blue"></a>
- <a href="javascript:SIMPALED.Editor.maroon()" style="background-color: maroon"></a>
- <a href="javascript:SIMPALED.Editor.navy()" style="background-color: navy"></a>
- <a href="javascript:SIMPALED.Editor.gray()" style="background-color: gray"></a>
- <a href="javascript:SIMPALED.Editor.silver()" style="background-color: silver"></a>
- <a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>
- </div>
- <!--评论框工具条核心js文件-->
- <script src="<?php bloginfo('template_directory'); ?>/js/comment-tools.js"></script>
- <!--评论框工具条核心css文件-->
- <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/comment-tools.css" type="text/css" media="all">
4、打开Nana主题目录下的“comments.php”,找到第70行
- <p class="smiley-box">
- <?php get_template_part( 'inc/smiley' ); ?>
- </p>
在它的后面添加
- <p class="comment-tools-box">
- <?php get_template_part( 'inc/comment-tools' ); ?>
- </p>
如图所示:
5、最后一步!打开Nana主题目录下的“functions.php”,拉到最下面,在最后一行的“ ?> ”前面加入以下代码:
- function comment_code_escape( $incoming_comment ) {
- $incoming_comment = str_replace(array('<', '>'), array('<', '>'), $incoming_comment);
- $incoming_comment = preg_replace('/\[b\](.*?)\[\/b\]/i','<b class="comment-t-b">$1</b>', $incoming_comment);
- $incoming_comment = preg_replace('/\[i\](.*?)\[\/i\]/i','<i class="comment-t-i">$1</i>', $incoming_comment);
- $incoming_comment = preg_replace('/\[u\](.*?)\[\/u\]/i','<u class="comment-t-u">$1</u>', $incoming_comment);
- $incoming_comment = preg_replace('/\[del\](.*?)\[\/del\]/i','<del class="comment-t-del">$1</del>', $incoming_comment);
- $incoming_comment = preg_replace('/\[pre\](.*?)\[\/pre\]/i','<pre class="comment-t-pre">$1</pre>', $incoming_comment);
- $incoming_comment = preg_replace('/\[blockquote\](.*?)\[\/blockquote\]/i','<blockquote class="comment-t-blockquote">$1</blockquote>', $incoming_comment);
- $incoming_comment = preg_replace('/\[color=([\w|#]*?)\](.*?)\[\/color\]/i','<span style="color: $1" class="comment-t-color">$2</span>', $incoming_comment);
- $incoming_comment = preg_replace('/\(.*?)\[\/url\]/i','<a href="$1" target="_blank" class="comment-t-a">$2</a>', $incoming_comment);
- $incoming_comment = preg_replace('/\[img\](.*?)\[\/img\]/i','<a href="$1" class="cboxElement comment-t-img-a" rel="example_group"><img src="$1" class="comment-t-img aligncenter size-full wp-image-393 box-hide box-show"></a>', $incoming_comment);
- return $incoming_comment;
- }
- add_filter( 'comment_text', 'comment_code_escape' );
- add_filter( 'comment_text_rss', 'comment_code_escape' );
注:这里提供了两种后台替换方式,各有利弊,自己权衡选择。
你可能感兴趣的文章
发表于2016-12-15 11:13 沙发
[强] 真的很佩服这些朋友,不但能折腾,更重要的是有技术呀!
@动感单车很多东西都是折腾出来的,多动手就会了
@懿古今我是一个不爱折腾的人,比较来得知足常乐,功能够用或是自己喜欢就行!
发表于2016-12-15 12:40 板凳
拜访“站长圈子”博客,支持一下!
其实评论框里不需要太多复杂的东西的!
@明月登楼的博客是的,所以我就没有整合到Nana主题中,而且分享教程,让有需要的博主站长自行折腾
发表于2016-12-15 13:31 地板
又引入了好几个js/css呢!
发表于2016-12-15 14:21 4楼
表示,评论框不是写文章,没必要那么多东西吧?
@姜辰[强] 跟我的想法一样,其实有一个表情搭配文字,评论就很强大的,毕竟我们的重点是在文章
@懿古今其实,我一直觉得评论的功能越多,如果评论的朋友喜欢用到其中的粗体、下划线呀等等,反倒将评论文字弄得花里胡哨,看得人事眼花缭乱,最终效果适得其反。
发表于2016-12-15 18:30 5楼
不错的创意 但是会有几个人用呢
@菜鸟网赚还是挺多博主站长喜欢复杂的功能的,我个人就比较喜欢简简单单的
发表于2016-12-15 20:24 6楼
虽然是教程,不一定非要集成到主题里,那样这个主题就成了第二个Git主题了。
@热腾网[强] 是的,我就想弄一个简简单单的主题,适合大部分新手使用,所以不想集成太多太复杂的东西,不过可以提供教程,让有需要的自行折腾
@热腾网[惊讶] 对于Git主题,其实本人从来都不大喜欢,觉得它弄得太过于花哨了,比较适合喜欢扮酷的人群使用吧,呵呵!
发表于2016-12-15 22:03 7楼
老古的主题真心不错啊,渐渐的走技术路线了,赞。
@天中青年[呲牙] 技术都是业余折腾的
@天中青年[呲牙] 反正我是早就决定了,今后再建博客的话,老古的这个主题是我的不二选择!
发表于2016-12-16 20:07 8楼
之前看到别人弄这个,考虑过要不要也折腾下,最后还是放弃了,有个表情就够了,这个用的也少
@闲鱼是的,我个人认为评论有文字和表情就足够了,太多功能反而不好
发表于2016-12-17 07:32 9楼
创意不错!但评论还是简单清爽些好!
@魔羯是的,我也是这个观点,所以就分享教程给有需要的人自行折腾
发表于2016-12-22 20:25 10楼
可以尝试一下
@蔚蓝喜欢可以试试,这个实现起来还是挺简单的
发表于2017-01-31 22:00 11楼
Nana升级到 2.06后出了个 bug ,会把文中的代码部分也“变成”图册。比如说这篇文章的 第五点 中的代码就“中招”了 [偷笑]
@mengkun[给力] 谢谢告知,已经修复,就是把functions.php文件里面的[img]连续插入N张图片[/img]改为[imgs]连续插入N张图片[/imgs],add_shortcode(‘img’, ‘gallery’);改为add_shortcode(‘imgs’, ‘gallery’);
发表于2018-12-14 16:35 12楼
我有一个问题就是评论的表情要有空格才能被识别 ( 前后有文字出现必须要有空格 )
不然就会出现如下现象[无奈]
@男人不可以穷默认添加就有空格,一般人添加完就继续输入文字,谁那么有空特意去删除空格?介意的话可以不发表表情