如何在 WordPress 帖子中創建目錄

目錄是 WordPress 帖子的必要組成部分，尤其是帶有許多標題的長帖子。 創建目錄有助於讀者輕鬆快速地遵循和掌握想法。 此外，它還可以幫助您在帖子中添加更多關鍵字，這對 SEO 非常有利。

創建目錄的方法

有兩種方法可以在 WordPress 帖子中創建目錄。

第一種方法是使用插件。 這對 WordPress 的代碼專家和新手來說都是簡單、快速且免費的。

第二個是使用代碼。 這使您可以自定義目錄，即使是最小的細節，但對於非編碼人員來說卻非常複雜。 我們將在這篇文章中寫下創建目錄的代碼。 只需複制並粘貼它！

讓我們先來看看使用插件創建目錄的過程：

方法一：使用插件創建目錄

步驟 1：為目錄創建和設置目錄

有許多免費插件可用於在 WordPress 中創建目錄。 我們選擇LuckyWP 目錄是因為它為我們提供了高度可定制且美觀的結果。 但是，這個插件有很多設置，一開始可能會讓你感到困惑。 因此，請按照我們的說明來節省您的時間。

LuckyWP 目錄是一個免費插件，可在 wordpress.org 上獲得。 您只需在Dashboard上安裝並激活插件。

然後，轉到Settings > Table of Contents ，您將看到設置屏幕。

這裡有4個標籤需要注意： General、Appearance、Auto Insert、Processing headings 。 它們是用於設置和自定義目錄顯示的選項卡。 雜項是具有復雜且不重要的設置的選項卡，因此您可以忽略它。

在此步驟中，您只需在“常規”選項卡上工作。

本節有很多設置。 為了節省時間，您應該關注以下重要部分：

• 記數：要號的標題。 您應該從以下選項中選擇一個：無編號、十進制數字（嵌套）、羅馬數字（嵌套） 。

我選擇Decimal numbers (nested) ，所以我的 TOC 看起來像這樣：

• 標題：目錄的標題。 默認為內容。

讓我們將其餘設置保留為默認值，因為這不會對您的 TOC 產生太大影響。

單擊保存更改以完成。 所以，我們已經完成了 TOC 的一般設置。 讓我們繼續下一步。

第 2 步：在帖子中插入目錄

有兩種方法可以在帖子中插入目錄：自動插入和手動插入。

自動插入意味著自動在所有帖子中添加目錄。 這種方式可以節省大量時間和精力，但是如果您只想在某些帖子中插入目錄，則行不通。

手動插入意味著如果您想在帖子中包含目錄，您需要自己將其插入到該帖子中。 這可能需要更多時間並且可能會出錯。

我們將詳細介紹這兩種方法。 您可以選擇適合您的選項。

自動插入

轉到選項卡Auto Insert > Enable 。 該插件默認選擇Post 。 如果您不想要它，您可以更改為其他帖子類型。

在“位置”部分，選擇要插入目錄的位置。 不要忘記單擊保存更改！

因此，所選帖子類型中的所有帖子都有目錄。

手動插入

手動插入聽起來很複雜，但實際上很簡單。 轉到處理標題選項卡。 在那裡，也選擇帖子類型，然後點擊Save Changes 。

然後，轉到您選擇的帖子類型中帖子的帖子編輯器，單擊啟用目錄。

現在，您的 TOC 已基本完成。 此外，我們甚至可以設置它的顏色、字體、項目大小……以使其更漂亮。 按照下一步操作。

步驟 3：自定義目錄顯示

自定義目錄顯示也有兩種方法：一次在所有帖子中自定義，並在每個帖子中單獨自定義。

自定義所有帖子中的目錄

您可以通過轉到“外觀”選項卡來詳細自定義所有目錄。 有許多設置，例如標題字體大小、項目字體大小、鏈接顏色……

無需注意所有設置，只需專注於您想要的。

例如，我不喜歡藍色和當前標題字體大小。 我想將顏色更改為深灰色和較小的尺寸，以便它們在帖子中看起來更好。 因此，我將自定義標題字體大小、項目字體大小、鏈接顏色並保留如下圖所示的其餘設置：

自定義後我的 TOC 如下所示：

現在，它看起來更加和諧。

但是，也許您希望在不同的帖子中有不同的目錄，只需向下滾動以閱讀如何在每個帖子中對其進行自定義。

自定義每篇文章的目錄

這項工作也簡單快捷。 首先，轉到帖子編輯器，選擇“目錄”>“自定義” 。

出現自定義目錄彈出窗口。 你會看到一些熟悉的標籤，如上。 它們是General、Appearance和Misc。 .

轉到外觀選項卡並更改一些設置，同樣在插件的儀表板上進行編輯。 點擊保存完成！

現在，讓我們看看自定義目錄的最終結果。

這兩種自定義方法都帶來了非常漂亮和詳細的目錄。 所以你可以自由選擇你喜歡的方式。

現在，讓我們來看看如何使用代碼來創建目錄。

方法 2：使用代碼創建目錄。

步驟 1：為帖子創建目錄

轉到外觀>主題>編輯器>functions.php 。

然後，將以下代碼添加到文件functions.php以將目錄插入帖子。

注意：此代碼僅將 2 個標題級別添加到目錄中。

 函數 create_toc($html) {
    $toc = '';
    如果（is_single（））{
        如果 (!$html) 返回 $html;
        $dom = 新的 DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                目錄
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($element->tagName == 'h2') {
                如果（$h3_status）{
                    $toc .='</ul>';
                    $h3_status = 0;
                    }
                 如果（$h2_status）{
                    $toc .='</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent 。 '</a>';
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                如果（！$h3_status）{
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent 。 '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        如果（$h3_status）{
            $toc .='</ul>';
        }
        如果（$h2_status）{
            $toc .='</li>';
        }
        $toc .='</ul></div>';
        $html = $dom->saveHTML();
    }
    返回 $toc 。 $html;
}
add_filter('the_content', 'create_toc');

解釋：

插入代碼後不要忘記單擊更新文件。

然後，這是結果：

當然，我們需要稍微設計一下。 我們將使用 CSS——所有程序員最喜歡的工具。

第 2 步：使用 CSS 進行自定義

要通過 CSS 自定義，請轉到主題編輯器中的文件style.css 。 在那裡，您需要插入您自己編寫的代碼以根據需要自定義 TOC。

比如我想自定義目錄的顏色和強度，所以插入如下代碼：

 .toc 綁定 {
    背景色：#619162；
    顏色：#fff;
}
.toc-ctr {
    邊框底部：1px 實心 #fff;
    填充：10px；
    字體大小：20px；
    文本轉換：大寫；
}
ul.toc {
    列表樣式類型：無；
    填充：10px；
    左邊距：25px；
}
.toc li a {
    顏色：#fff;
}
ul.toc > li {
    字體大小：18px；
    字體粗細：700；
    填充：5px 0;
}
ul.toc-sub {
    列表樣式類型：無；
}
ul.toc-sub li a {
    字體粗細：200；
}

不要忘記單擊更新文件以保存它。

最終結果如下所示：

總之，使用插件和編碼都為我們提供了相同的漂亮目錄。 只要您滿意，您可以選擇任何選項。

最後的話

如您所見，在 WordPress 帖子中創建目錄並不復雜。 按照我們的教程，您將擁有漂亮的目錄。 一個好的目錄讓你的帖子更清晰、更專業。 因此，您的觀眾在閱讀您的博客時可能會有更友好的體驗。

如果您有任何問題，請在下面的評論框中提出。