loading...
用CSS Sprites将WordPress表情图片合并为一个文件这个想法其实我很早就有了，我已经在别的网站上见到这样的应用了（比如人间网就用了这个技术）。
那么这个方法有什么好处呢？
我想这个方法最大的好处就是大大减少了HTTP Request数量（要知道一般博客上面如果有表情的话，那么表情图片的数量少则有7、8个，多则可达20+，像我之前就用了24个）以及图片的大小（以前我24个GIF图是36K+，现在则只有一个大小为4.74KB的xiaonei.png），这对于大流量的网站的好处是显而易见的。
当然缺点呢也很明显，图片成静态的了（其实也可以做成动态的，但是比较麻烦，而且文件也会比较大），朋友们会觉得比较死板，没有以前那么生动了。我个人感觉其实还可以，要知道很多网站是没有表情的，呵呵。
好了，下面Zenoven先说说WordPress实现表情符号到图片的原理。
1、WordPress后台首先要启用表情转换（在WP后台>设置>撰写选项>格式化 将 “转换如
:-)和:-P的文字表情符号为图像”选中）2、当用户发布评论后，WP根据 网站根目录/wp-includes/functions.php中smilies_init() 的定义，将表情符号转换为对应的文件名。
3、接着在评论显示的时候，WP根据 网站根目录/wp-includes/formatting.php 中translate_smiley($smiley) 的定义，输出一个 img标签，显示对应的表情。
也就是说从你输入表情对应的符号(或是点击表情)到显示图片经历了这么一个过程
表情符号>>表情文件名>>IMG标签
原理知道了，那么实现我想要的功能就很简单了。思路如下。
首先转换表情符号为文件名这一块，我让他转换成表情的ID，然后生成img标签呢，我又修改为生成一个a标签，然后利用表情的ID，给每一个生成的a标签设置CSS样式(最主要的就是background-position的应用了)
下面是我实现的具体步骤。
1、修改 网站根目录/wp-includes/functions.php中smilies_init() 的定义。下面是我修改后的smilies_init()中if ( !isset( $wpsmiliestrans ) )部分。
if ( !isset( $wpsmiliestrans ) ) { $wpsmiliestrans = array( ':(1):' => 'xiaone_1', ':(2):' => 'xiaonei_2', ':(3):' => 'xiaonei_3', ':(4):' => 'xiaonei_4', ':(5):' => 'xiaonei_5', ':(6):' => 'xiaonei_6', ':(7):' => 'xiaonei_7', ':(8):' => 'xiaonei_8', ':(9):' => 'xiaonei_9', ':(10):' => 'xiaonei_10', ':(11):' => 'xiaonei_11', ':(12):' => 'xiaonei_12', ':(13):' => 'xiaonei_13', ':(14):' => 'xiaonei_14', ':(15):' => 'xiaonei_15', ':(16):' => 'xiaonei_16', ':(17):' => 'xiaonei_17', ':(18):' => 'xiaonei_18', ':(19):' => 'xiaonei_19', ':(20):' => 'xiaonei_20', ':(21):' => 'xiaonei_21', ':(22):' => 'xiaonei_22', ':(23):' => 'xiaonei_23', ':(24):' => 'xiaonei_24', ); }2、修改 网站根目录/wp-includes/formatting.php 中 function translate_smiley($smiley) 的定义。下面是我修改后的function translate_smiley($smiley) 的代码段。
function translate_smiley($smiley) { global $wpsmiliestrans; if (count($smiley) == 0) { return ''; } $siteurl = get_option( 'siteurl' ); $smiley = trim(reset($smiley)); $img = $wpsmiliestrans[$smiley]; $smiley_masked = esc_attr($smiley); return " <a class='wp-smiley $img' ></a> "; }3、在评论文本框附近的表情显示(就是你能看到的点击一个表情就会在文本框输入对应的符号)，由于我没有用WP表情插件，用的是老万他们用的smiley.php这个文件，所以接下来做的就是修改smiley.php了（由于这里贴代码没有太大意义，所以在文章最后所有修改后的文件一并给出）
4、设计CSS样式。（代码略）
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
修改后的各个文件及详细使用说明 下载1(115网盘) 下载2(xun6)
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
参考大大的教程做了一个动态GIF的，:(24): http://www.henghengzhu.com/share/244.html
loading...
很不错，感谢分享
loading...
看不太懂啊 看到代码就头痛
loading...
技术人才
loading...
谁说没人看啊 都有评论了啊 呵呵 空灵调调 前来支持
loading...
哈哈~~ 来人来人 大刑伺候
loading...
…怕怕啊 大刑伺候 受不起 不过允许你去我那儿放肆一下 哈哈
loading...
唉，今天来迟了，呵呵～
loading...
迟了不是一点点哦~~ 哈哈
loading...
笨笨有段时间没来了，想必兄弟你也很忙吧，笨笨问候你来了。。
loading...
:(1): 是啊，最近也比较忙 呵呵 :(17):
loading...
哈哈，原来是这样啊
可惜就是不能动哦
loading...
嗯，如果会动的话，图片就会很大了
loading...
来学习一下
loading...
呵呵，这个还是有用的
loading...
好舒服的沙发啊！
loading...
:(4): 来的早哇~~
loading...