今天我就有博客朋友提示我的博客评论表情显示不出来,王桂明自己试了一下,确实在评论和回复中表情都是一个方框,不能显示,如图:

WordPress4.2禁用emoji表情修复无限加载问题
这是升级wordpress4.2后出现的情况,网站加载了一段莫名的JavaScript以及CSS,而且还在不断加载一个墙外网站资源,是的网站不断处于加载中,王桂明检查了下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( '/(DZ(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( '<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />', $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};|[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( '<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />', $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无限加载,直接注释或者删除部分问题代码即可解决这个问题,但是这样处理其实是不恰当的,会是引起了其他的JavaScript问题。
在网上找了一段修复代码,直接拿来用效果很好,将代码放入主题functions.php文件即可,代码如下:
//修复4.2表情bug function disable_emoji9s_tinymce($plugins) { if (is_array($plugins)) { return array_diff($plugins, array( 'wpemoji' )); } else { return array(); } } //取当前主题下images\smilies\下表情图片路径 function custom_gitsmilie_src($old, $img) { return get_stylesheet_directory_uri() . '/images/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); |
在看修复后的效果如图:

WordPress4.2禁用emoji表情修复无限加载问题
» 本文链接:
http://www.0523jz.com/521.html
» 订阅本站:
http://www.0523jz.com/feed
» 转载请注明来源:王桂明's Blog
» 《WordPress4.2禁用emoji评论表情修复无限加载问题》
已经有6个回复
Comment (6)
Trackbacks (0)
-
还没有Trackbacks
手机滑动锁测试
@杰创不锈钢: 测试评论回复邮件样式美化
我现在也是直接用QQ表情替换默认表情,那样就没有这种问题了
@BOKE123:
是的,遇到问题解决问题 
@我就有: 直接把代码放入主题functions.php文件即可,别的什么都不要改。