意外と手こずったWordPress4.4 – コンテンツの埋め込みについて

WordpressロゴWordPress4.4からホワイトリスト方式(Youtubeなどの許可されたサイトのみ)であったembedが変わり、どんなサイトでも相手が対応していれば、投稿欄にURLを入れるだけで自動的にコンテンツの埋め込みされます。WordPress4.4のすべてのソースを解読した訳ではありませんが、少なくとも1つは下記のような仕組みでコンテンツの埋め込みされるようです。

<link rel="alternate" type="application/json+oembed" href="http://www.sitespiral.jp/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.sitespiral.jp%2Farchives%2F575.html" />
<link rel="alternate" type="text/xml+oembed" href="http://www.sitespiral.jp/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.sitespiral.jp%2Farchives%2F575.html&#038;format=xml" />
<iframe sandbox="allow-scripts" security="restricted" src="http://www.sitespiral.jp/archives/575.html/embed" width="600" height="338" title="\u57cb\u3081\u8fbc\u307e\u308c\u305f WordPress \u306e\u6295\u7a3f" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>

パーマリンクの設定次第ではありますが、「/archives/%post_id%」形式であればembedのコンテンツのURLは固定ページ・投稿ページの後ろに「/embed」をつけてあげる形式のようです。

このような仕組みに対応しているTwitter(当然、WordPress4.4も)などは、WordPress4.4からコンテンツの埋め込み可能となりました。

例. WordPressの投稿をコンテンツ埋め込み (相手方がWordPress4.4以上でないと埋め込みされません)

レスポンシブWebデザインにYouTube動画を設置するにあたって… (WordPress編)

八汐荘1Fにcafe161がオープン♪

例. Twitterのつぶやきをコンテンツ埋め込み

例. Youtubeをコンテンツ埋め込み

何に手こずったかというと、まとめると下記のとおりとなります。

  1. 自分側のembed埋め込み用のコンテンツでアイコンがWP4.3から導入されたサイトアイコンを指定しないと、wp-admin配下のWP標準アイコンになってしまう。詳しくは、/wp-includes/embed-template.php をご覧ください。
  2. 自分側のembed埋め込み用のコンテンツのサムネイルがアイキャッチ画像となっており、これを変更するfilterがない。
  3. 自分側のoembedのRESTにauthor情報が出力されている。author表示(display_name)をnicknameにしている場合、それがpublicに漏れている(WPの管理者がadminなどという情報が漏れている)。これに限らずRSS/RDFやpostのmeta情報でも出力されてますが… 詳しくは、/wp-includes/embed.php にある get_oembed_response_data() をご覧ください。
  4. 検証WEB環境にBASIC認証やIP制限などがされている場合、RESTで取得できないため、コンテンツの埋め込みが動かないケースがある。ネットワーク環境によります。
  5. WordPressのTinyMCEと、何らかのWordPressのプラグインの相性で、TinyMCE上でコンテンツの埋め込みが動かない場合がある。Advanced Custom FieldsのアクティベージョンをOFFったら直ったりしたので、このあたりのプラグインの関係しているのかも…(未確認)
  6. SSLのページから、非SSLのembed埋め込み用のコンテンツを埋め込もうとすると、「接続の安全性を確認できません」的なメーッセージが出て表示されない。

 

なお、embed系のカスタマイズは下記のサイトに綺麗にまとめられていました。

WordPress 4.4 から 他サイトの記事を引用埋め込みできるようになった「Embed」

また、embedもRESTも対応したくない方は、下記のプラグインで無効化できるようです(未確認)。

Disable Embeds https://ja.wordpress.org/plugins/disable-embeds/

最後に、「これってFacebookのコンテンツ埋め込みも可能?」と思いましたが、残念ながらFacebookは上記の仕組みには対応していませんでした。代わりにFacebookのJavaScript SDK を用いた方法があるようです。

facebook for devalopers – Embedded Posts https://developers.facebook.com/docs/plugins/embedded-posts

例. FacebookのJavaScript SDKで埋め込み

コンテンツ埋め込み機能は、とあるSNSのシェアみたいな感じで、とても魅力のある機能ですが、iframeで他サイトのHTML(Javascriptも含めて)を埋め込みっていうのがセキュリティ的にどうなのか心配です。さらに、検証を進めなくては…