WordPress文章目录功能

天外飘仙

在浏览百度知道的时候，你是否发现右上角有一列目录，点击之后直接跳转到本页相对应的位置，如果你的Wordpress文章博文目录比较清晰的话是不是很容易就能让访客找到自己感兴趣额的东西呢，这是肯定的哇，但是怎么实现呢，下面Themeidea就教你实现此功能
1，将下面的代码写入functions.php

1. function article_index($content) {
   
2.     $matches = array();
   
3.     $ul_li = '';
   
4.     $r = "/<h3>([^<]+)<\/h3>/im";
   
5.     if(preg_match_all($r, $content, $matches)) {
   
6.         foreach($matches[1] as $num => $title) {
   
7.             $content = str_replace($matches[0][$num], '<h2 id="title-'.$num.'">'.$title.'</h2>', $content);
   
8.             $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
   
9.         }
   
10.         $content = "\n<div id="article-index">
    
11.                 <b>[文章目录]</b>
    
12.                 <ul id="index-ul">\n" . $ul_li . "</ul>
    
13.             </div>\n" . $content;
    
14.     }
    
15.     return $content;
    
16. }
    
17. add_filter( "the_content", "article_index" );

复制代码

2，使用CSS对其进行美化

1. #article-index {background:#F7F7F7;-moz-border-radius: 6px 6px 6px 6px;border: 1px solid #DEDFE1;float: right;margin: 5px 0 5px 15px;padding: 0 6px;width: 280px;line-height: 24px;}
   
2. #article-index b {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;}
   
3. #index-ul {margin: 0;padding-bottom: 5px;}
   
4. #index-ul li {background: none repeat scroll 0 0 transparent;list-style-type: disc;padding: 0;margin-top: 5px;margin-bottom: 5px;margin-left: 20px;}
   
5. #index-ul a{text-decoration:none;}

复制代码

缺点：
只支持h3标签
文章分页启用以后，只能在第一页显示
不能实现分级目录