WordPress 多级文章目录插件

去过百度百科的人可能都会注意到，几乎每篇文章的开头都会有一个目录，点击这个目录中的标题可以快速到达文章中的具体内容位置，如：露兜。这样可以方便读者在篇幅较长的文章中找到他们想看的内容，这个也就相当于词典中的索引功能了。本文所介绍的插件实现的就是这样的一个功能，为文章设置了一个清晰的内容导航，读者可以在阅读之前知道这篇文章的大概意思，点击可以到达他们想看的部分，而且可以增加些内链、锚文本和关键词，对SEO也是很有帮助的。具体效果见本文右侧的文章目录。

多级文章目录免插件代码

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

// ------文章目录插件start------
/**
 * 名称：文章目录插件
 * 最后修改：2020年5月
 */

// 构建多级目录
function buildDirectory($titleIndexArr, $titleContentArr,&$index,&$html)
{
    $size = sizeof($titleIndexArr);
    $flag = $index == 0;
    $html .= $flag ? '
' : '
';
    while ($index < $size) {
        $title = trim(strip_tags($titleContentArr[$index])); // 标题内容
        $h = $titleIndexArr[$index]; // 几级标题
        $html .= '
' . $title . "
";
        if ($index == $size - 1) { //最后一个
            $index++;
            break;
        }
        $next_h = $titleIndexArr[++$index]; // 下个标题是几级标题
        if ($h < $next_h) { // 子标题递归
            buildDirectory($titleIndexArr, $titleContentArr,$index,$html);
            if ($index >= $size || $h > $titleIndexArr[$index]) {
                break;
            }
        } else if ($h > $next_h) {
            break;
        }
    }
    $html .= $flag ? '
' : '';
}

function article_index($content)
{
    $html = '';
    $matches = array();
    // 当前设置 [2-6]即 h2 到 h6 可以自己修改下面正则
    $r = '/(.*?)/is';
    // is_single() 文章页:true
    // preg_match_all 函数用于执行一个全局正则表达式匹配。  $r=正则,$content=文章内容,$matches=作为输出参数输出所有匹配结果
    if (is_single() && preg_match_all($r, $content, $matches)) {
        foreach ($matches[1] as $key => $value) {
            //strip_tags() 函数剥去字符串中的 HTML、XML 以及 PHP 的标签。
            $title = trim(strip_tags($matches[2][$key])); //文章标题
            // 文章原标题添加锚点
            $content = str_replace($matches[0][$key], '' . $title . '', $content);
        }
        $titleIndexArr = $matches[1];
        $titleContentArr = $matches[2];
        $index = 0;
        $html .= '
文章目录';
        buildDirectory($titleIndexArr, $titleContentArr,$index,$html);
        $html .= '
';
    }
    return $html. $content;
}

add_filter('the_content', 'article_index');
// ------文章目录插件end------

使用说明

上面这段代码只是在文章显示的时候插入文章目录，并不会修改你的文章内容。以上代码也不包括样式美化代码，所以只添加以上代码，文章目录看起来一片混乱，所以你得自己添加一些css代码来美化一下这个目录。如果你不会css，可以用我写的，将以下css代码放到主题目录下的style.css中就可以了（并不是每个网站都适用，可自己进行样式调整）：

#article-index {
    -moz-border-radius: 6px 6px 6px 6px;
    border: 1px solid #DEDFE1;
    float: right;
    margin: 0 0 15px 15px;
    padding: 0 6px;
    width: 200px;
    line-height: 23px;
}
#article-index strong {
    border-bottom: 1px dashed #DDDDDD;
    display: block;
    line-height: 30px;
    padding: 0 4px;
}
#index-ul {
    margin: 0;
    padding-bottom: 10px;
}
#index-ul li {
    background: none repeat scroll 0 0 transparent;
    list-style-type: disc;
    padding: 0;
    margin-left: 20px;
}

这里是演示标题

这里是演示一

这里是演示二