WordPress文章目录

我们都知道百度百科都有个目录导航的东西，不要小看这个目录导航功能尤其在长文章中表现的非常突出，能很好的引导用户到相要看的内容区域，而且从另一个角度看去也是非常不错的，对！就是SEO。
对于使用WordPress的我们来说WordPress文章目录该如何制作呢，这也是我们今天要讲的WordPress文章目录希望大家能喜欢请把以下WordPress文章目录代码放在functions.php中。

function article_index($content) {
    $matches = array();
    $ul_li = '';
    //匹配出h2、h3标题
    $rh = "/<h[23]>(.*?)<\/h[23]>/im";
    $h2_num = 0;
    $h3_num = 0;
    //判断是否是文章页
    if(is_single()){
         if(preg_match_all($rh, $content, $matches)) {
            // 找到匹配的结果
            foreach($matches[1] as $num => $title) {
                $hx = substr($matches[0][$num], 0, 3);      //前缀，判断是h2还是h3
                $start = stripos($content, $matches[0][$num]);  //匹配每个标题字符串的起始位置
                $end = strlen($matches[0][$num]);       //匹配每个标题字符串的结束位置
                if($hx == "<h2"){
                    $h2_num += 1; //记录h2的序列，此效果请查看百度百科中的序号，如1.1、1.2中的第一位数
                    $h3_num = 0;
                    // 文章标题添加id，便于目录导航的点击定位
                    $content = substr_replace($content, '<h2 id="h2-'.$num.'">'.$title.'</h2>',$start,$end);
                    $title = preg_replace('/<.+?>/', "", $title); //将h2里面的a链接或者其他标签去除，留下文字
                    $ul_li .= '<li class="h2_nav"><a href="#h2-'.$num.'" class="tooltip" title="'.$title.'">'.$title."</a><i class=\"post_nav_dot\"></i></li>\n";
                }else if($hx == "<h3"){
                    $h3_num += 1; //记录h3的序列，此熬过请查看百度百科中的序号，如1.1、1.2中的第二位数
                    $content = substr_replace($content, '<h3 id="h3-'.$num.'">'.$title.'</h3>',$start,$end);
                    $title = preg_replace('/<.+?>/', "", $title); //将h3里面的a链接或者其他标签去除，留下文字
                    $ul_li .= '<li class="h3_nav"><a href="#h3-'.$num.'" class="tooltip" title="'.$title.'">'.$title."</a><i class=\"post_nav_dot\"></i></li>\n";
                }   
            }
        }
        // 将目录拼接到文章
        $content =  $content . "<div class=\"post_nav\"><ul class=\"post_nav_content\">\n" . $ul_li . "</ul></div>\n";
        return $content;
    }elseif(is_home){
        return $content;
    }
}
add_filter( "the_content", "article_index" );

完成以上WordPress文章目录后，自动匹配文章的h2、h3标题，生成文章目录导航非常简单，具体样式CSS呢我这里就不提供了根据自己喜欢的WordPress文章目录来设计吧。