oEmbed和WordPress简介

tech2022-12-27 69

WordPress is currently one of the biggest CMS and blogging platforms. But why is that? WordPress has been criticized a lot over the last few years. One of the biggest issues is that the architecture isn’t as modern as it could be. The way the platform (or CMS) was written in 2004 is different from the standards we see today. Despite this, there’s no doubt that it’s very easy to use for end-users.

WordPress当前是最大的CMS和博客平台之一。但是为什么呢？ WordPress在过去几年中受到了很多批评。最大的问题之一是该体系结构并不像它可能的那样现代。该平台(或CMS)在2004年的编写方式与我们今天看到的标准不同。尽管如此，毫无疑问，它对于最终用户而言非常易于使用。

End-users want a CMS that’s easy to publish content with. I believe that most users don’t want to hard-code their content. If a client asks me: “I want to add some content from SlideShare”, my mind goes to REST APIs or at least embed codes. Today we’re going to look at a feature of WordPress that you’ve probably used without even knowing it.

最终用户希望使用一种易于发布内容的CMS。我相信大多数用户都不想对内容进行硬编码。如果客户问我：“我想从SlideShare添加一些内容”，我的主意是REST API或至少嵌入代码。今天，我们将研究您可能不知道使用过的WordPress功能。

oEmbed简介 (Introduction into oEmbed)

oEmbed is an incredibly easy way to embed content in your site. oEmbed consists of a consumer and a provider. The provider provides resources that can be embedded on the consumer and the consumer requests those resources via the oEmbed endpoint.

oEmbed是在网站中嵌入内容的一种非常简单的方法。 oEmbed由消费者和提供者组成。提供者提供可以嵌入到使用者上的资源，并且使用者通过oEmbed端点请求这些资源。

The oEmbed implementation specifies 4 types of resources:

oEmbed实现指定4种资源类型：

Photo

照片 Video

视频 Links

链接 Rich

丰富

The Photo, Video and Rich type should provide a URL, width and height in their response. The providers can include also other data, but these are all that’s required when dealing with this type of content. The oEmbed specification is a guideline, providers can do their own implementation of oEmbed. The provider should have at least one oEmbed endpoint and a resource URL.

“照片”，“视频”和“丰富”类型应在其响应中提供URL，宽度和高度。提供者还可以包括其他数据，但是这些都是处理此类内容时所需要的。 oEmbed规范是一个准则，提供者可以自己执行oEmbed。提供者应至少具有一个oEmbed终结点和一个资源URL。

Let’s take a look at the SlideShare and see how they have implemented oEmbed.

让我们看一下SlideShare ，看看它们如何实现oEmbed。

In their documentation they specify the oEmbed endpoint and the resource endpoint. The oEmbed endpoint is: http://www.slideshare.net/api/oembed/2. The resource endpoint looks something like this: http://www.slideshare.net/user-slug/slidename-slug. To get the information from the provider, we should use the oEmbed endpoint and pass a URL parameter of the resource. The parameters should be URL encoded. The minimal requirement is the URL parameter, but you can also pass maxwidth, maxheight and the format. It really depends on the content format, but for Video, Photo and Rich format you have the option to pass these arguments. Also, oEmbed only specifies the GET method, so you can’t use other methods.

他们在他们的文档中指定了oEmbed端点和资源端点。 oEmbed端点是： http://www.slideshare.net/api/oembed/2 ://www.slideshare.net/api/oembed/2。资源端点看起来像这样： http://www.slideshare.net/user-slug/slidename-slug : http://www.slideshare.net/user-slug/slidename-slug 。要从提供程序获取信息，我们应该使用oEmbed端点并传递资源的URL参数。参数应该是URL编码的。最低要求是URL参数，但您也可以传递maxwidth ， maxheight和format 。它实际上取决于内容格式，但是对于视频，照片和丰富格式，您可以选择传递这些参数。另外，oEmbed仅指定GET方法，因此您不能使用其他方法。

Let’s make a request to this endpoint using the URL parameter.

让我们使用URL参数对此端点进行请求。

Make a request to: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014 and you’ll get an XML response like the following:

向以下地址提出请求： http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014 : http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014 ?url http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014 : http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014 ，您将获得一个XML响应，例如以下：

<oembed> <total-slides type="integer">50</total-slides> <thumbnail-width type="integer">170</thumbnail-width> <width type="integer">425</width> <type>rich</type> <provider-name>SlideShare</provider-name> <slideshow-id type="integer">41489102</slideshow-id> <provider-url>http://www.slideshare.net</provider-url> <slide-image-baseurl>//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-</slide-image-baseurl> <version>1.0</version> <conversion-version type="integer">2</conversion-version> <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> </html> <author-name>Chris Burgess</author-name> <title>WordPress Themes Demystified</title> <height type="integer">355</height> </oembed>

If you request only the URL value in the browser, you’ll just get a normal HTML page. Something you see everyday. SlideShare defaults to XML format if no other format is requested. Let’s change the request a bit. This time we’ll add another parameter and get a JSON response.

如果仅在浏览器中请求URL值，则只会得到一个普通HTML页面。您每天都会看到一些东西。如果不要求其他格式，SlideShare默认为XML格式。让我们稍微更改一下请求。这次，我们将添加另一个参数并获得JSON响应。

{ "author_url": "http://www.slideshare.net/chris-burgess", "total_slides": 50, "provider_name": "SlideShare", "version_no": "1415853027", "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", "thumbnail_height": 128, "type": "rich", "slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-", "slide_image_baseurl_suffix": "-1024.jpg", "slideshow_id": 41489102, "title": "WordPress Themes Demystified", "version": "1.0", "height": 355, "provider_url": "http://www.slideshare.net", "thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027", "conversion_version": 2, "author_name": "Chris Burgess", "thumbnail_width": 170, "width": 425 }

Try again to request that resource, but this time specify an additional parameter. Let’s put the maxwidth parameter to 200 and request this URL: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014&format=json&maxwidth=200, you should get this result:

重试以请求该资源，但是这次指定一个附加参数。让我们将maxwidth参数设置为200并请求以下URL： http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014&format=json&maxwidth=200 ://www.slideshare.net/api/oembed/2?url= http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014&format=json&maxwidth=200 : http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014&format=json&maxwidth=200 ，您应该得到以下结果：

{ "conversion_version": 2, "version_no": "1415853027", "slide_image_baseurl_suffix": "-320.jpg", "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", "total_slides": 50, "width": 200, "slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/85/slide-", "thumbnail_height": 128, "thumbnail_width": 170, "thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027", "provider_name": "SlideShare", "author_url": "http://www.slideshare.net/chris-burgess", "author_name": "Chris Burgess", "version": "1.0", "slideshow_id": 41489102, "type": "rich", "height": 167, "title": "WordPress Themes Demystified", "provider_url": "http://www.slideshare.net" }

If you compare the width of the iframe on html key of this request with the previous request, you should see a difference. The first one had a width of 427 and the last one had a width of 202.

如果您将此请求的html键上的iframe的宽度与上一个请求进行比较，您会发现有所不同。第一个的宽度为427，最后一个的宽度为202。

If you want to know more about the oEmbed specification, take a look at the official oEmbed docs. Also take a look at the SlideShare oEmbed documentation and play with it a bit to better understand how it works.

如果您想进一步了解oEmbed规范，请查看官方的oEmbed文档。还可以查看SlideShare oEmbed文档，并对其进行一些操作，以更好地了解其工作原理。

为什么这很有用 (Why This Is Useful)

For a moment, let’s forget about the technical implementation. WordPress is more about end-users. All the implementation of the oEmbed specification is inside the WordPress codebase. WordPress has a white list of all the supported oEmbed providers. These are just some of them from their whitelist.

暂时让我们忘记技术实施。 WordPress更多地与最终用户有关。 oEmbed规范的所有实现都在WordPress代码库中。 WordPress拥有所有受支持的oEmbed提供商的白名单。这些只是他们白名单中的一部分。

WordPress makes easy to embed content from this whitelist. Just paste the URL of one resource when creating a post or page.

WordPress可以轻松嵌入此白名单中的内容。创建帖子或页面时，只需粘贴一种资源的URL。

You will then see it instantly render the content:

然后，您将看到它立即呈现内容：

The URL should just be one line on it’s own. WordPress looks for that link and then searches to see if this link is a resource for one of the whitelisted URLs. If it is, then it makes a request to the oEmbed endpoint. In this example, I copied a Twitter status URL and WordPress embedded that status for me, inside the post. But this is not limited only to Twitter, search for other sites in the whitelist and experiment with them.

该URL本身应该只是一行。 WordPress查找该链接，然后搜索以查看此链接是否是白名单URL之一的资源。如果是，则向oEmbed端点发出请求。在此示例中，我复制了一个Twitter状态URL，而WordPress在帖子内部为我嵌入了该状态。但这不仅限于Twitter，在白名单中搜索其他网站并进行试验。

Beyond the whitelist, every oEmbed site is supported by WordPress. You can manually add additional providers. WordPress provides two functions, one for registering a site that supports oEmbed and one that we can hardcode to add oEmbed support to our site. Use wp_oembed_add_provider() to add an existing oEmbed site to WordPress. You can also use wp_embed_register_handler() to add an non-oEmbed site. Or, if you’re like me who hates to reinvent the wheel, you can also check if a plugin exists first.

除白名单外，WordPress还支持每个嵌入式网站。您可以手动添加其他提供程序。 WordPress提供了两种功能，一种用于注册支持oEmbed的站点，另一种可以通过硬编码将oEmbed支持添加到我们的站点。使用wp_oembed_add_provider()将现有的oEmbed网站添加到WordPress。您也可以使用wp_embed_register_handler()添加非嵌入式网站。或者，如果您像我一样讨厌重新发明轮子，也可以检查是否首先存在一个插件。

结论 (Conclusion)

oEmbed is one of the handy WordPress features that makes your life easier. In this article we covered what oEmbed is, we looked at the oEmbed specifications and how oEmbed and WordPress work together. But don’t stop there. Experiment with the whitelist and extend it with your own providers.

oEmbed是便捷的WordPress功能之一，使您的生活更轻松。在本文中，我们介绍了oEmbed是什么，我们研究了oEmbed规范以及oEmbed和WordPress如何协同工作。但是不要停在那里。试用白名单，并与您自己的提供商进行扩展。

翻译自: https://www.sitepoint.com/oembed-and-wordpress/

相关资源：jdk-8u281-windows-x64.exe

最新回复(0)