如何在WordPress文章顶部以列表形式展示子标题并实现锚点跳转

嘿，我来给你两种实用的方法，轻松搞定WordPress文章里的可跳转子标题目录！

方法1：手动自定义锚点（精准控制） #

如果想完全掌控目录的样式和位置，手动设置是最佳选择：

1. 给子标题添加锚点ID
   在WordPress编辑器里（古腾堡或经典编辑器都可以），给每个子标题（比如<h2>/<h3>）加上唯一的id属性：

   <h2 id="plan-features">Plan Features</h2>
   <h2 id="plan-benefits">Plan Benefits</h2>
   <h2 id="plan-review">Plan Review</h2>
   

   ✅ 小提示：ID要全小写，用短横线代替空格，别用特殊字符，避免跳转失效。

2. 在文章顶部插入跳转列表
   直接在文章开头放项目符号或编号列表，用锚点链接指向对应的ID：

   - [Plan Features](#plan-features)
   - [Plan Benefits](#plan-benefits)
   - [Plan Review](#plan-review)
   

   要是用古腾堡编辑器，也可以用「列表」区块+「插入链接」功能，直接输入#plan-features作为链接地址就行，不用写完整URL。

方法2：插件自动生成（省时间） #

不想手动折腾？试试这些轻量好用的WordPress插件，一键生成带锚点的目录：

• Easy Table of Contents：自动扫描文章里的标题，支持自定义目录样式（编号/项目符号），还能设置只显示指定层级的标题（比如只显示h2和h3），完全免费。
• Table of Contents Plus：功能更丰富，支持折叠目录、自定义配色，适合需要个性化样式的场景。
• 古腾堡自带「目录」区块：如果你用的是新版古腾堡编辑器，直接插入「目录」区块，它会自动识别标题生成可跳转的目录，连设置都省了！

进阶优化：平滑滚动效果 #

为了让跳转更丝滑，可以给锚点加上平滑滚动，只需在主题的functions.php里加这段JS代码：

// 锚点平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

内容的提问来源于stack exchange，提问作者pamo