WordPressに「絵文字入りの埋め込みツイート」をエラーを出さずに貼り付ける方法

Twitterの絵文字入りのツイートをWordpressに貼り付けるとエラーを起こします。

その問題について、先日フォーラムに書いていたら、ふと解決策を見つけたので紹介です。

追記：2015年5月現在、当記事でエラーの出ていたツイートを埋め込んでもエラーが出なくなっていました。どうやら、Wordpress側で改善されたみたいです。

photo by Garrett Heath

WordPressの絵文字ツイート埋め込み問題

Twitterの埋め込みタグをWordpressエディターに貼り付けると、

通常は以下のように表示されます。

しかし、以下のような絵文字入りのツイートを、Wordpressに埋め込んでしまうと

WordPressに投稿すると、以下のように、絵文字の部分でそれ以降の文章が切れてしまいます。

しかも、埋め込みツイート以降に、以下のように大量の文章を書いていたとしても、

投稿した途端、絵文字以降の文章が全て消えて保存されてしまいます。

ツイートの埋め込み以降、何万文字書いていようが、容赦なく消えてしまいます。リビジョンからも復活できません。これは恐ろしい。

問題が起こる原因

こういったことが起こる原因は、絵文字用の文字コード（Unicode6.0）がWordpressデータベースで利用できないことにより起こるそうです。

参考[WordPress] 絵文字(Unicode6.0)が使えない問題

データベースのCHARSETをいじれば、表示させることも一応できるようです。

けれども、素人がいじるには、かなりリスクの高い部分ですし、思わぬ不具合が発生するかもしれません。

それに、絵文字の部分さえ何とかすれば、この問題を起こさないこともできます。

ということで今回は、この「絵文字ツイート埋め込み問題」を発生させない方法を紹介します。

絵文字ツイート埋め込み問題の解決方法

絵文字入りツイートの埋め込み問題を起こさないには、絵文字の混じったツイートは、埋め込まないというのが1番の良策ではあります。

ただ、どうしても絵文字入りのツイートを埋め込みたいといったこともあるかもしれません。そういった時には、以下のようにします。

まずは、Twitterから埋め込みタグをコピーして取得します。

ここまでは、普段通りです。

そして、コピーした埋め込みタグをWindowsなら、メモ帳などに貼り付けます。

すると、以下のように、絵文字部分が表示されます。

この絵文字部分を、消してやるか、何か代わりとなる文字で入れ替えてやります。

このようにして、Wordpressでポストしてやることで、以下のように絵文字入りツイートの埋め込みもできるようになります。

このような、大量の絵文字も埋め込むことができます。

WordPressテキストエディターでもチェック可能

Windowsのメモ帳などがなくても、Wordpressのテキストエディタでもチェックは可能です。

ただし、以下のように、ブラウザごとによって、表示の違いはあります。

Google Chrome

Chromeではこのように、文字化けして表示されます。

Firefox

Firefoxでは、以下のように色付きで表示されます。

Internet Explorer11

Internet Explorerでは、以下のようにモノクロで表示されます。

これらの絵文字部分を、消してやるか、何か代わりとなる文字で、入れ替えてやることによって、絵文字ツイートをポストすることはなくなり、問題が発生しなくなります。

WordPressのoEmbed機能では使えない

WordPressには、ブログエディターなどに、以下のようにTwitterのURLを入力するだけで、ツイートを埋め込む機能があります。

https://twitter.com/NHK_PR/status/561001276285018112

上記のようにURLを記入するだけで、以下のように表示されます。

だいたいおひる((((((*´･ω･｀)))))だよ！

— NHK広報局 (@NHK_PR) January 30, 2015

この方法で、埋め込みたい場合は、絵文字入りのツイートはエラーを起こしますので注意してください。

まとめ

こんな感じで、絵文字をWordpressのポストの前に消してやることで、絵文字入りの埋め込みツイートも問題なく表示できます。

ただ、絵文字入りのツイートは、誤ってWordpressでポストしてしまった場合、絵文字以降の文章が消えてしまうので、なるべく使わないに越したことはないと思います。

課題

oEmbedも一応、プログラムコードで何とかならないものか、以下のようにフックして、Unicode6.0部分を置換しようっと処理をしてみたりもしたのですが、うまくいきませんでした。

add_filter( 'oembed_result', 'replace_4byte_characters' );

add_filter( 'embed_oembed_html', 'twitter_emoji_oembed_filter', 99, 4 );

「embed_oembed_html」でembedが表示される時には、もう既に絵文字以降はなくなっています。

add_filter( 'wp_insert_post_data' , 'filter_handler' , '99', 2 );

なので、ポスト時の「wp_insert_post_data」かとも思いましたが、ポストした時にはまだURLの状態なので、何ともできません。

ここらへんは、今後何か良い方法を探したいと思います。

何か良いフック箇所をご存知の場合は、教えていただけると幸いです。