WordPressでは、バージョン4.2から絵文字が使えるようになりました。そのため、フロント/管理画面ともに絵文字を表示するためのJavaScriptとCSSが出力されます。
でも、コーポレートサイトでは絵文字機能自体が必要ないケースがほとんどですよね。そこで今回は、絵文字用に出力されるJavaScriptとCSSを削除する方法をご紹介したいと思います。
絵文字用に出力されるJavaScriptとCSSを削除する方法
デフォルトの状態ですと、以下のようなJavaScriptとCSSがヘッダーに出力されます。
<script>
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/test\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.5"}};
!function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([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!c([55357,56424,8205,55356,57212],[55357,56424,8203,55356,57212])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);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()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style>
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>このJavaScriptとCSSを削除するには、適用しているテーマのfunctions.phpに以下を追加します。
remove_action('wp_head', 'print_emoji_detection_script', 7); //ヘッダーのスクリプト
remove_action('wp_print_styles', 'print_emoji_styles'); //ヘッダーのCSS
remove_action('admin_print_scripts', 'print_emoji_detection_script'); //管理画面のスクリプト
remove_action('admin_print_styles', 'print_emoji_styles'); //管理画面のCSS
remove_filter('the_content_feed', 'wp_staticize_emoji'); //RSSフィード
remove_filter('comment_text_rss', 'wp_staticize_emoji'); //コメントフィード
remove_filter('wp_mail', 'wp_staticize_emoji_for_email'); //メールあとがき
絵文字機能を無効化したい時は、ぜひ参考にしていただければと思います。
functions.phpを触るのはちょっと…という場合は、「Disable Emojis」というプラグインもあります。