如何在 WordPress 中嵌入 iFrame

在线共享内容是一种常见的做法。 然而，当您试图弄清楚如何合并某些类型的内容时，您可能会感到难过。 从其他网站共享大文件或特定项目有时可能是一个挑战。

幸运的是，您可以使用一种相当简单的网页设计实践来在您的 WordPress 网站上显示特定类型的内容。 使用 HTML 创建内联框架 (iFrames) 可以更轻松地在线共享图像、视频和其他媒体。

在本文中，我们将探讨 iFrame 在网站上的不同用途。 我们还将完成手动和使用插件创建 iFrame 的步骤。 让我们开始吧！

iFrame 使用

当您使用 iFrame 时，您实质上是在您的网站上创建了一个小门户，可以查看来自其他地方的内容。 这在多种情况下很有用。

使用 iFrame 意味着您不必实际托管要显示的文件。 内容保留在其原始位置，并且可以通过您网站上的框架进行查看。 当您想要显示大文件时，这种技术可以发挥作用的一种方式是。 iFrame 可以将该内容带到您的网站上，而不会降低其加载速度。

值得注意的是，iFrame 是 HTML5 中唯一允许的框架类型。 您可以使用它们来显示各种不同类型的内容，包括：

• 图像：您可以使用 iFrame 显示来自外部画廊的高质量图像，并避免因文件大小而不得不妥协。
• 视频：在 YouTube 或 Vimeo 等平台上托管您的视频，并使用 iFrame 将它们放在您的网站上，可以增强用户体验，同时释放您的网站存储空间。
• 其他网页内容：突出显示来自其他网站的内容，例如投资组合页面或食谱，可以轻松为您的受众带来丰富的内容。

当您使用 iFrame 时，您还可以避免复杂的版权规则。 一些法院已经裁定，使用 iFrame 显示受版权保护的材料并不在所有情况下都构成版权侵权。

网站还可以包含脚本以防止其内容包含在 iFrame 中。 但是，我们建议始终将您使用的任何内容归功于原始创作者，或者如果您不确定如何继续，请寻求法律建议。

通过插件使用 iFrame

在 WordPress 网站上使用 iFrame 的最简单方法之一是使用 iFrame 插件。 幸运的是，有几个评价很高的选项可供选择。

第 1 步：下载并配置 iFrame 插件

对于我们的示例，我们将使用 Advanced iFrame 插件。 它灵活、易于使用且评价很高：

安装并激活插件后，您会在 WordPress 仪表板中找到一个新的Advanced iFrame菜单项。 Advanced iFrame 具有相当广泛的选项集。 您需要从“选项”选项卡开始，然后查看“快速入门”视频：

然后，您可以向下滚动并查看插件的一些选项。 这些都设置了大量有用的解释和易于选择的选项：

Advanced iFrame 还提供了一个免费的 iFrame 检查器，它将检查您提供的任何 URL，以查看它是否包含阻止内容包含在 iFrame 中的脚本。 最好先通过此工具运行任何 URL，然后再在您网站的 iFrame 中使用它。

您还需要查看“基本设置”选项卡。 在那里，您可以自定义 iFrame 的元素，例如高度、宽度和框架边框：

配置完插件设置以满足您的需求后，您就可以开始在您的网站上使用 iFrame。

第 2 步：使用高级 iFrame 块

在 WordPress 块编辑器中，您现在可以使用高级 iFrame块：

如果您第一次使用时找不到这个块，它会在小部件类别下。

单击Advanced iFrame块后，它将自动加载来自插件创建者网站的内容。 您可以使用页面右侧的“阻止”选项来配置阻止：

在那里，您可以添加要在 iFrame 中显示的内容的 URL。 如果需要，您还可以覆盖插件的某些设置。

第 3 步：预览您的网站

如果您使用 iFrame 检查器测试了您的 URL，您应该可以开始了。 但是，最好在发布内容之前预览您的更改。 在编辑和进行更改时，您应该会看到 iFrame 的实时预览。

您还可以使用编辑窗口右上角的“预览”选项，以便在站点菜单和侧边栏的上下文中查看帖子。

在没有插件的情况下使用 iFrame

如果您不想使用插件但仍想使用 iFrame，那么您很幸运！ 您可以手动将代码应用到您的帖子和页面以包含 iFrame 内容。

第 1 步：插入嵌入代码

如果您想在您的网站上加入 YouTube 视频等内容，您需要找到 YouTube 提供的嵌入代码。 您可以通过单击分享在视频下方找到它。

这将调出一个共享选项菜单。 您需要选择“嵌入”以获取 iFrame 所需的代码。

将打开一个单独的窗口，预览嵌入内容的外观。 然后您就可以复制 iFrame 代码片段。

如果您希望查看者在特定时间代码自动开始查看内容，您还可以选中开始于框。

接下来，您将返回到您的 WordPress 帖子并添加自定义 HTML块。 您可以在格式类别下找到它。

将此块添加到您的帖子后，您只需粘贴从 YouTube 页面复制的嵌入代码即可。

接下来，您需要确保嵌入功能正常运行并且看起来符合您的要求。 您可以单击“自定义 HTML”块中的“预览”来查看您的 iFrame 是否正常工作。

这样，您就成功地在您的网站上放置了一个 iFrame。 相同的过程适用于为您提供嵌入代码的任何平台。

第 2 步：自定义您的 iFrame

如果您对 iFrame 在您的帖子或页面上的显示方式仍然不太满意，您可以手动调整代码中的一些值。 建议您使用层叠样式表 (CSS) 来完全自定义 iFrame 在您网站上的显示方式。

iFrame 标记允许使用许多自定义属性。 然而，重要的是要注意其中许多已不再受 HTML5 支持。 正如我们之前提到的，您可能需要调查主题的 CSS，因为您可能无法直接在自定义 HTML块中覆盖某些格式。

第 3 步：定期检查您的 iFrame 内容

使用 iFrame 时，您需要定期检查框架内容。 由于您打开了一个内容窗口，您可能无法对其进行任何编辑或质量控制，因此它可能随时导致您的网站出现问题。

例如，如果我们在示例中使用的视频是从其 YouTube 频道中删除的，那么我们的帖子中的播放器就会损坏。 这比断开的链接更明显，因为它会给您的网站留下视觉冲击。 定期检查您的 iFrame 内容使您能够更改或删除任何不再工作的媒体。

使用 WP Engine 优化您的网站

在您的网站上使用 iFrame 可以让事情顺利进行，同时仍然包含丰富的媒体和动态内容。 在 WP Engine，我们知道理解重要的网页设计概念和访问最好的开发人员资源的重要性。

此外，我们致力于帮助您为客户提供最佳数字体验。 我们提供多种完全托管的 WordPress 托管计划供您选择，因此您可以专注于设计漂亮的网站！