WordPress纯代码实现多层级文章目录

今天，给各位分享一下最近我上线的Wordpress多层级目录实现的方法。主要通过php代码实现自动抓取文章h2-h6标题，并做好按照标题级数自动多层级分级，在前端自动显示文章目录，并且可以做到锚点点击。之前，我有分享过文章：《WordPress纯代码实现文章索引目录优化教程》。

本文只是改进了一下其中的php代码部分，所以这里关于CSS代码及JS代码不再赘述，相关内容可以直接参考之前所写的那篇文章。

PHP相关代码

将以下代码放于主题function.php文件中

//文章目录
function article_index($content) {
$matches = array();
$ul_li = '';
$r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is';
if(is_single() && preg_match_all($r, $content, $matches)) {
        $preValue = 2;
        $hStack = new SplStack();
        foreach ($matches[1] as $key => $value) {
            $title = trim(strip_tags($matches[2][$key]));
            $content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '">' . $title . '</h'. $value . '>', $content);

            // The following part implements the hierarchy of contents table
            if(!$hStack->isEmpty()){
                if($hStack->top() == $value){
                    $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                } elseif($hStack->top() < $value){
                    $ul_li .= "<ul>\n" . '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                    $hStack->push($value);
                } elseif($hStack->top() > $value){
                    while($hStack->top() > $value){
                        $ul_li .= "</ul>\n";
                        $hStack->pop();
                    }
                    $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                }
            } else{
                $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                $hStack->push($value);
            }
        }
$content = "\n<div id=\"article-toc\" class=\"article-toc\">
\n<div class=\"toc-title\">
<p>文章目录</p>
<span class=\"toc-switch\">
<i class=\"wpcom-icon menu-item-icon\"><svg aria-hidden=\"true\"><use xlink:href=\"#icon-shangxia\"></use></svg></i><a style=\"cursor:pointer;\" class=\"toc-show-hide\" id=\"toc-hide\" title=\"show\">展开</a>
</span>
</div>
<div class=\"toc-content\"><ul id=\"toc-ul\">\n" . $ul_li . "</ul></div>
</div>\n" . $content;
}
return $content;
}
add_filter( 'the_content', 'article_index' );

切记只有这个php代码只能实现目录的展示，而样式需要参考我之前写的文章，这在前文中已经有所描述。

最后，再看下文章目录具体的样式吧。