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

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

创建文章目录的方法

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

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

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

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

第1步 ：为文章创建目录

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

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

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

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

效果如图：

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

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

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

.mg-bound {
    height: 108px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    color: #fff;
    position: fixed;
    left: 0;
    font-size: 14px;
    text-align: center;
    z-index: 999999;
}
.mg-bound__hover-block{
    border: none !important;
    position: absolute !important;
    left: 0;
    z-index: 100;
    padding: 0 !important;
    width: 40px;
    height: 108px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #fff;
    background-color: #0066ff;
}
.mg-bound__hover-block i{
    margin-top: 10px;
    display: block;
    font-size: 22px;
}
.mg-bound__hover-block p{
    width: 28px;
    margin-left: 6px;
    font-size: 16px;
    text-align: center;
}
.mg-bound__popover{
    position: absolute !important;
    left: 0;
    top: 0;
    width: 200px !important;
    min-height: 108px !important;
    padding: 8px !important;
    padding-left: 40px !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    border-bottom: none !important;
    transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    transition: all .3s;
    background-color: #0066ff;
    text-align: left;
    font-size: 12px;
}
.mg-bound__popover li {
    border-left: 2px solid #000;
    padding: 4px;
}
.mg-bound:hover .mg-bound__popover{
    display: block;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transition: all .3s;
}

总之，使用插件和编码都为我们提供了相同的漂亮目录。只要您满意，您可以选择任何方式。

如您所见，在 WordPress 文章中创建目录并不复杂。按照我们的教程，您将拥有漂亮的目录。一个好的目录让你的文章更清晰、更专业。因此，您的观众在阅读您的博客时可能会有更友好的体验。