如何在 Divi 中创建动态 HTML 站点地图页面

HTML 站点地图页面对于希望从全景视图浏览您的 Divi 站点的用户非常有用。 基本上，HTML 站点地图（顾名思义）是您站点的 HTML 地图。 站点地图页面通常包含一个有组织的链接列表，其中包含指向整个站点中所有相关内容的链接。 可以手动创建 HTML 站点地图页面，但如果您可以动态生成站点地图页面内容，这样您就不必担心不断更新，这会有所帮助。

在本教程中，我们将向您展示如何使用 Divi Design 和插件 WP Sitemap Page 的组合在 Divi 中创建动态 HTML 站点地图页面布局。 设置非常简单，结果出奇的有效。

让我们开始吧。

抢先看

免费下载 HTML 站点地图页面布局

要了解本教程中的站点地图页面布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

要将布局导入您的页面，只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

注意：此布局依赖于与 WP 站点地图页面插件一起使用的简码。 如果您的站点上没有激活插件，您将看不到模块中的内容。

本教程需要什么

对于本教程，您将需要以下内容：

1. 迪维主题。
2. WordPress 内容。 为了生成 HTML 站点地图页面内容，您的站点上需要有实际的页面、帖子、类别、产品等。
3. WP 站点地图页面插件。 这可以从 WordPress 仪表板访问，我们将在下面向您展示如何操作。

让我们进入教程，好吗？

XML 和 HTML 站点地图之间的区别

如果您不熟悉站点地图，基本上有两种类型——XML 和 HTML。 XML 站点地图是专门生成的，目的是为搜索引擎提供您站点的详细地图。 在大多数情况下，XML 站点地图严格供 Google 等搜索引擎使用，以便它们轻松抓取您的网站，这将有助于提高您的排名。 因此，XML 站点不适合用户。 这就是 HTML 站点地图的用武之地。 HTML 站点地图是您网站上实际站点地图页面上内置的实际 HTML（以及 PHP，因为我们使用的是 Divi 和 WordPress）。 这个想法是在一个方便的地方为用户生成所有相关网站内容（帖子、页面、产品、类别等）的有组织的列表。 基本上，HTML 站点地图页面就像是整个站点的大型菜单。

有关站点地图的更多信息（例如如何在 WordPress 中创建 XML 站点地图），请查看我们关于如何为您的 WordPress 站点创建站点地图的帖子。

设置插件

在本教程中，我们将使用一个名为 WP Sitemap Page 的免费但有效的 WordPress 插件，它允许我们通过使用短代码在 Divi 模块中动态显示站点地图内容。

要下载插件，请转到您的 WordPress 仪表板并导航到插件 > 添加新。 然后使用搜索栏搜索 wp 站点地图页面插件，然后安装并激活该插件。

要打开 WP 站点地图页面插件设置，请导航到设置 > WP 站点地图页面。 在那里您将看到可用的设置。 对于本教程，我们将单独保留设置选项卡下的选项，但稍后可以随意查看它们。

单击“如何使用”选项卡以查看我们可用于显示站点地图页面内容的所有可用短代码示例。 突出显示的是我们将要使用的那些。

在 Divi 中创建 HTML 站点地图页面

设置好插件后，我们就可以开始在 Divi 中设计站点地图页面布局了。

创建新页面

首先，创建一个新页面，将其命名为“站点地图”，然后单击“使用 Divi Builder”。

将预制布局添加到页面

您将看到三个关于如何构建页面的选项。 选择“选择预制布局”。

然后搜索并找到 Magazine Layout Pack 并单击以使用 Categories 页面布局。

删除不需要的元素

由于我们将只使用此预制布局的顶部部分，因此一旦将布局加载到页面中，请删除第一部分下方的所有部分。

然后在顶部下方添加一个新的常规部分。

添加第 1 行以显示页面

对于我们的第一行，我们将添加 HTML 站点地图页面内容，以显示站点上的所有页面。 让我们从添加一列行开始。

将文本模块添加到显示页面

在行内，添加一个新的文本模块。

然后将以下内容粘贴到文本选项卡下的内容框中：

<h2>Pages</h2>

[wp_sitemap_page only="page" display_title="false"]

文字设计设置

即使大部分文本内容是由短代码生成的，我们仍然可以使用内置的 Divi 设计设置来设计这些元素。 跳转到设计选项卡并更新以下内容：

• 文字字体：蒙特塞拉特
• 文字字体粗细：粗体

然后选择链接设置选项卡并更新以下内容：

• 链接文字颜色：#333333

接下来，选择无序列表设置选项卡并更新以下内容：

• 无序列表文本颜色：#c5e0dc
• 无序列表样式类型：方形
• 无序列表样式位置：内部
• 无序列表项缩进：5vw

注意：任何链接样式都将覆盖无序列表样式。 这就是为什么我们可以添加这个无序列表文本颜色，它只适用于小方块项目符号。

更新标题 2 样式如下：

• 标题 2 字体：蒙特塞拉特
• 标题 2 字体粗细：粗体
• 标题 2 文字大小：3vw（桌面），38px（平板电脑）

然后用一些左负边距更新间距，将模块向左拉一点。 这将为我们的标题和框阴影添加一个很好的重叠设计。

最后，向模块添加一个自定义 CSS 类，以便我们稍后可以使用一些自定义 CSS 将内容分解为列。

• CSS 类：列列表

行设置

现在更新行设置如下：

• 保证金：5vw底部

• 盒子阴影：见截图
• 框阴影水平位置：-5vw
• 框阴影垂直位置：0px
• 阴影颜色：#c5e0dc

添加第 2 行以显示帖子和类别

复制行以创建新行

在我们的第二行，我们将显示博客文章的 HTML 站点地图页面内容。 要创建第二行，请复制我们刚刚创建的包含页面的行。

使用简码更新文本模块以显示类别

然后在重复行中打开文本模块的设置并将内容替换为以下内容：

<h2>Categories</h2>

[wp_sitemap_page only="category" display_title="false"]

此简码将动态显示帖子类别。

复制文本模块以按类别显示帖子的单独标题

为了按类别显示帖子，复制包含帖子类别的文本模块并使用以下内容更新内容：

<h2>Posts by Category</h2>

复制文本模块并使用短代码更新内容以按类别列出帖子

出于设计原因，我们将把标题放在一个单独的文本模块中而不是短代码。

再复制一次刚才复制的文本模块。

然后使用新的短代码更新新的重复文本模块的内容，如下所示：

[wp_sitemap_page only="post" display_category_title_wording="false" display_title="false"]

使用 Divi 更新短代码内容设计

因为这个短代码有一个嵌套列表，我们需要以不同的方式优化它。 单击设计选项卡并更新以下内容：

• 无序列表样式位置：外
• 无序列表项缩进：0px

• 边距：0px
• 填充：3.2vw 左

然后用以下内容替换 CSS 类：

• CSS 类：flex-columns

为产品添加第 3 行

在第三行也是最后一行，我们将添加显示产品类别和所有产品的 HTML 站点地图页面内容。

重复行 #1

首先，让我们复制顶行（显示页面的行）。

更新文本模块设置以显示产品类别

然后使用以下内容更新副本的文本设置：

<h2>Product Categories</h2>

[wp_sitemap_page only="product_cat" display_title="false"]

此简码将显示产品类别。

复制文本模块以显示产品

接下来，复制刚刚创建的文本模块。

然后使用以下内容更新重复的文本设置：

<h2>Products</h2>

[wp_sitemap_page only="product" display_title="false"]

此简码将显示整个站点的所有产品。

更新行框阴影颜色

为了在部分之间进行一点分隔，我们可以更改包含我们的产品类别和产品的行的框阴影。 为此，请按如下方式更新行设置：

• 阴影颜色：#ffc077

更新页面标题

在我们忘记之前，跳到顶部并使用文本“站点地图”更新两个文本模块。 这将为我们的站点地图页面提供准确的标题。

到目前为止的结果

这是到目前为止的结果。

这种单列设计看起来真的很棒，所以请随意收工。 但是，如果您想使用多列来增强布局，请参见下文。

使用自定义 CSS 向站点地图页面内容添加多列

现在，默认布局将在单列中显示站点地图页面内容。 如果您想在台式机和平板电脑上将其分解为多列，您可以将自定义 CSS 添加到 Divi 中的代码模块。

首先，在页面底部添加代码模块（无论在哪里）。

然后将以下 CSS 代码粘贴到代码框中：

<style>
@media all and (min-width: 767px) {
  
  .flex-columns .wsp-posts-list {
    display:flex;
    flex-wrap: wrap;
  }
  .flex-columns .wsp-posts-list>li>ul {
    width: 300px;
    padding: 2% 10% 10% 5%;
  }
  .column-list .wsp-container {
    column-count: 3;
  }
  
}
</style>

此 CSS 代码段仅适用于大型平板电脑及更高版本。 该代码针对具有我们之前添加到其中的 CSS 类的文本模块。 对于具有“flex-columns”类的文本模块，按类别生成帖子的简码被分成 300px 宽的列。 具有“column-list”类的文本模块会将简码站点地图页面内容分为三列。

最后结果

看看最后的结果！

添加站点地图内容的其他方法

我们还可以使用 WordPress 小部件、Divi 模块和 WooCommerce 短代码将站点地图内容添加到站点地图页面。

使用 WordPress 小工具

WordPress 有一些标准小部件，可以显示页面、类别和产品等内容。 它们可以在 WordPress 仪表板的外观 > 小部件下找到。 如果您需要向站点地图页面添加某些内容，请随时利用使用 Divi 侧边栏模块的用户。

使用 Divi 博客模块

Divi 的博客模块带有用于显示帖子、页面、项目和产品的内置设置。 如果您采用极简主义的设计方法，您可以获得一个非常酷的站点地图页面可定制列表。

例如，我们可以添加一个新的博客模块并选择产品作为帖子类型，并为其提供足够大的帖子数量，以便我们现在可以显示我们网站上的所有产品。

然后我们可以隐藏除产品链接/标题之外的所有元素。

我们也可以对页面做同样的事情。 只需为帖子类型选择页面。

产品简码

对于 WooCommerce 产品，我们可以使用 WooCommerce 产品简码生成产品列表或产品类别列表。 产品短代码非常强大且通用，可以根据需要显示产品。 您甚至可以在 Divi 模块中使用短代码来利用内置设置。

最后的想法

使用 WP 站点地图页面插件结合 Divi 的强大功能是为您的网站生成动态 HTML 站点地图页面的一个很好的简化解决方案。 您还可以使用 Divi 模块和 WooCommerce 短代码的任意组合，轻松地向站点地图页面添加更多动态内容。 随意尝试并找到适合您需求的正确设计。

我期待在评论中收到您的来信。

干杯!