
コメント欄に絵文字を入れたのですが表示されません。
表示されるようにするにはどうしたらいいでしょうか。
ブログシステムとしてWordPressを使っているブログにおいて、記事にコメントをする際に「絵文字」を入力してもそれが表示されないという事象が発生しました。
当初はWordPressの仕様なのかと思っていたのですが、問題なく表示されているブログもありました。
何らかの設定の違いが影響していそうなので調査してみました。
結論から先に申し上げますと、コメントの内容を保存しているテーブルの文字コードが不適切だったことが原因です。
(正確にはテーブルというよりもカラムの文字コードです)
この記事を読めば文字コードを変更して正常に表示されるようにすることができます。
どうぞ最後までご覧ください。
発生していた事象
あるレンタルサーバーで運用しているブログの記事に絵文字入りのコメントをつけると、そのコメントから絵文字が削除されてしまいます。


原因
絵文字が表示されない原因は前述の通り、テーブルのカラムの文字コードが不適切だったためです。
テーブルにデータが書き込まれる際に絵文字の部分がスッポリ抜け落ちて書き込まれていたようです。
該当のテーブルとカラム
wp_commentsテーブルのcomment_contentカラムです。
「照合順序」の部分に注目してください。

望ましい文字コード
コメント欄に絵文字が入っていても問題なく表示されているブログの場合は当該カラムの照合順序が「utf8mb4_general_ci」や「utf8mb4_unicode_520_ci」となっていました。
対応
PhpMyAdminを使って変更します。
左ペインで「wp_comments」を選択し、上にある「構造」タブをクリックします。
続いて「comment_content」行の「変更」をクリックします。

くれぐれも関係ないテーブルやカラムの「変更」をクリックしないようにご注意ください。
照合順序の値を「utf8mb4_general_ci」に変更して「保存する」をクリックします。

「comment_content」の照合順序が「utf8mb4_general_ci」になっていることを確認します。

以上で対応は完了です。
尚、この対応を行っても既存のコメントの絵文字が表示されるようにはなりません。
(既にテーブルにデータとして存在していないため)
対応後、新規につけられたコメントの絵文字のみ正常に表示されます。
確認
改めて、絵文字入りのコメントをつけてみます。

問題なく表示されました!👍

まとめ
PhpMyAdminが使える方であればそれほど難易度の高い作業ではないと思います。
またSQL文に詳しい方であればSSHでログイン後にコマンドで変更することも可能です。
この記事がコメント欄に絵文字が表示されなくて困っている方の参考になれば幸いです。
コメント