beginner-wordpress-user/tutorials/Embedding media and third-party content on your website/Embedding media and third-party content on your website_tutorial.md
studio 0c41fb6eeb feat: 更新视频章节、多平台元数据和教程文章
- 7 Tips to improve website security 全平台元数据
- 多个视频教程 Markdown 更新
2026-04-13 15:53:04 +08:00

6.6 KiB
Raw Permalink Blame History

Embedding media and third-party content on your website — 图文教程

基于 6 个章节自动生成,含字幕摘要与关键帧截图。

1. 嵌入内容简介与示例

intro | 00:00 → 01:03

摘要: 介绍嵌入的概念、优势以及多种内容类型的嵌入示例(如播客、文章、视频、问卷、音乐)。

在本教程中,我们将了解如何快速在您的网站 上嵌入媒体和第三方内容。 嵌入是一种在您的网站上显示外部媒体或内容 的方式,无需直接上传或托管。 嵌入允许您无缝整合各种类型的内容,例如视 频、社交媒体文章、地图、音频片段等。 例如,您可以在网站上显示来自 Spotify 的播客。 或来自您 Tumblr 账户的文章——我 使用了分栏区块并更改了背景颜色来展示它们。 最常见的嵌入可能是嵌入来自 YouTub e、Vimeo 或其他平台的视频。 您甚至可以使用 Crowdsignal 在站点上添加调查问卷。 或者您也可以决定在站点上添加来自 X 的文章。 最后,您甚至可以显示来自 SoundCloud 的音乐。

![嵌入内容简介与示例](Embedding media and third-party content on your website_ch01_f1_00-15.jpg)

![嵌入内容简介与示例](Embedding media and third-party content on your website_ch01_f2_00-31.jpg)

![嵌入内容简介与示例](Embedding media and third-party content on your website_ch01_f3_00-47.jpg)


2. 添加嵌入区块的基本方法

demo | 01:04 → 02:06

摘要: 演示如何通过插入按钮找到并选择通用嵌入区块并以嵌入X文章为例展示操作流程。

要添加嵌入区块,请点击左上角的插入按钮, 然后一直向下滚动到“嵌入”选项。 在这里您会看到所有可用的不同嵌入区块。 首先是嵌入区块本身。 当您选择嵌入区块时, 可以显示来自其他站点的内容。 现在我已选中该区块,它提示: 粘贴您想在站点上显示内容的链接。 我已经获取了我一篇 X 文章的 URL 将其粘贴到这里,然后点击“嵌入”。 接着我们将看到这篇文章显示在我们的站点上。 您也可以使用为特定第三方服务构建的嵌入区 块,例如 X、YouTube、WordPress、Vimeo、Crowdsignal、PocketCasts 等。 正如您在左侧列表中看到的。

![添加嵌入区块的基本方法](Embedding media and third-party content on your website_ch02_f1_01-19.jpg)

![添加嵌入区块的基本方法](Embedding media and third-party content on your website_ch02_f2_01-35.jpg)

![添加嵌入区块的基本方法](Embedding media and third-party content on your website_ch02_f3_01-50.jpg)


3. 使用特定服务区块与快捷方式

demo | 02:07 → 02:56

摘要: 介绍使用斜杠命令快速添加特定服务区块如YouTube并讲解直接粘贴URL的便捷方法。

在下一个示例中,我不会点击左上角的插入按 钮,而是输入斜杠和区块名称。 我想在站点上添加一个 YouTube 视 频,所以我会输入 /youtube选择该区块然后添加视频的 URL。 接着点击“嵌入”。 但 WordPress 让向站点添加第三方内容变得更加容易。 因此严格来说,您甚至不需要添加区块。 您可以直接将 URL 粘贴到您的页面或文章中。

让我们看另一个例子。 无需插入 Spotify 嵌入区块,您可 以直接将 Spotify 播客的 URL 粘贴到我的页面中。 您知道吗?您可以将嵌入区块转换为分栏或群 组区块。

![使用特定服务区块与快捷方式](Embedding media and third-party content on your website_ch03_f1_02-19.jpg)

![使用特定服务区块与快捷方式](Embedding media and third-party content on your website_ch03_f2_02-31.jpg)

![使用特定服务区块与快捷方式](Embedding media and third-party content on your website_ch03_f3_02-43.jpg)


4. 嵌入区块的布局与样式调整

demo | 02:57 → 03:56

摘要: 演示如何将嵌入区块转换为分栏区块,并调整布局、对齐方式和背景颜色等样式。

转换为其中一种类型后, 您就可以更改背景颜色和布局。

我想添加一个 TED 演讲,所以我会输入 /ted选择该区块然后粘贴演讲的 URL。 完成后,我将选择区块工具栏, 将此区块转换为分栏区块。 然后打开边栏设置,将其从一栏更改为两栏。 接着在右侧栏中添加另一个 TED 嵌入区 块,粘贴第二个视频的 URL然后点击“嵌入”。 之后我会选择分栏区块(或容器区块), 在区块工具栏中将对齐方式更改为“宽幅”。 然后您可以进入“风格”选项, 更改区块的背景颜色。

![嵌入区块的布局与样式调整](Embedding media and third-party content on your website_ch04_f1_03-11.jpg)

![嵌入区块的布局与样式调整](Embedding media and third-party content on your website_ch04_f2_03-26.jpg)

![嵌入区块的布局与样式调整](Embedding media and third-party content on your website_ch04_f3_03-41.jpg)


5. 使用HTML嵌入不受支持的内容

demo | 04:06 → 04:55

摘要: 讲解当标准嵌入失效时如何使用自定义HTML区块来嵌入如Facebook等平台的内容。

但如果嵌入区块不起作用怎么办?

这时我们可以使用 HTML 区块。

例如,嵌入区块不适用于 Facebook 或 Instagram 文章。 那么,我们转到一篇 Facebook 文章。 点击三个垂直点。 点击“嵌入”。 复制 HTML 代码。 返回您的网站。

输入 /html 然后选择自定义 HTML 区块。 接下来我们可以粘贴代码。 现在在区块工具栏中,我们可以点击“预览” 来查看文章的显示效果。

![使用HTML嵌入不受支持的内容](Embedding media and third-party content on your website_ch05_f1_04-18.jpg)

![使用HTML嵌入不受支持的内容](Embedding media and third-party content on your website_ch05_f2_04-30.jpg)

![使用HTML嵌入不受支持的内容](Embedding media and third-party content on your website_ch05_f3_04-42.jpg)


6. 教程总结

outro | 04:57 → 05:11

摘要: 总结视频内容,确认观众已掌握在网站上嵌入第三方内容的必要工具和方法。

相信您现在已掌握所有必要工具, 可以在您的站点上嵌入第三方内容了。 现在在区块工具栏中, 我们可以点击预览来查看文章的显示效果。

![教程总结](Embedding media and third-party content on your website_ch06_f1_05-00.jpg)

![教程总结](Embedding media and third-party content on your website_ch06_f2_05-04.jpg)

![教程总结](Embedding media and third-party content on your website_ch06_f3_05-07.jpg)