为B2专业主题文章创建目录

文章目录是WordPress文章必不可少的一部分，尤其是有很多标题的长文章。创建目录有助于读者轻松快速地理解和掌握观点。另外还能帮你给文章增加更多的关键词，对SEO非常有利。

本教程的内容不是站点代码，站点代码已经集成到本站点发布的MG-B2子主题中。在WordPress文章中有两种创建目录的方法。

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

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

本文不再重复使用插件创建目录的过程。百度有很多；本文重点介绍B2主题的纯代码方法。

第一步:为文章创建一个目录，打开主题functions.php文件或进入网站背景中的外观>:Theme >: Editor >: functions.php .

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

函数create _ mg($ html){ $ mg = ' '；if (is_single()) { if(！$html)返回$ html；$ DOM = new DOM document()；libxml _ use _ internal _ errors(true)；$ DOM ->；load html(MB _ convert _ encoding($ html，' HTML-ENTITIES '，' ut F-8 ')；libxml _ clear _ errors()；$ mg = ' & ltdiv class="mg-bound " >& ltdiv class = " mg-bound _ _ hover -block " >& ltI class = " B2 font b2-file -list -2-line " >& lt/I & gt；& ltp & gt目录

注意:这段代码只在目录中添加了两个标题级别h2和h3。

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

结果如下:当然，我们需要稍微设计一下。

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

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

. mg-绑定{ height:108 px；box -阴影:0 2px 8px RGB(0 0 0/10%)；颜色:# fff位置:固定；左:0；font -size:14px；text-align:居中；Z-指数:999999；} . mg-bound _ _ hover -block { border:none！重要；立场:绝对！重要；左:0；Z-指数:100；填充:0！重要；宽度:40px高度:108pxborder -top -right -radius:4px；border -bottom -right -radius:4px；颜色:# fffbackground -color:# 0066 ff；} . mg-bound _ _ hover -block I { margin -top:10px；显示:块；font -size:22px；} . mg-bound _ _ hover -block p { width:28px；margin -left:6px；font -大小:16pxtext-align:居中；} . mg-bound _ _ popover { position:absolute！重要；左:0；top:0；宽度:200px！重要；min -身高:108px！重要；填充:8px！重要；padding-left: 40px！重要；border -top -right -radius:10px；border -bottom -right -radius:10px；溢出:隐藏；border-bottom:无！重要；transform:translate x(-200 px)；-ms-transform:translate x(-200 px)；-WebKit -transform:translate x(-200 px)；转场:全. 3s；background -color:# 0066 ff；text -align:left；font -size:12px；} . mg-bound _ _ popover Li { border -left:2px solid # 000；填充:4px} . mg-绑定:hover . mg-绑定_ _ popover { display:block；transform:translate x(0)；-ms-transform:translate x(0)；-WebKit -transform:translate x(0)；转场:全. 3s；}

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

正如你所看到的，在WordPress文章中创建一个目录并不复杂。根据我们的教程，你会有一个漂亮的目录。好的目录让你的文章更清晰，更专业。因此，你的读者在阅读你的博客时可能会有更友好的体验。

本教程原则上适用于所有主题。