如何轻松在WordPress中嵌入iFrame代码(3种方法)

03/23/2024

什么是iFrame?

iFrame(内嵌框架)允许您在网站上嵌入视频或其他内容,而无需实际托管这些内容。这样可以节省带宽和存储空间,因此,您不应直接将视频上传到WordPress。此外,iFrame会自动更新原内容的变化,这意味着访问者将始终看到最新版本的内容。通过iFrame嵌入版权内容也不违反版权法,有助于保护您免受法律诉讼。

方法1:使用源代码在WordPress中嵌入iFrame(快速简便)

许多大型视频托管网站都有“嵌入”选项,可供您获取所需的iFrame代码以添加到网站。例如,在YouTube中,要在WordPress中嵌入YouTube视频,只需点击所需视频下方的“分享”按钮。然后您会看到一个弹出窗口,提供各种分享选项。接下来,点击“嵌入”按钮,YouTube会显示iFrame代码。启用隐私增强模式,可以使访客在您的WordPress网站上观看嵌入内容而不会影响他们在YouTube上的浏览体验。然后,只需复制该代码并将其粘贴到您的文章或页面中。在WordPress块编辑器中,打开页面并点击“+”按钮,在弹出的窗口中输入‘HTML’以找到自定义HTML块,然后将YouTube iFrame代码粘贴到该块中。发布页面即可看到嵌入的YouTube视频。

方法2:使用WordPress插件嵌入iFrame(适用于所有网站)

并非所有第三方网站都提供现成的嵌入代码。如果找不到任何“分享”或“嵌入”设置,可以使用iFrame插件轻松创建自己的iFrame代码。首先,安装并激活iFrame插件,插件激活后无需设置。然后,在所需的页面或文章中添加Shortcode块,添加以下短代码:[iframe src=”URL goes here”],将“URL goes here”替换为您要嵌入的内容URL。例如,在WordPress中添加Google地图,这对于商店、餐馆和其他场所添加路线图非常有用。在发布或预览文章后,您应该会看到嵌入的内容。

方法3:手动创建iFrame代码(无需插件)

如果您不想使用特殊的WordPress插件,可以手动创建iFrame代码。打开所需页面或文章,然后在WordPress内容编辑器中添加HTML块。粘贴以下代码到您的HTML块中:
,将“URL goes here”替换为您要嵌入的内容的直接URL。您还可以添加额外的参数来更改内容在网站上的外观。例如,可以将宽度设置为600像素,高度设置为200像素:
。这在您需要在较小空间中显示嵌入内容时非常有用。

有哪些iFrame替代方案?

使用iFrames有些缺点,并不是所有网站都允许将其内容放入iFrame,您可能需要手动调整内容以使其在可用空间中看起来不错。另一个问题是HTTPS网站只能使用来自其他HTTPS网站的iFrame内容,HTTP网站也是如此。因此,许多平台如WordPress更喜欢使用oEmbed。通常,您只需在WordPress文章中粘贴一个URL,就可以使用oEmbed嵌入视频和其他内容,WordPress会自动调整oEmbed的大小以适应可用空间,使其始终在台式机、智能手机和平板电脑上看起来完美。
重要提示:WordPress默认不再支持Facebook和Instagram帖子 的oEmbed。我们建议使用社交媒体插件来显示社交媒体内容。例如,Smash Balloon可以轻松嵌入Facebook、Instagram、Twitter和YouTube的内容。

希望本指南能帮助您学习如何轻松在WordPress中嵌入iFrame代码。您也可以查看我们的其他指南,例如如何在WordPress文章和页面中允许PHP,以及我们专家推荐的最佳YouTube图库插件。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>