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

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

キーテイクアウト

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

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

寫真

ビデオ

リンク

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

ドキュメントでは、OEMBEDエンドポイントとリソースエンドポイントを指定します。 OEMBEDエンドポイントは、http：//www.slideshare.net/api/oembed/2です。リソースエンドポイントは次のようになります：http：//www.slideshare.net/user-slug/slidename-slug。プロバイダーから情報(bào)を取得するには、OEMBEDエンドポイントを使用して、リソースのURLパラメーターを渡す必要があります。パラメーターはURLエンコードする必要があります。最小限の要件はURLパラメーターですが、maxwidth、maxheight、および形式を渡すこともできます。それは本當(dāng)にコンテンツ形式に依存しますが、ビデオ、寫真、リッチ形式の場合、これらの引數(shù)を渡すオプションがあります。また、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、この結(jié)果を取得する必要があります：

<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ドキュメントを見て、それがどのように機(jī)能するかをよりよく理解するために少し遊んでください。

<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>

なぜこれが役立つ

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

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

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

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

結(jié)論

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

oembedとwordpress

に関するよくある質(zhì)問

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

??

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

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

??

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

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

以上がOembedとWordPressの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。