今天我就有博客朋友提示我的博客评论表情显示不出来，王桂明自己试了一下，确实在评论和回复中表情都是一个方框，不能显示，如图：
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
杰创不锈钢1688网上商城
手机滑动锁测试
@杰创不锈钢: 测试评论回复邮件样式美化
我现在也是直接用QQ表情替换默认表情，那样就没有这种问题了
@BOKE123:
是的，遇到问题解决问题 
@我就有: 直接把代码放入主题functions.php文件即可，别的什么都不要改。