修复WordPress4.2更新后主题表情等异常- 移除颜文字(Emoji)

这会儿刚刚更新到WordPress 4.2版本介绍木有太多的特色说是WordPress支持四字节字符同时引入了颜文字(Emoji)一下没想是个啥？那种文字表情？完了习惯性刷新W3TC缓存然后随手打开了几个网站页面检查了一下，HTTPS访问的高大上的绿锁怎么没了？扫了一眼浏览器左下角的状态栏默默发现显示还在加载s.w.org/…中，这是什么鬼，这货和现用的主题有两毛钱关系？吓老子一跳以为被高端黑叻，仔细查了一下才知道WordPress又整出了个外部引用表情的坑。

从WordPress 4.2版本开始引入颜文字(Emoji)

自WordPress4.2版本更新之后官方决定加载第三方emoji表情，但是其“卓越”的代码行为规范以及WordPress不顾zh_CN版本庞大的用户群体（也许还有别的心思），强制启用Emoji引起了国内外各种主题的异常，表情异常，后台文章可视化编辑器打开超级慢等等情况；严重伤害了伪处女座强迫症患者的心（当然知晓代码规范去看了WordPress4.2+更新的几个文件也会认同这点：糟糕·透叻！），怎么修复这些问题呢？移除WordPress4.2以及之后版本中颜文字(Emoji)加载所需的JS、CSS以及恶心无耻默认集成到wp_mail函数（邮件回复也就自动加载看不到的Emoji，只见奇葩的四字节编码，破坏了原来辛辛苦苦设计的邮件回复样式不会火，我相信你！）的等等钩子，同时添加了一个钩子把文章可视化(Tinymce)编辑器中的要加载的第三方颜文字也搞(替换)掉。拒绝被强迫，从我做起！

本文关于Emoji引发异常的简单解决方案：

下载补丁插件上传安装启用即可，有特殊情况的朋友可以参考下文中的代码注释做出对应的调整修正。
Ps：特殊情况：主要说的是主题表情存放路径有不同的。

WordPress越更新坑越多

从2008年的WordPress 2.5版本开始默认主题和控制面板中就各种使用谷歌字体(Google Fonts)没有关闭/切换的选项（患有强迫症的人被人强迫了，这是赤果果的嘲讽！），虽然现在没有明确的证据表明谷歌通过这些字体服务跟踪用户的隐私信息，但是有理由相信谷歌有这个技术，为了杜绝这些个不必要(这些个字体国内没法正常直接调用，要么自己下载本地调用，要么用现成的别人的服务，还要各种修改总之就是麻烦)的隐患，果断移除了谷歌字体了事。拒绝被狗仔队跟踪，从我做起！

WordPress更新到4.2版本弄个颜文字就是木有关闭选项就是默认加载就是和你耍流氓，能忍？TMD现在是不是啥都弄静默安装用户没得做选择的余地？想想WordPress不是国人主导开发的，网络环境不一样，人家一伙人决定要推个什么东东，咱小胳膊小腿的无法干预任何决定。但是维护WordPress中文版本的那群人都TMD能不能多出点力为zh_CN版本干点实事，别一直跟不上更新节奏，忍不了啊这。也不知道以后再更新又整出个什么花样，对于WordPress已然没有最初的热衷折腾，不过见义勇为还是可以干干的。

下面贴禁用颜文字的移除代码：

function disable_emoji9s_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

function remove_emoji9s() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins', 'disable_emoji9s_tinymce' );
}

add_action( 'init', 'remove_emoji9s' );

加载WordPress4.2版本之前的主题默认表情补丁

上面已经把Emoji的各种钩子完全移除了，但是如果在文章、评论中的表情还是以四字节编码的Emoji形式出现什么情况？需要如何恢复？对于这个问题在打开WordPress4.1.2根目录下wp-includes\functions.php第2755行对比WordPress4.2根目录下wp-includes\functions.php第2946行，就吐槽叻：坑啊，注释不变版本号不变，这函数咋变了？一小部分smiley大部分emoji这是要闹哪样啊！wp-emoji-release.min.js这货加载twemoji.maxcdn.com专门为了推广Maxcdn的嘛？后台都不能正常进行文章编辑发布叻！WordPress4.2还能正常玩耍嘛？还能正常使用主题自带的默认表情？

解决办法·使用WordPress4.2 Emoji补丁代码如下：

//禁用后台文章可视化编辑器中的wpemoji插件
function disable_emoji9s_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

//返回当前主题下img\smilies\下表情图片路径
function custom_smilie9s_src( $old, $img ) {
    return get_stylesheet_directory_uri().'/img/smilies/'.$img;
}

function init_smilie9s(){
	global $wpsmiliestrans;
	//默认表情文本与表情图片的对应关系(可自定义修改)
	$wpsmiliestrans = array(
		':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',
		       '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',
	);
	//移除WordPress4.2版本更新所带来的Emoji前后台钩子同时挂上主题自带的表情路径
	remove_action( 'wp_head' , 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts' , 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles' , 'print_emoji_styles' );
	remove_action( 'admin_print_styles' , 'print_emoji_styles' );
	remove_filter( 'the_content_feed' , 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss' , 'wp_staticize_emoji' );
	remove_filter( 'wp_mail' , 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins' , 'disable_emoji9s_tinymce' );

	add_filter( 'smilies_src' , 'custom_smilie9s_src' , 10 , 2 );
}

add_action( 'init', 'init_smilie9s', 5 );

关于恢复自定义表情后样式异常的解决办法

继续吐槽：WordPress4.2版本wp-includes\formatting.php文件第2085行的translate_smiley函数。在注解/版本号基本(只是4.2版本注解少了两个单引号而已 )没变的情况下强行(这货函数没有直接提供钩子)为表情加了element.style{height: 1em; max-height: 1em;}这感觉就是不给使用多年的默认表情一点活路死命要推广颜文字的节奏。

这里提供如下三种解决方法:

1.将formatting.php文件中的第2114行内容

	return sprintf( '<img src="%s" alt="%s" class="wp-smiley" />', esc_url( $src_url ), esc_attr( $smiley ) );

替换为

	return sprintf( '<img src="%s" alt="%s" class="wp-smiley" />', esc_url( $src_url ), esc_attr( $smiley ) );

这是最直接最暴力的方法，但是WordPress后续再有更新(哪怕没有更新这几个文件)文件会被覆盖又还得改。麻烦·故不推荐。

2.在全站CSS文件(一般是主题根目录下的style.css文件，当然也可以是其它的全站CSS文件)中加入：

	.wp-smiley{float: left;height: 100% !important;max-height: 100% !important;}

缺点：IE系列版本浏览器对CSS的!important属性不怎么支持。网站访客都是Chrome、Mozilla Firefox等现代主流浏览器(不考虑低于IE7的死活)的朋友，这是最佳解决方法，极力推荐！

3.适用症状：强迫症+酷爱代码+WordPress脑粉+忧伤怀旧系列+半分完美主义

function convert_smilie9s( $text ) {
//看到两''没？(默认为空就好，如果懒的再为表情样式去修改全站CSS文件，可在这对应的为wp-smiley添加element.style样式)
	return str_replace( '' , '' , $text );
}

add_filter( 'the_content' , 'convert_smilie9s' , 11 );
add_filter( 'the_excerpt' , 'convert_smilie9s' , 11 );
add_filter( 'comment_text' , 'convert_smilie9s' , 21 );

妥妥的让文章、摘要、评论中的所有表情重见天日(完整的回到WordPress4.2之前的状态)，前提是大体符合上述症状，不怕麻烦(两段代码合一块实在有点长叻，粘贴复制什么的很累)，嫌弃的还是不要玩了！

使用方法：两段代码都是复制粘贴到当前主题的functions.php文件末尾即可，有使用缓存的刷新一下缓存看效果。

注意事项：修改代码后保存文件注意使用UTF-8编码,如果你不知道你编辑代码的编辑器靠不靠谱的话。

对于了理(移除)Emoji的方法、WordPress更新后表情异常(口角歪斜？被缩小？等等已知未知症状)需要整治的朋友；如果你有好的建议/方法请在下方留言与作者取得联系，我们一起解决它！完善它！