WordPressの絵文字(emoji)覚え書き

WordPressの絵文字(emoji)覚え書き



国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

WordPressで使用出来る絵文字機能についての覚書です。

WordPressでは絵文字を使えるようになりました。
これは、文字としてデータベースに保存出来るようになったためです。

それに合わせて、以下のコードがヘッダーに追加されます。

<script>
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/newsgram.local\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.4.2"}};
/*! This file is auto-generated */
!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,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340])}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&#91;i&#91;o&#93;&#93;=l(i&#91;o&#93;),t.supports.everything=t.supports.everything&&t.supports&#91;i&#91;o&#93;&#93;,"flag"!==i&#91;o&#93;&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports&#91;i&#91;o&#93;&#93;);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>
<script src="http://newsgram.local/wp-includes/js/wp-emoji-release.min.js?ver=5.4.2" type="text/javascript" defer=""></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>

これは
・絵文字が表示出来ないブラウザで絵文字を表示するため
・対応外の絵文字を表示するため(スマホでは表示出来るけど、PCのブラウザでは表示できない等)
にTwitterの絵文字変換ライブラリのTwemojiを使って、絵文字を「画像」に置換するためのものです。

Twemoji
参考
Twemoji

Twitterのオープンソースのエモジは、あなたのプロジェクトのすべてのエモジのニーズをカバーしています。最新の Unicode 絵文字仕様をサポートしており、3,245 個の絵文字を搭載しており、すべて無料で利用できます。

Twemoji

この絵文字置換機能を使用しない場合は、以下のコードをfunctions.phpに追加します。

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' );

ただ、これは絵文字置換機能が使えなくなるだけで、絵文字自体は使用出来ます。
また、この絵文字自体は置換機能はJavaScriptで動的に置換しているので、AMP(Accelerated Mobile Pages)では使用出来ないのでは無いかな、と思います。

また、もう一つWordPressで備わっている絵文字関連の機能としてスマイリー絵文字置換機能があります。
これは以下のようなテキスト(日本で言う顔文字でしょうか)を自動的に絵文字置換されます。

これも使う予定が無い場合は、管理画面の投稿設定でチェックを外します。

もしくは、functions.phpにコードを追加します。

remove_action( 'init', 'smilies_init', 5 );
今日はここまで

コメントを残す

メールアドレスが公開されることはありません。