WordPress 文章目录插件 — 侧边悬浮导航

WordPress 文章目录插件 — 侧边悬浮导航

自动提取文章中的 h1~h6 标题生成层级目录树，以侧边悬浮面板形式呈现，支持滚动位置实时高亮、平滑锚点跳转、折叠收缩、回到顶部，以及全面的颜色和尺寸自定义。

版本：v1.0.1
适配：WordPress 5.8+
PHP：>= 7.2
作者：softbangong
授权：不限制网站数量，下载安装后永久免费使用

插件简介

本插件在前端自动扫描文章正文中的 h1~h6 标题，基于标题层级关系构建嵌套目录树，并通过固定悬浮面板展示在页面侧边。用户在阅读长文章时，可随时查看当前所处章节位置，点击目录项即可平滑滚动到对应标题。

插件采用纯前端 DOM 扫描方式实现，不会修改文章正文内容，也不会在数据库中存储额外数据，对网站性能无任何负面影响。

后台提供模块化卡片式设置界面，涵盖基础参数、交互行为、辅助功能、手机适配、外观样式和高级选项六大模块，所有配置项均通过滑动开关和内联参数组直观呈现，修改即时生效。

功能特性

标题自动扫描与层级目录树

插件在前端自动扫描文章正文区域内的 h1~h6 标题，根据标题层级自动构建嵌套目录列表。默认扫描六个层级（H1~H6），可在后台勾选需要的层级，灵活控制目录展示深度。

— 自动为无 id 的标题生成唯一锚点，确保跳转正常；
— 智能过滤非正文区域的标题（如评论区、推荐文章、侧边栏小工具等），避免目录内容冗余；
— 自动跳过空文本和过短标题，保证目录项质量。

侧边栏悬浮面板

目录以固定悬浮面板形式展示在页面左侧或右侧，不占用正文布局空间，随页面滚动始终可见。

— 右侧悬浮（默认）或左侧悬浮，后台一键切换；
— 面板宽度可调（160px~500px），默认 240px；
— 距顶部距离可配置，自动叠加页面固定导航栏高度，确保目录面板不被遮挡；
— 面板最大高度可设固定值或自动适应视口。

滚动位置实时高亮

页面滚动时，目录中当前阅读位置对应的标题项自动高亮，左侧出现蓝色指示条，背景色同步变化。高亮颜色、背景色、边框颜色均可在后台自定义。

— 内置页面固定/粘性导航栏高度自动检测机制，动态调整激活判定的偏移量；
— 窗口大小变化时自动重新校准，适配响应式布局；
— 目录列表自动跟随高亮项滚动，确保当前项始终在可视区域内。

平滑锚点跳转

点击任意目录项，页面平滑滚动到对应标题位置，并自动计算固定导航栏高度作为滚动偏移，确保标题不被遮挡。

— 超长页面（默认超过 2000px）自动启用分段跳转，先快速接近再精准落地，避免一次性长距离滚动带来的体验割裂；
— 分段次数可后台配置（1~10 次），适配不同页面长度；
— 滚动阈值可自定义，短页面直接平滑跳转，无需分段。

折叠与展开

目录面板支持收缩态与展开态自由切换。

— 收缩态：面板收起，仅显示竖排文字标签，最大化释放页面空间；
— 展开态：完整显示标题栏、目录列表和回到顶部按钮；
— 点击竖排标签可在收缩/展开之间切换；
— 支持 Hover 展开/离开收缩（鼠标悬停在标签上自动展开目录，移出自动收缩）；
— 支持点击正文自动收缩（点击文章内容区域时目录自动折叠）；
— 展开/收缩过程可启用 CSS 平滑过渡动画；
— 收缩状态可通过 localStorage 记忆，刷新页面后保持用户选择。

回到顶部按钮

目录面板底部可显示回到顶部箭头按钮，点击后平滑滚动至页面顶端，方便长文章快速返回。

标题项计数

目录标题栏旁可显示当前文章标题总数（如”共 12 项”），帮助读者快速了解文章结构规模。

手机端独立适配

插件内置手机端适配方案，小屏设备上的目录面板可独立配置。

— 手机端开关：关闭后移动设备完全不显示目录，避免干扰小屏阅读；
— 手机端悬浮位置独立设置（左侧或右侧）；
— 手机端距顶部距离独立设置，适配移动端导航栏高度；
— 移动端面板宽度自动缩小至 220px，字号自适应减小，确保窄屏体验。

颜色与样式全面自定义

后台提供 7 种颜色配置项，覆盖目录面板的所有视觉元素，通过取色器直观选择。

— 背景颜色、标题文字颜色、目录项文字颜色；
— Hover 悬停颜色、高亮项颜色、高亮项背景色；
— 边框/分隔线颜色；
— 标题栏字号、目录项字号分别可调。

所有颜色和尺寸配置通过内联 CSS 动态注入，无需修改主题文件，切换主题后样式不受影响。

中英双语界面

插件后台界面支持中文、English 和自动三种语言模式。

— 自动模式根据 WordPress 站点语言自动切换，中文站点显示中文，其他站点显示英文；
— 语言通过独立工具栏一键切换，切换后即时生效；
— 所有设置项标签、描述、提示文字均完整双语覆盖。

高性能与零侵入

— 纯前端 DOM 扫描构建目录，不修改文章数据库、不存储额外元数据；
— 配置读取使用 PHP 静态缓存，单次请求仅一次数据库查询；
— CSS / JS 仅在文章和页面详情页按需加载，其他页面零额外开销；
— 全局开关关闭后完全不加载任何资源，对网站性能无影响；
— 停用插件时可选择是否清除所有配置数据，便于测试或迁移。

使用说明

第一步：安装插件

将 wzml_mulu 文件夹上传至网站 wp-content/plugins/ 目录，进入 WordPress 后台「插件」页面，找到「文章目录」并点击启用。

也可以直接在 WordPress 后台「插件 — 安装插件」中上传 zip 包安装。

第二步：基础配置

进入后台「文章目录」菜单，在基础设置卡片中：

— 确认启用插件开关为开启状态；
— 设置目录标题文字，默认为”文章目录”；
— 选择悬浮位置（右侧或左侧）和面板宽度；
— 配置正文内容容器的 CSS 选择器（多个用逗号分隔），默认已覆盖主流主题的 .entry-content 和 .post-content；
— 勾选需要显示在目录中的标题层级（H1~H6）。

第三步：交互与辅助功能配置

在交互设置卡片中按需开启：

— 默认展开：开启则页面加载后目录处于展开状态；
— 点击正文自动收缩：开启后点击文章正文区域目录自动折叠；
— Hover 展开/离开收缩：鼠标移入竖排标签时展开目录，移出收缩；
— 平滑过渡动画：展开/收缩过程启用 CSS 过渡效果；
— 记住收缩状态：收缩/展开状态通过 localStorage 记忆，刷新不丢失。

在辅助功能卡片中开启回到顶部按钮和标题计数。

×

广告

第四步：手机端与外观调整

在手机端设置卡片中，可独立控制移动端是否显示目录及其位置和距顶距离。

在显示样式卡片中，可调整距顶部距离、最大高度、超长页面分段跳转阈值和次数、标题栏与目录项字号，以及 7 种颜色配置。

第五步：验证效果

打开任意一篇包含 h1~h6 标题的文章详情页，确认侧边出现目录悬浮面板。滚动页面验证目录高亮跟随是否正常，点击目录项验证跳转是否平滑准确。

注意事项

— 本插件不修改文章正文内容，目录完全通过前端 DOM 扫描动态生成，无需担心数据安全问题；
— 如果目录中未出现预期的标题，请检查后台「内容区选择器」配置是否匹配当前主题的文章正文容器 CSS 选择器；
— 手机端默认开启，如需在小屏设备上隐藏目录，请在手机端设置卡片中关闭「手机端启用」开关；
— 如果目录跳转后标题被固定导航栏遮挡，可在后台调整「距顶部距离」参数，或依赖插件内置的固定导航栏自动检测功能（已默认开启）；
— 更换主题后，建议检查「内容区选择器」是否需要更新为新主题的正文容器选择器；
— 目录面板的 z-index 为 9999，如遇特殊主题有更高层级的元素遮挡，可在 CSS 中覆盖该值。

下载地址

反馈与支持

— 作者：softbangong
— 作者网站：softbangong.top
— 作者网站：softbangong.com
— 邮箱：[email protected]
— 邮箱：[email protected]

更新日志

v1.0.1（2026-07-12）

— 新增中英双语后台界面，支持中文/English/自动三种语言模式，通过独立工具栏一键切换；
— 后台界面全面重构为模块化卡片布局，包含六大设置模块，滑动开关与内联参数组直观呈现；
— 集成 WordPress Settings API，配置存取与安全校验规范化；
— 新增 PHP 静态缓存机制，优化配置读取性能，单次请求仅一次数据库查询；
— 新增停用插件时清除配置数据选项，便于测试和迁移；
— 新增 uninstall.php 卸载清理脚本。

v1.0.0

— 首次发布，实现文章标题自动扫描与层级目录树构建；
— 侧边栏悬浮面板，支持左右位置切换；
— 滚动位置实时高亮当前章节；
— 平滑锚点跳转，超长页面自动分段跳转；
— 折叠/展开交互，收缩态显示竖排标签；
— 回到顶部按钮和标题计数辅助功能；
— 手机端独立适配，包含开关和位置参数；
— 7 种颜色 + 字号 + 尺寸全面自定义。