WordPress 4.2で追加された絵文字対応のスクリプトを無効化する方法

背景

以前の WordPress は絵文字に対応しておらず、表示はおろか保存すらできない状態であった。

b.0218.jp[WordPress] 絵文字(Unicode6.0)が使えない問題WordPress 4.2 より「拡張文字のサポート」として中国語・日本語・韓国語の文字、音楽・数学用の記号、象形文字を含む多くの新しい文字に対応しました。この記事で紹介している DB のテーブルの文字コードを変えるという手法もアップデートの流れで行われているようです。CHARS

これはデータの格納テーブルの文字コードの問題であり、プログラムの問題ではない。

今回の 4.2 でテーブルの文字コードも変更され（データベースのテーブルもアップグレード）、追加で絵文字を画像に置き換えるスクリプトが追加された。

WordPress 4.2 は中国語・日本語・韓国語の文字、音楽・数学用の記号、象形文字を含む多くの新しい文字に対応しています。

とあるので、単純に「絵文字に対応した」というわけではない。

新しいテーブルの構造

文字コードがutf8mb4になっているのが分かる。(これまではutf8)

CREATE TABLE `wp_posts` (
  `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `post_author` bigint(20) unsigned NOT NULL DEFAULT '0',
  `post_date` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `post_date_gmt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `post_content` longtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_title` mediumtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_excerpt` mediumtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'publish',
  `comment_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open',
  `ping_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open',
  `post_password` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
  `post_name` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
  `to_ping` mediumtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `pinged` mediumtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_modified` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `post_modified_gmt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `post_content_filtered` longtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_parent` bigint(20) unsigned NOT NULL DEFAULT '0',
  `guid` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
  `menu_order` int(11) NOT NULL DEFAULT '0',
  `post_type` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'post',
  `post_mime_type` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
  `comment_count` bigint(20) NOT NULL DEFAULT '0',
  PRIMARY KEY (`ID`),
  KEY `type_status_date` (`post_type`,`post_status`,`post_date`,`ID`),
  KEY `post_parent` (`post_parent`),
  KEY `post_author` (`post_author`),
  KEY `post_name` (`post_name`(191))
) ENGINE=MyISAM AUTO_INCREMENT=1960 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

自前で ALTER しなくてすむようになった（アップデートの裏でやっているのだろうけれど）。

alter database wp character set utf8mb4;
alter table wp_posts convert to character set utf8mb4;

不必要なスクリプトを無効化にする

最近では、Twitterなども絵文字に対応している。今回の対応も同様のものになっている。

簡単にいうと、Unicode を画像に差し替える処理をして、そうすることでプラットフォーム間の差異をなくすことができる。差異をなくすのは良いのだが、勝手に画像に差し替えられてもサイトのデザインと差がでることも考えられる。そういう時は絵文字（テキスト）としておきたい。

自動的に追加されるコード

4.2 から以下のようなスクリプトなどが追加されている。

<script type="text/javascript">
               window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/www.mysite.com\/wp\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2"}};
               !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f;c.supports={simple:d("simple"),flag:d("flag")},c.supports.simple&&c.supports.flag||(f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.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>

フォーラムで紹介されている内容

更新されて、さっそくフォーラムに「WordPress › Support » Emoji and smiley js and css added to head」のような投稿があった。

プラグインを使う

さっそくWordPress › Disable Emojis « WordPress Pluginsというものが公開されている。

よく分からない人はこれを使うのが手っ取り早い。

functions.php にコードを追加する

以下のコードを追加することで、前述の自動的に追加されるスクリプトがなくなる。

function disable_emoji() {
     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');
}
add_action('init', 'disable_emoji');

これで絵文字も画像の置き換えからテキストに戻る🐭