纯代码实现wordpress文章目录左边侧边栏浮动展示

关于这个网站文章目录侧边栏浮动展示的功能我找了好久，大部分实现的方式都是通过插件做到的，找到几个纯代码的浮动文章目录的方法，很多代码都不正确，已添加就报错。终于找到一个可以用的，结果样式差别太多，改css都快把我改吐了，不过终于搞出来了。

一、文章目录侧边栏浮动效果：

默认只显示上面的目录按钮，鼠标放到按钮上之后，文章目录自动弹出，然后点击目录会自动导航到文章锚点，效果还算比较丝滑。我之所以希望把文章目录放到左侧，是因为这边刚好不占用网站的有效展示空间，比放到文章内部和小工具里面的效果要更好。

文章目录侧边栏浮动

二、文章目录侧边栏浮动代码

1、CSS代码：

我们先把前台样式代码放到网站主题的CSS文件中。

/*文章目录侧栏浮动 chukuangren.com*/
.mg-bound {
top: 120px;
height: 98px;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
color: #fff;
position: fixed;
left: 0;
font-size: 16px;
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: 35px;
height: 78px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff!important;
background-color: #0066ff;
}
.mg-sub {
margin: -1px -2px 2px -2px!important;
}
.mg-sub a{color:#45b6f7 !important;}

.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;
color: #fff;
text-align: center;
}
.mg-bound__popover{
position: absolute !important;
left: -50px;
top: 79px;
width: 156px !important;
min-height: 108px !important;
padding: 2px !important;
padding-left: 8px !important;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
border-bottom: 1px!important;
transform: translateX(-200px);
-ms-transform: translateX(-200px);
-webkit-transform: translateX(-200px);
transition: all .3s;
border: 1px solid #0051da;
background-color: #fff;
text-align: left;
font-size: 12px;
}
.mg-bound__popover ul {
text-align: left;
}
.mg-bound:hover .mg-bound__popover{
display: block;
padding-left: 1px !important;
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition: all .3s;
}

2、生成目录并展示代码：

把下面的代码添加到网站主题目录的function文件中，注意，此方法只适合用于wordpress文章目录浮动展示在网页左侧的效果，因为下面的代码只适合wp程序，其他网站程序请勿尝试。

// 文章目录左侧浮动 chukuangren.com
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="'%20.%20get_the_permalink()%20.%20'#mg-'%20.%20$i%20.%20'">' . $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="'%20.%20get_the_permalink()%20.%20'#mg-'%20.%20$i%20.%20'">' . $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');

这个wordpress文章目录左边侧边栏浮动展示的代码，只显示到H3标题，更小的标题其实没有必要显示，否则就太乱了，这样的话显示两级目录，刚刚好。如果你也是采用wordpress自己建站，或者你为客户或者企业建站，但是用户有这方面的需求，希望我分享的这个方法可以帮助到您，谢谢阅读！