WordPress4.2からエディターなどで絵文字を使えるようになりました。しかし、それと同時に絵文字を正常に表示するためのスタイルやスクリプトが読み込まれるようになってしまったんですね。

当記事では、自動的に読み込まれるリソースを無効化する方法について解説します。何を無効化しているかもそれぞれご紹介していきますので、ぜひ参考にしてください。

TCDテーマでは、テーマオプションから絵文字の読み込みを無効化できます。

絵文字のスタイルとスクリプトを無効化する方法

絵文字関連の読み込みを無効化するなら、以下をfunctions.phpに記載するだけで対策できます。

add_action( 'init', function(){

  // インラインスクリプトの読み込みを無効化
  remove_action( 'wp_head', 'print_emoji_detection_script', 7 );

  // インラインスタイルの読み込みを無効化
  remove_action( 'wp_print_styles', 'print_emoji_styles' );

  // インラインスタイルの読み込みを無効化(6.4以降対策)
  if ( function_exists( 'wp_enqueue_emoji_styles' ) ) {
    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_emoji_styles' );
  }

}
);

各記述について順番に解説します。

インラインスクリプトの読み込みを無効化

// インラインスクリプトの読み込みを無効化
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );

この記述は、デフォルトでheadタグ内に出力される以下のインラインスクリプトを無効化します。絵文字を利用しない場合は必ず記入しておきましょう。

<!-- 例)フロントのheadタグ内 -->
<script type="text/javascript">
/* <![CDATA[ */
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/サイトドメイン\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.4.2"}};
/*! This file is auto-generated */
!function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings);
/* ]]> */
</script>

インラインスタイルの読み込みを無効化

// インラインスタイルの読み込みを無効化
remove_action( 'wp_print_styles', 'print_emoji_styles' )

この記述は、デフォルトでheadタグ内に出力される以下のインラインスタイルを無効化します。絵文字を利用しない場合は必ず記入してください。

<style id='wp-emoji-styles-inline-css' 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 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
  }
</style>

インラインスタイルの読み込みを無効化(6.4以降対策)

// インラインスタイルの読み込みを無効化(6.4以降対策)
if ( function_exists( 'wp_enqueue_emoji_styles' ) ) {
  remove_action( 'wp_enqueue_scripts', 'wp_enqueue_emoji_styles' );
}

実は、WordPress6.4以降から絵文字用スタイルの読み込みに使われている「print_emoji_styles()」は非推奨となりました。後方互換性を保つため、いまは問題なく利用できますが、今後を考えると上記も追加してあげた方がいいですね。

管理画面の読み込みの対策

絵文字のスタイルやスクリプトは、管理画面でも読み込まれます。こちらも無効化したい方は、以下を追記してください。

// 管理画面のスタイルとスクリプトの読み込みを無効化
add_action( 'admin_init', function(){
  
  // インラインスクリプトの読み込みを無効化
  remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );

  // インラインスタイルの読み込みを無効化
  remove_action( 'admin_print_styles', 'print_emoji_styles' );

  // WordPress 6.4以降向け対策
  if ( function_exists( 'wp_enqueue_emoji_styles' ) ) {
    remove_action( 'admin_enqueue_scripts', 'wp_enqueue_emoji_styles' );
  }

}
);

その他の絵文字対策の記述

「WordPress 絵文字 無効化」などと調べると、他にもいくつか対策用コードが書かれていますよね。例えば、以下が代表的な記述です。

// RSSの絵文字を画像に変換にする処理を無効化
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' );

これらは、サイト上で読み込むスタイルやスクリプトとはあまり関係ありません。RSSやメール内の絵文字を画像に変換するのを防ぐだけの記述になりますので、ページの読み込み高速化が目的ならば特に追記する必要はありません。

まとめ

今回は、絵文字のスタイル・スクリプトの読み込みを無効化する方法について解説しました。一応、絵文字無効化のプラグイン「Disable Emojis」を使う方法もあるのですが、functions.phpに記入した方が確実です。(プラグインの管理もしなくていいので)

なお、絵文字を利用するままだと以下のメッセージが出ることがあります。

Deprecated: 関数 print_emoji_styles は、バージョン 6.4.0 から非推奨になりました ! 代わりに wp_enqueue_emoji_styles を使用してください。

とりあえずこのメッセージを消したい方は、当記事の方法で絵文字の読み込みを無効化するか、デバッグモードを「false」にして対応しましょう。