纯代码增强wordpress评论编辑器实现淡入淡出效果

849
.
​​​​​​​​​​​​​

闲着没事的时候,就想着怎么瞎折腾博客,下面是我在度娘里找到的方法,当然了,这个也要针对一些主题来修改的,不是所有主题都适合修改,也有一些主题早已经实现了这一功能。下面是我对我现在正在使用的weisaysimple主题进行的修改,大家可以进行参考。
把wordpress编辑器里默认表情进行隐藏,点击评论框便出现,再点击则再次隐藏,并添加颜色、图片等按钮增强编辑器。实现淡入淡出效果,关于淡入淡出的时间你也可以自行修改调整。
1、打开主题文件中的评论模板comments.php(大多主题都是这个文件,如果你的主题比较奇葩的话或许在其他地方,那就自己找吧)。
找到

1
<p><?php include(TEMPLATEPATH . '/includes/smiley.php'); ?></p>

把下面代码进行覆盖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<p><textarea name="comment" id="comment" tabindex="4"></textarea></p>  
        <div id="smiley"><?php include(TEMPLATEPATH . '/includes/smiley.php'); ?></div>  
<div id="editor_tools">  
<div id="fontcolor">  
<a href="javascript:SIMPALED.Editor.red()" style="background-color: red"></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.magenta()" style="background-color: magenta"></a>  
<a href="javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a>  
<a href="javascript:SIMPALED.Editor.chocolate()" style="background-color: chocolate"></a>  
<a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>  
<a href="javascript:SIMPALED.Editor.aquamarine()" style="background-color: aquamarine"></a>  
<a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a>  
<a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a>  
<a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a>  
<a href="javascript:SIMPALED.Editor.thistle()" style="background-color: thistle"></a>  
<a href="javascript:SIMPALED.Editor.brown()" style="background-color: brown"></a>  
<a href="javascript:SIMPALED.Editor.peru()" style="background-color: peru"></a>  
<a href="javascript:SIMPALED.Editor.deeppink()" style="background-color: deeppink"></a>  
<a href="javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a>  
<a href="javascript:SIMPALED.Editor.slategray()" style="background-color: slategray"></a>  
<a href="javascript:SIMPALED.Editor.tomato()" style="background-color: tomato"></a>  
</div>  
<p><div id="editor">  
<a href="javascript:;" id="comment-smiley"><b>表情</b></a>  
<a href="javascript:SIMPALED.Editor.strong()"><b>粗体</b></a>  
<a href="javascript:SIMPALED.Editor.em()"><b>斜体</b></a>  
<a href="javascript:" id="font-color"><b>颜色</b></a>  
<a href="javascript:SIMPALED.Editor.quote()"><b>引用</b></a>  
<a href="javascript:SIMPALED.Editor.ahref()"><b>链接</b></a>  
<a href="javascript:SIMPALED.Editor.del()"><b>删除线</b></a>  
<a href="javascript:SIMPALED.Editor.underline()"><b>下划线</b></a>  
<a href="javascript:SIMPALED.Editor.code()"><b>插代码</b></a>  
<a href="javascript:SIMPALED.Editor.img()"><b>插图片</b></a></div>  
</p></div>

其中上面的颜色代码可自行修改,请保持和JS文件进行同步修改,如果你的主题不支持哪种颜色自己去找喜欢的类型替换。
注意,在下面还要找到

1
<p><textarea name="comment" id="comment" tabindex="4"></textarea></p>

把上一段代码删除,不然就会出现两个评论框了哦。
2、将下面的CSS代码添加到style.css文件中

1
2
3
4
5
6
/**评论框编辑器**/  
#editor{width:100%px;height:26px;line-height:26px;border:1px #e0e0e0 solid;border-radius:2px 2px 0 0;box-shadow:0 2px 10px #eee,inset 0 -2px 10px #eee;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;z-index:99999;}  
#editor a{color:#777;display:inline-block;padding:0 6px;height:26px;border-right:1px solid #ddd;}  
#editor a:hover{color:#333;text-decoration:none;}  
#fontcolor{width:446px;height:20px;line-height:20px;border:1px #e0e0e0 solid;z-index:99999;}  
#fontcolor a{display:inline-block;height:20px;width:21px;}

3、将下面的jQuery代码添加到你的js文件中或者自己新建个js文件,不要忘记在头文件模板中引用哦
我的是调用到header.php顶部文件里面,调用代码是

1
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/pinglun.js"></script>

下面是jQuery代码,由于下面的代码与代码高亮功能有所冲突,下面就用引用代码贴出,可以直接复制粘贴,不受影响。

//评论框编辑器
$(document).ready(function () {
$(“#smiley”).hide(500);
$(“#comment-smiley”).click(function(){
$(“#smiley”).toggle(500);
});
});
$(document).ready(function () {
$(“#fontcolor”).hide(500);
$(“#font-color”).click(function(){
$(“#fontcolor”).toggle(500);
});
});
$(document).ready(function () {
$(“#editor”).hide(500);
$(“#comment”).click(function(){
$(“#editor”).toggle(500);
});
});
$(document).ready(function () {
$(“#smiley”).toggle();
$(“#comment”).click(function(){
$(“#smiley”).hide(500);
});
});
$(document).ready(function () {
$(“#fontcolor”).toggle();
$(“#comment”).click(function(){
$(“#fontcolor”).hide(500);
});
});
$(document).ready(function () {
$(“#smiley”).hide();
$(“#comment”).click(function(){
});
});
$(document).ready(function () {
$(“#fontcolor”).hide();
$(“#comment”).click(function(){
});
});
$(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 g = document.getElementById(‘comment’) || 0;
var h = {
strong: function() {
addEditor(g, ‘‘, ‘‘)
},
em: function() {
addEditor(g, ‘‘, ‘‘)
},
del: function() {
addEditor(g, ‘‘, ‘‘)
},
underline: function() {
addEditor(g, ‘‘, ‘‘)
},
quote: function() {
addEditor(g, ‘

‘, ‘

‘)
},
ahref: function() {
var a = prompt(‘请输入链接地址’, ‘http://’);
var b = prompt(‘请输入要显示成文字链接的描述’,”);
if (a) {
addEditor(g, ‘‘ + b + ‘‘,”)
}
},
img: function() {
var a = prompt(‘请输入图片地址’, ‘http://’);
if (a) {
addEditor(g, ‘‘,”)
}
},
code: function() {
addEditor(g, ‘

1
', '

‘)
},
red: function() {
addEditor(g, ‘‘, ‘‘)
},
green: function() {
addEditor(g, ‘‘, ‘‘)
},
blue: function() {
addEditor(g, ‘‘, ‘‘)
},
magenta: function() {
addEditor(g, ‘‘, ‘‘)
},
yellow: function() {
addEditor(g, ‘‘, ‘‘)
},
chocolate: function() {
addEditor(g, ‘‘, ‘‘)
},
black: function() {
addEditor(g, ‘‘, ‘‘)
},
aquamarine: function() {
addEditor(g, ‘‘, ‘‘)
},
lime: function() {
addEditor(g, ‘‘, ‘‘)
},
fuchsia: function() {
addEditor(g, ‘‘, ‘‘)
},
orange: function() {
addEditor(g, ‘‘, ‘‘)
},
thistle: function() {
addEditor(g, ‘‘, ‘‘)
},
brown: function() {
addEditor(g, ‘‘, ‘‘)
},
peru: function() {
addEditor(g, ‘‘, ‘‘)
},
deeppink: function() {
addEditor(g, ‘‘, ‘‘)
},
purple: function() {
addEditor(g, ‘‘, ‘‘)
},
slategray: function() {
addEditor(g, ‘‘, ‘‘)
},
tomato: function() {
addEditor(g, ‘‘, ‘‘)
}
};
window[‘SIMPALED’] = {};
window[‘SIMPALED’][‘Editor’] = h
});

括号里的数字500是淡入淡出是时间500毫秒,可自行修改。其中的颜色可自行修改,请保持和comments.php文件中的编辑器进行同步修改。
到这里效果就出来了,当然如果你使用的是和我一样的主题,那么这里还要做一步,那就是留言模板那里好像还没有效果,
所以,我们在这里还要做最后一步,因为weisaysimple主题里面留言模板里调用的是gbook2.php文件,所以这里要在gbook2.php文件的顶部添加如下代码进行jQuery代码调用

1
<?php get_header(); ?>

PS:如上都是本人按照自己的主题进行修改的,如果要对你的博客进行修改,注意,要先备份好,再来折腾。
如果你是高手,就请直接PASS吧。

本文固定链接: https://www.zhbk.name/1473.html | m88博客

该日志由 m88 于2013年07月16日发表在 技术资料, 资源共享 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 纯代码增强wordpress评论编辑器实现淡入淡出效果 | m88博客
关键字: , , , , , ,

纯代码增强wordpress评论编辑器实现淡入淡出效果:目前本页面共有 12 条留言 其中:访客:6 条, 博主:6 条, 目前共有 12 条评论,双方以 6:6 暂时持平

  1. 此人正徘徊于门口
    柳飘清枫 China Google Chrome Windows :

    这代码很全面, :grin: 谢谢博主的教程,这滑动解锁挺好玩的。

    2014-01-12 14:56 广东省 电信[回复]
    • m88 China Google Chrome Windows :

      互相学习吧,这个解锁的只是个简单的防垃圾评论的小插件而已。

      2014-01-12 20:46 [回复]
  2. 此人强势抢占了地板
    深蓝 China Internet Explorer Windows :

    我也正准备用多说。。。你怎么看,哈哈。
    技术文章必须收藏学习之!

    2013-07-26 22:06 安徽省淮南市 电信[回复]
    • m88 China Google Chrome Windows :

      :?: 额,本人不敢苟同哦,wordpress还是尽量少装插件比较好。

      2013-07-27 00:11 [回复]
  3. 此人强势抢占了板凳
    翩翩飞舞 China Google Chrome Windows :

    这个淡入淡出 貌似不错哈 但是现在都改用多说了

    2013-07-18 01:50 安徽省芜湖市 电信[回复]
    • m88 China Google Chrome Windows :

      不错,现在很多博客都已经被多说插件攻破了,不过我个人感觉wordpress还是少用插件比较好,你应该懂的。 :mrgreen:

      2013-07-18 12:21 [回复]
  4. 此人强势抢占了沙发
    五叶神 China Google Chrome Windows :

    博主很强大,这个评论框也很强大

    2013-07-17 10:13 湖南省 联通[回复]
    • m88 China Google Chrome Windows :

      :arrow: 博主不强大,wordpress才强大。

      2013-07-17 17:52 [回复]
      • wordpress是强大,但是要看是谁在玩,博主做模板不?

        2013-07-18 08:51 湖南省 联通[回复]
        • m88 China Google Chrome Windows :

          抱歉,我不做模板,没那时间折腾。

          2013-07-18 12:16 [回复]
      • 哈 wp强大也是因为有像博主这样的高手存在所以强大了。

        2013-07-19 20:05 福建省泉州市 电信[回复]
        • m88 China Google Chrome Windows :

          :arrow: 额,我的个人介绍那里貌似写着有,什么都会一点,却什么都不精通。半桶水都不到,很凄凉的。 :cry:

          2013-07-19 22:45 [回复]

发表评论

汗 色 悲 闭嘴 调皮 笑 惊 亲 雷 馋 晕 酷 奸 怒 狂 萌 吃 贪 囧 羞 哭 嘿

NOTICE1:亲,评论一下吧,又不会怀孕,欢迎吐槽!

NOTICE2:一切广告形式的昵称及评论一律删除,与本文无关的留言请到留言板,谢谢合作!

NOTICE3: 为防止垃圾评论,没有头像的会被“小墙”直接拖入待审,请申请Gravatar通用头像

NOTICE4: You must type some Chinese(like“你好”)in your comment to pass the spam-check, thanks!

快捷键:Ctrl+Enter
欢迎来自 miantiao.me 的朋友!
推荐您 点击这里 订阅我的博客
×