iFrame提供了一种无需上传即可将视频或其他内容嵌入网站的简便方法。腾讯视频、B站等许多第三方平台都允许用户使用iframe嵌入其网站中的内容。

在本教程中,将介绍在WordPress中嵌入iFrame代码的三种办法。

如何在WordPress嵌入iFrame代码插图

什么是iFrame?

通过iFrame,您可以在网站上嵌入视频或其他内容。这意味着您可以在站点上显示视频而无需上传该视频至你的网站。

iframe就像在网站上打开一个窗口以显示外部内容一样,实际内容从嵌入的源中加载。

添加iframe,需要添加特殊的HTML代码。但操作都比较简单,后面会详细介绍如何将iFrame嵌入WordPress的三种方法。

为什么使用iFrames?

使用iFrame的一个关键原因是避免必须在自己的网站上上传视频或其他资源,以免占用大量的带宽和存储空间。

另外,通过iFrame,还可以避免侵权问题。您无需下载视频或其他内容后再将其上传到网站,只需使用iFrame将其添加到页面即可。

另一个优点是,如果原始内容更改了,iFrame嵌入的方式也会自动更新内容。

如何在WordPress嵌入iFrame代码插图1

使用iFrame也有一些缺点。并非所有网站都允许将其内容放入iFrame。另外,对于您的页面而言,iFrame可能会变得太大或太小,因此您需要手动对其进行调整。

另一个问题是HTTPS网站只能使用iFrame嵌入其他HTTPS网站内容。同样,HTTP站点只能使用iFrame嵌入其他HTTP站点内容。

这就是为什么像WordPress这样的许多平台都喜欢oEmbed的原因。您只需将URL粘贴到WordPress帖子中,即可使用oEmbed嵌入视频以及其他类型的内容。内容将自动调整为合适的大小,且兼容移动设备。

重要提示: WordPress不支持针对Facebook和Instagram的oEmbed。

iFrames的另一个绝佳选择是使用社交信息流插件。推荐使用Smash Balloon插件,以实现显示来自Facebook,Instagram,Twitter和YouTube的内容。

下面让我们详细看看如何将iFrame添加到网站的三种不同方式。

1.使用嵌入代码在WordPress中添加iFrame

许多大型网站的内容都有“嵌入”选项,以iFrame代码提供其网站内容。

举了例子,如果你需要分享B站的视频,你只需要在具体的视频页面,点击视频播放器下方的分享按钮,即可看到嵌入代码,如下图所示:

如何在WordPress嵌入iFrame代码插图2

单击“复制”按钮以复制代码。

然后,将该代码粘贴到WordPress网站上的任何文章或者页面。我

下面我们将演示将代码复制粘贴到页面的块编辑器(古腾堡编辑器)。

通过WordPress仪表板中的页面»新建页面,即可创建新页面。然后,将HTML块添加到这个页面。

如何在WordPress嵌入iFrame代码插图3

现在,您需要将B站的视频分享iFrame代码粘贴到该块中。

如何在WordPress嵌入iFrame代码插图4

通过预览或发布页面以查看嵌入其中的B站视频。

如何在WordPress嵌入iFrame代码插图5

提示:如果使用的是旧版经典编辑器,则需要在“文本”视图中添加iFrame代码。

如何在WordPress嵌入iFrame代码插图6

注:在经典编辑器上的可视化和文本视图之间切换可能会导致iFrame代码出现问题。

2. 使用iFrame插件实现iFrame代码嵌入

此方法比第一种方法更实用,因为它允许您创建iframe来嵌入任何来源的内容,即使该来源未提供嵌入代码。

首先,您需要安装并启用iFrame插件。

启用后,该插件无需进行设置即可工作。编辑或创建文章、页面。然后,添加一个简码(shortcode)块。

如何在WordPress嵌入iFrame代码插图7

之后,您可以使用此短代码输入iFrame代码。

[iframe src="URL goes here"]

只需将 URL goes here  替换为您要嵌入到站点中的内容URL。举个例子,嵌入百度地图。

提示:您可能需要使用“嵌入”选项来获取内容的URL。但你只需要使用URL,而无需使用其余的嵌入代码。

如何在WordPress嵌入iFrame代码插图8 预览或发布文章,即可查看网站上嵌入的百度地图。

如何在WordPress嵌入iFrame代码插图9

您还可以在iFrame短代码添加参数,以更改嵌入内容的显示方式。例如,设置宽度和高度,添加或删除滚动条或边框。这些参数信息可以在iFrame插件页面上找到。

提示:如果使用的是经典编辑器,则只需将简码粘贴到帖子或页面中。您无需切换到“文本”视图。

如何在WordPress嵌入iFrame代码插图10

3. 手动创建iFrame代码并嵌入WordPress

如果不想使用iFrame插件,则可以手动创建iFrame代码。为此,您需要在WordPress内容编辑器中添加HTML块。

如何在WordPress嵌入iFrame代码插图11

然后将下面iframe代码粘贴到HTML块中。


将“URL go here”替换为嵌入的内容的URL地址。继续以百度地图为例:

如何在WordPress嵌入iFrame代码插图12

你还可以设置HTML标签其他参数。例如,设置iFrame的宽度和高度,以下代码表示将嵌入内容显示为600*300像素。


如果嵌入内容受限于版块宽度,则这很有用。

如何在WordPress嵌入iFrame代码插图9

希望本教程能帮助您学会如何将iFrame代码嵌入WordPress。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。