wordpress免插件自动生成文章目录悬浮在页面左侧

前面的文章里，楚狂人已经分享了两种纯代码实现wordpress自动生成文章目录的方法，都是通过PHP+CSS两种代码就搞定了。今天分享的这个方法要多一个步骤，需要搭配JS代码。这个方法是别人分享的，开始我自己测试这个方法有点错位，稍微又改动了一下，最终这个效果还是挺不错的。

纯代码添加wordpress文章目录，并且可以让目录悬浮隐藏在页面左侧的代码，这个纯代码添加wordpress文章目录方法可以生成从H2-H6的的多级标题目录。

文章目录CSS样式代码

将文章目录固定在浏览器左侧中间，这样外观比较独立，不容易受原主题样式的影响，按钮颜色可以根据自己使用的主题颜色调整，保持统一。

// 文章目录左侧悬浮 2023-12-21
#article-index{position:fixed;top:50%;transform:translateY(-50%);left:0;width:155px;
max-height:76%;padding:0 10px;font-size:14px;border-radius:0 6px 6px 0;background-color:#fff;
box-shadow:0 0 5px rgba(0, 0, 0, .4);overflow:auto;z-index:99;display:none;}
#article-index strong{display:block;font-size:16px;padding:10px 0 16px 0;}
#index-ol{list-style:square;}
#index-ol li{padding:0;margin-left:16px;line-height:24px;position:relative;list-style-position:inherit;
word-break:break-all;list-style: none;}
#index-ul{list-style:circle;margin:0;padding:5px 0 5px 8px;}
#index-ul li:before{display:none;}
#article-index-show{position:fixed;top:50%;transform:translateY(-50%);left:0;display:block;
width:50px;height:36px;line-height:36px;text-align:center;font-size:14px;border-radius:0 36px 36px 0;
color:#fff;background-color:#0088dd;cursor:pointer;}
#article-index-hide{position:absolute;right:5px;top:5px;display:block;
width:32px;height:32px;line-height:32px;text-align:center;font-size:12px;border-radius:100%;
background-color:#d2ddff;cursor:pointer;}
#article-index-hide:hover{color:#fff;background-color:#0088dd;}

文章目录JS代码

将下面的JS代码添加到网站的footer.php文件。

//文章目录展示切换
$(document).ready(function(){
$("#article-index-hide").click(function(){
$("#article-index").hide(100);
$("#article-index-show").show(200);
});
$("#article-index-show").click(function(){
$("#article-index").show(200);
$("#article-index-show").hide(100);
});
});

//文章目录锚点点击平滑滚动
$(document).on('click', '#article-index a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.length === 0) {
return;
}
e.preventDefault();
var pos = $id.offset().top;
$('body, html').animate({scrollTop: pos});
});

functions.php代码

将下面代码添加到当前wordpress主题函数模板functions.php中，通过代码中注释可以知道文章目录是获取h2-h6的标题，同时h标签的个数大于2才生效，也就是文章中要有3个及以上才展示，当然你也可以自行修改数量。

// 文章目录左侧悬浮代码 
function buildDirectory($titleIndexArr, $titleContentArr, &$index, &$html)
{
$size = sizeof($titleIndexArr);
$flag = $index == 0;
$html .= $flag ? '<ol id="index-ol">' : '<ul id="index-ul">';
while ($index < $size) {
$title = trim(strip_tags($titleContentArr[$index])); // 标题内容
$h = $titleIndexArr[$index]; // 几级标题
$html .= '<li><a href="#title-'%20.%20$index%20.%20'" title="' . $title . '">' . $title . "</a></li>";
if ($index == $size - 1) { //最后一个
$index++;
break;
}
$next_h = $titleIndexArr[++$index]; // 下个标题是几级标题
if ($h < $next_h) { // 子标题递归
buildDirectory($titleIndexArr, $titleContentArr, $index, $html);
if ($index >= $size || $h > $titleIndexArr[$index]) {
break;
}
} else if ($h > $next_h) {
break;
}
}
$html .= $flag ? '</ol>' : '</ul>';
}
function article_index($content)
{
$html = '';
$matches = array();
// 当前设置 [2-6]即 h2 到 h6 可以自己修改下面正则
$r = '/<h([2-6])(.*?)>(.*?)<\/h[2-6]>/is';
// preg_match_all 函数用于执行一个全局正则表达式匹配。$r=正则，$content=文章内容，$matches=作为输出参数输出所有匹配结果
preg_match_all($r, $content, $matches);
$num_match = count($matches[0]);
// 用于文章页，同时h标签个数大于3个才生效
if ( is_single() && ($num_match > 3) ) {
foreach ($matches[1] as $key => $value) {
// strip_tags() 函数剥去字符串中的 HTML、XML 以及 PHP 的标签
$title = trim(strip_tags($matches[3][$key])); //文章标题
// 文章原标题添加锚点
$content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '"' . $matches[2][$key] . '>' 
. $title . '</h' . $value . '>', $content);
}
$titleIndexArr = $matches[1];
$titleContentArr = $matches[3];
$index = 0;
$html .= "\n".'<div id="article-index-show">目录</div><div id="article-index"><strong>文章目录</strong>
<span id="article-index-hide">隐藏</span>';
buildDirectory($titleIndexArr, $titleContentArr, $index, $html);
$html .= '</div>'."\n";
}
return $html. $content;
}
add_filter('the_content', 'article_index');

此方案来自威言威语，感谢作者的无私分享！

相关内容：

这个方法和本站分享的第一个制作wordpress左侧悬浮目录的效果有点类似，只不过这个方案多了一段JS代码，但是效果看上去也很舒展大方，有兴趣的朋友可以在自己的网站上试一下，真是奇怪为什么我的网站使用会错位呢？有机会再测试一下。