wordpress嵌入独立页面 wordpress嵌入外部网页

wordpress使用

When you’re writing frequent posts on your WordPress website, you know that many times you’ll need to embed external content.

当您在WordPress网站上撰写频繁的帖子时，您会知道很多次需要嵌入外部内容。

Whether that is a video from YouTube or Vimeo, a music clip from SoundCloud or Spotify, a Tweet or a Vine, a Flickr on an Instagram, there is not much to be done. You simply copy and paste the URL you want to embed into your WordPress article and that’s it.

无论是来自YouTube或Vimeo的视频，还是来自SoundCloud或Spotify的音乐剪辑，Tweet或Vine，Instagram上的Flickr，都没什么可做的。 您只需将要嵌入的URL复制并粘贴到WordPress文章中即可。

This article will go through all of the details related to the WordPress embed and oEmbed functionality.

本文将详细介绍与WordPress嵌入和oEmbed功能有关的所有细节。

(Why Does WordPress Need an Embed Feature?)

One of the things which WordPress does really nicely when compared to other CMS’ I’ve used, is its ease to embed external media.

与我使用的其他CMS相比，WordPress确实做得很好，其中之一就是易于嵌入外部媒体。

Without mentioning any names, embedding a simple a YouTube video into an article using one of the most popular CMS’s out there (other than WordPress) can be a nightmare of epic proportions.

不提任何名字，使用最流行的CMS之一(WordPress除外)将简单的YouTube视频嵌入到文章中，可能是史诗般的噩梦。

Side note: this is a plea, not a dig. Embedding a YouTube video into an article should be a breeze in any CMS.

旁注：这是认罪，而不是挖洞。 在任何CMS中，将YouTube视频嵌入到文章中都应该轻而易举。

Why does this happen?

为什么会这样？

In reality, embedding external content is typically a potential security issue. Content is typically embedded using iFrames. An iFrame is simply a new “window” which is allowed to reference any external functionality.

实际上，嵌入外部内容通常是潜在的安全问题。 通常使用iFrame嵌入内容。 iFrame只是一个新的“窗口”，它可以引用任何外部功能。

If you want to embed a video from YouTube for example, you would need to embed the following syntax:

例如，如果要嵌入YouTube中的视频，则需要嵌入以下语法：

<iframe width="560" height="315" src="https://www.youtube.com/embed/aDorTBEhEtk" frameborder="0" allowfullscreen></iframe>

So what’s the problem with that?

那是什么问题呢？

Nothing is actually wrong with this specific code. However, allowing anybody to enter iFrames into your posts is a serious security risk.

这个特定的代码实际上没有错。 但是，允许任何人在您的帖子中输入iFrame都是严重的安全风险。

Why is it a security risk you may ask?

您可能会问为什么会有安全风险？

Whilst embedding a YouTube iFrame is fine, an iFrame can be used to reference ANY site. Users with malicious intent may actually embed an iFrame which references a site which is hosting malware.

嵌入YouTube iFrame很好，但是iFrame可以用来引用任何网站。 有恶意的用户可能实际上嵌入了一个iFrame，该iFrame引用了托管恶意软件的网站。

To top it all off, iFrames can be hidden as 0 x 0 size pixel (an invisible dot), which makes it very hard to detect, at least with the naked eye.

最重要的是，iFrame可以隐藏为0 x 0大小的像素(一个不可见的点)，这使其很难检测，至少用肉眼即可。

Hence, why iFrames are discouraged in areas where user input is allowed.

因此，为什么不鼓励在允许用户输入的区域使用iFrame。

In other CMS’, where the type of embed supported by WordPress is enabled, you can embed external media by doing one of the following:

在启用了WordPress支持的嵌入类型的其他CMS中，您可以通过执行以下任一操作来嵌入外部媒体：

1. Use a third party plugin
2. Allow embedding of iFrames (thus creating a potential security risk)

In fact, even using the WordPress embed function, only certain third party services are allowed. There’s an internal whitelist which determines which services are allowed and which ones aren’t. This is to mitigate any potential security issues.

实际上，即使使用WordPress嵌入功能，也仅允许某些第三方服务。 有一个内部白名单，用于确定允许哪些服务和不允许哪些服务。 这是为了减轻任何潜在的安全问题。

(How Does the WordPress Embed Feature Work?)

There are a number of services which are supported by the WordPress Embed feature. You can find a full listing of services supported by Embed here.

WordPress嵌入功能支持许多服务。 您可以在此处找到Embed支持的服务的完整列表。

The WordPress embed feature works by implementing the oEmbed API – essentially this is a way in which a consumer website (such as WordPress) can display embedded content from a provider (such as YouTube).

WordPress嵌入功能通过实现oEmbed API起作用 -本质上，这是消费者网站(例如WordPress)可以显示来自提供商(例如YouTube)的嵌入式内容的一种方式。

The consumer sends a HTTP request to the provider, and the provider replies with a JSON or XML HTTP response with the data structured in such a way as to allow the embedding of that media into the consumer website.

使用者将HTTP请求发送到提供程序，提供程序以JSON或XML HTTP响应进行回复，并以允许将该媒体嵌入到使用者网站中的方式构造数据。

This is the request:

这是请求：

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

And this is the response:

这是响应：

{"html": "\u003ciframe width=\"480\" height=\"270\" src=\"https:\/\/www.youtube.com\/embed\/M3r2XDceM6A?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e", "thumbnail_height": 360, 
"thumbnail_width": 480, 
"title": "Amazing Nintendo Facts", 
"width": 480, 
"height": 270, 
"type": "video", 
"provider_url": "https:\/\/www.youtube.com\/", 
"thumbnail_url": "https:\/\/i.ytimg.com\/vi\/M3r2XDceM6A\/hqdefault.jpg", 
"author_name": "ZackScott", "
author_url": "https:\/\/www.youtube.com\/user\/ZackScott", "version": "1.0", 
"provider_name": "YouTube"}

This is of course something which happens behind the scenes.

这当然是幕后发生的事情。

(Embedding Media into WordPress)

Now that we understand the functions behind WordPress, let’s see a few examples of media which can be embedded into a WordPress post.

现在我们了解了WordPress的功能，下面让我们看一些可以嵌入到WordPress帖子中的媒体示例。

You’ve probably done this already: embedding a YouTube video.

您可能已经做到了：嵌入YouTube视频。

Rather than having to use the normal syntax associated with embedding a YouTube video, which is something similar to the following:

不必使用与嵌入YouTube视频相关的常规语法，这类似于以下内容：

<iframe width="560" height="315" src="https://www.youtube.com/embed/O_Bw1_0u1P8" frameborder="0" allowfullscreen></iframe>

You simple take the YouTube video URL and paste it into your post:

您只需将YouTube视频URL粘贴到您的帖子中：

https://www.youtube.com/watch?v=O_Bw1_0u1P8

That’s it.

而已。

Just make sure it’s not actually converted into a hyperlink.

只要确保它没有真正转换为超链接即可。

You are now able to see a preview of the video in the editor.

现在，您可以在编辑器中查看视频的预览。

Once your post goes live, you’ll see the YouTube embedded in your post.

帖子上线后，您将看到YouTube嵌入到您的帖子中。

Next, let’s embed a Tweet into our post. Find the tweet you want to embed, click on the ellipses to get the link and then just post that into your WordPress post.

接下来，我们将Tweet嵌入到我们的帖子中。 找到要嵌入的推文，单击省略号以获取链接，然后将其发布到WordPress帖子中。

https://twitter.com/sitepointdotcom/status/756595431182835713

https://twitter.com/sitepointdotcom/status/756595431182835713

The result will look something like this:

结果将如下所示：

This all happens automatically without needing to mess around with tags and blockquotes and iFrames and whatever else.

这一切都是自动发生的，而无需弄乱标签，blockquotes，iFrame和其他任何东西。

Let’s embed a SoundCloud file into our post. Once again, it’s just a question of finding the URL of the file you want to embed and pasting it into post.

让我们将SoundCloud文件嵌入到我们的帖子中。 再一次，这只是找到要嵌入的文件的URL并将其粘贴到帖子中的问题。

https://soundcloud.com/versioningshow/ver002-mat-marquis-on-the-versionong-show

https://soundcloud.com/versioningshow/ver002-mat-marquis-on-the-versionong-show

You can see from the screenshot below, as soon as we entered the URL into the post, we immediately get a preview of the file which is going to be embedded into the post.

您可以从下面的屏幕截图中看到，一旦我们在帖子中输入URL，我们就会立即获得将要嵌入到帖子中的文件的预览。

We could keep showing various other examples, but we’re sure you got the point.

我们可以继续显示其他示例，但是我们确信您已经明白了。

(Styling: Setting the (Maximum) Size of Embedded Media)

In theory there is not much need for styling. The WordPress oEmbed feature is able to cater for most of the styling. It also handles responsiveness of your theme, so you don’t need to really worry about that either.

从理论上讲，样式没有太多需要。 WordPress的oEmbed功能能够满足大多数样式要求。 它还处理主题的响应性，因此您也不必真正担心。

In practice though, there might be some need for you to actually size the media you are embedding.

但是实际上，您可能需要实际调整嵌入的媒体的大小。

The WordPress oEmbed functionality is in reality being handled by the [Embed] shortcode .

WordPress的oEmbed功能实际上是由[Embed]短代码处理的。

Using the [Embed] shortcode, you can set the maximum dimensions that a piece of media can take. These are not fixed, because of course we want the post to remain responsive.

使用[嵌入]简码，可以设置介质可以使用的最大尺寸。 这些不是固定的，因为我们当然希望帖子保持响应。

[embed width="560" height="315"]https://www.youtube.com/watch?v=O_Bw1_0u1P8[/embed]

(Enable Media from Other Sites to Be Embedded)

We mentioned a few paragraphs up that WordPress does not allow embedding of media from any site for security reasons.

我们在前面提到了几段，出于安全原因，WordPress不允许从任何站点嵌入媒体。

However, if you want to embed media from a website which is not supported, you can of course do that.

但是，如果您要嵌入不受支持的网站中的媒体，则可以这样做。

To do this, you’ll need to add the site to the internal whitelist.

为此，您需要将该网站添加到内部白名单中。

There are two ways of doing this, the method which you should use depends on whether the site supports the oEmbed API or not.

有两种方法，应使用的方法取决于站点是否支持oEmbed API。

(Adding Sites Which Support oEmbed API)

In the functions.php file of your theme or plugin where you want to allow the embedding, call the following function to add a new site to the embed provider whitelist.

在您要允许嵌入的主题或插件的functions.php文件中，调用以下函数将新站点添加到嵌入提供者白名单。

wp_oembed_add_provider

wp_oembed_add_provider

<?php wp_oembed_add_provider( $format, $provider, $regex ); ?>

For example,

例如，

<?php wp_oembed_add_provider( 'http://example.com/watchvideo/*', 'http://example.com/oembedprovider' ); ?>

If the media can be embedded via various URLs, you can use a Regular Expression to describe the various URLs possible. If we wanted to add our fictioutious site, TheNewTube with a regular expression, we could use the following:

如果可以通过各种URL嵌入媒体，则可以使用正则表达式来描述各种可能的URL。 如果我们想使用正则表达式添加虚拟站点TheNewTube，则可以使用以下内容：

<?php wp_oembed_add_provider( '#http://(www\.)?thenewtube\.com/watch.*#i', 'http://www.thenewtube.com/oembed', true ); ?>

(Adding Sites Which Don’t Support oEmbed API)

If the site you want to embed does not support oEmbed, you can still add them as a provider.

如果您要嵌入的网站不支持oEmbed，您仍然可以将其添加为提供程序。

Again, through the functions.php file, you need to register the site using the wp_embed_register_handler

同样，通过functions.php文件，您需要使用wp_embed_register_handler注册网站。

<?php wp_embed_register_handler( $id, $regex, $callback, $priority ); ?>

You’ll also need to provide a callback function, that would be used to generate the HTML required to embed the media.

您还需要提供一个回调函数，该函数将用于生成嵌入媒体所需HTML。

The WordPress codex provides an example of how to do this to embed video from the Forbes website:

WordPress Codex提供了一个示例，说明如何执行此操作以嵌入来自《福布斯》网站的视频：

<?php

wp_embed_register_handler( 'forbes', '#http://(?:www|video)\.forbes\.com/(?:video/embed/embed\.html|embedvideo/)\?show=([\d]+)&format=frame&height=([\d]+)&width=([\d]+)&video=(.+?)($|&)#i', 'wp_embed_handler_forbes' );

function wp_embed_handler_forbes( $matches, $attr, $url, $rawattr ) {

    $embed = sprintf(
            '<iframe src="http://www.forbes.com/video/embed/embed.html?show=%1$s&format=frame&height=%2$s&width=%3$s&video=%4$s&mode=render" width="%3$spx" height="%2$spx" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>',
            esc_attr($matches[1]),
            esc_attr($matches[2]),
            esc_attr($matches[3]),
            esc_attr($matches[4])
            );

    return apply_filters( 'embed_forbes', $embed, $matches, $attr, $url, $rawattr );
}

?>

If you need to do this for your site, it would be best to consult and hire a WordPress developer, just to make sure you don’t introduce any bugs which could break your site.

如果您需要在自己的网站上这样做，最好是咨询并雇用WordPress开发人员，以确保您不会引入任何可能破坏您网站的错误。

(WordPress as an oEmbed Provider (Since WordPress Version 4.4))

Up till now we were only discussing WordPress as being a consumer of media from 3rd party sites, in reality WordPress was the oEmbed consumer.

到目前为止，我们仅讨论WordPress是来自第三方网站的媒体消费者，实际上WordPress是受嵌入的消费者。

Since 4.4, WordPress can also act as a Provider of oEmbed content.

从4.4开始， WordPress还可以充当oEmbed内容的提供者 。

What this means is that any public posts, or post types on your site can be embedded into third party websites via your own WordPress website (typically via their pretty permanent URL with an embed added to the end of the actual URL – example.com/your-post/embed/).

这意味着您网站上的任何公共帖子或帖子类型都可以通过您自己的WordPress网站(通常是通过它们相当永久的URL嵌入到实际URL的末尾– example.com/)嵌入到第三方网站中。您的帖子/嵌入/)。

For security reasons, embeds reside in a sandboxed iFrame, however the content of the iFrame is a template that can be styled or replaced entirely by the theme on the provider site.

出于安全原因，嵌入内容位于沙盒iFrame中，但是iFrame的内容是一个模板，可以通过提供程序站点上的主题来设置样式或完全替换该模板。

(Functions and Hooks for Using Embeds)

Here are the four most useful functions related to embeds:

以下是与嵌入相关的四个最有用的功能：

• get_post_embed_url() — Retrieves the URL to embed a specific post in an iframe, e.g. https://make.wordpress.org/core/2015/10/28/new-embeds-feature-in-wordpress-4-4/embed/ get_post_embed_url() —检索将特定帖子嵌入iframe的URL，例如https://make.wordpress.org/core/2015/10/28/new-embeds-feature-in-wordpress-4-4/embed /
• get_post_embed_html() — Retrieves the full embed code for a specific post
  get_post_embed_html() —检索特定帖子的完整嵌入代码
• get_oembed_endpoint_url() — Retrieves the oEmbed endpoint URL for a given permalink, e.g. https://make.wordpress.org/core/?oembed=true&url=. This is used to add the oEmbed discovery links to the HTML for single posts.
  get_oembed_endpoint_url() —检索给定永久链接的oEmbed端点URL，例如https://make.wordpress.org/core/?oembed=true&url= 。 这用于将oEmbed发现链接添加到单个帖子HTML。
• get_oembed_response_data() — Retrieves the oEmbed response data for a given post, according to the oEmbed specification.
  get_oembed_response_data() —根据oEmbed规范检索给定帖子的oEmbed响应数据。

(Customizing the oEmbed Output)

Similar to customizing any template file, the embed template from a post can be styled using embed_head and embed_footer to add custom code to the beginning and end of the embed template.

与自定义任何模板文件相似，可以使用embed_head和embed_footer为帖子中的嵌入模板设置样式，以将自定义代码添加到嵌入模板的开头和结尾。

The X-WP-embed:true header will be also be sent when that template is used. This makes it easier to target embedded posts in any application which is consuming WordPress oEmbeds.

使用该模板时，还将发送X-WP-embed：true标头。 这使得在使用WordPress oEmbeds的任何应用程序中轻松定位嵌入式帖子。

(Summary)

As we’ve seen in this article, the embed features of WordPress are quite rich in scope. Both for a writer and for a developer, there are plenty of ways in which WordPress embeds can be used to enhance content with embedded media.

正如我们在本文中所看到的，WordPress的嵌入功能范围很广。 无论是对于作家还是对于开发人员，都可以使用多种方式使用WordPress嵌入来增强嵌入式媒体的内容。

Have you used WordPress embedding in any creative ways? We’d love to see and share your examples.

您是否以任何创造性的方式使用了WordPress嵌入？ 我们很乐意看到并分享您的示例。

翻译自: https://www.sitepoint.com/the-complete-guide-to-using-wordpress-embeds/

wordpress使用