用OEMBED嵌入WordPress内容的终极指南

技术教程 2022年3月3日
1515 0

互联网肯定是一个社交场所.感觉像共享视频，帖子，推文，照片，模因和音乐一直是常态.凭借OEMBED，用WordPress超级简单.

当您从外部源分享媒体并将其放在自己的网站上时，它被称为嵌入，并且通常使用一些代码实现.OEMBED是嵌入的最新格式.它的API允许您通过简单地粘贴所需任何资源的URL而无需代码来共享内容.

由于WordPress对格式的支持，它是快速且易于使用的.只需将链接粘贴到视频或推断到帖子或页面，每次都会自动为您自动嵌入您，并且无需额外的CSS样式.

这是您需要了解嵌入媒体的媒体和页面以及一些额外的插件，以帮助为您的嵌入提供更多电源.

在此帖子中，我们将介绍:

  • 向iframes

    • 说再见

  • 嵌入oembed
  • 添加或删除OEMbed网站
  • 用插件实现oembed

向iframes

表示告别

我记得当我的家庭最终得到一个没有在dos上运行的后面的计算机时，我记得第一次学习代码.相反，它在Windows'95上运行.我觉得这个系统的想法现在看到了从那时起的到来有多远，记住嵌入内容看起来像背部的东西，那么也给了我相同的效果.

html iframe(内联帧)是嵌入内容的常见方法，即使今天也没有改变这一切.

An whole site is displayed within another site using an iFrame. yeah，让我们没有说我们确实使用iframe来显示整个网站，但我们也不说我们做了.

iframe的唯一目的是嵌入一个并不总是理想的整个文档.这一切都是通过帖子创建仪表板中的新帖子或页面启动>添加新或页面>添加新的.导航到文本编辑器并在基本代码中键入以创建类似于下面的示例的iframe:

加载GIST Jennimckinnon/93906758A7B28D84AD59

虽然有许多属性，您可以进入iframe标签，这些只是最多的三个.width和height选项设置iframe和src的大小通过URL设置iframe的内容.

当HTML被更新为第五版时，还有一个添加的额外标记，也可以用于嵌入媒体.它是传统的iframes升级，但可以以相同的方式使用.

加载gist jennimckinnon/f480de2e0a63697ef9a7

嵌入标记会创建一个容器，然后您可以使用CSS进行样式.它也不需要关闭标签，并且所有主要浏览器都支持它.

虽然您绝对可以将iframe和html5标记添加到您的页面或后编辑器，但嵌入了内容的速度更快，更简单地进入WordPress:输入OEMBED.

使用OEMBED

嵌入

将媒体嵌入WordPress帖子和页面在很大程度上从未如此易于增加，因为OEMBED，这允许您将内容像视频，图像，推文，音频等更多信息从不同的站点带入您自己的网站.这一切都通过将内容的URL直接复制和粘贴到编辑器中来完成.

就是这样.

A URL is rendered in the visual editor as the video that is displayed after the post is published. 添加介质对于Oembed，快速且简单.

在视觉编辑器中看起来很棒，但前端看起来更好.可能是最好的部分是，OEMBED不需要任何额外的造型.

A video is displayed well in a post on the public-facing site. Oembed负责嵌入的所有技术方面.

将媒体嵌入到您的网站上看起来好像你 did 样式它适合你的主题.加上，无论你添加什么样的媒体，即使在移动屏幕上也一直看起来很棒.

您不必担心您的内容是否可以保持响应，因为OEMBED已经覆盖和更改颜色方案也不是问题.

您还可以更改颜色方案，即使在较暗的背景中，您的媒体也可以看起来很大.

A tweet is displayed well on a mobile screen. A tweet is displayed well on a mobile screen. 保留网站响应不是原始oEmbed的问题.

您还可以嵌入各种媒体类型，包括文档和幻灯片.它们动态地显示，因此您的访问者可以与它们进行交互.

如果从ISSUU展示杂志，例如，用户可以单击以将页面翻转，然后选择较大的视图.

A book is dynamically displayed in a post on the front end. 文档也与原始oEmbed显示良好.

唯一的两个要求是将URL放在自己的行上，它并不像下面的例子一样超链接:

加载gist jennimckinnon/efe1f7d5b455d3265d27

一旦您粘贴了要嵌入到可视化编辑器的媒体的URL，它会出现在处理后，并显示在发布帖子或页面后应该如何出现.

还有另一种方式可以使用OEMBED，这是一个简单的短码.媒体以相同的方式显示，但您可以添加简单的样式选项.

例如，您可以根据iframe调整宽度和高度.最大的区别是链接包含在标签之间，而不是在它们内部.

Media is displayed the same when using shortcodes. 在使用短路时显示相同的介质.

它与大多数其他短路相同，所以它很容易使用.OEMBED短码确实有一个结束标签，因此不要忘记在您将媒体嵌入到您的网站时包含它.

这是您将使用的结构的示例，在这种情况下，YouTube视频正在嵌入:

加载gist jennimckinnon/7d718951331d2536e8cb

您可以从许多来源嵌入内容，您应该记住，默认情况下只能从白名单站嵌入媒体.

您的选择有限的原因是减少当您决定嵌入您的网站时，减少来自不受信任的来源的安全风险.通过为您提供仅批准的可靠消息来源嵌入内容，您可以轻松了解您的网站可以保持安全.

此处是当前白名单的网站，其中包含媒体类型，每个媒体类型在写完时被接受:

  • animoto -视频
  • CloudUp -视频，画廊，图像
  • 学院-视频

    • dailymotion -视频

  • Flickr -视频和图像
  • funnordie.com -视频
  • hulu -视频
  • imgur -图像
  • Instagram -图像
  • issuu -文件
  • Kickstarter -项目
  • meetup.com -各种
  • mixcloud -音乐

    • photobucket -图像

  • Poldaddy -民意调查和调查

  • Reddit -评论
  • Reforbnation -音乐
  • scribd -文档
  • 幻灯片-演示幻灯片
  • smugmug -各种
  • soundcloud -音乐
  • 扬声器甲板-演示幻灯片

    • spotify -音乐

  • ted -视频
  • tumblr -帖子，除了独立图像外
  • isnare -各种
  • 推特-社交媒体
  • 视频支持-视频
  • vimeo -视频
  • wordpress.tv -视频
  • Youtube -视频，除了标记为私有的视频.

这不是说你必须坚持这些网站.可以添加和删除已接受的OEMBEB网站.

添加和删除OEMBED网站

如果要仔细选择一个站点以嵌入其内容，您需要确保启用了OEMBED.如果您不确定，您可以检查官方OEMBED网站的提供商列表.

一旦您知道要白名单的提供者，打开您的 WP-Compress/Embed.php 文件并以此格式调用wp_oembed_add_provider()函数:

加载gist jennimckinnon/c01547348f1e1a9c57e1

$format字符串应包括具有通配符星号的URL的适当结构，以表示可以找到介质的URL的相当永久链接部分.$provider字符串是OE​​MBED提供程序的基本URL和$regex布尔值，可以设置格式参数是否使用正则表达式.如果设置为true，这意味着它是正则表达式.默认值和其他选项是false这意味着它不是正则表达式.

当您将其所有放在一起并输入您需要的URL时，结果应该如此类似:

加载gist jennimckinnon/d65968799dbcda58fc2e

如果你宁愿不编码自己的php，你就在运气.Generatewp中有一个优秀的OEMBED代码发生器.您需要做的就是使用适当的URL填写字段，然后单击更新代码按钮以显示您可以将其复制和粘贴到您的 Embed.php 中的代码文件.

如果您要添加的网站没有启用OEMBET，请不要担心.您仍然可以使用主题的函数中的wp_embed_register_handler()函数添加它.php 文件.您需要遵循的结构以注册嵌入式处理程序如下所示:

加载GIST Jennimckinnon/26D7B0D58A5650987AC4

$id字符串需要是内部使用的唯一标识符.$regex字符串是检查您的处理程序是否应用于URL的正则表达式.在此结构中的回调函数-在此示例中标记为$callback -如果匹配正则表达式并且$priority整数用于在测试时建立处理程序的顺序，则是所谓的.默认值为10，并且在较低的数量表示处理程序时，按照它们的顺序测试了与相同整数的处理程序在操作中早先测试处理程序.

WordPress Codex还有一个很好的例子，如果您想向OEMBED注册FORBES视频，则该函数应该如此.你可以用它作为灵感.

加载gist jennimckinnon/995502371d58977eb8be

如果您宁愿不支持OEMBED站点，则可以使用您网站的 wp-compress/media.php 文件中的wp_oembed_remove_provider函数将其删除.以下是您需要遵循的结构:

加载GIST Jennimckinnon/A1CE8D8FF636C1DD2B09

$format字符串是您要删除的OEMBED站点的URL.您可以从 wp-compress/class-oembed.php 文件中获取此功能.例如，如果您想要从列表中删除WordPress.tv(但是为什么您拒绝?)您会将其添加到您的 Media.php 文件:

loading gist jennimckinnon/79e8648111ab117f2b51

如果您宁愿不触摸和代码，则可以使用插件作为合适的替代方案安装.

使用插件实现OEMBED

这些插件经常更新并具有有趣的能力.虽然并非此列表中的所有插件必须为多路，但它们应该在您的网络上工作.

OEMBED Manager

oEmbed Manager Oembed Manager

此插件允许您控制其他网站是否可以或无法嵌入您的内容，并有条件地允许或禁止您的网站上的嵌入式内容的显示.

它还允许您执行各种OEMBED FineTuning和优化功能(例如，列表，清除和更新/创建OEMBED缓存项目)，并与各种隐私和合规插件集成.

更多信息:OEMbed Manager

嵌入

Embedly 嵌入

默认延伸到您可用的提供程序，以超过300多个不同的网站，包括谷歌地图，DRIBBBLE，Skitch和DeviantArt，只有少数几个.如果您不想触摸任何代码，则这也是您可能想要使用的插件，但想要向您的网站添加更多OEMBED提供商.

它尽可能容易地安装大多数插件，如果需要，您甚至可以自定义样式.要使用它，您只需要在通常的情况下向您的帖子和页面添加URL.

更多信息:嵌入

添加外部介质

Add External Media 添加外部媒体

此插件将要嵌入您的网站的媒体库中的文件，就像您将其上传到您的网站的那样，但您仍然可以获得常规OEMBED的所有常规节省空间益处.另外，它可以安装像大多数其他插件，以便您可以快速开始.

更多信息:添加外部媒体

包装

将内容嵌入到WordPress帖子中，OEMBED可以更容易地更容易.互联网和WordPress已经走了很长的路，因为它谦卑的开始，你现在能够拯救一些空间，同时仍然能够分享所需的所有视频，图像和项目.

在向OEMbed白名单中添加和删除提供商，如果您不熟悉PHP，则可以有点具有挑战性，在路上有帮助.Daniel Pataki汇集了五部分系列，帮助您学习PHP，即使您没有太多的经验.查看该系列的第一部分以便立即开始:WordPress开发为初学者:入门.

编辑器注意:此帖子已更新以获得准确性和相关性. [最初发布:2016年1月/修订:2月2022]

oembed(2)WordPress(893)嵌入(7)
♥赞6

相关文章

发表回复