wordpress中无插件实现内容目录索引

wordpress中无插件实现内容目录索引

      如果依靠大量的插件实现各种功能，会增加服务器负担，拖慢页面打开速度，增加网站的安全隐患。
　　能实现内容目录索引的插件主要有：Auto Anchor List、Content Index for WordPress、WP-TOC、seo Friendly Table of Contents等。用法大同小异。
　　今天给大家说一下WordPress无插件实现内容目录索引。
　　工具/原料
　　wordpress模板文件。
　　富文本编辑器，推荐editplus.
　　方法/步骤
　　1
　　把下面的代码放到模板所在的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" );
　　2
　　在我们内容编辑的时候，切换到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;
　　}