oEmbedは埋め込み(iframe)の統一規格のことで、対象のページを埋め込む際に必要なデータ(JSONやXML形式)を返すAPIエンドポイントと対象ページを示すURLスキーマで構成される。
近年ではほとんどのWebサイトで埋め込みのiframeタグを使用されているが、規格が統一されていることで、開発者はoEmbedの仕様を知っておけば個別にサービスの仕様を調べる必要がなくなる利便性を向上させることができるというわけ。
TwitterやYouTubeなど多くの巨大なWebサービスがこの規格を採用している。
たとえば以下のようなURLがoEmbed形式といえる。
https://example.com/oembed?url=(URLエンコードされた埋め込む対象のページのURL)&format=(データの種類)
WordPressはoEmbedの規格に対応しているだけでなく、WordPressで作成されたブログ記事同士のシェアをしやすくするために、埋め込もうとしているURLが埋め込みに対応しているかどうかを検知して埋め込みを行ってくれる機能がある。
どのように検知されるかというと、対象のページのheadタグに以下のようなlinkタグを設置する必要がある。
<link rel="alternate" type="application/json+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2F&format=xml" />
このタグのhref属性値が埋め込み時に参照されるリンク先となる。
その後、これらのリンク先にJSONやXMLなどの用意すべき種類のデータを返す処理を記述する必要がある(oEmbed形式でなくても可)が、WordPressサイトの場合は自動的に用意され、また上述のlinkタグはoEmbed形式で自動的に排出される。
データのフォーマットは以下の公式サイトを参照するとよい。
WordPressが自動排出するものはoEmbedに近い形式ではあるが準拠ではないため、WordPress以外からの埋め込みは考慮する必要がある。
あとは、埋め込まれる投稿のレンダリングに使用する embed.php テンプレートタグを修正する。
このテンプレートを確認する際は、実際に埋め込んで確認するか、以下のようなエンドポイントが用意されているため、そのページにアクセスして確認するとよい。
http://localhost:8888/(対象の記事のパス)/embed/
この embed.php テンプレートのカスタマイズは結構厄介で、独自の X-WP-embed レスポンスヘッダーの送信や埋め込み専用で用意されているデフォルトのCSSやJSを必要によっては削除したりする必要がある。
このうちJSはセキュリティチェックやiframe内のリンクがクリックされた時に親ページを遷移したりする動きやiframe要素のheightの調整などさまざまな処理をおこなっているため、自前で用意するのはなかなか面倒な作業となる。
特にWordPress以外でWordPressのページをiframeで表示されることを想定する場合、iframeをsandbox(砂場 – 砂場で遊んでいる子供が安全という意味がある安全な仮想環境を意味する)属性を指定し埋め込み先ページから親ページへの操作に制限を加えた場合、window.pushMessage()以外で親ページに干渉することができないため、これらの処理を一から構築する必要があるため、そのまま利用するのが無難であると思われる。