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

4.7
(3)

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

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代码只能实现目录的展示,而样式需要参考我之前写的文章,这在前文中已经有所描述。

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

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

最后,再列出一个标题,大家可以在网站右上角看到目录,可以查看下目录具体的表现方式。当然,实际使用中,我们一般只用个二级和三级标题就足够了。(需要注意的是,文章页面只有文章主标题是一级标题,你自己文章内的内容最多只能二级标题。这一点,符合大多数搜索引擎的要求)

多层级标题展示

二级标题一

三级标题一

三级标题二

四级标题一

四级标题二

五级标题一
六级标题一

三级标题三

二级标题二

后续说明

如果你参考了文中提到的文章,还是不太明白,或者想调整下目录的位置,可以直接私聊我。

共计3人评分,平均4.7

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress/multi-level-directory.html

(2)
上一篇 2022年12月14日 21:06
下一篇 2022年12月14日 22:33

发表回复

登录后才能评论
本站APP
微信小程序