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

Jaysun

温馨提示:这篇文章已超过405天没有更新,请注意相关的内容是否还可用!

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

1.webp.jpg

创建文章目录的方法

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

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

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

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

第1步 :为文章创建目录

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

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

隐藏内容
评论可见
前往评论


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


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

效果如图:

2.webp.jpg

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

通过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 文章中创建目录并不复杂。按照我们的教程,您将拥有漂亮的目录。一个好的目录让你的文章更清晰、更专业。因此,您的观众在阅读您的博客时可能会有更友好的体验。

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 11 条评论,995人围观)
网友昵称:小香菇123
小香菇123 V 普通用户 Google Chrome 114.0.0.0 Windows 10 x64 11楼
2023-06-27 来自四川 回复
文章不错,写的很好!
网友昵称:a11326
a11326 V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 10楼
2023-05-29 来自福建 回复
非常优秀
网友昵称:shaoyu
shaoyu V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 9楼
2023-05-21 来自陕西 回复
评论看看
网友昵称:Controller
Controller V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 8楼
2023-05-14 来自湖北 回复
感谢分享文章不错,写的很好!
网友昵称:惦记博客
惦记博客 V 普通用户 Google Chrome 86.0.4240.198 Windows 10 x64 7楼
2023-05-01 来自贵州 回复
文章不错,写的很好![Fabulous]
网友昵称:yihegf
yihegf V 普通用户 Google Chrome 112.0.0.0 Windows 10 x64 6楼
2023-04-08 来自内蒙古 回复
效果好用吗
网友昵称:ak123456
ak123456 V 普通用户 Google Chrome 91.0.4472.77 Windows 10 x64 地板
2023-04-05 来自广东 回复
效果好用吗
网友昵称:1811687158
1811687158 V 普通用户 Google Chrome 111.0.0.0 Windows 10 x64 凉席
2023-03-30 来自山东 回复
好用吗
网友昵称:ABC5201775
ABC5201775 V 普通用户 Google Chrome 101.0.4951.64 Windows 10 x64 板凳
2023-03-14 来自江西 回复
看一看看
网友昵称:henryour
henryour V 普通用户 Google Chrome 108.0.5359.95 Windows 10 x64 椅子
2023-03-08 来自福建 回复
看一看看

目录[+]

取消
微信二维码
微信二维码
支付宝二维码