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

Emoji-Dried-Persimmon

从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' );

WordPress-Code-Image

加载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版本注解少了两个单引号而已 :arrow: )没变的情况下强行(这货函数没有直接提供钩子)为表情加了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更新后表情异常(口角歪斜?被缩小?等等已知未知症状)需要整治的朋友;如果你有好的建议/方法请在下方留言与作者取得联系,我们一起解决它!完善它!

comment-author avatars

Zhys

Cherish the time! Don't waste even nine seconds to remember the past, live in the present and for the future planning.

猜你喜欢...

35 回复

  1. comment-author avatars 老虎说道:

    这么快就有代码了,给力啊。
    这个emoji的最大问题是跟自家的smiley冲突了。。。

    • comment-author avatars Zhys说道:

      不是冲突而是文件被写死叻,一小部分smiley大部分emoji,只好挂个钩子重写$wpsmiliestrans恢复到4.1.2版本。

  2. comment-author avatars 老虎说道:

    还有个问题,系统默认的smiley好像用不了了。我用的方法是:talk. synyan. net /?p=10684 :evil:

    • comment-author avatars Zhys说道:

      我是直接在主题中实现的。木有使用系统默认的smiley啦 :idea:
      看了你的方法感觉好麻烦哦~ :shock:

  3. comment-author avatars 流年说道:

    表示升级以后导致主题表情显示不了了,正好当然自己在删除数据库多余,导致以为删除了 ,重装整个程序, :cry: :cry: ,作者知道怎么能让表情正常吗,求方法

  4. comment-author avatars 小二苘说道:

    正好需要这个代码啊 :razz:

  5. comment-author avatars Running说道:

    已经解决了~ 感谢博主 :mrgreen:

  6. comment-author avatars Timle.CN说道:

    谢谢,解决了,不过在我站上在评论中的表情变小了很多。

  7. comment-author avatars Hooli说道:

    WP 中文版催生啦!中文版只能增加语言,要改 WP 的话,那就不能用 WP 的名义发布了

    • comment-author avatars Zhys说道:

      表示不是很懂最后一句【要改 WP 的话,那就不能用 WP 的名义发布】 :arrow:

      • comment-author avatars Hooli说道:

        要是都可以改,那自动更新服务器岂不是乱了。名义简单点说:有人把搜狗拼音输入法去广告了,这个不能以官方名义发布。除非WP授权这么做

        • comment-author avatars Zhys说道:

          WordPress的自动更新是由你自己选择的,WordPress可以是出于任何目的运行,也可以任意修改并发布它不需要类似搜狗的商业授权。对于以官方名义发布这种事暂时没见到谁干过 :eek: 所以我有些不明白你所担心的是什么。

    • comment-author avatars Zhys说道:

      回过头来,我想应该有误会叻。WordPress越更新坑越多中具体表达的意思是:虽然WordPress完全开源可以任意修正发布版本(部分国家/地区发布的WordPress都是以WordPress.Org的英文版本基础上修改而来根据所在地存在一些细微差别。),但是管理维护WordPress中文版本的那些人并我们国情调整/修正(已知WordPress中文调整的中文版本就加了一个填写ICP号到底部的功能)发布一个方便新手朋友的良好版本(虽然通过网上已教程可以解决,但个人认为还是WordPress中文不作为啊)。

      • comment-author avatars Hooli说道:

        那 ICP 号功能只对默认主题有用,也是鸡肋。不作为可以去和他们说说,表情的那个功能可以正常使用的(没有额外添加表情的主题)。表情图片来自 w.org 网站,应该可以访问才对。

        • comment-author avatars Zhys说道:

          想说的是对于那些刚刚接触WordPress的朋友来说想要的并不仅是这些功能的完善。很多方面的,这里不聊。对于WordPress的进步/完善大家都在出力就好,WordPress中文社区的作为或者不作为我只负责吐槽或者说只是抱怨一下一个简单的功能;作为广大使用中文版本的朋友很需要的为什么社区不发布更新在版本中,更多也就没有什么和他们好说说的。WordPress全然开源+免费,作为受益者的我们还要过分要求他们团队什么?
          发现你和我使用的是同一个作者( Alexander Agnarson)开发的主题。Anew我并没有下载熟悉,并不是很清楚是否有自带表情,不过从demo上看它应该是使用的WordPress自带的默认表情。只是不知道你能否正常使用颜文字(Emoji)?如果不使用它对于有强迫症患者·决不姑息啊。。。
          而且s.w.org这个国内并不是每个地区都可以正常访问(至少我这超时了都打不开),这样就出现由此引发各种需求。因为没有能力改变这个影响自己博客美观,打开速度情况的发生或者不喜欢使用颜文字(Emoji)或者更偏爱默认的主题表情==原因,所以就出现了选择移除Emoji的动作,就这样。

  8. comment-author avatars 我爱书籍说道:

    太坑了吧

    • comment-author avatars Zhys说道:

      就在写这篇文章的时候又发现坑叻。。。 :mad: 坑多了就麻木叻闲着想想怎么填坑也是一种乐趣。也是创造一点点细微价值噻 :mrgreen:

  9. comment-author avatars Mewmew说道:

    是不是开启表情必须自己使用的主题支持表情。我在我的站点下面好像就木有看到表情选项,这个是要手动添加的吗?不太明白。。

    • comment-author avatars Zhys说道:

      表情这个是WordPress内置的“隐藏”功能:它大致的工作流程是识别内容(文章、评论)中特定的字符串然后在前端以图片显示出来。默认不需要主题做任何支援就可以使用的。
      对于在评论区域可以看到所有表情,并可以点击表情自动插入特定表情字符串的功能。这个是需要对主题进行修改,不修改表情功能是可以使用的只是不方便。通过在特定区域(一般评论框下方)中显示出来所有表情减少记忆特定表情字符串的难度以方便访客朋友使用表情流露情感。
      如果你想实现这个方便评论时留表情的功能可以以三个关键字【WordPress Smiley 表情】搜索一下相关的文章。手动修改主题评论相关的样式结构然后配合本文的插件/代码达成目的。

  10. comment-author avatars Mewmew说道:

    咦咦咦,忽然发现这个邮箱绑定的头像和你的是一样的,好巧。。。

  11. comment-author avatars Kuka说道:

    好久不折腾了,那天别人回复我文章,我突然发现我的“回复”图标竟然是颜文字,与主题不搭,想着设置取消,无用。后来没管,刚刚搜索「颜文字 WordPress」到这里,经测,有效哟。谢谢 :neutral:

    • comment-author avatars Zhys说道:

      随着WordPress官方越来越不靠谱,不放弃WordPress=不放弃折腾,入了WordPress大坑中我们都是回不去叻…

  12. comment-author avatars synyan说道:

    过了一年了,换了个主题,发现该主题的评论框用的是ajax comment(json),然后所有颜文字无法正常显示。。。怎么破?

    • comment-author avatars synyan说道:

      笔误,是jQuery,不适json :!:

    • comment-author avatars Zhys说道:

      抱歉,博客空着有点久。WordPress在评论这块爆出XSS漏洞(4.2.X)之前数据库使用utf8(只支持1-3个)文字编码存储文章、评论==WP所有数据,后续引入的颜文字(Emoji)占位是四字节,评论提交的颜文字无法正常存储在数据库中。输出也就无法读到正常数据以显示。过去看你了的博客貌似已经解决,不过对于编码这块补充一下做法是:满世界跑的你,将编码转换成utf8mb4_unicode_ci会比utf8mb4_general_ci更精准优雅。

      • comment-author avatars synyan说道:

        非常好!即使我已解决了问题,还是感谢你的热情详细的回复!👍
        已订阅你博 :mrgreen:

  13. comment-author avatars 冷影秋说道:

    新手没感觉,呵呵, :mrgreen:

  14. comment-author avatars 郑永说道:

    很郁闷,wordpress越来越脑残,我也是使用自定义表情,遇到这种情况也是用了你这种方法,但是,但是侧边栏原来支持表情输出的侧边栏最新评论内容如果有表情,就会另起一行显示,这个怎么解决?

    • comment-author avatars Zhys说道:

      不折腾无WordPress,O(∩_∩)O哈哈~
      很抱歉,博客闲置多时
      前往贵博客参观了下下,发现博主已经通过为.wp-smiley添加左浮动的方式
      解决了个这样式上的小问题。
      关于自定义表情的样式异常问题,文中备有三种思路和办法。
      忘记提醒大家:要注意与主题自身样式的兼容

发表评论

电子邮件地址不会被公开。 必填项已用*标注

邮件通知