WordPress文章中创建内容目录 类似百度百科词条目录导航（未测试，慎用）

文章目录是 WordPress 文章的必要组成部分，尤其是带有许多标题的长文章。创建目录有助于读者轻松快速地遵循和掌握想法。此外，它还可以帮助您在文章中添加更多关键字，这对 SEO 非常有利。以下方法，未经过测试，慎用！

第1步 ：为文章创建目录

将以下代码添加到文件中functions.php以将目录插入文章。

function top_table_content($html) {
    $toc = '';
    if (is_single()) {
        if (!$html) return $html;
        $dom = new DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                table of contents
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($element->tagName == 'h2') {
                if($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0;
                    }
                 if($h2_status){
                    $toc .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a>';
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                if(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        if($h3_status){
            $toc .= '</ul>';
        }
        if($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    return $toc . $html;
}
add_filter('the_content', 'top_table_content');

注意：此代码仅将 2 个标题级别 h2、h3添加到目录中。

当然，我们需要稍微设计一下。

第2步：使用 CSS 进行自定义

通过CSS定制，访问主题编辑器的style.css文件。在那里，您需要插入您自己编写的代码以根据需要自定义 TOC。

比如下面是自定义目录的参考颜色和强度，插入如下代码：

.toc-bound {
    background-color: #619162;
    color: #fff;
}
.toc-ctr {
    border-bottom: 1px solid #fff;
    padding: 10px;
    font-size: 20px;
    text-transform: uppercase;
}
ul.toc {
    list-style-type: none;
    padding: 10px;
    padding-left: 25px;
}
.toc li a {
    color: #fff;
}
ul.toc > li {
    font-size: 18px;
    font-weight: 700;
    padding: 5px 0;
}
ul.toc-sub {
    list-style-type: none;
}
ul.toc-sub li a {
    font-weight: 200;
}

如此，我们就创建好了文章的目录结构

版权声明：本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权

文章名称：WordPress文章中创建内容目录 类似百度百科词条目录导航（未测试，慎用）

文章链接：https://www.qqhgg.com/22.html

该作品系作者结合个人学习经验及互联网相关知识整合。如若侵权请通过投诉通道提交信息，我们将按照规定及时处理。

标签：内容目录、目录导航