トピック
WordPress サイトに動画・画像・ツイート・音声ファイルなどのコンテンツを埋め込むのはとても簡単です。
使い方 使い方
投稿や固定ページに動画などのオブジェクトを埋め込むには、コンテンツエリアに 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 のみを埋め込みます。
メディア埋め込み元として使えるサイト メディア埋め込み元として使えるサイト
以下がすべて利用できます。
| サービス | 埋め込みタイプ | 導入タイミング |
|---|---|---|
| Animoto | 動画 | WordPress 4.0 |
| Blip | 動画 | WordPress 2.9 |
| Cloudup | 動画、ギャラリー、画像 | WordPress 4.4 |
| CollegeHumor | 動画 | WordPress 4.0 |
| DailyMotion | 動画 | WordPress 2.9 |
| 投稿、アクティビティ、写真、動画、メディア、引用文、ノート | WordPress 4.7 | |
| Flickr | 動画と画像 | WordPress 2.9 |
| FunnyOrDie.com | 動画 | WordPress 3.0 |
| Hulu | 動画 | WordPress 2.9 |
| Imgur | 画像 | WordPress 3.9 |
| 画像 | WordPress 3.5 | |
| Issuu | 文書 | WordPress 4.0 |
| Kickstarter | プロジェクト | WordPress 4.2 |
| Meetup.com | 各種タイプ | WordPress 3.9 |
| Mixcloud | 音楽 | WordPress 4.0 |
| Photobucket | 画像 | WordPress 2.9 |
| PollDaddy | 投票、アンケート | WordPress 3.0 |
| 投稿、コメント | WordPress 4.4 | |
| ReverbNation | 音楽 | WordPress 4.4 |
| Scribd | 文書 | WordPress 2.9 |
| SlideShare | プレゼンスライド | WordPress 3.5 |
| SmugMug | 各種タイプ | WordPress 3.0 |
| SoundCloud | 音楽 | WordPress 3.5 |
| Speaker Deck | プレゼンスライド | WordPress 4.4 |
| Spotify | 音楽 | WordPress 3.6 |
| TED | 動画 | WordPress 4.0 |
| Tumblr | 各種タイプ | WordPress 4.2 |
| ツイート、プロフィール、リスト、コレクション、いいね、モーメント | WordPress 3.4 | |
| VideoPress | 動画 | WordPress 4.4 |
| Vimeo | 動画 | WordPress 2.9 |
| Vine | 動画 | WordPress 4.1 |
| WordPress plugin directory | プラグイン | WordPress 4.4 |
| WordPress.tv | 動画 | WordPress 2.9 |
| YouTube | 動画 | WordPress 2.9 |
注意点:
- Twitter – 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTPS HTTP に変更すれば修正できます。
- YouTube – 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
- Tumblr – 投稿 (name.tumblr.com/post/etc) のみが認識されます。個別の画像 (name.tumblr.com/image) は埋め込めません。
他のサイトへの対応を追加・変更するには 他のサイトへの対応を追加・変更するには
他のサイトへの対応を追加する方法は、そのサイトが 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 公式サイト
- Get Started With OEmbed – Webmonkey.com
- WordPress oEmbed Providers Registration Generator – GenerateWP.com
- Easy Embeds For WordPress 2.9 – Alex Mills (Viper007Bond)
- How to Set oEmbed Max Width in WordPress 3.5 with $content_width? – wpbeginner.com
変更履歴 変更履歴
英語版ハンドブックをご覧ください。
この記事は役に立ちましたか ? どうすればさらに改善できますか ?
フィードバックを送信するにはログインする必要があります。