如何在WordPress嵌入iFrame代码

分享内容是一种相当普遍的做法。不过,在自己的网站上展示其他创作者的内容可能会带来法律后果,而托管视频等大文件则会损害网站性能。幸运的是,iFrames为这些问题提供了简单的解决方案。iFrame提供了一种无需上传即可将视频或其他

wordpress-iframe-1024x512-1.jpgo_

分享内容是一种相当普遍的做法。不过,在自己的网站上展示其他创作者的内容可能会带来法律后果,而托管视频等大文件则会损害网站性能。幸运的是,iFrames 为这些问题提供了简单的解决方案。

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

在本篇文章中,我们将解释什么是 iFrames 以及如何在 WordPress 网站上嵌入 iFrame 代码。

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

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

iFrame 是将网页嵌入另一个网页内容的一种方式。这需要使用 HTML 标记、外部页面的 URL 以及有关窗口在网站上显示方式的说明。

iFrames 一般在两种情况下有用。

第一种情况是你想分享不属于你的内容。在大多数情况下,通过 iFrame 嵌入内容不被视为侵犯版权(另见欧盟裁决)。因此,与大多数其他选择相比,这通常是一种合法且更合乎道德的共享方式。此外,iFrame 中的代码不能被直接访问。这意味着网站访问者无法复制嵌入的内容并将其分享到其他地方。

使用 iFrame 的第二个原因是为了共享大型文件,如视频、音频甚至图像。YouTube 就是一个很好的例子。

有了 iFrame,您就可以在网站上显示文件内容,而不必将其托管在 WordPress 媒体库中。这一点很重要,因为这些类型的媒体文件通常会占用大量的存储空间,甚至会拖慢网站的运行速度。

通过在 YouTube 等平台上托管视频,然后用 iFrames 将其嵌入 WordPress 网站,就可以避免直接上传到网站的缺点。这种技术将使您成为网络社区中更有道德的一员,并使您的网站快速易用。

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

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

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

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

people-website-video-2.pngo_

使用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添加到网站的三种不同方式。

向网页添加 iFrame 的基本代码相当简单。您所需要的只是 HTML 标记的开头和结尾,以及您希望嵌入的网页的 URL:

关于源 URL,有几个限制需要注意。首先,iFrames 只能显示与你的网站使用相同超文本传输协议的网站内容。换句话说,如果你的网站使用 HTTPS,你只能嵌入其他 HTTPS 网站的内容。同样,如果您使用 HTTP,则只能嵌入同样使用 HTTP 的 URL。

此外,一些常用网站(如 Facebook 和 YouTube)禁止手动嵌入 iFrame。如果尝试显示不允许嵌入 iFrame 的网站的页面,窗口中将显示错误:

wordpress-iframe-not-showing.pngo_

禁用 iFrame 嵌入

如果您可以使用这种方法,重要的是要知道您还可以自定义 iFrame,以满足您网站的需要。这就是 iFrame 参数的作用所在。最常见的参数包括:

  • Width: 该参数可让你以像素为单位为 iFrame 设置特定宽度。
  • Height: 与宽度参数一样,高度决定了网页上 iFrame 窗口的大小(单位:像素)。
  • Allow: 使用该参数,您可以为 iFrame 设置某些默认行为或功能,如全屏浏览或付款处理。
  • Importance: 使用该参数可指定 iFrame 的加载时间。

例如,下面是一个窗口大小为 900 像素乘 700 像素的 iFrame 的代码,它启用了全屏浏览功能,并被设置为在网页其他部分之后下载:

在前端,iFrame 可能是这个样子:

wordpress-iframe-example.pngo_

iFrame 在前台的外观

你还可以考虑使用其他参数。不过,上面列出的参数应该能让你创建基本的 iFrames,用于在网站上共享 YouTube 视频或其他内容。

以古腾堡编辑器为例,您需要在WordPress内容编辑器中添加HTML块。

d9c80989af559885c275eeede5df50fd.pngo_

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

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

29fdbb8cc8698fed6463567d0420b54a.pngo_

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

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

97c6d519b5ba84794659e8dc351551b2.pngo_

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

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

a5216435884afaba0cd2643b4055bbbd-1024x933.pngo_

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

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

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

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

c5e9e7bdf712d7fa09898547399068ea.pngo_

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

1889f2d5e97f409d5eb8b7cc26b01084.pngo_

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

90b0df435ba0c16830ae08148a4f6d17.pngo_

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

117618300cb50fe4b8ddc269e60b73eb.pngo_

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

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

当然,WordPress 开发人员一直在努力通过使用插件来简化嵌入 iFrames 等任务。如果您打算经常在网站上嵌入外部内容,您可能需要考虑两种方案。最流行的解决方案是 iFrame 插件:

iframe-wordpress-plugin.pngo_

WordPress 插件 -iframe

该插件可让您使用短代码在 WordPress 网站上添加 iFrame。您可以指定所有与通过 HTML 手动添加 iFrame 时相同的参数。不过,您不必担心直接处理页面代码的问题。

或者,您也可以试试 Advanced iFrame?插件:

Advanced-iFrame-wordpress-plugin.pngo_

WordPress 插件 – Advanced iFrame

同样,这个插件允许你使用简码在网站上添加 iFrames。不过,它还包含一些附加功能,例如防止其他用户未经许可嵌入 iFrame 的安全代码、自定义样式选项等。

只需支付 20 美元,你就可以升级到 Advanced iFrame Pro,获得为期 6 个月的许可证。该版本可制作响应式 iFrame,并支持缩放功能和懒加载等功能。根据你计划在网站上使用 iFrames 的频率,这些选项可能值得你花高价购买。

下面我们以免费的 iFrame 为例,来演示如何通过插件在 WordPress 中嵌入 iFrame.

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

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

301e6329b8cec792dd4694dd025d4c7a.pngo_

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

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

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

513fe25db7f2a77c5378a1ab3d8bcd90.pngo_

预览或发布文章,即可查看网站上嵌入的百度地图。

97c6d519b5ba84794659e8dc351551b2.pngo_

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

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

a936e7f65f250f9c2ad39c895f299468.pngo_

iFrames 不仅能帮助您以合乎道德的方式分享他人的内容,还能让您显示视频和音频文件,而无需在您的网站上托管它们。在本篇文章中,我们将介绍在 WordPress 中使用 iFrames 的三种方法:

  • 手动合并 WordPress 网站和 iFrames。
  • 使用嵌入代码创建 iFrames。
  • 使用 WordPress 插件添加 iFrames,如 iFrame 或 Advanced iFrame。

您对 iFrames 或如何在 WordPress 网站上使用 iFrames 有任何疑问吗?请在下面的评论区告诉我们!

本文内容来源于公开网络,出于传递信息之目的整理发布。原文版权归原作者所有,若涉及侵权请先提供版权后联系我们删除

(0)
WP之家WP之家
上一篇 2025年3月13日 下午5:12
下一篇 2025年3月13日 下午5:12

相关推荐

  • WordPress 禁用 API 和 wp-json 的方法

    WordPress 程序默认开启了API接口,这是方便在其他端能够轻松的获取网站的内容及数据,但一般的网站是不需要这些接口开放的,所以下面的操作能够简单禁用。 WordPress 禁用 API: add_filter('rest_enabled', '__re…

    WP教程 2025年3月12日
  • 如何选择不会降低网站速度的WordPress主题

    如今,WordPress主题库中充斥着大量臃肿的软件、糟糕的代码、不必要的预装插件和庞大的文件大小。这些主题大多会拖慢网站的运行速度,而新用户可能直到为时已晚才会发现罪魁祸首。因此,了解如何选择WordPress主题至关重要。但是,面对成千上万的主题,选择并不总是那么简单。如何才能知道哪些是好主题

    2025年3月13日
  • 如何从Squarespace迁移到WordPress

    Squarespace是一个直观的平台,可以轻松创建简单的网站和在线商店。但是,它的功能是有限的。因此,您可能正在寻找更灵活的解决方案,例如WordPress。从Squarespace迁移到WordPress可以帮助您的网站更上一层楼。借助WordPress,您可以使用页面构

    2025年3月13日
  • 使用WPForms和CF7插件创建WordPress博客联系表单教程

    如果你准备建立一个企业网站或博客,设置一个联系表格是非常有必要的。联系表单是访客与你之间的沟通桥梁,方便访客对你的网站作出反馈又或者与你联系进一步沟通交流。如果你积极地与网站访客接触并为他们提供帮助或者解决方案,能够帮助你树立友好的形象,增强访客的访问频次,甚至有可能成为你的网站的付费客户,提高你的网站转化率。给你的WordPress网站安装一个联系表单提供

    2025年3月13日
  • 如何修复WordPress中的Facebook oEmbed嵌入问题

    Facebook已经不再支持未经验证的WordPress嵌入。因此,如果您在WordPress网站上嵌入Facebook和Instagram内容,它们就会崩溃。更具体地说,旧的FacebookoEmbed端点将被需要通过Facebook验证的新端点所取代。由于Facebook拥有Instagram,同样的要求也适用于InstagramoEmbe

    2025年3月13日
  • 如何将PDF文件上传到WordPress

    当谈到WordPress媒体类型时,大部分注意力都集中在图像和视频上。这确实有道理,但错过了您可能需要重新考虑的一种有价值且有用的文件类型——可移植文档格式(PDF)。好消息是,将PDF文件上传到WordPress并显示它们很简单。现在,区块编辑器对于许多WordPress网站来说都是司空见惯的,您可以更轻松地上传和显示PDF。事实上,这个过程更符合其他媒体类型,以前不是这样。但是,插件仍然可以

    2025年3月13日
  • 2025最新 Redis 缓存使用教程指南

    什么是 Redis 缓存 Redis Object Cache 是个缓存插件工具,通过 Redis 将 WordPress 中的对象(如文章、页面、评论、分类目录等)进行缓存,减少了数据库查询的次数,从而提升页面加载速度、响应速度。 它还能提升…

    2025年3月18日
  • 深入了解最新的WordPress古腾堡编辑器(2021)

    当WordPress区块编辑器或古腾堡于2018年12月推出时,我们不知道会发生什么。当然,我们有足够的时间来玩它的测试版,但我们无法预测实际发布的顺利程度,或者用户和开发人员会多么热衷于接受新编辑器。但经过三年的发展,我们已经看到古腾堡编辑在两年多的时间里经历了巨大的发展。它已从最小可行产品(MVP

    2025年3月13日