オブジェクトの埋め込み

WordPress サイトに動画・画像・ツイート・音声ファイルなどのコンテンツを埋め込むのはとても簡単です。

ブロックエディター ブロックエディター

WordPress 5.0 から実装されたブロックエディターではよりシンプルな方法で WordPress サイトへコンテンツを埋め込むことができます。埋め込みブロックをを使うことで、URL をコピーし、ブロック内にペーストするだけです。

各特定のブロックはそれぞれカスタマイズの設定ができます。各ブロックの説明は下記表もしくはコアのブロックリストで確認できます。

トップ ↑

メディア埋め込み元として使えるサイト メディア埋め込み元として使えるサイト

以下がすべて利用できます。

サービスブロック埋め込みタイプ導入タイミング
Amazon Kindle instant previewsAmazon Kindle Block動画WordPress 4.9
AnimotoAnimato Block動画WordPress 4.0
CloudupCloudup Block動画、ギャラリー、画像WordPress 4.4
CrowdsignalCrowdsignal Block投票、アンケートWordPress 3.0
DailyMotionDailyMotion Block動画WordPress 2.9
FacebookFacebook は oEmbed エンドポイントを廃止しました。投稿、アクティビティ、写真、動画、メディア、引用文、ノートWordPress 4.7
FlickrFlickr Block動画と画像WordPress 2.9
GiphyAnimated GIFsWordPress 4.7
ImgurImgur Block画像WordPress 3.9
InstagramFacebook は oEmbed エンドポイントを廃止しました。画像WordPress 3.5
IssuuIssuu Block文書WordPress 4.0
KickstarterKickstarter BlockプロジェクトWordPress 4.2
Meetup.comMeetup.com Block各種タイプWordPress 3.9
MixcloudMixcloud Block音楽WordPress 4.0
Photobucket画像WordPress 2.9
RedditReddit Block投稿、コメントWordPress 4.4
ReverbNationReverbNation Block音楽WordPress 4.4
ScribdScribd Block文書WordPress 2.9
SlideShareSlideShare BlockプレゼンスライドWordPress 3.5
SmugMugSmugMug Block各種タイプWordPress 3.0
SoundCloudSoundCloud Block音楽WordPress 3.5
Speaker DeckSpeaker Deck BlockプレゼンスライドWordPress 4.4
SpotifySpotify Block音楽WordPress 3.6
TEDTED Block動画WordPress 4.0
TikTokTikTok Block動画WordPress 5.4
TumblrTumblr Block各種タイプWordPress 4.2
TwitterTwitter Blockツイート、プロフィール、リスト、コレクション、いいね、モーメントWordPress 3.4
VideoPressVideoPress Block動画WordPress 4.4
Vimeo動画WordPress 2.9
WordPress plugin directoryプラグインWordPress 4.4
WordPress.tvWordPress.tv Block動画WordPress 2.9
YouTubeYouTube Block動画WordPress 2.9

注意点:

  • Twitter – 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTPS HTTP に変更すれば修正できます。
  • YouTube – 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
  • Tumblr – 投稿 (name.tumblr.com/post/etc) のみが認識されます。個別の画像 (name.tumblr.com/image) は埋め込めません。

Facebook と Instagram リンクの埋め込みは、 Facebook 社が oEmbed エンドポイントを廃止する決定をしたことにより、2020年10月24日以降は動作しません。Facebook と Instagram のリンクをサイトに埋め込みたい場合、エンドポイントへのアクセスにはデベロッパーアカウントと appid の取得、認証トークンの送信が必要です。Facebook ドキュメント: App Development

トップ ↑

使い方 使い方

投稿や固定ページに動画などのオブジェクトを埋め込むには、コンテンツエリアに URL を入力してください。URL は独立した行に書くこと、(投稿表示時にクリックできるような) ハイパーリンクにしないこと、の2点に注意してください。

例えば以下のように記入します。

動画をご覧ください。

https://www.youtube.com/watch?v=dQw4w9WgXcQ

おすすめです。

こうすれば、URL を YouTube 埋め込みコードに自動変換して、ビジュアルエディタのプレビューで表示できます。

また、オプションとして embed ショートコードで URL を囲むことも可能です。

// 注: お試しの際は '[' と 'embed' の間にあるスペースを削除してください。
[ embed width="123" height="456"]http://www.youtube.com/watch?v=dQw4w9WgXcQ[/embed]

WordPress が URL を使ってメディアを埋め込むことができなかった場合は、URL のハイパーリンクが表示されます。

トップ ↑

oEmbed oEmbed

単なメディア埋め込み機能のほとんどは、oEmbed によって提供されています。oEmbed は、A というサイト (例えばあなたのブログ) が B というサイト (例えば YouTube) に、コンテンツ (例えば動画) を埋め込むために必要な HTML を問い合せるためのプロトコルです。

oEmbed は、メディアを埋め込みたいサイトから HTML コードをコピー&ペーストしたりしなくて済むように設計されています。動画、画像、テキストなどに対応しています。

トップ ↑

どんな URL でもこの機能を使えますか ? どんな URL でもこの機能を使えますか ?

デフォルトでは限られたサイトからの URL のみに有効です。安全対策のため、WordPress は内部のホワイトリストに一致する URL のみを埋め込みます。

トップ ↑

他のサイトへの対応を追加・変更するには 他のサイトへの対応を追加・変更するには

他のサイトへの対応を追加する方法は、そのサイトが oEmbed に対応しているかどうかによって異なります。

oEmbed 対応サイト oEmbed 対応サイト

サイトが oEmbed に対応している場合は wp_oembed_add_provider() を呼び出し、そのサイトの URL 形式を内部のホワイトリストに追加します。

トップ ↑

oEmbed 非対応サイト oEmbed 非対応サイト

wp_embed_register_handler() を使ってハンドラーを登録します。その後、HTML を生成するコールバック関数が必要になります。

トップ ↑

oEmbed 対応サイトの埋め込みを無効化する oEmbed 対応サイトの埋め込みを無効化する

対応済みの oEmbed プロバイダを無効化したい場合は、wp_oembed_add_provider() を呼び出してください。

トップ ↑

oEmbed 自動探知 oEmbed 自動探知

バージョン4.4時点で WordPress は oEmbed 自動探知 (discovery) をサポートしていますが、ホワイトリストに登録されていないサイトから埋め込めるコンテンツの種類には厳しい制限があります。

具体的には、HTML および動画コンテンツはフィルタリングされ、リンク、ブロッククォート、iframe のみが許可されます。これらをさらにフィルタリングして、悪質なコンテンツの挿入を防止しています。その後、HTML はサンドボックス化され、そこへ追加のセキュリティ制限が加えられます。

しかし、十分に知識があり、そのような防衛策が必要ないなら、unfiltered_html 権限を持つユーザー (管理者と編集者) に対し、<head> に oEmbed 探知タグを持つサイトからの埋め込みを許可することはできます。

「リンク」と「写真」タイプの oEmbed 探知コンテンツはこのように幅広くフィルタリングされているわけではありませんが、セキュリティのために適切にエスケープされ、悪質なコンテンツがサイトに表示されないようになっています。

トップ ↑

外部資料 外部資料

  • oEmbed.com – 技術的仕様を含む oEmbed 公式サイト

トップ ↑

変更履歴 変更履歴

英語版ハンドブックをご覧ください。

この記事は役に立ちましたか ? どうすればさらに改善できますか ?