wordpress 表情不用插件的实现方式
刚才在看昨天写的那几篇关于改版inove的js。忽然间想到一件事，那就是，无论是“回复”还是“引用”，都是把别人的内容放到评论框时面，然后提交即可。
想一下，wordpress的表情插件不也是这么干的吗？不过其加了一些自己的js代码以实现其功能。例如：custom-smilies插件。
这是一款很不错的wordpress表情插件。现在我把代码改了一下，充分利用现有代码来实现此功能。代码没有减少多少，只是把之放在了一个js文件中，这样至少看源代码我不会看到怪怪的不理解的js了。呵呵。
首先，我把所有的表情图标全部取出，放入image.html中，现在内容如下：
<img class="wp-smiley-select" alt="8-O" src="http://www.xiaoxiaozi.com/wp-includes/images/smilies/icon_eek.gif"/>
<img class="wp-smiley-select" alt="8)" src="http://www.xiaoxiaozi.com/wp-includes/images/smilies/icon_cool.gif"/>
在comments.php和guestcomments.php里面，把表情段代码更改一下
这样，表情就相当于被我全写在正文页和留言板页面，至于把表情文件单拿出来的原因，很简单，方便以后维护
在style.css里面加入如下内容，使原custom-smilies的样式依旧起作用
最后。开始完善js。我昨天说了，我把一些document.ready的函数全放在了ready.js里面，现在我将其拿出来了。
因为忽然感觉，让首页的js代码更少点，让所有js都起到应有的作用，否则就是浪费了
于是，我把昨天说的，显示隐藏用户信息段的代码也拿出来了，放在了comment.js里面
并加入了如下内容
jQuery(".wp-smiley-select").click(function(){
//当类名为wp-smiley-select的对象被点击时，把其alt属性的值传给addSmiley函数
addSmiley(jQuery(this).attr('alt'),'comment');
});
})
至于addSmiley函数，我只是把“回复”功能的代码复制了一遍，去掉一些没用的就变成了这样
{
//判断这个对象存在，并且它是textarea类型
//就是下面的那个评论框
if($("#"+commentBox) && $("#"+commentBox).attr('type') == 'textarea') {
//借助私有变量field
field = $("#"+commentBox);
} else {
//没有评论框，弹窗，告诉你丫的这个评论框居然不存在
//敢晃点我就弹窗，哼
alert("The comment box does not exist!");
return false;
}
//注意，这里加的空格很重要，嗯。
replay_val = field.val().replace(/[\n]*$/g, "") + ' ' + insertStr + ' ';
field.val(replay_val);
//这里没说的了，一定要使评论框获得焦点，嗯。
field.focus();
}
于是，现在新代码只用了这么一个js文件，实现了，标签切换，显示隐藏用户信息，回复，引用，点击表情等功能。呵呵。。
呃，刚让我把image.html换成了image.php。里面的内容直接用数组来写，发现自己刚才真的好傻啊。。唉。。
//使用全局的表情符号数组，在wp-include/functions.php里面有定义
global $wpsmiliestrans;
//定义一个临时变量
$smiles = array();
//循环数组
foreach($wpsmiliestrans as $alt => $src_path)
{
//判断其在临时数组内是否已经存在，如果已经存在，说明functions.php里面有重复定义
//不过，别怕，这里面重复的我们只显示一条，嘿嘿
if(!in_array($src_path,$smiles))
{
$smiles[] = $src_path;
echo "\n<img class='wp-smiley-select' alt='".$alt."' src='http://www.xiaoxiaozi.com/wp-includes/images/smilies/".$src_path."' />\n";
}
}
?>
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/06/26/968/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
牛
[回复]
本来也想像你这样把表情摆出来，后来一想，还是不要了，省点空间，放点其他东西吧
[回复]
:D 最近大家都很赞,写的东西都很专业,哈..
[回复]
@bolo
因为我一直喜欢加上表情，所以就想个简单的方法，还不用插件的。。呵呵。
否则加一些没用的js，实在是不值。。
[回复]
@笑容@1988y
哈哈。都是大家给面子。呵。
PS：最近工作找的怎么样？
[回复]
哈哈，今天再次拜读，有收获了
之前竟然还用插件 
[回复]
:x :x dadgfad
[回复]
:x :| :x 学习啦
[回复]
[回复]
@星星花园
呵呵，方脸确实挺有意思。 :|
[回复]
请教一个问题：因为文章中的图片设置了加边框，所以表情在文章中出现时也有边框，而在评论上却是没有的，那在文章中的表情是否也可以去掉边框，而其他图片有边框呢？
[回复]
@wei
你可以给表情的img元素，加一个class属性，然后用CSS为之去掉边框。
不过给表情的img加上class你要看WP发评论那一块的原码。嗯。
[回复]
@simaopig
不是在评论里，而是在文章里，大概是single.php
[回复]
@wei
我知道你的意思，但是在文章里，你也需要看“发评论”的代码，只要看这个就够了。
在发评论的代码里，将更让img标签加上一个类名不就OK了嘛。去找single之类的做什么。这些都是从数据库里读出来的啊。 :razz:
[回复]
:| 这个方法我用在制作我的网站上的 不过没用在WP上 哈哈 **所见略同啊
添加Alt
[回复]
@qpwoeiru96
呵 呵。又不是WP专用，想用在哪就用在哪。呵。
[回复]
;-)
学习啦
[回复]