网站美化之纯代码为wordpress添加文章浮动目录

网站的文章目录可以让用户更好的理解内容的重点和结构，对于用户体验很有好处，目前wwordpress实现文章目录的方法有很多，可以用插件生成目录，也可以用代码创建文章目录，今天分享的就是纯代码为wordpress添加文章浮动目录的方法。

一、为wordpress悬浮目录添加JS文件

在主题文件夹中创建一个新的JavaScript文件，例如“floating-menu.js”。

jQuery(document).ready(function($) {
// 创建目录
var toc = '';
var level = 0;
var maxLevel = 3;
$('#content').find('h1, h2, h3, h4, h5, h6').each(function() {
// 获取标题级别
level = parseInt(this.tagName.substring(1));
// 如果标题级别小于最大级别，则添加到目录中
if (level <= maxLevel) {
// 添加锚点
$(this).attr('id', 'heading-' + level + '-' + $(this).index());
// 添加目录项
toc += '<li class="toc-level-' + level + '"><a href="#heading-'%20+%20level%20+%20'-'%20+%20$(this).index()%20+%20'">' + $(this).text() + '</a></li>';
}
});
// 如果目录不为空，则创建悬浮目录
if (toc !== '') {
var tocHtml = '<ul class="toc">' + toc + '</ul>';
$('body').append('<div id="floating-menu">' + tocHtml + '</div>');
// 设置目录项的样式
$('#floating-menu .toc li').each(function() {
$(this).css('margin-left', (parseInt($(this).attr('class').substring(10)) - 1) * 20 + 'px');
});
// 监听窗口滚动事件
$(window).scroll(function() {
// 如果滚动距离大于目录位置，则显示悬浮目录
if ($(window).scrollTop() > $('#floating-menu').offset().top) {
$('#floating-menu').addClass('floating');
} else {
$('#floating-menu').removeClass('floating');
}
// 更新当前目录项的样式
$('#floating-menu .toc li').removeClass('current');
$('#content').find('h1, h2, h3, h4, h5, h6').each(function() {
// 获取标题级别
level = parseInt(this.tagName.substring(1));
// 如果标题级别小于最大级别，则更新当前目录项的样式
if (level <= maxLevel && $(window).scrollTop() >= $(this).offset().top - 20) {
$('#floating-menu .toc li').removeClass('current');
$('#floating-menu .toc li:nth-child(' + ($(this).index() + 1) + ')').addClass('current');
}
});
});
}
});

二、functions.php中调用JS文件

在wordpress主题的“functions.php”文件中添加以下代码，将JavaScript文件添加到主题中：

function b2_enqueue_scripts() {
wp_enqueue_script('floating-menu', get_template_directory_uri() . '/floating-menu.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'b2_enqueue_scripts');

三、为文章浮动目录添加CSS样式：

在主题的“style.css”文件中添加以下代码，定义wordpress悬浮目录的样式：

#floating-menu {
position: fixed;
top: 50%;
left: 20px;
transform: translateY(-50%);
z-index: 9999;
}
#floating-menu.floating {
top: 20px;
}
#floating-menu .toc {
list-style: none;
margin: 0;
padding: 0;
}
#floating-menu .toc li {
margin-bottom: 5px;
transition: all 0.2s ease;
}
#floating-menu .toc li.current {
font-weight: bold;
}

保存文件并刷新网站，您应该可以看到一个文章悬浮目录出现在页面的左侧。当您滚动页面时，目录将保持固定位置并更新当前目录项的样式。

原文https://sjcnh.cn/1355.html

偶然看到这个方法，是原作者创建用于B2主题的，其他主题应该应该也可以用，只是要自己稍微修改一个路径，暂时没有时间实验，先收藏了，以后测试一下。