OembedとWordPressの紹介

WordPressは現在、最大のCMSおよびブログプラットフォームの1つです。しかし、なぜそれはなぜですか？ WordPressは、ここ数年で多くのことを批判されてきました。最大の問題の1つは、アーキテクチャが可能な限りモダンではないことです。 2004年にプラットフォーム（またはCMS）が書かれた方法は、今日の基準とは異なります。それにもかかわらず、エンドユーザーにとって非常に使いやすいことは間違いありません。

エンドユーザーは、コンテンツを公開しやすいCMSを望んでいます。ほとんどのユーザーはコンテンツをハードコードしたくないと思います。クライアントが私に「スライドシェアからコンテンツを追加したい」と尋ねると、私の心は休憩または少なくとも埋め込まれたコードに行きます。今日は、おそらくそれを知らずに使用したWordPressの機能を見ていきます。

キーテイクアウト

Oembedは、消費者とプロバイダーの関係を通じて機能するサイトにコンテンツを簡単に組み込むことを可能にするプロトコルです。写真、ビデオ、リンク、リッチの4種類のリソースを指定します。これらはすべて、応答のURL、幅、高さを提供します。

WordPressには、ホワイトリストのプロバイダーのリストがあるOembedのサポートが組み込まれています。投稿またはページを作成するときにホワイトリストに登録されたプロバイダーからURLを貼り付けるだけで、WordPressは埋め込みHTMLを自動的に取得し、投稿に表示します。ユーザーは、手動でプロバイダーを手動で追加することもできます エンドユーザーにとってのシンプルさを超えて、OembedはWordPress内の柔軟なツールです。ユーザーは、ホワイトリストを実験し、独自のプロバイダーで拡張し、OEMBEDSの外観をカスタマイズすることもできます。 WordPressは、OEMBEDをサポートするサイトを登録し、OEMBEDサポートをサイトに追加する機能も提供します。
oembed
• への紹介
Oembedは、サイトにコンテンツを埋め込む非常に簡単な方法です。 Oembedは、消費者とプロバイダーで構成されています。プロバイダーは、消費者に組み込むことができるリソースを提供し、消費者はOEMBEDエンドポイントを介してそれらのリソースを要求します。
• OEMBED実装では、4種類のリソースを指定します：

写真

ビデオ

リンク

rich
• 写真、ビデオ、リッチタイプは、応答にURL、幅、高さを提供する必要があります。プロバイダーには他のデータも含めることができますが、このタイプのコンテンツを扱うときに必要なのはこれらすべてです。 Oembed仕様はガイドラインであり、プロバイダーはOembedの独自の実装を行うことができます。プロバイダーには、少なくとも1つのOEMBEDエンドポイントとリソースURLが必要です。
スライドシェアを見て、oembedをどのように実装したかを見てみましょう。

ドキュメントでは、OEMBEDエンドポイントとリソースエンドポイントを指定します。 OEMBEDエンドポイントは、http：//www.slideshare.net/api/oembed/2です。リソースエンドポイントは次のようになります：http：//www.slideshare.net/user-slug/slidename-slug。プロバイダーから情報を取得するには、OEMBEDエンドポイントを使用して、リソースのURLパラメーターを渡す必要があります。パラメーターはURLエンコードする必要があります。最小限の要件はURLパラメーターですが、maxwidth、maxheight、および形式を渡すこともできます。それは本当にコンテンツ形式に依存しますが、ビデオ、写真、リッチ形式の場合、これらの引数を渡すオプションがあります。また、OembedはGETメソッドのみを指定するため、他のメソッドを使用することはできません。

URLパラメーターを使用してこのエンドポイントにリクエストを行いましょう。 http：//www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014でリクエストを行います。続く：
ブラウザのURL値のみを要求する場合、通常のHTMLページを取得するだけです。あなたが毎日見ているもの。他の形式が要求されていない場合、SlideshareはXML形式にデフォルトです。リクエストを少し変更しましょう。今回は別のパラメーターを追加してJSON応答を取得します。

<span><span><span><oembed</span>></span>
</span>  <span><span><span><total-slides</span> type<span>="integer"</span>></span>50<span><span></total-slides</span>></span>  
</span>  <span><span><span><thumbnail-width</span> type<span>="integer"</span>></span>170<span><span></thumbnail-width</span>></span>
</span>  <span><span><span><width</span> type<span>="integer"</span>></span>425<span><span></width</span>></span>
</span>  <span><span><span><type</span>></span>rich<span><span></type</span>></span>
</span>  <span><span><span><provider-name</span>></span>SlideShare<span><span></provider-name</span>></span>
</span>  <span><span><span><slideshow-id</span> type<span>="integer"</span>></span>41489102<span><span></slideshow-id</span>></span>
</span>  <span><span><span><provider-url</span>></span>http://www.slideshare.net<span><span></provider-url</span>></span>
</span>  <span><span><span><slide-image-baseurl</span>></span>//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-<span><span></slide-image-baseurl</span>></span>
</span>  <span><span><span><version</span>></span>1.0<span><span></version</span>></span>
</span>  <span><span><span><conversion-version</span> type<span>="integer"</span>></span>2<span><span></conversion-version</span>></span>
</span>  <span><span><span><html</span>></span><span><span><iframe</span> src<span>="http://www.slideshare.net/slideshow/embed_code/41489102"</span> width<span>="427"</span> height<span>="356"</span> frameborder<span>="0"</span> marginwidth<span>="0"</span> marginheight<span>="0"</span> scrolling<span>="no"</span> <span>style<span>="<span>border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;</span>"</span></span> allowfullscreen></span> <span><span></iframe</span>></span> <span><span><div</span> <span>style<span>="<span>margin-bottom:5px</span>"</span></span>></span> <span><span><strong</span>></span> <span><span><a</span> href<span>="https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014"</span> title<span>="WordPress Themes Demystified"</span> target<span>="_blank"</span>></span>WordPress Themes Demystified<span><span></a</span>></span> <span><span></strong</span>></span> from <span><span><strong</span>></span><span><span><a</span> href<span>="http://www.slideshare.net/chris-burgess"</span> target<span>="_blank"</span>></span>Chris Burgess<span><span></a</span>></span><span><span></strong</span>></span> <span><span></div</span>></span>
</span>  <span><span><span></html</span>></span>
</span>  <span><span><span><author-name</span>></span>Chris Burgess<span><span></author-name</span>></span>
</span>  <span><span><span><title</span>></span>WordPress Themes Demystified<span><span></title</span>></span>
</span>  <span><span><span><height</span> type<span>="integer"</span>></span>355<span><span></height</span>></span>
</span><span><span><span></oembed</span>></span></span>

そのリソースをリクエストするようにもう一度試してみてくださいが、今回は追加のパラメーターを指定します。 MaxWidthパラメーターを200にして、このURLをリクエストしましょう：http：//www.slideshare.net/api/oembed/2?url=http://www.slidesheshare.net/chris-burgess/word-press-themeswpmelb2014&format=json＆maxwidth = 200、この結果を取得する必要があります：

<span>{
</span>
    <span>"author_url": "http://www.slideshare.net/chris-burgess",
</span>    <span>"total_slides": 50,
</span>    <span>"provider_name": "SlideShare",
</span>    <span>"version_no": "1415853027",
</span>    <span>"html": "<iframe src=\"http://www.slideshare.net/slideshow/embed_code/41489102\" width=\"427\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> </iframe> <div style=\"margin-bottom:5px\"> <strong> <a href=\"https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014\" title=\"WordPress Themes Demystified\" target=\"_blank\">WordPress Themes Demystified</a> </strong> from <strong><a href=\"http://www.slideshare.net/chris-burgess\" target=\"_blank\">Chris Burgess</a></strong> </div>\n\n",
</span>    <span>"thumbnail_height": 128,
</span>    <span>"type": "rich",
</span>    <span>"slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-",
</span>    <span>"slide_image_baseurl_suffix": "-1024.jpg",
</span>    <span>"slideshow_id": 41489102,
</span>    <span>"title": "WordPress Themes Demystified",
</span>    <span>"version": "1.0",
</span>    <span>"height": 355,
</span>    <span>"provider_url": "http://www.slideshare.net",
</span>    <span>"thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027",
</span>    <span>"conversion_version": 2,
</span>    <span>"author_name": "Chris Burgess",
</span>    <span>"thumbnail_width": 170,
</span>    <span>"width": 425
</span>
<span>}</span>

このリクエストのHTMLキー上のiframeの幅を前のリクエストと比較すると、違いが表示されます。最初のものは427の幅があり、最後のものは202の幅でした。

OEMBED仕様について詳しく知りたい場合は、公式のOEMBEDドキュメントをご覧ください。また、Slideshare Oembedドキュメントを見て、それがどのように機能するかをよりよく理解するために少し遊んでください。

<span>{
</span>
    <span>"conversion_version": 2,
</span>    <span>"version_no": "1415853027",
</span>    <span>"slide_image_baseurl_suffix": "-320.jpg",
</span>    <span>"html": "<iframe src=\"http://www.slideshare.net/slideshow/embed_code/41489102\" width=\"202\" height=\"168\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> </iframe> <div style=\"margin-bottom:5px\"> <strong> <a href=\"https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014\" title=\"WordPress Themes Demystified\" target=\"_blank\">WordPress Themes Demystified</a> </strong> from <strong><a href=\"http://www.slideshare.net/chris-burgess\" target=\"_blank\">Chris Burgess</a></strong> </div>\n\n",
</span>    <span>"total_slides": 50,
</span>    <span>"width": 200,
</span>    <span>"slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/85/slide-",
</span>    <span>"thumbnail_height": 128,
</span>    <span>"thumbnail_width": 170,
</span>    <span>"thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027",
</span>    <span>"provider_name": "SlideShare",
</span>    <span>"author_url": "http://www.slideshare.net/chris-burgess",
</span>    <span>"author_name": "Chris Burgess",
</span>    <span>"version": "1.0",
</span>    <span>"slideshow_id": 41489102,
</span>    <span>"type": "rich",
</span>    <span>"height": 167,
</span>    <span>"title": "WordPress Themes Demystified",
</span>    <span>"provider_url": "http://www.slideshare.net"
</span>
<span>}</span>

なぜこれが役立つ

しばらくの間、技術的な実装を忘れましょう。 WordPressはエンドユーザーに関するものです。 OEMBED仕様のすべての実装は、WordPressコードベース内にあります。 WordPressには、サポートされているすべてのOEMBEDプロバイダーの白いリストがあります。これらは、ホワイトリストからのほんの一部です。

WordPressは、このホワイトリストからコンテンツを簡単に埋め込むことができます。投稿またはページを作成するときに、1つのリソースのURLを貼り付けます。 その後、すぐにコンテンツをレンダリングします。

URLは、それ自体の1つの行でなければなりません。 WordPressはそのリンクを探してから、このリンクがホワイトリストのURLの1つのリソースであるかどうかを検索します。もしそうなら、それはOEMBEDエンドポイントにリクエストを行います。この例では、TwitterステータスURLをコピーし、WordPressは投稿内にそのステータスを埋め込みました。しかし、これはTwitterだけに限定されていません。ホワイトリストの他のサイトを検索して試してみてください。

ホワイトリストを越えて、すべてのOEMBEDサイトはWordPressによってサポートされています。追加のプロバイダーを手動で追加できます。 WordPressは2つの機能を提供します。1つはOembedをサポートするサイトを登録するために、もう1つはHardCodeをサポートしてサイトにサポートを追加できます。 wp_oembed_add_provider（）を使用して、既存のoembedサイトをWordPressに追加します。また、wp_embed_register_handler（）を使用して、非embedサイトを追加することもできます。または、ホイールを再発明するのが嫌いな私のような場合は、プラグインが最初に存在するかどうかを確認することもできます。

結論

Oembedは、あなたの人生を楽にする便利なWordPressの機能の1つです。この記事では、Oembedが何であるかについて、Oembed仕様とOembedとWordPressがどのように連携するかについて説明しました。しかし、そこで止まらないでください。ホワイトリストを試して、自分のプロバイダーで拡張してください。

oembedとwordpress

に関するよくある質問

oembedとは何ですか？また、WordPressでどのように機能しますか？

​​

Oembedは、Webサイトが埋め込みコンテンツ（ビデオ、画像、ツイートなど）を埋め込んでいることを可能にするプロトコルです。コンテンツ。 WordPressには、Oembedのサポートが組み込まれています。 OembedをサポートするサイトからURLを貼り付けると、WordPressはAPIを自動的に使用して埋め込みHTMLを取得し、投稿に表示します。これにより、埋め込みたいメディアをホストするサイトからHTMLをコピーして貼り付ける必要性がなくなります。 EmbedやOembed Managerの無効化などのプラグインを使用して、そうすることができます。または、Oembedを無効にするために、テーマのfunctions.phpファイルに数行のコードを追加することもできます。ただし、これによりすべてのタイプの埋め込みが無効になることに注意してください。これは、テーマにカスタムCSSを追加することで実行できます。必要な正確なCSSは、埋め込みの種類とテーマのデザインに依存します。信頼できるソースからコンテンツのみを埋め込むことが重要です。一部のWebサイトは、OEMBEDコードを適切に消毒しない場合があります。これは、セキュリティの脆弱性につながる可能性があります。

なぜ私のoembedはWordPressで機能していないのですか？

​​

あなたのoembedが機能していない理由がいくつかあるかもしれません。埋め込もうとしているURLは、Oembedをサポートするサイトからのものではないか、プラグインやテーマと競合する可能性があります。問題が発生している場合は、すべてのプラグインを無効にしてデフォルトのテーマに切り替えて問題を解決するかどうかを確認してみてください。 WordPressでカスタム投稿タイプを使用してOembedを使用できます。カスタム投稿タイプが「エディター」機能をサポートしていることを確認する必要があります。

WordPressで新しいOEMBEDプロバイダーのサポートを追加するにはどうすればよいですか？ wp_oembed_add_provider（）関数を使用して、oembedプロバイダー。この関数を使用すると、WordPressが埋め込みHTMLを取得するために使用するプロバイダーのURLスキームとエンドポイントを指定できます。 、WordPressのOembedsの幅と高さを制限できます。これは、すべてのoembedsの最大幅と高さを指定できるEmbed_defaultsフィルターを使用することで実行できます。パフォーマンスを改善するために24時間。ただし、OEMBED_TTLフィルターを使用してこの期間を変更できます。 wp_oembed_get（）関数。この関数を使用すると、URLの埋め込みHTMLを取得し、サイトのどこにでも表示できます。

以上がOembedとWordPressの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。