听说过iframes?如果没有,你几乎肯定和他们有过互动。如果你看过YouTube上的嵌入式视频,谷歌地图,或者Facebook帖子,我们在这里是为了告诉你iframe元素是在它后面。
Iframes已经存在一段时间了,它帮助我们将内容嵌入到网站中,包括WordPress网站。如果你想在你的WordPress页面中包含媒体内容,你应该熟悉iframes以及如何使用它WordPress插件和他们在一起。
在本指南中,我们将回顾什么是iframes,如何使用它们,以及将它们添加到WordPress的不同方法。这些方法包括手动粘贴和使用插件——为了让你的生活更轻松,我们也将列出一些我们最喜欢的iframe插件。
什么是WordPress中的iframe ?
iframe是内联框架的简称,它是一个HTML元素,其中包含另一个HTML文档。Iframes用于将外部内容嵌入网页,包括WordPress页面和帖子。换句话说,iframes显示来自其他网页的内容,而不需要托管这些内容。
在HTML中,iframes是用iframe标签。Iframes通常用于嵌入文件,这些文件可能太大,不实用,无法在网站的服务器上托管——这包括视频、长格式音频内容和交互式媒体。
例如,一个网站可以选择把它的视频放在像YouTube这样的平台上,然后用iframes把这些视频嵌入到它的页面中。通过选择外部存储视频,网站节省了大量的服务器空间,并降低了加载时间。
你也可以使用iframes嵌入属于其他网站的内容。例如,Facebook允许作者生成iframe代码,在他们的网站上嵌入帖子。
上面的iframe使用以下代码:
Iframes是增强你的网页的一个好方法,因为嵌入式媒体可以让你花更多的时间在你的网页上,并吸引更多的观众。
如果你有一个WordPress站点,你可以通过以下几种方法之一添加iframe。首先,我们将介绍如何使用插件插入iframe,并回顾可用的最佳插件来帮助您。然后,我们将介绍几种在不使用插件的情况下将iframe内容放在站点上的方法。
如何嵌入一个Iframe在WordPress插件
Iframes是HTML元素,所以它们需要添加到HTML文档中才能出现在网页上。但是,您可能不习惯编辑站点的HTML或使用HTML。
这不是问题,因为你可以使用WordPress插件来放置iframe,只需要很少的代码或者不需要编码。WordPress iframe插件可以帮助网站所有者轻松地在页面上放置iframe,有些还可以让你改变iframe显示选项。让我们在下面看看你最好的iframe插件选项。
最佳Iframe WordPress插件
- 先进的iFrame
- 简单的Iframe
- iframe弹出
- 延迟加载
1.先进的iFrame
高级iFrame是一个流行的WordPress插件,可以让你用短代码放置iFrame,而不是将嵌入代码粘贴到你的文章正文中。这使得您可以在页面的几乎任何地方插入嵌入的内容。
高级iFrame的免费版本还允许对iFrame进行一些有限的定制,包括隐藏页面区域以给您的iFrame更多的空间,修改iFrame的参数,包括尺寸和延迟加载,添加安全代码,以及应用CSS和JavaScript到iframe。
在免费版本中,iframe将在每月10,000次的浏览量后显示一个链接到插件页面。你可以通过购买来防止这种情况先进的iFrame职业($21),它还提供一些高级功能,比如隐藏iframe的特定区域、支持小部件、响应式iframe等等。
2.简单的Iframe
简单Iframe是一个简单的和免费的插件添加Iframe与古腾堡编辑器。在安装并激活插件后,你会得到一个新的“Iframe”块用于嵌入内容。只需粘贴您希望嵌入的页面的URL, Simple Iframe将为您处理代码。然后,您可以在块编辑器中预览iframe。
3.iframe弹出
这是另一个将iframe嵌入WordPress网站的免费插件。Iframe popup使用一个轻量级的JQuery扩展来显示弹出窗口内的Iframe。它是理想的显示完整的网页模态你只需要做最少的工作。弹出窗口是响应性的,一些方面可以通过插件设置定制。
4.延迟加载
来自WP Rocket的Lazy Load插件是一种无代码的方式启用延迟加载你的WordPress站点的图像iframes。延迟加载延迟某些媒体项的加载,直到用户向下滚动到它们,给人一种更快的初始页面加载的印象。
除了图片,Lazy Load还会在页面的iframes中添加延迟加载HTML属性,以提高性能和用户体验。另外,该脚本是轻量级的,不会影响页面速度。(那就完全没有意义了!)
最后,这个插件允许你用预览缩略图替换YouTube视频的iframes。如果你的网站嵌入了很多视频,这是非常有用的——它可以在不显著影响用户体验的情况下降低加载时间。
如何在没有插件的WordPress中嵌入Iframe
如果你习惯使用HTML,你就不需要一个插件来在WordPress中放置iframes。这个过程很简单,有些网站甚至会为你生成嵌入代码。
在WordPress中嵌入Iframe与嵌入代码
如果你想嵌入YouTube、Facebook或谷歌Maps等热门网站的内容,它很有可能生成嵌入代码。因此,您只需要复制这些代码,并通过WordPress界面将其粘贴到您的站点中。
作为一个常见的例子,下面是如何用这个方法嵌入YouTube视频:
1.进入你想要嵌入的YouTube视频页面。
2.在视频下方,单击分享.
3.选择嵌入选项从弹出。
4.选择您的嵌入选项,然后单击复制将嵌入代码复制到剪贴板。
5.如何在WordPress中添加iframe到页面或文章取决于你的编辑器。如果您使用块编辑器,请添加自定义HTML块,然后将复制的iframe代码粘贴到块的文本区域。
如果使用经典编辑器,请切换到文本编辑模式并粘贴嵌入代码。
6.预览您的帖子,以看到您的嵌入式视频在所有它的荣耀。
在WordPress中手动嵌入Iframe
你也可以自己创建一个HTML iframe,并把它放在WordPress页面或帖子中。方法如下:
1.在你的WordPress页面/文章编辑器中,打开自定义HTML选项。在块编辑器中,通过添加自定义HTML块。在经典编辑器中,单击文本选项卡在内容区域的右上角。
2.将以下标签粘贴到文本区域:
< iframe的src = " URL " > < / iframe >
3.替换文本URL使用要嵌入的页面或内容的URL。
4.如果需要,可以使用其他属性自定义iframe。最常见的属性是:
- 允许:指定iframe可能使用的特性(全屏,相机,播放等)。
- 高度:设置iframe的高度(如果没有指定,默认为150像素)
- 加载:设置iframe的延迟加载
- referrerpolicy:设置在请求iframe时应该发送什么引用信息
- 宽度:设置iframe的宽度(默认为300像素)
一个iframe添加属性的标签看起来像这样:
. txt
5.预览您的页面/文章,看看iframe与周围内容的外观如何。
Iframes的局限性
虽然iframe对WordPress站点是有益的,但还是有必要回顾一下它们的一些缺点和使用它们时需要注意的地方。
最重要的是,记住iframes里面的东西并不属于你的网站——你从另一个URL获取内容并显示在你的页面上。确保iframe中的内容来自可靠的来源。否则,iframe可能被用来向您的网站注入恶意代码。
其次,最好不要过分使用iframe内容,因为它对搜索引擎优化有负面影响。如果iframe是资源密集型的,那么它会影响您的加载时间。另外,iframe更难被搜索引擎索引谷歌建议不要频繁使用它们.要解决这些问题,首先要考虑iframe是否必要。如果是,则添加加载属性以提高性能。最后,对于每个iframe,我们建议在正文中提供到iframe内容的单独链接,以便搜索引擎更好地索引您的页面。
最后,要知道不是所有的网站都允许你用iframes嵌入内容。此外,如果您的网站使用HTTPS,则您不能嵌入来自HTTP(未加密)域的内容,反之亦然。因为你应该一直使用SSL加密无论如何,远离未加密的HTTP域是一个好主意。
Iframes:留下来
尽管有其局限性,iframes是HTML的一种弹性特性,在WordPress网站中仍然广泛使用,用于嵌入不能或不应该放在网站服务器上的媒体内容。
有了嵌入式选项,所有经验级别的WordPress管理员都可以利用iframe嵌入式来改善他们的内容,让访问者不受影响。只需要一些HTML知识或一个简单的插件就可以做到这一点。
最初发布于2021年9月1日上午7:00:00,更新于2021年9月01日
主题:
WordPress插件别忘了分享这篇文章!
相关文章
扩大提供
注册HubSpot的CMS软件雷竞技苹果下载官方版
现在得到它