前面一篇文章"4款WordPress文章內(nèi)容索引列表插件"我們可以使用插件來實現(xiàn)目錄索引的效果。鑒于WP程序的負載很大，能少使用插件就少使用。那有沒有不使用插件可以實現(xiàn)這樣的索引功能能？于是我找著找著，終于找到一個博主分享的這樣的無插件實現(xiàn)內(nèi)容索引效果。

第一步，把下面的代碼放到模板所在的function.php文件里

function article_index($content) {

$matches = array();

$ul_li = '';

$r = "/<h3>([^<]+)</h3>/im";

if(preg_match_all($r, $content, $matches)) {

foreach($matches[1] as $num => $title) {

$content = str_replace($matches[0][$num], '<h4 id="title-'.$num.'">'.$title.'</h4>', $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" );

第二步，在我們內(nèi)容編輯的時候，切換到HTML編輯器，然后在需要索引的標題用H3標注，具體的用H幾要和上面的定義FUNCTION對應，默認的是H3。然后在顯示的時候會自動抓取。

為了達到美化的效果，需要用到CSS，具體的還是要根據(jù)需求調(diào)整。

#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;

}

在后來我又發(fā)現(xiàn)還有一款jQuery Table of Contents插件也是可以使用的。建議還是少用插件。

更多信息請查看IT技術(shù)專欄