黄冈信息港

当前位置:

用CSSSprites合并WordPre

2019/06/15 来源:黄冈信息港

导读

用CSS Sprites将WordPress表情图片合并为一个文件这个想法其实我很早就有了,我已经在别的站上见到这样的应用了(比如人间就用了

用CSS Sprites将WordPress表情图片合并为一个文件这个想法其实我很早就有了,我已经在别的站上见到这样的应用了(比如人间就用了这个技术)。

那么这个方法有什么好处呢?

我想这个方法的好处就是大大减少了HTTP Request数量(要知道一般博客上面如果有表情的话,那么表情图片的数量少则有7、8个,多则可达20+,像我之前就用了24个)以及图片的大小(以前我24个GIF图是36K+,现在则只有一个大小为4.74KB的g),这对于大流量的站的好处是显而易见的。

当然缺点呢也很明显,图片成静态的了(其实也可以做成动态的,但是比较麻烦,而且文件也会比较大),朋友们会觉得比较死板,没有以前那么生动了。我个人感觉其实还可以,要知道很多站是没有表情的,呵呵。

好了,下面Zenoven先说说WordPress实现表情符号到图片的原理。

1、WordPress后台首先要启用表情转换(在WP后台》设置》撰写选项》格式化 将 转换如 :-) 和 :-P 的文字表情符号为图像选中)

2、当用户发布评论后,WP根据 站根目录/wp-includes/p中smilies_init() 的定义,将表情符号转换为对应的文件名。

3、接着在评论显示的时候,WP根据 站根目录/wp-includes/p 中translate_smiley($smiley) 的定义,输出一个 img标签,显示对应的表情。

也就是说从你输入表情对应的符号(或是点击表情)到显示图片经历了这么一个过程

表情符号表情文件名IMG标签

原理知道了,那么实现我想要的功能就很简单了。思路如下。

首先转换表情符号为文件名这一块,我让他转换成表情的ID,然后生成img标签呢,我又修改为生成一个a标签,然后利用表情的ID,给每一个生成的a标签设置CSS样式(主要的就是background-position的应用了)

下面是我实现的具体步骤。

1、修改 站根目录/wp-includes/p中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/p ) 的定义。下面是我修改后的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表情插件,用的是老万他们用的p这个文件,所以接下来做的就是修改p了(由于这里贴代码没有太大意义,所以在文章所有修改后的文件一并给出)

4、设计CSS样式。(代码略)

修改后的各个文件及详细使用说明 下载1(115盘) 下载2(xun6)

非特别说明,均为本站原创文章 转载请注明:原文摘自Zenoven自由亾

本文链接地址:

注:相关站建设技巧阅读请移步到建站教程频道。

如何创建微信小程序
检查化验
白癜风遗传
标签

友情链接