WordPress 使用 iframe 嵌入Github Gist代码

WordPress 是一个使用 PHP 语言开发的开源内容管理系统，它允许用户创建和发布文章、页面等，在日常使用中，我们可能需要在 WordPress 文章中嵌入一些代码片段，Github Gist 中的代码，本文将介绍如何在 WordPress 中使用 iframe 嵌入 Github Gist 代码。

1. 获取 Github Gist ID

我们需要在 Github 上创建一个 Gist，并获取其 ID，访问 https://gist.github.com/，点击 "New Gist" 按钮，填写相关信息，然后点击 "Create Gist"，创建完成后，你将看到一个类似于 https://gist.github.com/your_username/your_gist_id 的链接，其中的 your_gist_id 就是我们要使用的 Gist ID。

2. 生成 iframe 代码

接下来，我们需要生成一个包含 Gist ID 的 iframe 代码，在 WordPress 编辑器中，插入以下代码：

<iframe src="https://gist.github.com/your_username/your_gist_id" width="100%" height="600" frameborder="0"></iframe>

请将 your_username 替换为你的 Github 用户名，将 your_gist_id 替换为你刚刚获取的 Gist ID，这段代码将创建一个宽度为 100%，高度为 600px 的 iframe，用于显示你的 Gist。

3. 调整样式

如果你希望调整 iframe 的样式，可以在 WordPress 主题的 CSS 文件中添加以下代码：

iframe {
    max-width: 100%;
    overflow: auto;
}

这段代码将限制 iframe 的最大宽度为 100%，并在内容溢出时显示滚动条，你可以根据需要调整这些样式。

4. 注意事项

在使用 iframe 嵌入 Gist 代码时，需要注意以下几点：

确保你的 Gist 内容不包含任何敏感信息，因为任何人都可以查看到你的 Gist。

Gist 中的代码包含外部资源（如图片、CSS、JavaScript 文件等），请确保这些资源可以通过公开 URL 访问，否则可能无法正常显示。

Gist 中的代码包含特殊字符（如引号、尖括号等），可能会导致 HTML 解析错误，为了避免这种情况，可以使用 HTML 实体编码（如 "、<、>）替换特殊字符。

相关问题与解答

Q1：如何在 WordPress 中插入多个 Gist？

A1：你可以在 WordPress 编辑器中插入多个 <iframe> 标签，每个标签对应一个 Gist。

<iframe src="https://gist.github.com/your_username/gist1_id"></iframe>
<iframe src="https://gist.github.com/your_username/gist2_id"></iframe>

请将 your_username、gist1_id、gist2_id 分别替换为你的 Github 用户名和两个 Gist ID，这样，你就可以在同一个 WordPress 文章中显示多个 Gist。

Q2：如何使 Gist 在 WordPress 文章中居中显示？

A2：要使 Gist 在 WordPress 文章中居中显示，可以使用 CSS flexbox，在 WordPress 主题的 CSS 文件中添加以下代码：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 根据需要调整 */
}

在 WordPress 编辑器中创建一个包含 <div class="container">、</div>、<iframe>、</iframe>、</div> 标签的容器：

<div class="container">
    <iframe src="https://gist.github.com/your_username/your_gist_id" width="100%" height="600" frameborder="0"></iframe>
</div>

请将 your_username、your_gist_id 替换为你的 Github