用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樣式。（代碼略）

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

　　詳細代碼下載：all_emotion_pics_in_one.rar

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈