前面一篇文章"4款WordPress文章内容索引列表插件"我们可以使用插件来实现目录索引的效果。鉴于WP程序的负载很大，能少使用插件就少使用。那有没有不使用插件可以实现这样的索引功能能？于是我找着找着，终于找到一个博主分享的这样的无插件实现内容索引效果。

第一步，把下面的代码放到模板所在的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" );

第二步，在我们内容编辑的时候，切换到HTML编辑器，然后在需要索引的标题用H3标注，具体的用H几要和上面的定义FUNCTION对应，默认的是H3。然后在显示的时候会自动抓取。

为了达到美化的效果，需要用到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;

}

在后来我又发现还有一款jQuery Table of Contents插件也是可以使用的。建议还是少用插件。

更多信息请查看IT技术专栏