图文详解如何在WordPress中嵌入iFrame

在WordPress中嵌入iFrame可以让我们在文章或页面中嵌入其他网站的内容，例如视频、地图、表格等。下面是如何在WordPress中嵌入iFrame的完整使用略。

步骤

以下是在WordPress中嵌入iFrame的步骤：

1. 打开WordPress编辑器

登录WordPress后台，打开需要编辑的或页面。

1. 切换到文本编辑器

在编辑器中，切换到文本编辑器模式，以便我们可以编辑HTML代码。

1. 复制iFrame代码

在其他网站中找到需要嵌入的内容，复制iFrame代码。iFrame代码通常以<iframe>标签开头，以</iframe>标签结尾。

1. 粘贴iFrame代码

在WordPress编辑器中，将iFrame代码粘贴到需要嵌入内容的位置。可以使用<iframe>标签将iFrame代码包裹起来。

1. 调整iFrame大小

根据需要，可以使用width和height属性来调整iFrame的大小。例如，可以将iFrame的宽度设置为100%以适应页面宽度。

1. 保存并预览

完成Frame嵌入后，保存文章或页面，并预览以确保iFrame正常显示。

示例1：在WordPress中嵌入YouTube视频

以下是在WordPress中嵌入YouTube视频的示例：

1. 打开YouTube视频

在YouTube中找到需要嵌入的视频，并打开视频页面。

1. 复制iFrame代码

在视频页面中，单击“分享”按钮，然后单击“嵌入”选项。复制iFrame代码。

1. 粘贴iFrame代码

在WordPress编辑器中，将iFrame代码粘贴到需要嵌入视频的位置。可以使用<iframe>标签将iFrame代码包裹起来。

<iframe width="100%" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

将VIDEO_ID替换为YouTube视频的ID。

1. 调整iFrame大小

根据需要，可以使用width和height属性来调整iFrame的大小。例如，可以将iFrame的宽度设置为100%以适应页面宽度。

<iframe width="100%" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

1. 保存并预览

完成iFrame嵌入后，保存文章或页面，并预览以确保iFrame正常显示。

示例2：在WordPress中嵌入Google地图

以下是在WordPress中嵌入Google地图的示例：

1. 打开Google地图

在Google地图中找到需要嵌入的地图，并打开地图页面。

1. 复制iFrame代码

在地图页面中，单击“分享”按钮，然后单击“嵌入地图”选项。复制iFrame代码。

1. 粘贴iFrame代码

在WordPress编辑器中，将iFrame代码粘贴到需要嵌入地图的位置。可以使用<iframe>标签将iFrame代码包裹起来。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m!1m3!1d1933.764764032758!2d-122.419415!3d37.77492999999997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e8f0d0f8a5d%3A0x4a501367f076adff!2sGolden+Gate+Bridge!5e0!3m2!1sen!2sus!4v1554822387646!5m2!1sen!2sus" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

1. 调整iFrame大小

根据需要，可以使用width和height属性来调整iFrame的大小。例如，可以将iFrame的宽度设置为100%以适应页面宽度。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1933.764764032758!2d-122.419415!3d37.77492999999997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e8f0d0f8a5d%3A0x4a501367f076adff!2sGolden+Gate+Bridge!5e0!3m2!1sen!2sus!4v1554822387646!5m2!1sen!2sus" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

1. 保存并预览

完成iFrame嵌入后，保存文章或页面，并预览以确保iFrame正常显示。