用CSS Sprites合并WordPress表情图片

用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 ) )部分。

/* 一起学建站 www.yqxjz.eu */
.wp-smiley {
	width:20px;
	height:20px;
	background:url(img/xiaonei.png) no-repeat;
	margin:2px;
	margin-bottom:-7px;
	display:inline-block;
}
.xiaonei_1 {
	background-position:0 0
}
.xiaonei_2 {
	background-position:0 -20px
}
.xiaonei_3 {
	background-position:0 -40px
}
.xiaonei_4 {
	background-position:0 -60px
}
.xiaonei_5 {
	background-position:0 -80px
}
.xiaonei_6 {
	background-position:0 -100px
}
.xiaonei_7 {
	background-position:0 -120px
}
.xiaonei_8 {
	background-position:0 -140px
}
.xiaonei_9 {
	background-position:0 -160px
}
.xiaonei_10 {
	background-position:0 -180px
}
.xiaonei_11 {
	background-position:0 -200px
}
.xiaonei_12 {
	background-position:0 -220px
}
.xiaonei_13 {
	background-position:0 -240px
}
.xiaonei_14 {
	background-position:0 -260px
}
.xiaonei_15 {
	background-position:0 -280px
}
.xiaonei_16 {
	background-position:0 -300px
}
.xiaonei_17 {
	background-position:0 -320px
}
.xiaonei_18 {
	background-position:0 -340px
}
.xiaonei_19 {
	background-position:0 -360px
}
.xiaonei_20 {
	background-position:0 -380px
}
.xiaonei_21 {
	background-position:0 -400px
}
.xiaonei_22 {
	background-position:0 -420px
}
.xiaonei_23 {
	background-position:0 -440px
}
.xiaonei_24 {
	background-position:0 -460px
}
.a_block {
	display:block;
	float:left;
	margin:0 1px
}
/*一起学建站 www.yqxjz.eu End*/

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 ” “;
}

3、在评论文本框附近的表情显示(就是你能看到的点击一个表情就会在文本框输入对应的符号)，由于我没有用WP表情插件，用的是老万他们用的smiley.php这个文件，所以接下来做的就是修改smiley.php了（由于这里贴代码没有太大意义，所以在文章最后所有修改后的文件一并给出）

4、设计CSS样式。代码下载