去過(guò)百度百科的人可能都會(huì)注意到，幾乎每篇文章的開(kāi)頭都會(huì)有一個(gè)目錄，點(diǎn)擊這個(gè)目錄中的標(biāo)題可以快速到達(dá)文章中的具體內(nèi)容位置，如：露兜。這樣可以方便讀者在篇幅較長(zhǎng)的文章中找到他們想看的內(nèi)容，這個(gè)也就相當(dāng)于詞典中的索引功能了。
- 原文來(lái)源：露兜博客
- 百度百科：給文章添加一個(gè)導(dǎo)航目錄
本文所介紹的插件實(shí)現(xiàn)的就是這樣的一個(gè)功能，為文章設(shè)置了一個(gè)清晰的內(nèi)容導(dǎo)航，讀者可以在閱讀之前知道這篇文章的大概意思，點(diǎn)擊可以到達(dá)他們想看的部分，而且可以增加些內(nèi)鏈、錨文本和關(guān)鍵詞，對(duì)SEO也是很有幫助的。
推薦使用插件
文章目錄免插件代碼
其實(shí)現(xiàn)這樣的一個(gè)功能還是比較簡(jiǎn)單的，也就是在文章內(nèi)容中插進(jìn)標(biāo)題標(biāo)簽，然后弄成目錄就是了，下面是我寫的一個(gè)簡(jiǎn)單的代碼，用文本編輯器打開(kāi)當(dāng)前主題目錄下的functions.php，將以下代碼放到?<?php下面就可以（記得用UTF-8編碼保存，否則中文會(huì)亂碼）:
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' );
?使用說(shuō)明
在編輯文章的時(shí)候，切換到HTML模式，將需要添加到目錄中的標(biāo)題用<h3>和</h3>括起來(lái)就可以了，如<h3>我是索引標(biāo)題</h3>。當(dāng)然你也可以用其他標(biāo)簽，如<h1>，<p>等，將以上代碼第12和17行中的h3改成你自己的標(biāo)簽名稱就可以了。
上面這段代碼只是在文章顯示的時(shí)候插入文章目錄，并不會(huì)修改你的文章內(nèi)容。以上代碼也不包括樣式美化代碼，所以只添加以上代碼，文章目錄看起來(lái)一片混亂，所以你得自己添加一些css代碼來(lái)美化一下這個(gè)目錄。如果你不會(huì)css，可以用我寫的，將以下css代碼放到主題目錄下的style.css中就可以了（并不是每個(gè)網(wǎng)站都適用）：
#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;
}支持多級(jí)目錄
以上代碼的功能比較單一，只有單級(jí)目錄，不能實(shí)現(xiàn)多層級(jí)的復(fù)雜而完善的索引目錄功能。網(wǎng)友12READS對(duì)以上代碼做了修改，據(jù)稱可以支持多級(jí)目錄，暫未測(cè)試，需要的可以看看
文章目錄插件
如果你需要這些功能可以試試這以下這幾個(gè)插件，使用也都比較簡(jiǎn)單：(以下插件長(zhǎng)時(shí)間未更新)
-- 完 --
網(wǎng)友 12READS在評(píng)論中給的代碼：
改了下代碼，現(xiàn)在可以顯示下一級(jí)了，有需要的請(qǐng)拿走哦：
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' );測(cè)試有效（記得加CSS）
推薦代碼
文中露兜給的代碼我用是報(bào)錯(cuò)了，我用評(píng)論中給的代碼替換了一部分代碼：
//文章目錄：http://m.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' );如何使用
將你需要的標(biāo)題用H3代碼包裹，即可自動(dòng)在文章頁(yè)頂部出現(xiàn)目錄結(jié)構(gòu)。
