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

    	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)

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

  • WordPress表情不会动了?怎么回事?

    首先请刷新下~~

    如果还是不会动。。。那么就证明我成功了!哈哈,是不是有点莫名奇妙?

    因为你现在看到的所有表情其实都在一个图片文件里,是个静态的GIF,大小5.32KB,这个就是昨天晚上忙乎了几个小时的效果。

    所有表情看起来像是图片,即img标签,其实是a标签,这是用CSS sprites做的效果。从认识这个CSS Sprites开始我就异常喜爱,因为他可以很轻松的减小图片的数量和大小。

    目前在IE6下面还没有测试,别的浏览器好像显示都正常了。如果有错位或其他bug请提出,方法今天整理好就放出,敬请期待!

  • 小站表情图片使用情况统计

    排名 文件编号 使用次数 表情
    1 4 149 :(4):
    2 1 103 :(1):
    3 18 100 :(18):
    4 11 91 :(11):
    5 8 87 :(8):
    6 24 83 :(24):
    7 3 80 :(3):
    8 2 77 :(2):
    9 16 66 :(16):
    10 9 62 :(9):
    11 7 47 :(7):
    12 10 46 :(10):
    13 6 44 :(6):
    14 14 37 :(14):
    15 23 35 :(23):
    16 13 30 :(13):
    17 5 20 :(5):
    18 17 20 :(17):
    19 19 20 :(19):
    20 21 18 :(21):
    21 22 17 :(22):
    22 20 16 :(20):
    23 12 13 :(12):
    24 15 10 :(15):

    (由于当时使用校内表情的日期没有记录,统计开始的具体日期不太清楚了,那就以WP修改实战之无插件更换WP默认表情 的日期为准吧,2009.11.3 ,今天是2010.5.6 )

    统计天数 :184
    表情累积使用次数:1127
    最受欢迎的3个表情(以使用次数最多的3个为准):第一名 :(4):    第二名 :(1): 第三名  :(18):

    这个统计有什么用呢?呵呵,其实是我最近要改版了,变化应该不大,主要是对文章的分类进行调整(由于之前分类太多,而且比较乱),统计下表情的使用次数,然后删除一些。

    然后呢,现在有个问题要问下大家,就是我应该删除全部统计中使用次数最少的,还是删除每一类中使用次数少的,留下代表性的(比如笑就有好几种,伤心也有几种)?

  • 再次对WordPress表情插件动刀

    以前我用的是mg12的highslide4wp这个插件(我本来用这个插件的意图是添加图片放大缩小功能的,后来也基本上没有),里面有添加表情这个功能。

    但是最近用的时候发现了问题,而且我也是希望插件越少越好,便删除之。。。那么该如何加入表情呢?搜索!

    果然,方法很快出来了,下载个smilely.zip ,然后解压smilely.php到你主题所在的路径,然后在在 comments.php的textarea之前添加下面的代码(原文来自于 不亦乐乎 ,其中说的guestcomments.php在我的主题中没有)

    <?php include(TEMPLATEPATH . ‘/smiley.php’); ?>

    如果你需要添加新的表情文件,可以打开smilely.php中修改,只要一看就会明白要改什么东西。好了,现在你看到我的评论上面的表情就是这个样子了,还算可以吧?

    附smilely.zip下载地址:smiley.zip

  • WP修改实战之无插件更换WP默认表情

    以前一直用的是WP默认的那些表情,前些天看到校内的表情不错就想拿过来用了,嘿嘿

    校内icon

    首先想到的是将原来的表情图片一个个换掉,由于校内下载到的那些命名都是1.gif 2.gif这样的,而WP默认的是icon_smile.gif这样,实在麻烦,于是此方法PASS掉。

    至于插件,鉴于WP已经比较慢,还是不装插件的好,于是装插件也被我PASS

    剩下的只有修改代码了,看了网上的方法,2.8的应该是修改wp-includes/functions.php中的代码,默认的表情定义是这样的

    if ( !isset( $wpsmiliestrans ) ) {
      $wpsmiliestrans = array(
      ‘:mrgreen:’ => ‘icon_mrgreen.gif’,
      ‘:neutral:’ => ‘icon_neutral.gif’,
      ‘:twisted:’ => ‘icon_twisted.gif’,
        ‘:arrow:’ => ‘icon_arrow.gif’,

    由于校内的是命名都是1.gif 2.gif这样的,我是懒人,就改成了下面这样的

    if ( !isset( $wpsmiliestrans ) ) {
      $wpsmiliestrans = array(
      ‘:(1):’ => ‘1.gif’,
      ‘:(2):’ => ‘2.gif’,
      ‘:(3):’ => ‘3.gif’,
      ‘:(4):’ => ‘4.gif’,

    这样改完,确实成功了,但是要注意,如果你把以前WP的默认表情删除,那么以前的调用都会出问题,我就遇到这问题,赶紧再传上,OK。