WordPress如何制作嵌入式网页？-网页设计-锦华智联科技

在 WordPress 页面或文章中嵌入外部网页或内容：比如嵌入 Google 地图、YouTube 视频、Figma 设计稿、另一个网站的某个页面等。
创建一个被其他网站嵌入的 WordPress 页面：比如你做了一个产品介绍页面，希望合作伙伴可以直接把你的页面嵌入到他们的网站上。
制作一个“无头”WordPress 网页，作为后端数据源：前端用其他技术（如 React, Vue）构建，通过 WordPress API 获取数据并渲染成网页。

我会针对这三种最常见的情况,提供详细的操作指南。

（图片来源网络，侵删）

在 WordPress 页面中嵌入外部内容（最常见）

这是大多数用户关心的“嵌入式”问题，WordPress 提供了非常方便的方法来嵌入来自流行平台的内容。

方法 1：使用原生自动嵌入（最简单）

WordPress 内置了一个强大的功能，只要你粘贴符合特定格式的 URL，它会自动将其转换为嵌入代码。

支持的平台包括但不限于：

视频: YouTube, Vimeo, Dailymotion
图片: Instagram, Twitter (X), Flickr
音频: SoundCloud, Spotify
文档: Google Docs, Google Slides, PDF 文件
社交媒体: Twitter (X) 帖子, Facebook 帖子

操作步骤：

（图片来源网络，侵删）

登录你的 WordPress 后台。
转到 文章 > 写文章 或 页面 > 新建页面。
将光标放在内容编辑器中。
直接复制你想嵌入内容的网页链接，然后粘贴到编辑器里。
WordPress 会自动将其识别并生成一个嵌入代码，你通常会看到一个预览图。
点击 “发布” 或 “更新” 按钮，在前台查看时，这个链接就会被替换为实际的嵌入内容（如视频播放器、地图等）。

优点：

零技术门槛,非常简单。
无需安装任何插件。

缺点：

只支持 WordPress 内置的少数几个平台。
如果平台更新了嵌入规则,可能会失效。

方法 2：使用官方嵌入代码（推荐）

大多数外部平台（如 Google Maps, YouTube）都会提供一个 <iframe> 代码，WordPress 的编辑器原生支持 <iframe>。

操作步骤：

（图片来源网络，侵删）

获取嵌入代码：打开你想要嵌入的网站（Google Maps），找到“分享”或“嵌入”选项，复制提供的 <iframe> 代码。
在 WordPress 中使用：
- 经典编辑器：切换到 “文本” 模式，将 <iframe> 代码粘贴到你想要的位置。
- 块编辑器 (Gutenberg)：点击号添加一个 “自定义 HTML” 块，然后将 <iframe> 代码粘贴进去。

示例代码：

<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.1234567890!2d-74.0059!3d40.7128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDDCsDQyJzQ2LjEiTiA3NMKwMDAnMjEuMiJX!5e0!3m2!1sen!2sus!4v1234567890123!5m2!1sen!2sus" 
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy" 
    referrerpolicy="no-referrer-when-downgrade">
</iframe>

优点：

兼容性极广,几乎所有提供嵌入服务的网站都支持。
可以自定义 width（宽度）和 height（高度）。

缺点：

需要手动切换到文本/HTML 模式，对新手来说可能稍显不便。

方法 3：使用第三方插件（最强大）

如果你需要嵌入的平台很冷门,或者想要更好的控制和样式，插件是最好的选择。

推荐插件：

Embed Any Document: 可以轻松嵌入 PDF、Word、Excel、PowerPoint 等文档，并在线预览。
Advanced iFrame: 功能极其强大的 iframe 管理插件，可以设置样式、响应式、传递参数等。
Responsive Video Embeds: 专门用于让所有嵌入式视频（包括 iframe）在不同设备上都保持响应式。

以 "Embed Any Document" 为例：

在 WordPress 后台，转到 插件 > 安装插件。
搜索 "Embed Any Document" 并点击 “现在安装”，然后激活。
转到 设置 > Embed Any Document 进行基本配置。
上传或选择一个 PDF 文件，插件会自动生成一个简短的代码 [embeddoc url='your-file.pdf']。
在你的文章或页面中,使用 “自定义 HTML” 块，将这个代码粘贴进去即可。

优点：

功能强大,可以嵌入 WordPress 不原生支持的内容。
通常提供更好的用户体验,如响应式设计、下载按钮等。

缺点：

需要安装和配置插件,可能会略微影响网站速度。

创建一个能被其他网站嵌入的 WordPress 页面

如果你想让自己的页面能像 YouTube 视频一样被嵌入，你需要启用 WordPress 的 oEmbed 功能。

操作步骤：

确保你的 WordPress 主题和插件没有禁用 oEmbed，默认情况下，这个功能是开启的。
获取你想要嵌入的 WordPress 页面的 URL。
将这个 URL 粘贴到任何支持 oEmbed 的编辑器中（比如另一个 WordPress 网站的编辑器），它就会自动生成一个嵌入框。

自定义嵌入样式：

你还可以通过添加一些代码到你的主题的 functions.php 文件，来自定义 WordPress 返回的嵌入代码。

// 在主题的 functions.php 文件中添加以下代码
function my_custom_oembed_provider() {
    wp_oembed_add_provider( '#https?://(www\.)?your-website\.com/.*#i', 'https://your-website.com/oembed/', true );
}
add_action('init', 'my_custom_oembed_provider');

优点：

更具可分享性和互操作性。
操作简单,无需额外插件。

缺点：

自定义程度有限,主要依赖 WordPress 的默认输出。

制作“无头”WordPress 网页（高级开发）

这种方法将 WordPress 的前端（展示层）和后端（内容管理）分离，前端可以是一个独立的、使用现代框架（如 React, Vue, Svelte）构建的网页应用，后端则只负责提供内容数据。

工作原理：

后端 (WordPress):
- WordPress 网站正常运行，你用它来管理文章、页面、产品等所有内容。
- 你需要安装一个 REST API 插件，如 WP REST API（通常已内置）或 Jetpack 来增强 API 功能。
- WordPress 通过其 REST API 接口暴露所有内容数据（如 https://your-website.com/wp-json/wp/v2/posts）。
前端 (独立网页):
- 使用 JavaScript (如 Fetch API) 从 WordPress 的 REST API 获取数据。
- 使用 React, Vue 等框架将获取到的数据动态渲染成 HTML 页面。
- 这个前端可以部署在任何地方,如 Netlify, Vercel, 或你自己的服务器上。

为什么这么做？

性能极致：前端是静态的，加载速度飞快。
体验优秀：可以构建类似单页应用的流畅用户体验。
技术自由：前端可以使用任何你想要的技术栈，不受 WordPress 主题和插件的限制。

优点：

构建现代化、高性能、可扩展的网站。
前后端分离,开发更灵活。

缺点：

技术门槛非常高，需要熟练掌握前端开发、API 调用和构建工具。
开发和维护成本更高。

总结与建议

你的需求	推荐方法	难度	适用场景
嵌入 YouTube 视频、Google 地图等	方法1：原生自动嵌入	⭐	快速、简单地嵌入常见内容。
嵌入 PDF、Figma 设计稿等	方法2：官方 `<iframe>` 代码	⭐⭐	通用、可靠，适用于大多数外部平台。
需要嵌入特殊文件或需要更多控制	方法3：第三方插件	⭐⭐	嵌入文档、音频，或需要自定义样式时。
想让我的页面能被别人嵌入	启用 `oEmbed`	⭐	的可分享性和互操作性。
想做一个现代化、高性能的网站	无头 WordPress	⭐⭐⭐⭐⭐	专业开发，构建复杂应用。

对于绝大多数 WordPress 情况一 是最核心的需求，建议你优先尝试 方法1 和 方法2，它们已经能满足 90% 的嵌入需求，如果还不够，再考虑 方法3 的插件。