去過百度百科的人可能都會注意到，幾乎每篇文章的開頭都會有一個目錄，點擊這個目錄中的標題可以快速到達文章中的具體內容位置，如：露兜。這樣可以方便讀者在篇幅較長的文章中找到他們想看的內容，這個也就相當于詞典中的索引功能了。
- 原文來源：露兜博客
- 百度百科：給文章添加一個導航目錄
本文所介紹的插件實現的就是這樣的一個功能，為文章設置了一個清晰的內容導航，讀者可以在閱讀之前知道這篇文章的大概意思，點擊可以到達他們想看的部分，而且可以增加些內鏈、錨文本和關鍵詞，對SEO也是很有幫助的。
推薦使用插件
文章目錄免插件代碼
其實現這樣的一個功能還是比較簡單的，也就是在文章內容中插進標題標簽，然后弄成目錄就是了，下面是我寫的一個簡單的代碼，用文本編輯器打開當前主題目錄下的functions.php，將以下代碼放到?<?php下面就可以（記得用UTF-8編碼保存，否則中文會亂碼）:
function article_index($content) {
/**
* 名稱：文章目錄插件
* 作者：露兜
* 博客：https://www.ludou.org/
* 最后修改：2015年3月20日
*/
$matches = array();
$ul_li = '';
$r = "/<h3>([^<]+)<\/h3>/im";
if(is_singular() && preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $num => $title) {
$title = trim(strip_tags($title));
$content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content);
$ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id="article-index">
<strong>文章目錄</strong>
<ul id="index-ul">\n" . $ul_li . "</ul>
</div>\n" . $content;
}
return $content;
}
add_filter( 'the_content', 'article_index' );
?使用說明
在編輯文章的時候，切換到HTML模式，將需要添加到目錄中的標題用<h3>和</h3>括起來就可以了，如<h3>我是索引標題</h3>。當然你也可以用其他標簽，如<h1>，<p>等，將以上代碼第12和17行中的h3改成你自己的標簽名稱就可以了。
上面這段代碼只是在文章顯示的時候插入文章目錄，并不會修改你的文章內容。以上代碼也不包括樣式美化代碼，所以只添加以上代碼，文章目錄看起來一片混亂，所以你得自己添加一些css代碼來美化一下這個目錄。如果你不會css，可以用我寫的，將以下css代碼放到主題目錄下的style.css中就可以了（并不是每個網站都適用）：
#article-index {-moz-border-radius: 6px 6px 6px 6px;border: 1px solid #DEDFE1;float: right;margin: 0 0 15px 15px;padding: 0 6px;width: 200px;line-height: 23px;
}
#article-index strong {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;
}
#index-ul {margin: 0;padding-bottom: 10px;
}
#index-ul li {background: none repeat scroll 0 0 transparent;list-style-type: disc;padding: 0;margin-left: 20px;
}支持多級目錄
以上代碼的功能比較單一，只有單級目錄，不能實現多層級的復雜而完善的索引目錄功能。網友12READS對以上代碼做了修改，據稱可以支持多級目錄，暫未測試，需要的可以看看
文章目錄插件
如果你需要這些功能可以試試這以下這幾個插件，使用也都比較簡單：(以下插件長時間未更新)
-- 完 --
網友 12READS在評論中給的代碼：
改了下代碼，現在可以顯示下一級了，有需要的請拿走哦：
function article_index($content) {
$matches = array();
$ul_li = '';
$r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is';
if(is_single() && preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $key => $value) {
$title = trim(strip_tags($matches[2][$key]));
$content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '">'.$title.'</h2>', $content);
$ul_li .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-index\">
<strong>文章目錄</strong>
<ol id=\"index-ul\">\n" . $ul_li . "</ol>
</div>\n" . $content;
}
return $content;
}
add_filter( 'the_content', 'article_index' );測試有效（記得加CSS）
推薦代碼
文中露兜給的代碼我用是報錯了，我用評論中給的代碼替換了一部分代碼：
//文章目錄：http://www.kartiktrivedi.com/4720.html
function article_index($content) {
$matches = array();
$ul_li = '';
$r = "/<h3>([^<]+)<\/h3>/im";
if(is_singular() && preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $num => $title) {
$title = trim(strip_tags($title));
$content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content);
$ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-index\">
<strong>文章目錄</strong>
<ol id=\"index-ul\">\n" . $ul_li . "</ol>
</div>\n" . $content;
}
return $content;
}
add_filter( 'the_content', 'article_index' );如何使用
將你需要的標題用H3代碼包裹，即可自動在文章頁頂部出現目錄結構。
