文章目錄是 WordPress 文章的必要組成部分，尤其是帶有許多標(biāo)題的長(zhǎng)文章。創(chuàng)建目錄有助于讀者輕松快速地遵循和掌握想法。此外，它還可以幫助您在文章中添加更多關(guān)鍵字，這對(duì) SEO 非常有利。
創(chuàng)建文章目錄的方法
有兩種方法可以在 WordPress 文章中創(chuàng)建目錄。
第一種方法是使用插件。這對(duì) WordPress 的代碼專家和新手來說都是簡(jiǎn)單、快速且免費(fèi)的。
第二個(gè)是使用代碼。這使您可以自定義目錄，即使是最小的細(xì)節(jié)，但對(duì)于非編碼人員來說卻非常復(fù)雜。我們將在這篇文章中寫下創(chuàng)建目錄的代碼，只需復(fù)制并粘貼它！
讓我們先來看看使用插件創(chuàng)建目錄的過程：
方法1：使用插件創(chuàng)建目錄
第1步：創(chuàng)建和設(shè)置目錄
有許多免費(fèi)插件可用于在 WordPress 中創(chuàng)建目錄，比如 4個(gè)不錯(cuò)的WordPress文章目錄插件。在這里，我們選擇LuckyWP Table of Contents是因?yàn)樗鼮槲覀兲峁┝烁叨瓤啥ㄖ魄颐烙^的結(jié)果。但是，這個(gè)插件有很多設(shè)置，一開始可能會(huì)讓你感到困惑。因此，請(qǐng)按照我們的說明來節(jié)省您的時(shí)間。
LuckyWP Table of Contents 是一個(gè)免費(fèi)插件，可在wordpress.org 上獲得。您只需在后臺(tái)上安裝并激活插件。
然后，轉(zhuǎn)到設(shè)置 > Table of Contents，您將看到設(shè)置屏幕。
這里有4個(gè)標(biāo)簽需要注意：常規(guī) General、外觀 Appearance、自動(dòng)插入 Auto Insert、處理標(biāo)題 Processing headings。它們是用于設(shè)置和自定義目錄顯示的選項(xiàng)卡。雜項(xiàng) 是具有復(fù)雜且不重要的設(shè)置的選項(xiàng)卡，因此您可以忽略它。
在此步驟中，您只需在“常規(guī)”選項(xiàng)卡上工作。
本節(jié)有很多設(shè)置。為了節(jié)省時(shí)間，您應(yīng)該關(guān)注以下重要部分：
- 記數(shù)：標(biāo)題的序號(hào)。您應(yīng)該從以下選項(xiàng)中選擇一個(gè)：無編號(hào)、十進(jìn)制數(shù)字（嵌套）、羅馬數(shù)字（嵌套）。
我選擇十進(jìn)制數(shù)字（嵌套）Decimal numbers (nested)，所以我的 TOC 看起來像這樣：
- 標(biāo)題：目錄的標(biāo)題。默認(rèn)為內(nèi)容。
讓我們將其余設(shè)置保留為默認(rèn)值，因?yàn)檫@不會(huì)對(duì)您的 TOC 產(chǎn)生太大影響。
單擊保存更改以完成。至此，我們已經(jīng)完成了 TOC 的常規(guī)設(shè)置。讓我們繼續(xù)下一步。
第2步：在文章中插入目錄
有兩種方法可以在文章中插入目錄：自動(dòng)插入和手動(dòng)插入。
自動(dòng)插入意味著自動(dòng)在所有文章中添加目錄。這種方式可以節(jié)省大量時(shí)間和精力，但是如果您只想在某些文章中插入目錄，則行不通。
手動(dòng)插入意味著如果您想在文章中包含目錄，您需要自己將其插入到該文章中。這可能需要更多時(shí)間。
我們將詳細(xì)介紹這兩種方法。您可以選擇適合您的選項(xiàng)。
自動(dòng)插入
轉(zhuǎn)到選項(xiàng)卡Auto Insert > Enable。該插件默認(rèn)選擇Post（文章）。如果您不想要它，您可以更改為其他文章類型。
在“位置”部分中，選擇要插入目錄的位置。不要忘記單擊保存更改！
至此，所選文章類型中的所有文章都有目錄。
手動(dòng)插入
手動(dòng)插入聽起來很復(fù)雜，但實(shí)際上非常簡(jiǎn)單。轉(zhuǎn)到處理標(biāo)題選項(xiàng)卡。在那里，也選擇文章類型，然后點(diǎn)擊保存更改。
然后，轉(zhuǎn)到您選擇的文章類型的文章的編輯器，單擊啟用目錄。
現(xiàn)在，您的 TOC 基本完成。此外，我們甚至可以設(shè)置它的顏色、字體、項(xiàng)目大小……以使其更漂亮。按照下一步操作。
第3步：自定義目錄顯示
還有兩種方法可以自定義目錄顯示：一是在所有文章中自定義，二是在每個(gè)文章中單獨(dú)自定義。
自定義所有文章的目錄
您可以通過轉(zhuǎn)到“外觀”選項(xiàng)卡來詳細(xì)自定義所有目錄。有許多設(shè)置，例如標(biāo)題字體大小、項(xiàng)目字體大小、鏈接顏色……
無需注意所有設(shè)置，只需專注于您想要的。
例如，我不喜歡藍(lán)色和當(dāng)前標(biāo)題字體大小。我想將顏色更改為深灰色和較小的尺寸，以便它們?cè)谖恼轮锌雌饋砀谩Ｒ虼耍覍⒆远x標(biāo)題字體大小、項(xiàng)目字體大小、鏈接顏色并保留如下圖所示的其余設(shè)置：
自定義后我的 TOC 如下所示：
現(xiàn)在，它看起來更加和諧。
但是，也許您希望在不同的文章中有不同的目錄，只需向下滾動(dòng)以閱讀如何在每個(gè)文章中自定義它。
自定義每篇文章的目錄
這項(xiàng)工作也簡(jiǎn)單快捷。首先，轉(zhuǎn)到文章編輯器，選擇“目錄”>“自定義”。
出現(xiàn)自定義目錄彈出窗口。你會(huì)看到一些熟悉的標(biāo)簽，如上。它們是常規(guī)General、外觀 Appearance和雜項(xiàng)Misc。.
轉(zhuǎn)到外觀選項(xiàng)卡并更改一些設(shè)置，同樣在插件的儀表板上進(jìn)行編輯。點(diǎn)擊保存完成！
現(xiàn)在，讓我們看看自定義目錄的最終結(jié)果。
這兩種自定義方法都帶來了非常漂亮和詳細(xì)的目錄。所以你可以自由選擇你喜歡的方式。
現(xiàn)在，讓我們看看如何使用代碼來創(chuàng)建目錄。
方法2：使用代碼創(chuàng)建目錄
第1步 ：為文章創(chuàng)建目錄
轉(zhuǎn)到外觀>主題>編輯器>functions.php。
然后，將以下代碼添加到文件中functions.php以將目錄插入文章。
function wpkj_create_toc($html) {
$toc = '';
if (is_single()) {
if (!$html) return $html;
$dom = new 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">
table of contents
</div>
<ul class="toc">';
$h2_status = 0;
$h3_status = 0;
$i = 1;
foreach($dom->getElementsByTagName('*') as $element) {
if($element->tagName == 'h2') {
if($h3_status){
$toc .= '</ul>';
$h3_status = 0;
}
if($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') {
if(!$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++;
}
}
if($h3_status){
$toc .= '</ul>';
}
if($h2_status){
$toc .= '</li>';
}
$toc .= '</ul></div>';
$html = $dom->saveHTML();
}
return $toc . $html;
}
add_filter('the_content', 'wpkj_create_toc');注意：此代碼僅將 2 個(gè)標(biāo)題級(jí)別 h2、h3添加到目錄中。
解釋：
| 代碼 | 解釋 |
| 函數(shù)$toc = ‘<div class=”toc-bound”> <div class=”toc-ctr”> table of contents </div> <ul class=”toc”> | 向目錄添加標(biāo)題并將其顯示在此之上。您可以將文本“目錄”替換為您希望在標(biāo)題中出現(xiàn)的任何內(nèi)容。 |
| 變量h2, h3 | 標(biāo)題級(jí)別插入到目錄中。如果您想更換H2 ，H3具有超視距呃標(biāo)簽，改變整個(gè)參數(shù)像H2 ，H3為標(biāo)記你的代碼需要。 |
| 函數(shù) $toc .= ‘<li><a href=”‘ . get_the_permalink() . ‘#toc-‘ . $i . ‘”>’ . $element->textContent . ‘</a>’; | 單擊后立即創(chuàng)建指向文章中相應(yīng)部分的跳轉(zhuǎn)鏈接。 |
| 函數(shù) if($h3_status){ $toc .= ‘</ul>’; } if($h2_status){ $toc .= ‘</li>’; } $toc .= ‘</ul></div>’; $html = $dom->saveHTML(); } return $toc . $html; | 在目錄中的每個(gè)標(biāo)題前添加項(xiàng)目符號(hào)。 |
插入代碼后不要忘記單擊更新文件。
然后，結(jié)果如下：
當(dāng)然，我們需要稍微設(shè)計(jì)一下。
第2步：使用 CSS 進(jìn)行自定義
通過CSS定制，訪問主題編輯器的style.css文件。在那里，您需要插入您自己編寫的代碼以根據(jù)需要自定義 TOC。
比如我想自定義目錄的顏色和強(qiáng)度，所以插入如下代碼：
.toc-bound {
background-color: #619162;
color: #fff;
}
.toc-ctr {
border-bottom: 1px solid #fff;
padding: 10px;
font-size: 20px;
text-transform: uppercase;
}
ul.toc {
list-style-type: none;
padding: 10px;
padding-left: 25px;
}
.toc li a {
color: #fff;
}
ul.toc > li {
font-size: 18px;
font-weight: 700;
padding: 5px 0;
}
ul.toc-sub {
list-style-type: none;
}
ul.toc-sub li a {
font-weight: 200;
}不要忘記單擊更新文件以保存它。
最終結(jié)果如下所示：
總之，使用插件和編碼都為我們提供了相同的漂亮目錄。只要您滿意，您可以選擇任何方式。
總結(jié)
如您所見，在 WordPress 文章中創(chuàng)建目錄并不復(fù)雜。按照我們的教程，您將擁有漂亮的目錄。一個(gè)好的目錄讓你的文章更清晰、更專業(yè)。因此，您的觀眾在閱讀您的博客時(shí)可能會(huì)有更友好的體驗(yàn)。
拓展閱讀：4個(gè)不錯(cuò)的WordPress文章目錄插件
目錄插件不是應(yīng)該懸浮么