按正文长度,这充其量只能算个小技巧~不过给 WordPress 优化和加速的路是没有尽头的,况且这个提高表情加载速度的技巧还是很有效的。

一般情况下 WordPress 表情都保存在空间所在的主机上,即使利用 wp-grin 或者WordPress非插件调用表情符的自定义表情方法,所有的表情也都是保存在空间所在主机上。而我们一般所用的表情都是动态 GIF,比如 QQ 表情,这一来仅仅加载 20 个表情就需要几十 KB 的流量和 20 次 HTTP 请求,如此大的开销对博客加载速度尤其是首次加载速度的影响可不是一点半点啊!我选用人人网的表情原因有二:1、大小与博客正文的字号很搭配。2、人人网的表情可以外链。很简单吧。

所谓的加快表情载入速度,只不过是利用人人网表情可以外链的特性而已,加速原理:1、利用人人网的大带宽和响应快提高加载表情的速度。2、只要上过人人网,就会有表情的缓存,即使首次造访博客的访问者加载时间也几乎可以不计。

1.要改的地方有两处,目的很简单,就是为了让 WordPress 的过滤器,把默认的表情地址,更改为自定义的表情地址。

修改主题 functions.php

add_filter('smilies_src','custom_smilies_src',1,10);
function custom_smilies_src ($img_src, $img, $siteurl){
	return 'http://a.xnimg.cn//imgpro/emotions/tie/'.$img;
};
//将引号内的网址修改为表情所在路径即可,可以为网络上任一位置。

如果需要对表情代码和表情文件名进行修改,还需要添加另一个钩子,修改主题 functions.php

//具体哪个文件名代表哪个表情,上人人查看一下就好了。
global $wpsmiliestrans;
$wpsmiliestrans = array (
	':vomit:' => '19.gif',
	':appall:' => '5.gif',
	':???:' => '21.gif',
	':love:' => '13.gif',
	':smile:' => '33.gif',
	':orz:' => '8.gif',
	':sigh:' => '15.gif',
	':razz:' => '18.gif',
	':speechless:' => '6.gif',
	':cry:' => '28.gif',
	':mad:' => '31.gif',
	':kiss:' => '20.gif',
	':laugh:' => '24.gif',
	':shy:' => '25.gif',
	':oops:' => '7.gif',
	':-)' => '33.gif',
	':-?' => '21.gif',
	':-P' => '18.gif',
	':-o' => '7.gif',
	':-x' => '31.gif',
	':)' => '33.gif',
	':?' => '21.gif',
	':P' => '18.gif',
	':o' => '7.gif',
	':x' => '31.gif',
	';)' => '4.gif',
);

2.如果采用了非插件调用表情符的方法,还需修改主题文件夹内的 smiley.php

/* 加上 height 和 width 貌似可以减少浏览器渲染的时间,PageSpeed 如是说。 */
<div id="smilelink">
<img onclick="grin(':smile:');" src="http://a.xnimg.cn//imgpro/emotions/tie/33.gif" title="微笑" height="16" width="16"/>
<img onclick="grin(':cry:');" src="http://a.xnimg.cn//imgpro/emotions/tie/28.gif" title="哭" height="16" width="16"/>
<img onclick="grin(':speechless:');" src="http://a.xnimg.cn//imgpro/emotions/tie/6.gif" title="汗" height="16" width="18"/>
<img onclick="grin(':oops:');" src="http://a.xnimg.cn//imgpro/emotions/tie/7.gif" title="惊" height="16" width="18"/>
<img onclick="grin(':orz:');" src="http://a.xnimg.cn//imgpro/emotions/tie/8.gif" title="囧" height="16" width="16"/>
<img onclick="grin(':laugh:');" src="http://a.xnimg.cn//imgpro/emotions/tie/24.gif" title="大笑" height="16" width="16"/>
<img onclick="grin(':???:');" src="http://a.xnimg.cn//imgpro/emotions/tie/21.gif" title="晕" height="16" width="16"/>
<img onclick="grin(':appall:');" src="http://a.xnimg.cn//imgpro/emotions/tie/5.gif" title="尴尬" height="16" width="18"/>
<img onclick="grin(':love:');" src="http://a.xnimg.cn//imgpro/emotions/tie/13.gif" title="色" height="16" width="17"/>
<img onclick="grin(':shy:');" src="http://a.xnimg.cn//imgpro/emotions/tie/25.gif" title="脸红" height="16" width="16"/>
<img onclick="grin(':sigh:');" src="http://a.xnimg.cn//imgpro/emotions/tie/15.gif" title="叹气" height="16" width="20"/>
<img onclick="grin(':vomit:');" src="http://a.xnimg.cn//imgpro/emotions/tie/19.gif" title="吐..." height="16" width="16"/>
<img onclick="grin(':kiss:');" src="http://a.xnimg.cn//imgpro/emotions/tie/20.gif" title="飞吻" height="16" width="20"/>
<img onclick="grin(':mad:');" src="http://a.xnimg.cn//imgpro/emotions/tie/31.gif" title="怒" height="16" width="19"/>
<img onclick="grin(':razz:');" src="http://a.xnimg.cn//imgpro/emotions/tie/18.gif" title="偷笑" height="16" width="18"/>
</div>

要注意的是以上代码片段中表情调用的字段和文件名都已经被我修改过了,和 WordPress 默认的不同,网上提供的 Smiley.php 和搭配表情都是按照 WordPress 默认的表情文件名来的。 :smile:

  1. 的確很漂亮‘有时间搬回家

  2. 现在的这个 hotmail 的表情不错, 比人人网的耐看太多了