纯代码为WordPress文章内容添加锚点目录功能 支持多级目录

WordPress是功能强大的博客程序，蜗牛789使用的就是WordPress。在平常发布的文章中，有些文章由于篇幅及内容比较多，导致文章有很长的页面，给读者带来不好的体验，那是不是通过设置锚点来为文章做个目录引导呢?当然可以实现，蜗牛说过很多次WordPress只要你想得到的功能基本都有插件，但今天蜗牛为大家介绍的并不是使用插件，只需添加两段代码就能实现。

一、锚点目录代码

我们在主题Functions.php文件中加入下面代码。

//蜗牛789分享-www.wn789.com//文章目录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><ul id=\\\"index-ul\\\">\\n\" . $ul_li . \"</ul></div>\\n\" . $content;}return $content;}add_filter( \'the_content\', \'article_index\' );

二、CSS样式代码

然后再在主题的“main.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;}

三、效果展示