WordPressの絵文字変換をオフにして特定記事のみオンにする

WordPressは特殊な文字を使用すると、Webページの閲覧時に絵文字に変更してくれる機能があります。
記事中に絵文字があるとメリハリが出て良い効果を出してくれるのですが、多くの場合は有難迷惑に感じることが多いです。
なぜなら、絵文字を使いたかったら絵文字を貼り付ければいいのですから。

そこで今回は、絵文字への変換機能の具体的な仕組みと変換機能のオフの方法、および特定のページのみ変換機能を動作させる方法をお伝えします。

ちなみにこのサイト（https://affi-sapo.com/）は、絵文字の変換機能を停止しています。

絵文字変換の仕組み

Webページのデータがブラウザに取り込まれると、文字を一文字ずつ取り出して特殊文字かどうか確認します。
記事の文字数が多くなればなるほど、ブラウザの動作が遅くなります。
この点だけでも、ありがた迷惑な機能です。

変換対象となる文字を発見すると、文字をimgタグに置き換えます。

例えば ▶ は、次のようなタグに置き換わります。

▶をimgタグに置き換え
<img draggable="false" role="img" class="emoji" alt="▶" src="https://s.w.org/images/core/emoji/13.0.0/svg/25b6.svg">

Webページ上では、次のように表示されます。

▶

大きいですね。
WrodPressは絵文字の機能がオンになったとき、次のスタイル属性がwebページに出力されます。

タイトル
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;
}

上のスタイルを適用すると、次のようになります。

▶

imgタグで参照しているs.w.orgは、WordPress.ORGが所持しているドメインのようです。
つまり絵文字データは、外部のサーバーから取得しています。

絵文字を多用するとそれだけ通信量が増えブラウザに負担をかけるのも問題ですが、世界中に無数に存在するWordPressサイトから同じドメインにアクセスが集中することで応答までの時間が増え、絵文字データを取得する時間がかかる可能性があります。
いつまでたっても読み込み中表示が消えない原因となり、閲覧者に不信感を与えるかもしれません。
ただこの点については、Adsenseなど他の要因の可能性が高いので気にする必要はないかもしれません。

プラグインやテーマ、CSSのカスタマイズの問題

特殊文字が絵文字に変換されるのはWebページの表示だけではありません。

プラグインやテーマ、CSSのカスタマイズでエディタに入力した特殊文字も、テーマの作成者が機能オフしていないなら、絵文字に変換されます。
絵文字に変換されると文字として選択できなくて、削除したいときに苦労します。
保存時は入力した文字がデータベースに格納されるので問題がないのですが、少し気持ちが悪いと感じる人も多いです。

ただしCSSの疑似要素に特殊文字を使用する場合、絵文字の変換機能とは関係ないですが、問題が発生します。

WordPressの追加CSSは疑似要素に特殊文字を使用できない問題

絵文字の変換機能をオフにする方法

次のコードをfunction.phpか自作プラグインに記述します。

僕は新規サイトを作成したときやテーマを変えたときにも使いまわしができることから、自作プラグインでの追加をおススメしています。自作プラグインの設定方法は次の記事を見てください。

WordPressカスタマイズの準備｜自作したコードはテーマをバージョンアップしたら消えてしまう？

絵文字の変換機能をオフにするコード
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' );

基本的にコピペで問題ありませんが、一応、上から順番に解説していきます。

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );

headタグ内への絵文字スクリプト出力動作を削除します。

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

フィードデータを要求されたときに、特殊文字をimgタグに変換してから渡す動作を削除します。

remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );

rssデータを要求されたときに、特殊文字をimgタグに変換してから渡す動作を削除します。

remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );

メール送信時、特殊文字をimgタグに変換する動作を削除します。

add_action( 'init', 'disable_emoji' );

ブラウザがWebページを閲覧したり管理ページを開いたりしたときに、ページデータを作成する前（初期化時）に呼び出す関数を登録します。

絵文字変換機能を特定のページだけ組み込む

絵文字変換機能の組み込みを停止させた状態で、特定のページだけ組み込む方法をお伝えします。
方法はいくつかありますが、一番手っ取り早いので今回はショートコードを作成します。

絵文字変換機能停止コードを入力したときと同じように、次のコードをコピペします。

特定のページだけ絵文字変換機能を組み込むコード
$myAddEmojiFlg = false;
function myAddEmoji(){
	if( $myAddEmojiFlg ) return;
	$myAddEmojiFlg = true;
	add_action('wp_footer', 'print_emoji_detection_script');
	add_action('wp_footer', 'print_emoji_styles');
}
add_shortcode('emojiOn', 'myAddEmoji');

記事中で次のショートコードを記述することで、Webページ表示時に絵文字変換機能がオンになります。

特定のページだけ絵文字変換機能を組み込むショートコード
[emojiOn]