如何轻松在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-12-12
  • WordPress 教学

多语言表单有助于与全球观众沟通,使您的网站更易于使用,并吸引更多用户。本文介绍了如何使用WPForms和Formidable Forms插件在WordPress中创建多语言表单,以帮助您轻松实现这一目标。

閱讀更多
  • 2024-10-21
  • WordPress 教学

如果您在WordPress管理区域或其他地方遇到‘jQuery未定义’错误,不必担心,这是一个常见的问题。本文为您介绍了该错误的原因以及六种解决方法,以便让您的网站恢复正常运行。

閱讀更多
  • 2024-10-17
  • WordPress 教学

越来越多的人倾向于使用语音搜索而不是在搜索栏中输入关键词。语音搜索被认为是在线交互的未来,各种设备上数百万人每天都在使用它。与通过普通SEO优化网站一样,将网站适配语音搜索同样重要。在本文中,我们将深入探讨为什么语音搜索SEO如此重要,以及如何优化您的WordPress网站以捕获这些语音搜索。

閱讀更多

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