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

闲着没事的时候，就想着怎么瞎折腾博客，下面是我在度娘里找到的方法，当然了，这个也要针对一些主题来修改的，不是所有主题都适合修改，也有一些主题早已经实现了这一功能。下面是我对我现在正在使用的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代码，由于下面的代码与代码高亮功能有所冲突，下面就用引用代码贴出，可以直接复制粘贴，不受影响。（www.rswebun.com）

//评论框编辑器
$(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吧。

转自：www.zhbk.name