WordPress文章目录插件

文章目录免插件的简单实现方法

其实现这样的一个功能还是比较简单的,也就是在文章内容中插进标题标签,然后弄成目录就是了,下面是我写的一个简单的代码,用文本编辑器打开当前主题目录下的functions.php
,将以下代码放到 <?php 下面就可以(记得用UTF-8编码保存,否则中文会乱码):

  1. function article_index($content) {  
  2.    /** 
  3.     * 名称:文章目录插件 
  4.     * 作者:露兜 
  5.     * 博客:http://www.ludou.org/ 
  6.     * 最后修改:2015年3月20日 
  7.     */  
  8.   
  9.    $matches = array();  
  10.    $ul_li = '';  
  11.   
  12.    $r = "/<h3>([^<]+)<\/h3>/im";  
  13.   
  14.    if(is_singular() && preg_match_all($r$content$matches)) {  
  15.       foreach($matches[1] as $num => $title) {  
  16.          $title = trim(strip_tags($title));  
  17.          $content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content);  
  18.          $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";  
  19.       }  
  20.   
  21.       $content = "\n<div id=\"article-index\"> 
  22.                      <strong>文章目录</strong> 
  23.                      <ul id=\"index-ul\">\n" . $ul_li . "</ul> 
  24.                   </div>\n" . $content;  
  25.    }  
  26.   
  27.    return $content;  
  28. }  
  29.   
  30. add_filter( 'the_content', 'article_index' );  

使用说明

在编辑文章的时候,切换到HTML模式,将需要添加到目录中的标题用<h3></h3>括起来就可以了,如<h3>我是索引标题</h3>。当然你也可以用其他标签,如<h1><p>等,将以上代码第12和17行中的h3改成你自己的标签名称就可以了。
上面这段代码只是在文章显示的时候插入文章目录,并不会修改你的文章内容。以上代码也不包括样式美化代码,所以只添加以上代码,文章目录看起来一篇混乱,所以你得自己添加一些css代码来美化一下这个目录。如果你不会css,可以用我写的,将以下css代码放到主题目录下的style.css中就可以了(并不是每个网站都适用):

  1. #article-index {  
  2.     -moz-border-radius: 6px 6px 6px 6px;  
  3.     border1px solid #DEDFE1;  
  4.     floatrightright;  
  5.     margin: 0 0 15px 15px;  
  6.     padding: 0 6px;  
  7.     width200px;  
  8.     line-height23px;  
  9. }  
  10. #article-index strong {  
  11.     border-bottom1px dashed #DDDDDD;  
  12.     displayblock;  
  13.     line-height30px;  
  14.     padding: 0 4px;  
  15. }  
  16. #index-ul {  
  17.     margin: 0;  
  18.     padding-bottom10px;  
  19. }  
  20. #index-ul li {  
  21.     backgroundnone repeat scroll 0 0 transparent;  
  22.     list-style-typedisc;  
  23.     padding: 0;  
  24.     margin-left20px;  
  25. }