WordPress 自身自带了 22个 表情图标。

如果你开启了“表情转换”功能的话, 就会将一些表情字符转换为相应的表情图片 比如 “:)” ,该功能开启方法如下:

注:[本文为了示例,将相应冒号专转换为中文冒号]

  1. 前往站点后台
  2. 选择设置 -> 撰写
  3. 格式区域,取消选择"转换如 :-)、:-P 等文字表情符号为图像"的选项
然后今天,Zoe 说她想要新浪微博上一系列墩墩的表情(彼尔德),于是着手准备替换默认表情,然后就发现了很严重的问题,发现 WordPress 默认的表情库相当不理想,比如“开心”的表情,它有 “:smile:”, “:grin:”, “:lol:”,“:mrgreen:” ,再看围脖上的那套,哪来那么多开心的表情啊。另外, WordPress 还有诸如 “:arrow:” 这种。。。。。情何以堪。

虽然表情数量刚好一样是 22 个,但是,如果只是简单的替换 WordPress 中相应的 “icon_*.gif” 的话,以前文章以及评论中写过的表情就乱套了,比如曾经你发了个微笑,现在的图片确实生气。。。。

能不能另外自定义这些表情符号以及他们对应的图片呢?显然是可以的,于是就产生了这篇文章。

原理,查看了 wp 官方的 Codex - Using Smilies

If you really must change the file names of the images, edit the file that refers to these images, 'vars.php' (in WordPress 2.2, they're located in 'functions.php'), situated in the /wp-includes/ directory.
然后,就找到了那个文件,查找 “smilies”,就可以发现这个函数:
function smilies_init() {
    ......
}
好的,既然找到根源了,我们就可以动手了。

下面是修改方法:

1.搜集你需要的表情。

将他们们命名,并想好他们的相应的表情符号(关键字)

比如: ::bed拍脸: =》 bed_pailian.gif

我把他们都保存在了我的主题目录下的 images/smilies 文件夹下,这样,WP 升级后不会将其覆盖掉(还原掉,你不想的)

2. 改造主题的 function.php

打开你的 function.php 它一般位于:$站点目录/wp-content/themes/主题目录/  下面,或者你也可以在 WP 后台 “Appearance” =》 “Editor” ,然后找到 function.php 。(注意:我建议不要直接在后台改造你的主题,因为如果出错,你的博客就下线了 :bed蹬腿: )

在空白位置,一般你可以选在该文件的最后面,另起一行,然后输入下面代码:

/**
 * Plugin Name: Add Custom Smilies
 * Plugin URI: http://zhuli.me/2012/05/04/add-custom-smilies-to-wordpress.html
 * Description: Add More Smilies to your WP.
 * Version: 0.0.1
 * Author: Leigh
 * Author URI: http://zhuli.me/
 */
function evolz_smilies_init() {
	global $wpsmiliestrans, $wp_smiliessearch, $wp_smiliesreplace;

	// don't bother setting up smilies if they are disabled
	if ( !get_option( 'use_smilies' ) )
		return;

	if ( !isset( $wpsmiliestrans ) ) {
		$wpsmiliestrans = array(
		        ':bed奔跑:' => 'bed_benpao.gif',
		        ':bed蹬腿:' => 'bed_dengtui.gif',
		        ':bed飞吻:' => 'bed_feiwen.gif',
		        ':bed好饱:' => 'bed_haobao.gif',
		        ':bed嘿哈:' => 'bed_heiha.gif',
		      ':bed举哑铃:' => 'bed_juyaling.gif',
		      ':bed啦啦啦:' => 'bed_lalala.gif',
		        ':bed练腰:' => 'bed_lianyao.gif',
		        ':bed凌乱:' => 'bed_lingluan.gif',
		        ':bed拍脸:' => 'bed_pailian.gif',
		        ':bed拍手:' => 'bed_paishou.gif',
		          ':bed跑:' => 'bed_pao.gif',
		          ':bed皮:' => 'bed_pi.gif',
		        ':bed飘忽:' => 'bed_piaohu.gif',
		        ':bed揉眼:' => 'bed_rouyan.gif',
		        ':bed撒娇:' => 'bed_sajiao.gif',
		        ':bed踏步:' => 'bed_tabu.gif',
		        ':bed弹跳:' => 'bed_tantiao.gif',
		          ':bed跳:' => 'bed_tiao.gif',
	   	        ':bed兴奋:' => 'bed_xingfen.gif',
		    ':bed仰卧起坐:' => 'bed_yangwoqizuo.gif',
		        ':bed转圈:' => 'bed_zhuanquan.gif',
		        ':mrgreen:' => 'icon_mrgreen.gif',
				':neutral:' => 'icon_neutral.gif',
				':twisted:' => 'icon_twisted.gif',
				  ':arrow:' => 'icon_arrow.gif',
				  ':shock:' => 'icon_eek.gif',
				  ':smile:' => 'icon_smile.gif',
				    ':???:' => 'icon_confused.gif',
				   ':cool:' => 'icon_cool.gif',
				   ':evil:' => 'icon_evil.gif',
				   ':grin:' => 'icon_biggrin.gif',
				   ':idea:' => 'icon_idea.gif',
				   ':oops:' => 'icon_redface.gif',
				   ':razz:' => 'icon_razz.gif',
				   ':roll:' => 'icon_rolleyes.gif',
				   ':wink:' => 'icon_wink.gif',
				    ':cry:' => 'icon_cry.gif',
				    ':eek:' => 'icon_surprised.gif',
				    ':lol:' => 'icon_lol.gif',
				    ':mad:' => 'icon_mad.gif',
				    ':sad:' => 'icon_sad.gif',
				      '8-)' => 'icon_cool.gif',
				      '8-O' => 'icon_eek.gif',
				      ':-(' => 'icon_sad.gif',
				      ':-)' => 'icon_smile.gif',
				      ':-?' => 'icon_confused.gif',
				      ':-D' => 'icon_biggrin.gif',
				      ':-P' => 'icon_razz.gif',
				      ':-o' => 'icon_surprised.gif',
				      ':-x' => 'icon_mad.gif',
				      ':-|' => 'icon_neutral.gif',
				      ';-)' => 'icon_wink.gif',
				       '8)' => 'icon_cool.gif',
				       '8O' => 'icon_eek.gif',
				       ':(' => 'icon_sad.gif',
				       ':)' => 'icon_smile.gif',
				       ':?' => 'icon_confused.gif',
				       ':D' => 'icon_biggrin.gif',
				       ':P' => 'icon_razz.gif',
				       ':o' => 'icon_surprised.gif',
				       ':x' => 'icon_mad.gif',
				       ':|' => 'icon_neutral.gif',
				       ';)' => 'icon_wink.gif',
				      ':!:' => 'icon_exclaim.gif',
				      ':?:' => 'icon_question.gif',
		);
	}
	$siteurl = get_option( 'siteurl' );
	foreach ( (array) $wpsmiliestrans as $smiley => $img ) {
	$wp_smiliessearch[] = '/(\s|^)' . preg_quote( $smiley, '/' ) . '(\s|$)/';
	$smiley_masked = attribute_escape( trim( $smiley ) );
	$wp_smiliesreplace[] = " <img src='$siteurl/wp-includes/images/smilies/$img' alt='$smiley_masked' class='wp-smiley' /> ";
	}
}

remove_action('init', 'smilies_init', 5);
add_action('init', 'evolz_smilies_init', 5);

我们可以看到上面代码最后的两条语句,倒数第二条移除了 WP 自带的 smiles_init 函数,最后一条启用了我们自定义的   evolz_smilies_init  函数。

这样,WP 在解析文章数据时候,便会便会在我们自定义的表情数组中查抄我们的表情了。

接下来,你要做的事情就是,定义你的表情列表,如上面代码中所示。
':bed奔跑:' => 'bed_benpao.gif', 前面引号中的事表情符号(注意我这里为了演示用了中文冒号,你在定义的时候需要注意!),也就是你在写文章或评论时候输入的文字,后面引号中的就是相应的文件名了。

现在,我的表情和 新浪微博 的表情关键字是一样的了, 只是围脖用 [] 包含,而我用 :: 包含,这样做是因为,如上代码,我在自定义的表情后面仍然加上了 WP 默认的关键字和文件名列表,这样,你之前文章和评论中所引用的表情仍然可以保持不变,等于是在原来基础上多了一套表情了 :bed啦啦啦:

3.将表情目录映射到我们自己的主题目录下的 images/smilies

使用 我爱水煮鱼 的代码:
/**
 * Plugin Name: Custom Smilies Src
 * Plugin URI: http://fairyfish.net/m/custom_smilies_src/
 * Description: Custome Smiles Src
 * Version: 0.1
 * Author: Denis
 * Author URI: http://fairyfish.net/
 */
add_filter('smilies_src','custom_smilies_src',1,10);
function custom_smilies_src ($img_src, $img, $siteurl){
	return $siteurl.'/wp-content/themes/evolz/images/smilies/'.$img;
}
这段代码的用途就是将 WP 的默认表情路径 $siteurl/wp-includes/images/smilies/  映射到  $siteurl/wp-content/themes/你的主题目录/images/smilies/

4. Enjoy it.

好的,没有第四步了,现在你可以在文章和评论中插入诸如  “ :表情符号(关键字):” (不包括引号,另外再注:我是为了演示而使用了中文冒号)来使用这些表情啦 :bed跳:

5.等等,还有一件事

我们知道,WP 默认编辑器会莫名其妙删除一些空格,所以,如果是在 Visual 模式下写文章的的话,可能就会悲剧了,哎,这算个 bug 吧,改天看看能不能解决掉。