WordPress开发:免插件为H级标题添加文章目录

微饭君公众号

心血来潮心优化了一下WordPress,免插件给文章的二级标题添加文章目录,代码来自露兜的文章目录插件,也就是很简单的几个代码,顺便再发下经过微饭改善过的文章目录CSS样式,瞬间感觉微饭的强迫症又得到治疗!

文章目录的作用

让文章结构更加清晰化,让读者能轻松的获得文章的段落结构,哪个段落是自己急需的,并提供导航链接直接跳转到该段落,能提高用户体验度,微饭就一直在努力。文章目录还能给文章添加锚链接,对SEO也是相当有帮助的。

代码实现方法

将以下代码放到模板函数 functions.php<?php 下面即可:

注:代码里面的H2为你经常用的文章H1、H2、H3等标题,如果用的H3比较多,就将代码里面的H2改为H3即可。

function article_index($content) {
   /**
    * 名称:文章目录插件
    * 作者:露兜
    * 博客:http://www.ludou.org/
    * 修改:微饭 
    * 网站:Http://www.weeiy.com/
    * 最后修改:2015年3月21日
    */

   $matches = array();
   $ul_li = '';

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

   if(is_singular() && preg_match_all($r, $content, $matches)) {
      foreach($matches[1] as $num => $title) {
         $title = trim(strip_tags($title));
         $content = str_replace($matches[0][$num], '<h2 id="title-'.$num.'">'.$title.'</h2>', $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' );

请将以下CSS代码加入你的 style.css 文件中

/* 文章目录CSS 分享自:www.weeiy.com */
#article-index {z-index: 10;
float: right;
min-width: 180px;
max-width: 200px;
color: #999;
margin: 0 0 10px 10px;
padding: 10px 10px 0px 10px;
border: 1px solid #ddd;
background: #fff;}
#article-index b {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;color: #0196e3;
text-align: center;}
#index-ul {margin: 0;padding-bottom: 5px;padding-left: 1px;}
#index-ul li {background: none repeat scroll 0 0 transparent;
list-style-type: square;
padding: 0;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 20px;
border-bottom: 0;}
#index-ul a{text-decoration:none;}

 使用说明

在编辑文章的时候,切换到HTML模式,将需要添加到目录中的标题用<h2></h2>括起来就可以了,如<h2>我是索引标题</h2>。当然你也可以用其他标签,如<h1><p>等,将以上代码中的h2改成你自己的标签名称就可以了。CSS可以根据自己WordPress博客的模板进行改进,当然微饭提供的这个CSS也能适应大部分自适应主题的需要。

需要更强大功能

本文章提供的代码仅提供一次嵌套,也就只能嵌套一个级别的标题, h2 h3 不能同时嵌套,需要更强大的插件的话,可以尝试使用以下微饭推荐的文章目录插件:

发表评论

相关文章