WordPress:絵文字に関するスクリプトやcssを削除する方法

Emoji機能とは

Emoji機能とはWordPressがheadタグに生成する、次のタグです。

  • <script type="text/javascript">
  • window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/xxx.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.9.1"}};
  • /*! This file is auto-generated */
  • !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.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 0.07em !important;
  • vertical-align: -0.1em !important;
  • background: none !important;
  • padding: 0 !important;
  • }
  • </style>
AFFS Simple Code Viewer
Copy

絵文字は、二つ以上の絵文字を一つの絵文字に結合したものがあります。
しかしブラウザが対応していない場合、個別の絵文字として表示されてしまいます。

Emoji機能はそのような絵文字を探し出して、必要に応じて画像に置き換えます。

詳しくは次の記事を読んでみてください。

WordPress: Emoji機能とは。何をやっているのかコードを追ってみた

Emoji機能を削除する方法

Emoji機能は、scriptタグとstyleタグで構成されます。
各々異なるアクションフックで出力されているので、個別に削除します。

scriptタグは、wp_headアクションからprint_emoji_detection_script()関数を削除します。
styleタグは、wp_print_stylesアクションからprint_emoji_styles()関数を削除します。

  • remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
  • remove_action( 'wp_print_styles', 'print_emoji_styles' );
AFFS Simple Code Viewer
Copy

ちなみにwp_print_stylesアクションは、wp_headアクションに登録されたwp_print_styles()関数内で呼び出されます。
ソースコードを追わないと分からない世界ですね。

管理パネルのEmoji機能

管理パネルも同様のスクリプトが出力されます。
これは、次のコードで削除できます。

  • remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
  • remove_action( 'admin_print_styles', 'print_emoji_styles' );
AFFS Simple Code Viewer
Copy

しかしあまりおススメしません。

記事からEmoji機能を削除するのは、サーバーからブラウザに送信するデータ量とブラウザでの処理量の削減が期待できます。
特にデータ量削減はサーバー側の処理時間の削減にもなり、PV数が多くなるほど効果が期待できます。

しかし管理画面の閲覧は、非常に回数が少ないです。
そのため、機能を削除してもサーバーの処理速度向上に効果があるとは言えません。
管理画面は文字数が少ないので、スクリプト実行の時間も短いです。
削除してもあまり意味がないのです。

そればかりか上手く処理をおこなわないと、記事表示のたびに管理パネルの処理まで削除することになります。
次のように、ひとまとめに削除した場合などです。

  • remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
  • remove_action( 'wp_print_styles', 'print_emoji_styles' );
  • remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
  • remove_action( 'admin_print_styles', 'print_emoji_styles' );
AFFS Simple Code Viewer
Copy

非常に微々たる時間ロスですが、マイナスとなるならやらないほうがいいと思います。