跳到主要内容

您是否要在WordPress帖子或页面中嵌入iFrame代码?

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

在本文中,我们将向您展示如何使用多种方法在WordPress中轻松嵌入iFrame代码。

如何在wordpress中轻松嵌入iframe代码
如何在wordpress中轻松嵌入iframe代码

什么是iFrame?

通过iFrame,您可以在自己的网站上嵌入视频或其他内容。这意味着您可以在站点上显示视频而无需实际托管该视频。

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

要添加iframe,您需要添加特殊的HTML代码。如果这听起来很技术性,请不要担心。

我们将向您展示将iFrame嵌入WordPress博客的最简单方法。

为什么要使用iFrame?

使用iFrame的一个关键原因是避免必须在您的站点上托管视频或其他资源,这会占用您的带宽和存储空间。

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

另一个优点是,如果更改了原始内容,它也会在iFrame中自动更新。

如何在wordpress中轻松嵌入iframe代码
如何在wordpress中轻松嵌入iframe代码

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

另一个问题是HTTPS网站只能将iFrame用于其他HTTPS网站的内容。同样,HTTP站点只能将iFrame用于其他HTTP站点的内容。

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

重要提示: WordPress不支持针对Facebook和Instagram帖子的oEmbed。有关更多信息,请查看我们有关Facebook / Instagram oEmbed问题的完整指南以及解决方法。

iFrames的另一个绝佳替代方法是使用社交Feed插件。我们建议使用Smash Balloon的插件。这些使您可以显示来自Facebook,Instagram,Twitter和YouTube的内容。

话虽如此,让我们看一下将iFrame添加到网站的三种不同方式。

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

许多大型网站的内容都有“嵌入”选项。这为您提供了需要添加到网站的特殊iFrame代码。

在YouTube上,您可以转到YouTube上的视频,然后单击其下方的“共享”按钮来获取此代码。

使用源代码的嵌入代码在wordpress中添加iframe
使用源代码的嵌入代码在wordpress中添加iframe

接下来,您将看到一个带有多个共享选项的弹出窗口。只需单击“嵌入”按钮。

使用源代码的嵌入代码在wordpress中添加iframe
使用源代码的嵌入代码在wordpress中添加iframe

现在,YouTube将向您显示iFrame代码。默认情况下,YouTube将包含播放器控件。我们还建议您启用隐私增强模式。

之后,继续并单击“复制”按钮以复制代码。

使用源代码的嵌入代码在wordpress中添加iframe
使用源代码的嵌入代码在wordpress中添加iframe

现在,您可以将该代码粘贴到网站上的任何帖子或页面中。我们将其添加到块编辑器的新页面中。

要创建新页面,请转到WordPress仪表板中的页面»添加新页面

然后,将HTML块添加到您的页面。

使用源代码的嵌入代码在wordpress中添加iframe
使用源代码的嵌入代码在wordpress中添加iframe

现在,您需要将YouTube iFrame代码粘贴到该块中。

将YouTube HTML代码粘贴到iFrame块中

然后,您可以预览或发布页面以查看嵌入其中的YouTube视频。

使用源代码的嵌入代码在wordpress中添加iframe
使用源代码的嵌入代码在wordpress中添加iframe

提示:如果您使用的是旧版经典编辑器,则仍然可以添加iFrame代码。您需要在“文本”视图中执行此操作。

使用源代码的嵌入代码在wordpress中添加iframe
使用源代码的嵌入代码在wordpress中添加iframe

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

2.使用iFrame WordPress插件嵌入iFrame

此方法很有用,因为它允许您创建iframe来嵌入任何来源的内容,即使该来源未提供嵌入代码也是如此。

首先,您需要安装并激活iFrame插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,该插件将立即开始工作,而无需进行设置。继续编辑或创建帖子或页面。然后,添加一个简码块。

使用iframe WordPress插件嵌入iframe
使用iframe WordPress插件嵌入iframe

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

[iframe src="URL goes here"]

只需将URL替换为您要嵌入到站点中的内容的URL。我们正在嵌入Google地图。

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

使用iframe WordPress插件嵌入iframe
使用iframe WordPress插件嵌入iframe

接下来,预览或发布您的帖子。您应该看到网站上嵌入了Google地图。

使用iframe WordPress插件嵌入iframe
使用iframe WordPress插件嵌入iframe

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

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

使用iframe WordPress插件嵌入iframe
使用iframe WordPress插件嵌入iframe

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

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

手动创建iframe代码并嵌入wordpress
手动创建iframe代码并嵌入wordpress

首先,您需要将此代码粘贴到HTML块中。

<iframe src="URL goes here"></iframe>

只需将您要嵌入的内容的直接URL替换为“ URL go here”。您只需要URL本身。

在这里,我们嵌入了Google的地图。

手动创建iframe代码并嵌入wordpress
手动创建iframe代码并嵌入wordpress

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

<iframe src="URL goes here" width="600" height="300"></iframe>

如果您需要将嵌入的内容限制在较小的空间,则这很有用。

手动创建iframe代码并嵌入wordpress
手动创建iframe代码并嵌入wordpress

我们希望本文能帮助您学习如何轻松地将iFrame代码嵌入WordPress。

回到顶部