WordPress 4.2 からデフォルトで吐く絵文字表示用の script と style を無効化する方法

WordPress 4.2 からユニコード8.0 の絵文字がコア対応 (MySQL5.5以上では utf8→utf8mb4 になる)。

と共に、絵文字表示用のスクリプトとスタイルが header へと挿入されるようになりました。

特段必要としないですし、むしろ要らないリソースなので無効化。

追記 Disable Emojis

2015/05/01 プラグインが出たようです。

WordPress 4.2 から wp_head に追加される絵文字表示用の script と css

絵文字を画像に置き換えて表示させるこういったものが追加されます。

		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"wpemoji":"http:\/\/wordpress.local\/wp\/wp-includes\/js\/wp-emoji.js","twemoji":"http:\/\/wordpress.local\/wp\/wp-includes\/js\/twemoji.js"}};
			( function( window, document, settings ) {
	var src;

	/**
	 * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
	 * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
	 *
	 * @since 4.2.0
	 *
	 * @param type {String} Whether to test for support of "simple" or "flag" emoji.
	 * @return {Boolean} True if the browser can render emoji, false if it cannot.
	 */
	function browserSupportsEmoji( type ) {
		var canvas = document.createElement( 'canvas' ),
			context = canvas.getContext && canvas.getContext( '2d' );

		if ( ! context || ! context.fillText ) {
			return false;
		}

		/*
		 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
		 * it doesn't work when the font is bolder than 500 weight. So, we
		 * check for bold rendering support to avoid invisible emoji in Chrome.
		 */
		context.textBaseline = 'top';
		context.font = '600 32px Arial';

		if ( type === 'flag' ) {
			/*
			 * This works because the image will be one of three things:
			 * - Two empty squares, if the browser doesn't render emoji
			 * - Two squares with 'G' and 'B' in them, if the browser doesn't render flag emoji
			 * - The British flag
			 *
			 * The first two will encode to small images (1-2KB data URLs), the third will encode
			 * to a larger image (4-5KB data URL).
			 */
			context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
			return canvas.toDataURL().length > 3000;
		} else {
			/*
			 * This creates a smiling emoji, and checks to see if there is any image data in the
			 * center pixel. In browsers that don't support emoji, the character will be rendered
			 * as an empty square, so the center pixel will be blank.
			 */
			context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
			return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
		}
	}

	function addScript( src ) {
		var script = document.createElement( 'script' );

		script.src = src;
		script.type = 'text/javascript';
		document.getElementsByTagName( 'head' )[0].appendChild( script );
	}

	settings.supports = {
		simple: browserSupportsEmoji( 'simple' ),
		flag:   browserSupportsEmoji( 'flag' )
	};

	if ( ! settings.supports.simple || ! settings.supports.flag ) {
		src = settings.source || {};

		if ( src.concatemoji ) {
			addScript( src.concatemoji );
		} else if ( src.wpemoji && src.twemoji ) {
			addScript( src.twemoji );
			addScript( src.wpemoji );
		}
	}

} )( window, document, window._wpemojiSettings );
		</script>
		<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>

ソースコードを追いかける

WordPress 4.2 RC2 のソースコードでは、/wp-includes/default-filters.php に。

200行目過ぎた辺り、

// Actions
add_action( 'wp_head',             '_wp_render_title_tag',            1     );
add_action( 'wp_head',             'wp_enqueue_scripts',              1     );
add_action( 'wp_head',             'feed_links',                      2     );
add_action( 'wp_head',             'feed_links_extra',                3     );
add_action( 'wp_head',             'rsd_link'                               );
add_action( 'wp_head',             'wlwmanifest_link'                       );
add_action( 'wp_head',             'adjacent_posts_rel_link_wp_head', 10, 0 );
add_action( 'wp_head',             'locale_stylesheet'                      );
add_action( 'publish_future_post', 'check_and_publish_future_post',   10, 1 );
add_action( 'wp_head',             'noindex',                          1    );
add_action( 'wp_head',             'print_emoji_detection_script',     7    );
add_action( 'wp_head',             'wp_print_styles',                  8    );
add_action( 'wp_head',             'wp_print_head_scripts',            9    );
add_action( 'wp_head',             'wp_generator'                           );
add_action( 'wp_head',             'rel_canonical'                          );
add_action( 'wp_footer',           'wp_print_footer_scripts',         20    );
add_action( 'wp_head',             'wp_shortlink_wp_head',            10, 0 );
add_action( 'template_redirect',   'wp_shortlink_header',             11, 0 );
add_action( 'wp_print_footer_scripts', '_wp_footer_scripts'                 );
add_action( 'init',                'check_theme_switched',            99    );
add_action( 'after_switch_theme',  '_wp_sidebars_changed'                   );
add_action( 'wp_print_styles',     'print_emoji_styles'                     );

アクションフックされています。remove_action すれば無効にできますよね。

WordPress 4.2 から wp_head に追加される絵文字表示用の script と css を無効化

remove_action の使い方は codex 参照のこと。

remove_action( フック先, 関数名, 優先度{デフォルト値10} ) でアクションフックを解除できます。

つまり、いわゆるテーマの functions.php (もしくは其れから読み込まれる php) に

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles', 10 );

と書いてやれば OK です。

ﾎﾎまとめ

ソースコードを読む→実装 といういつもの流れ。