最新公告
  • 欢迎您光临IO源码网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 如何在WordPress嵌入iFrame代码 iFrame提供了一种无需上传即可将视频或其他内容嵌入网站的简便方法。腾讯视频、B站等许多第三方平台都允许用户使用iframe嵌入其网站中的内容。 12月 30, 2020 376 0

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

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

    WordPress嵌入iFrame代码

    什么是iFrame?

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

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

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

    为什么使用iFrames?

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

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

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

    为什么使用iFrames

    使用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站的视频,你只需要在具体的视频页面,点击视频播放器下方的分享按钮,即可看到嵌入代码,如下图所示:

    B站视频分享嵌入代码

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

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

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

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

    古腾堡自定义HTML

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

    HTML代码演示

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

    B站视频分享

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

    B站iFrame代码示例

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

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

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

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

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

    古腾堡编辑器简码

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

    [iframe src="https://www.wbolt.com/URL goes here"]

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

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

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

    iframe嵌入百度地图演示

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

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

    直接贴入iframe代码

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

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

    古腾堡编辑器HTML块

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

    <iframe src="https://www.wbolt.com/URL goes here"></iframe>

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

    HTML块引入iframe代码

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

    <iframe src="https://www.wbolt.com/URL goes here"></iframe>

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

    iframe嵌入百度地图演示

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

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!384324621@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有★币奖励和额外收入!

    IO 源码网 » 如何在WordPress嵌入iFrame代码 iFrame提供了一种无需上传即可将视频或其他内容嵌入网站的简便方法。腾讯视频、B站等许多第三方平台都允许用户使用iframe嵌入其网站中的内容。 12月 30, 2020 376 0

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    IO源码吧
    一个高级程序员模板开发平台

    发表评论

    • 309会员总数(位)
    • 8692资源总数(个)
    • 587本周发布(个)
    • 5 今日发布(个)
    • 336稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情