• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「oEmbed」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(更新履歴 4.0の本文をマージ)
(改名提案はなし、oEmbedとします。)
(2人の利用者による、間の10版が非表示)
1行目: 1行目:
{{Rename|E}}
+
 
 
__TOC__
 
__TOC__
動画・画像・ツイート・音楽などコンテンツを WordPress サイトに'''埋め込む'''(embed)のはとても簡単です。
+
 
 +
簡単な[[ショートコード API|ショートコード]]を使うことで、 WordPress サイトに動画・画像・ツイート・音楽などのコンテンツを、とても簡単に '''埋め込む'''(embed)ことができます。
  
 
== 概要 ==
 
== 概要 ==
15行目: 16行目:
 
すごいでしょう?</pre>
 
すごいでしょう?</pre>
  
のように入力すれば、投稿が表示される際、URL の位置に自動的に YouTube 動画が埋め込まれます。また、オプションとして <code>[embed]</code> [[ショートコード API|ショートコード]]で URL を囲むことも可能です。表示結果は同じですが、URL を独立した行に書かなくてもよくなります。また、(固定値ではなく)最大幅・高さを以下のように設定することもできます。
+
のように入力すれば、Youtube動画を含むURLを自動的に変換して、ビジュアルエディタのプレビューで表示できます。また、オプションとして <code>[embed]</code> [[ショートコード API|ショートコード]]で URL を囲むことも可能です。表示結果は同じですが、URL を独立した行に書かなくてもよくなります。また、(固定値ではなく)最大幅・高さを以下のように設定することもできます。
  
 
  [embed width="123" height="456"]...[/embed]
 
  [embed width="123" height="456"]...[/embed]
40行目: 41行目:
 
! '''埋め込みの種類'''
 
! '''埋め込みの種類'''
 
! '''追加時'''
 
! '''追加時'''
 +
|-
 +
| [http://animoto.com Animoto]
 +
| 動画
 +
| [[Version 4.0|WordPress 4.0]]
 +
|
 
|-
 
|-
 
| [http://blip.tv/ Blip]
 
| [http://blip.tv/ Blip]
48行目: 54行目:
 
| [http://collegehumor.com CollegeHumor]
 
| [http://collegehumor.com CollegeHumor]
 
| 動画
 
| 動画
| (バージョン 4.0 で追加予定)
+
| [[Version 4.0|WordPress 4.0]]
 
|
 
|
 
|-
 
|-
79行目: 85行目:
 
| 画像
 
| 画像
 
| [[Version 3.5|WordPress 3.5]]
 
| [[Version 3.5|WordPress 3.5]]
 +
|
 +
|-
 +
| [http://www.isnare.com/ iSnare]
 +
| 記事
 +
| [[Version 2.9|WordPress 2.9]]
 
|
 
|
 
|-
 
|-
 
| [http://issuu.com Issuu]
 
| [http://issuu.com Issuu]
 
| ドキュメント
 
| ドキュメント
| (バージョン 4.0 で追加予定)
+
| [[Version 4.0|WordPress 4.0]]
 
|
 
|
 
|-  
 
|-  
 
| [http://meetup.com Meetup.com]
 
| [http://meetup.com Meetup.com]
 +
| 各種コンテンツ
 +
| [[Version 3.9|WordPress 3.9]]
 +
|
 +
|-
 +
| [http://embedarticles.com EmbedArticles]
 
| 各種コンテンツ
 
| 各種コンテンツ
 
| [[Version 3.9|WordPress 3.9]]
 
| [[Version 3.9|WordPress 3.9]]
93行目: 109行目:
 
| [http://mixcloud.com Mixcloud]
 
| [http://mixcloud.com Mixcloud]
 
| 音楽
 
| 音楽
| (バージョン 4.0 で追加予定)
+
| [[Version 4.0|WordPress 4.0]]
 
|
 
|
 
|-
 
|-
102行目: 118行目:
 
|-
 
|-
 
| [http://www.polldaddy.com/ PollDaddy]
 
| [http://www.polldaddy.com/ PollDaddy]
| Polls & Surveys
+
| 投票・アンケート
 
| [[Version 3.0|WordPress 3.0]]
 
| [[Version 3.0|WordPress 3.0]]
 
|
 
|
143行目: 159行目:
 
| [http://www.ted.com/ TED]
 
| [http://www.ted.com/ TED]
 
| 動画
 
| 動画
| (バージョン 4.0 で追加予定)
+
| [[Version 4.0|WordPress 4.0]]
 
|
 
|
 
|-
 
|-
 
| [http://twitter.com Twitter]
 
| [http://twitter.com Twitter]
| Social media
+
| ソーシャルメディア
 
| [[Version 3.4|WordPress 3.4]]
 
| [[Version 3.4|WordPress 3.4]]
 
|
 
|
157行目: 173行目:
 
|-
 
|-
 
| [http://vimeo.com/ Vimeo]
 
| [http://vimeo.com/ Vimeo]
| Video
+
| 動画
 
| [[Version 2.9|WordPress 2.9]]
 
| [[Version 2.9|WordPress 2.9]]
 
|
 
|
 
|-
 
|-
| [http://www.youtube.com/ YouTube]
+
| [http://vine.co/ Vine]
 
| 動画
 
| 動画
| [[Version 2.9|WordPress 2.9]]
+
| [[Version 4.1|WordPress 4.1]]
 
|
 
|
 
|-
 
|-
 
| [http://wordpress.tv/ WordPress.tv]
 
| [http://wordpress.tv/ WordPress.tv]
 +
| 動画
 +
| [[Version 2.9|WordPress 2.9]]
 +
|
 +
|-
 +
| [http://www.youtube.com/ YouTube]
 
| 動画
 
| 動画
 
| [[Version 2.9|WordPress 2.9]]
 
| [[Version 2.9|WordPress 2.9]]
175行目: 196行目:
 
* Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTP に変更すれば修正できます。
 
* Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTP に変更すれば修正できます。
 
* YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
 
* YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
 
  
 
== 他のサイトに対応するには? ==
 
== 他のサイトに対応するには? ==
213行目: 233行目:
 
* [http://web-profile.com.ua/wordpress/useful/embed-video-into-post/ Other ways to insert video into post on WordPress site]
 
* [http://web-profile.com.ua/wordpress/useful/embed-video-into-post/ Other ways to insert video into post on WordPress site]
 
* [http://yoast.com/wordpress/video-seo/ Video SEO Plugin] - 埋め込まれた動画を自動的に検知し、動画 XML サイトマップを追加するプラグイン
 
* [http://yoast.com/wordpress/video-seo/ Video SEO Plugin] - 埋め込まれた動画を自動的に検知し、動画 XML サイトマップを追加するプラグイン
 +
* [http://wordpress.org/plugins/simple-youtube-embed/ Simple YouTube Embed Plugin] YouTube を (embedded by URLでの埋め込み もしくは ショートコード埋め込みで) レスポンシブで美しい見た目で埋め込む。
  
 
== 更新履歴 ==
 
== 更新履歴 ==
  
 
* [[Version 2.9|2.9]] :  
 
* [[Version 2.9|2.9]] :  
  * ビルトイン埋め込みに対応。
+
** ビルトイン埋め込みに対応。
 
* [[Version 3.0|3.0]] :  
 
* [[Version 3.0|3.0]] :  
  * SmugMug と FunnyOrDie.com に対応。
+
** SmugMug と FunnyOrDie.com に対応。
 
* [[Version 3.4|3.4]] :  
 
* [[Version 3.4|3.4]] :  
  * Twitter を追加。
+
** Twitter を追加。
 
* [[Version 3.5|3.5]] :  
 
* [[Version 3.5|3.5]] :  
  * Instagram、SoundCloud、SlideShare を追加。
+
** Instagram、SoundCloud、SlideShare を追加。
 
* [[Version 3.6|3.6]] :  
 
* [[Version 3.6|3.6]] :  
  * Rdio、Spotify を追加。
+
** Rdio、Spotify を追加。
 
* [[Version 3.9|3.9]] :  
 
* [[Version 3.9|3.9]] :  
  * Qik サービスが2014年4月に終了したため対応削除。
+
** Qik サービスが2014年4月に終了したため対応削除。
 
* [[Version 4.0|4.0]] :  
 
* [[Version 4.0|4.0]] :  
  * Major reworking of the preview code showing embeds within the editor wp-views.
+
** エディタ内のプレビューのソースコードを大幅に調整した。
  * Added: CollegeHumor, Issuu, Mixcloud, YouTube playlists, TED talks
+
** CollegeHumor, Issuu, Mixcloud, YouTubeプレイリスト, TED talks を追加。
  * Removed: Viddler (removed due to the service shutting down their oEmbed endpoint)
+
** Viddler を埋め込み先のサービス終了に伴い削除。
 +
* [[Version 4.1|4.1]] :
 +
** Vine を追加。
  
 
'''注:''' [[Version 3.5|WordPress 3.5]] で埋め込みオプションがメディア設定画面から削除されました。
 
'''注:''' [[Version 3.5|WordPress 3.5]] で埋め込みオプションがメディア設定画面から削除されました。

2015年6月7日 (日) 14:18時点における版

簡単なショートコードを使うことで、 WordPress サイトに動画・画像・ツイート・音楽などのコンテンツを、とても簡単に 埋め込む(embed)ことができます。

概要

投稿固定ページにメディアを埋め込むには、本文欄に URL を書くだけです。URL は独立した行に書くこと、(投稿表示時にクリックできるような)ハイパーリンクにしないこと、の2点に注意してください。

例えば、

この動画を見てみてください。 

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

すごいでしょう?

のように入力すれば、Youtube動画を含むURLを自動的に変換して、ビジュアルエディタのプレビューで表示できます。また、オプションとして [embed] ショートコードで URL を囲むことも可能です。表示結果は同じですが、URL を独立した行に書かなくてもよくなります。また、(固定値ではなく)最大幅・高さを以下のように設定することもできます。

[embed width="123" height="456"]...[/embed]

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

oEmbed

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

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

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

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

このメディア埋め込み機能を使えるサイトは?

以下のサイトを利用できます。

サービス 埋め込みの種類 追加時
Animoto 動画 WordPress 4.0
Blip 動画 WordPress 2.9
CollegeHumor 動画 WordPress 4.0
DailyMotion 動画 WordPress 2.9
Flickr 動画 & 画像 WordPress 2.9
FunnyOrDie.com 動画 WordPress 3.0
Hulu 動画 WordPress 2.9
Imgur 画像 WordPress 3.9
Instagram 画像 WordPress 3.5
iSnare 記事 WordPress 2.9
Issuu ドキュメント WordPress 4.0
Meetup.com 各種コンテンツ WordPress 3.9
EmbedArticles 各種コンテンツ WordPress 3.9
Mixcloud 音楽 WordPress 4.0
Photobucket 画像 WordPress 2.9
PollDaddy 投票・アンケート WordPress 3.0
Rdio 音楽 WordPress 3.6
Revision3 TV shows WordPress 2.9
Scribd ドキュメント WordPress 2.9
SlideShare プレゼンスライド WordPress 3.5
SmugMug 写真 WordPress 3.0
SoundCloud 音楽 WordPress 3.5
Spotify 音楽 WordPress 3.6
TED 動画 WordPress 4.0
Twitter ソーシャルメディア WordPress 3.4
Viddler 動画 (4.0 で非推奨)
Vimeo 動画 WordPress 2.9
Vine 動画 WordPress 4.1
WordPress.tv 動画 WordPress 2.9
YouTube 動画 WordPress 2.9

  • Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTP に変更すれば修正できます。
  • YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。

他のサイトに対応するには?

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

oEmbed 対応サイト

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

oEmbed 非対応サイト

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

埋め込み対応を無効化するには?

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

oEmbed 自動探知は使えますか?

WordPress の oEmbed 実装では、自動探知は無効化されています。デフォルトでは、内部のホワイトリストに挙げられた、安全とみなされたサイトからのメディアのみを埋め込むことができます。これは、悪意のあるサイトのメディアを間違って埋め込んでしまうことがないようにするためです。

しかし、十分に知識があり、そのような防衛策が必要ないなら、unfiltered_html 権限を持つユーザー(管理者と編集者)は oEmbed 探知(ディスカバリー)タグが <head> にあるすべてのサイトからのメディアを埋め込むようにもできます。これには、Enable oEmbed Discovery プラグインを使うだけです。

外部資料

日本語記事

英語記事

更新履歴

  • 2.9 :
    • ビルトイン埋め込みに対応。
  • 3.0 :
    • SmugMug と FunnyOrDie.com に対応。
  • 3.4 :
    • Twitter を追加。
  • 3.5 :
    • Instagram、SoundCloud、SlideShare を追加。
  • 3.6 :
    • Rdio、Spotify を追加。
  • 3.9 :
    • Qik サービスが2014年4月に終了したため対応削除。
  • 4.0 :
    • エディタ内のプレビューのソースコードを大幅に調整した。
    • CollegeHumor, Issuu, Mixcloud, YouTubeプレイリスト, TED talks を追加。
    • Viddler を埋め込み先のサービス終了に伴い削除。
  • 4.1 :
    • Vine を追加。

注: WordPress 3.5 で埋め込みオプションがメディア設定画面から削除されました。

このページ「oEmbed」はまだ書きかけで、情報が不足しています。続きを書いて WordPress を手助けしましょう.


最新英語版: WordPress Codex » Embeds最新版との差分