WordPress 7B2主题美化：主题文章创建内容目录

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

创建文章目录的方法

有两种方法可以在 WordPress 文章中创建目录。

第一种方法是使用插件。这对 WordPress 的代码专家和新手来说都是简单、快速且免费的。

第二个是使用代码。这样您可以自定义目录，即使是最小的细节，但对于非编码人员来说却非常复杂。我们将在这篇文章中写下创建目录的代码，只需复制并粘贴它！

使用插件创建目录的过程本文不再赘述，百度一大堆；本文主要针对B2主题的纯代码方法

第1步 ：为文章创建目录

打开主题functions.php文件或者在网站后台转到外观>主题>编辑器>functions.php。

然后，将以下代码添加到functions.php文件中。

function create_mg($html) {
    $mg = '';
    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();
        $mg = '<div class="mg-bound"><div class="mg-bound__hover-block"><i class="b2font b2-file-list-2-line"></i><p>目录</p></div><ul class="mg-bound__popover">';//向目录添加标题并将其显示在此之上。您可以将文本“目录”替换为您希望在标题中出现的任何内容。
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($element->tagName == 'h2') {
                if($h3_status){
                    $mg .= '</ul>';
                    $h3_status = 0;
                    }
                 if($h2_status){
                    $mg .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $mg .= '<li><a href="' . get_the_permalink() . '#mg-' . $i . '">' . $element->textContent . '</a>';//单击后立即创建指向文章中相应部分的跳转链接。
                  $element->setAttribute('id', 'mg-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                if(!$h3_status){
                    $mg .= '<ul class="mg-sub">';
                    $h3_status = 1;
                }
                $mg .= '<li><a href="' . get_the_permalink() . '#mg-' . $i . '">' . $element->textContent . '</a></li>';
                $element->setAttribute('id', 'mg-' . $i);
                $i++;
            }
        }
        if($h3_status){
            $mg .= '</ul>';
        }
        if($h2_status){
            $mg .= '</li>';
        }
        $mg .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    return $mg . $html;//在目录中的每个标题前添加项目符号。
}
add_filter('the_content', 'create_mg');

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

不要忘记单击更新/保存文件。

第二步：我们需要稍微设计一下

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

比如我想自定义目录的颜色和强度，所以插入如下代码：

如您所见，在 WordPress 文章中创建目录并不复杂。

按照我们的教程，您将拥有漂亮的目录。一个好的目录让你的文章更清晰、更专业。

因此，您的观众在阅读您的博客时可能会有更友好的体验。