如何在 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 短代碼的任意組合，輕鬆地向站點地圖頁面添加更多動態內容。 隨意嘗試並找到適合您需求的正確設計。

我期待在評論中收到您的來信。

乾杯!