• 说说可以了吧
  • 现在开始可以更方便的插入无序列表了,使用短代码
  • 你知道吗?在论坛输入233会变成一个表情哦 =.=,就是这个 :mrgreen:
  • 安装了TT-RSS,然后发现暂时不支持PHP7,然后又删除了,继续用inoreader吧,其实这个用着还好的,恩,很好
  • 前几天在黑莓应用市场居然发现了新安装应用,最重要的是几天后我居然收到了更新推送
  • 发个说说表示下存在感
  • 重写CMS,目前在本地做实验,希望能成功
  • 图床小书签,其实也很简单,只是用一个js弹窗伪造的小书签23333
  • 优化满分,目前在gt.net测试双A.还不错
  • 上了https了,比较淡疼,比如网易云音乐在火狐会被自动阻止,然后又下了

WordPress4.2禁用emoji表情修复无限加载问题

WordPress 云落 3年前 (2015-04-25) 598次浏览 已收录 21个评论
文章目录[隐藏]

WordPress4.2版本带了一个鸡肋的功能就是带了emoji表情功能,而且还无限加载境外资源,果断屏蔽之

WordPress4.2禁用emoji表情修复无限加载问题

前言

昨天,我在处理Git主题的时候,忽然发现了我的网站加载了一段莫名的JavaScript以及CSS,而且还在不断加载一个墙外网站资源,是的网站不断处于加载中,本来以为是我的主题中毒了,结果一看才发现是新版WordPress的问题,云落第一时间检查了下WordPress的系统文件,发现在WordPress源文件中加载了墙外资源
所以这里记录一下。

源代码

在WordPress系统文件,wp-includes/formatting.php文件里面,从4081行开始就是emoji表情问题的代码

/**
 * Print the important emoji-related styles.
 *
 * @since 4.2.0
 */
function print_emoji_styles() {
	static $printed = false;

	if ( $printed ) {
		return;
	}

	$printed = true;
?>
<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<?php
}

function print_emoji_detection_script() {
	global $wp_version;
	static $printed = false;

	if ( $printed ) {
		return;
	}

	$printed = true;

	$settings = array(
		/**
		 * Filter the URL where emoji images are hosted.
		 *
		 * @since 4.2.0
		 *
		 * @param string The emoji base URL.
		 */
		'baseUrl' => apply_filters( 'emoji_url', set_url_scheme( '//s.w.org/images/core/emoji/72x72/' ) ),

		/**
		 * Filter the extension of the emoji files.
		 *
		 * @since 4.2.0
		 *
		 * @param string The emoji extension. Default .png.
		 */
		'ext' => apply_filters( 'emoji_ext', '.png' ),
	);

	$version = 'ver=' . $wp_version;

	if ( SCRIPT_DEBUG ) {
		$settings['source'] = array(
			/** This filter is documented in wp-includes/class.wp-scripts.php */
			'wpemoji' => apply_filters( 'script_loader_src', includes_url( "js/wp-emoji.js?$version" ), 'wpemoji' ),
			/** This filter is documented in wp-includes/class.wp-scripts.php */
			'twemoji' => apply_filters( 'script_loader_src', includes_url( "js/twemoji.js?$version" ), 'twemoji' ),
		);

		?>
		<script type="text/javascript">
			window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
			<?php readfile( ABSPATH . WPINC . "/js/wp-emoji-loader.js" ); ?>
		</script>
		<?php
	} else {
		$settings['source'] = array(
			/** This filter is documented in wp-includes/class.wp-scripts.php */
			'concatemoji' => apply_filters( 'script_loader_src', includes_url( "js/wp-emoji-release.min.js?$version" ), 'concatemoji' ),
		);

		/*
		 * If you're looking at a src version of this file, you'll see an "include"
		 * statement below. This is used by the `grunt build` process to directly
		 * include a minified version of wp-emoji-loader.js, instead of using the
		 * readfile() method from above.
		 *
		 * If you're looking at a build version of this file, you'll see a string of
		 * minified JavaScript. If you need to debug it, please turn on SCRIPT_DEBUG
		 * and edit wp-emoji-loader.js directly.
		 */
		?>
		<script type="text/javascript">
			window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
			!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f;c.supports={simple:d("simple"),flag:d("flag")},c.supports.simple&&c.supports.flag||(f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<?php
	}
}

/**
 * Convert any 4 byte emoji in a string to their equivalent HTML entity.
 *
 * Currently, only Unicode 7 emoji are supported. Skin tone modifiers are allowed,
 * all other Unicode 8 emoji will be added when the spec is finalised.
 *
 * This allows us to store emoji in a DB using the utf8 character set.
 *
 * @since 4.2.0
 *
 * @param string $content The content to encode.
 * @return string The encoded content.
 */
function wp_encode_emoji( $content ) {
	if ( function_exists( 'mb_convert_encoding' ) ) {
		$regex = '/(
		     \x23\xE2\x83\xA3               # Digits
		     [\x30-\x39]\xE2\x83\xA3
		   | \xF0\x9F[\x85-\x88][\xA6-\xBF] # Enclosed characters
		   | \xF0\x9F[\x8C-\x97][\x80-\xBF] # Misc
		   | \xF0\x9F\x98[\x80-\xBF]        # Smilies
		   | \xF0\x9F\x99[\x80-\x8F]
		   | \xF0\x9F\x9A[\x80-\xBF]        # Transport and map symbols
		)/x';

		$matches = array();
		if ( preg_match_all( $regex, $content, $matches ) ) {
			if ( ! empty( $matches[1] ) ) {
				foreach( $matches[1] as $emoji ) {
					/*
					 * UTF-32's hex encoding is the same as HTML's hex encoding.
					 * So, by converting the emoji from UTF-8 to UTF-32, we magically
					 * get the correct hex encoding.
					 */
					$unpacked = unpack( 'H*', mb_convert_encoding( $emoji, 'UTF-32', 'UTF-8' ) );
					if ( isset( $unpacked[1] ) ) {
						$entity = '&#x' . ltrim( $unpacked[1], '0' ) . ';';
						$content = str_replace( $emoji, $entity, $content );
					}
				}
			}
		}
	}

	return $content;
}

/**
 * Convert emoji to a static img element.
 *
 * @since 4.2.0
 *
 * @param string $text The content to encode.
 * @return string The encoded content.
 */
function wp_staticize_emoji( $text ) {
	$text = wp_encode_emoji( $text );

	/** This filter is documented in wp-includes/formatting.php */
	$cdn_url = apply_filters( 'emoji_url', set_url_scheme( '//s.w.org/images/core/emoji/72x72/' ) );

	/** This filter is documented in wp-includes/formatting.php */
	$ext = apply_filters( 'emoji_ext', '.png' );

	$output = '';
	/*
	 * HTML loop taken from smiley function, which was taken from texturize function.
	 * It'll never be consolidated.
	 *
	 * First, capture the tags as well as in between.
	 */
	$textarr = preg_split( '/(<.*>)/U', $text, -1, PREG_SPLIT_DELIM_CAPTURE );
	$stop = count( $textarr );

	// Ignore processing of specific tags.
	$tags_to_ignore = 'code|pre|style|script|textarea';
	$ignore_block_element = '';

	for ( $i = 0; $i < $stop; $i++ ) {
		$content = $textarr[$i];

		// If we're in an ignore block, wait until we find its closing tag.
		if ( '' == $ignore_block_element && preg_match( '/^<(' . $tags_to_ignore . ')>/', $content, $matches ) )  {
			$ignore_block_element = $matches[1];
		}

		// If it's not a tag and not in ignore block.
		if ( '' ==  $ignore_block_element && strlen( $content ) > 0 && '<' != $content[0] ) {
			$matches = array();
			if ( preg_match_all( '/(&#x1f1(e[6-9a-f]|f[0-9a-f]);){2}/', $content, $matches ) ) {
				if ( ! empty( $matches[0] ) ) {
					foreach ( $matches[0] as $flag ) {
						$chars = str_replace( array( '&#x', ';'), '', $flag );

						list( $char1, $char2 ) = str_split( $chars, 5 );
						$entity = sprintf( '', $cdn_url . $char1 . '-' . $char2 . $ext, html_entity_decode( $flag ) );

						$content = str_replace( $flag, $entity, $content );
					}
				}
			}

			// Loosely match the Emoji Unicode range.
			$regex = '/(&#x[2-3][0-9a-f]{3};|&#x1f[1-6][0-9a-f]{2};)/';

			$matches = array();
			if ( preg_match_all( $regex, $content, $matches ) ) {
				if ( ! empty( $matches[1] ) ) {
					foreach ( $matches[1] as $emoji ) {
						$char = str_replace( array( '&#x', ';'), '', $emoji );
						$entity = sprintf( '', $cdn_url . $char . $ext, html_entity_decode( $emoji ) );

						$content = str_replace( $emoji, $entity, $content );
					}
				}
			}
		}

		// Did we exit ignore block.
		if ( '' != $ignore_block_element && '</' . $ignore_block_element . '>' == $content )  {
			$ignore_block_element = '';
		}

		$output .= $content;
	}

	return $output;
}

主要就是上面的代码,很明显,WordPress自动加载了一段JavaScript,这个JavaScript自动加载了墙外的文件,是的我们的WordPress无限加载,直接注释或者删除部分问题代码即可解决这个问题
星梦同学就是这样处理的http://www.xmgho.com/archives/812.html
但是这样处理其实是不恰当的,我们需要使用函数处理的
我之前用禁用相关过滤器的方法的,但是引起了其他的JavaScript问题,遂放弃了
然后看到了大发哪里的代码,试了下很好用,就果断拉来了

//修复4.2表情bug
function disable_emoji9s_tinymce($plugins) {
    if (is_array($plugins)) {
        return array_diff($plugins, array(
            'wpemoji'
        ));
    } else {
        return array();
    }
}
//取当前主题下img\smilies\下表情图片路径
function custom_gitsmilie_src($old, $img) {
    return get_stylesheet_directory_uri() . '/img/smilies/' . $img;
}
function init_gitsmilie() {
    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_gitsmilie_src', 10, 2);
}
add_action('init', 'init_gitsmilie', 5); 

将代码放入主题functions.php文件即可,Git主题最新版已修复此问题 :oops: :oops: :oops: 萌萌哒的表情又回来啦

版权声明

文中代码来自大发http://fatesinger.com/75634


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress4.2禁用emoji表情修复无限加载问题
喜欢 (16)
云落
关于作者:

无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!

发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(21)个小伙伴在吐槽
  1. 签到成功!签到时间:2015-05-13 08:44:46,每日打卡,生活更精彩哦~
    礼物驿站2015-05-13 08:49 回复 Mac OS X | Safari浏览器 600.1.4
  2. 博主,请问如何让文章里的图片自适应于手机屏幕大小,谢谢!
    礼物驿站2015-05-13 08:48 回复 Mac OS X | Safari浏览器 600.1.4
    • 云落
      用文本超级
      云落2015-05-13 08:58 回复 Android 4.4.4 | WordPress客户端 android
    • 百度了下,不是很明白 :sad:
      礼物驿站2015-05-13 09:55 回复 Windows 7 | Chrome 31.0.1650.63
  3. 很好的,很强大。。。。
    星梦天空2015-05-12 20:38 回复 Windows 7 | Chrome 31.0.1650.63
  4. 我就说怎么更新4.2可视化编辑器无限加载了,翻了墙果断能用了
    同盟源2015-04-26 07:55 回复 Windows 7 | Chrome 41.0.2272.89
    • 云落
      4.2的问题
      云落2015-04-26 10:03 回复 Windows 7 | Firefox浏览器 37.0
  5. 表情变小了。。。 :mrgreen:
    xiao2015-04-25 20:42 回复 Windows XP | Firefox浏览器 37.0
    • 表情变小看这个www。miduer。com/notes/wordpress-4-2-disable-emoji.html
      简单世界2015-05-09 21:06 回复 Windows 8.1 | 未知浏览器
  6. :mrgreen: 测试下
    xiao2015-04-25 20:42 回复 Windows XP | Firefox浏览器 37.0
  7. 云落
    :grin:
    云落2015-04-25 20:24 回复 Linux | Chrome 33.0.0.0
    • :?: 为啥表情这么小
      同盟源2015-04-26 07:56 回复 Windows 7 | Chrome 41.0.2272.89
      • 云落
        能用已经不错了,之前无限加载
        云落2015-04-26 10:03 回复 Windows 7 | Firefox浏览器 37.0