用CSS Sprites合并WordPress表情图片教程

GD Star Rating
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)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

已有17条评论 发表评论

  1. 哼哼猪 /

    参考大大的教程做了一个动态GIF的,:(24): http://www.henghengzhu.com/share/244.html

    GD Star Rating
    loading...
  2. 随缘 /

    很不错,感谢分享

    GD Star Rating
    loading...
  3. 心情短语 /

    看不太懂啊 看到代码就头痛

    GD Star Rating
    loading...
  4. 竹纤维-小国 /

    技术人才

    GD Star Rating
    loading...
  5. 空灵调调 /

    谁说没人看啊 都有评论了啊 呵呵 空灵调调 前来支持

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      哈哈~~ 来人来人 大刑伺候

      GD Star Rating
      loading...
      1. 空灵调调 /

        …怕怕啊 大刑伺候 受不起 不过允许你去我那儿放肆一下 哈哈

        GD Star Rating
        loading...
  6. 绍兴小杜 /

    唉,今天来迟了,呵呵~

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      迟了不是一点点哦~~ 哈哈

      GD Star Rating
      loading...
  7. 笨笨 /

    笨笨有段时间没来了,想必兄弟你也很忙吧,笨笨问候你来了。。

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(1): 是啊,最近也比较忙 呵呵 :(17):

      GD Star Rating
      loading...
  8. vaman /

    哈哈,原来是这样啊
    可惜就是不能动哦

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      嗯,如果会动的话,图片就会很大了

      GD Star Rating
      loading...
  9. 郑州seo /

    来学习一下

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      呵呵,这个还是有用的

      GD Star Rating
      loading...
  10. 于泽鹏 /

    好舒服的沙发啊!

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(4): 来的早哇~~

      GD Star Rating
      loading...

发表评论