昊天SEO

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

如果依靠大量的插件实现各种功能,会增加服务器负担,拖慢页面打开速度,增加网站的安全隐患。

能实现内容目录索引的插件主要有:Auto Anchor List、Content Index for WordPress、WP-TOC、Seo Friendly Table of Contents等。用法大同小异。

今天给大家说一下WordPress无插件实现内容目录索引。

步骤一

把下面的代码放到模板所在的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;
}

本文地址官网    新乡网站建设,seo

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址