WordPress如何安全嵌入外站网页？-网页设计-锦华智联科技

下面我将为你详细介绍从最简单、最推荐到更高级、更灵活的各种方法,并附上优缺点和操作步骤。

（图片来源网络，侵删）

使用官方块编辑器（Gutenberg）的“嵌入”块（最推荐）

这是WordPress 5.0版本后内置的功能，最简单、最安全，也是官方推荐的首选方法,它支持绝大多数主流的网站服务。

适用场景：嵌入YouTube视频、Vimeo、Twitter、SoundCloud、Spotify、Flickr、Google Maps等。

操作步骤：

打开文章编辑器：登录你的WordPress后台,创建或编辑一篇文章。
（图片来源网络，侵删）
切换到“代码”视图：在编辑器顶部，点击右上角的“三个点”菜单，选择“代码”（Code）视图，这很重要,可以防止自动格式化破坏嵌入代码。
粘贴URL：将你想要嵌入的网页链接直接粘贴到文章内容区域。
自动转换：WordPress会自动识别这个URL，并将其转换为一个嵌入块,你通常会看到一个预览框。
调整和发布：你可以像编辑图片一样，调整这个嵌入块的对齐方式（左、中、右），点击“预览”或“发布”即可。
（图片来源网络，侵删）

优点：

极其简单：只需复制粘贴URL,无需任何代码。
响应式设计：嵌入的内容会自动适应不同屏幕尺寸。
安全：使用官方功能，兼容性好,不易出错。
SEO友好：搜索引擎能正确识别并索引这些内容。

缺点：

只支持特定网站：如果目标网站不在WordPress的官方支持列表中,此方法无效。

使用iframe标签（最灵活）

<iframe> (Inline Frame) 是HTML中用于在网页内嵌套另一个网页的标签，这是一种非常通用的方法,几乎可以嵌入任何有提供嵌入代码的网页。

适用场景：嵌入Google Maps、另一个完整的网站、某个特定的在线工具、PDF文件等。

操作步骤：

获取嵌入代码：你需要从外站获取嵌入代码，这个网站会提供一个“分享”或“嵌入”选项，里面会有一段以 <iframe ...> 开头和 </iframe> 结尾的代码。
- 例如：Google Maps在“分享” -> “嵌入地图”中会提供代码。
在WordPress编辑器中使用“自定义HTML”块：
- 在文章编辑器中，点击号添加一个新块。
- 搜索并选择“自定义HTML”（Custom HTML）块。
粘贴代码：将你复制的 <iframe> 代码粘贴到这个块中。
（可选）调整样式：为了让嵌入的页面更好地适应你的文章，你可以给iframe添加一些样式，设置宽度为100%,高度为固定像素或与宽度成比例。
- 修改后的代码示例：
```
<iframe 
  src="https://www.google.com/maps/embed?..." 
  width="100%" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy">
</iframe>
```
- 使用响应式iframe（更推荐）：为了在手机上也能完美显示，可以使用一个CSS技巧，将上面的代码修改为：
```
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    src="https://www.google.com/maps/embed?..." 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
    frameborder="0" 
    allowfullscreen="" 
    loading="lazy">
  </iframe>
</div>
```
  这个技巧通过设置一个 padding-bottom 为56.25%（即16:9的宽高比）的容器，让iframe的高度根据宽度自动调整,实现完美响应式。
发布文章。

优点：

通用性强：理论上可以嵌入任何支持iframe的网页。
控制度高：可以自定义宽度、高度等属性。

缺点：

需要获取代码：操作比方法一稍复杂。
安全性问题：嵌入的内容不受你网站控制，如果外站有恶意代码或被黑客攻击，你的网站也可能受到影响,请确保你信任嵌入的来源。
可能被阻止：一些网站会禁止在iframe中嵌入他们的内容（通过设置 X-Frame-Options HTTP头）。
移动端兼容性：需要额外设置才能保证响应式显示（如上面的示例代码）。

使用插件（功能强大，适合特定需求）

如果你需要嵌入的内容比较特殊，或者希望有更多的自定义选项,使用插件是很好的选择。

适用场景：

嵌入Instagram帖子/Feed。
嵌入PDF文件并自带预览和阅读器。
嵌入Twitch直播。
需要缓存嵌入内容以提高网站速度。

推荐插件：

Embed Anything：一个非常强大的插件，可以让你通过短代码嵌入几乎任何内容,绕过很多网站的嵌入限制。
PDF Embedder：专门用于在WordPress中优雅地嵌入PDF文件,提供阅读器界面。
Official Jetpack：由WordPress.com团队开发，除了提供安全、CDN加速的图片托管外，其“共享模块”也提供了对更多社交平台（如Facebook帖子）的嵌入支持。

操作步骤（以通用插件为例）：

安装并激活插件：在WordPress后台的“插件” -> “安装插件”中搜索并安装你选择的插件。
获取短代码：激活插件后，通常会在后台设置页面或提供文档告诉你如何使用它的短代码。[embed_any url='https://example.com']。
在文章中使用短代码：在文章编辑器中，像添加普通块一样,将这个短代码粘贴进去即可。

优点：

功能强大：可以处理官方嵌入块无法支持的内容。
性能优化：一些插件（如Jetpack）会缓存嵌入内容,加快加载速度。
用户友好：通常提供简单的短代码,无需写HTML。

缺点：

增加插件数量：会为你的WordPress网站增加一个插件，有轻微的性能和安全风险（需选择知名、维护良好的插件）。
可能产生费用：一些高级功能可能需要付费。

总结与对比

方法	优点	缺点	推荐度
嵌入块	最简单、最安全、响应式、官方支持	仅支持特定网站	⭐⭐⭐⭐⭐ (首选)
iframe	最灵活、通用性强	需要手动写代码、有安全风险、需处理响应式	⭐⭐⭐⭐ (通用备用方案)
插件	功能强大、可处理特殊内容、可能有性能优化	增加插件、可能有安全/性能风险	⭐⭐⭐ (特定需求时使用)

最终建议

首先尝试方法一：直接粘贴URL，这是最快、最安全的方式,能满足大部分需求。
如果方法一无效，再使用方法二：去外站找嵌入代码，然后用“自定义HTML”块插入,并记得使用响应式技巧。
如果以上方法都行不通，或者你有非常特定的需求（如嵌入PDF、Instagram Feed），再考虑方法三,寻找一个合适的插件来解决。

希望这个详细的指南能帮到你！