知识库文章

WordPress长文章怎么加目录跳转?

文章摘要
不用新增插件,给WordPress标题设置HTML锚点,再把目录文字连到对应小节。本文附可点击目录,说明保存验证、跳错、固定页眉遮挡与改名维护。

本页阅读目录

目录安装的链接填#install,正文安装标题的HTML锚点填install

用WordPress区块编辑器的标题和列表就能做:给目标标题设置HTML锚点,再给目录文字加“#锚点”链接。保存后,读者点“安装”,就能到安装标题及说明,不必从头滚完文章。

HTML锚点是标题的定位标记。编辑器左上角的大纲只方便你编辑;访客要点击,还需把目录列表放进正文。

你可以先点本文的三个实际小节试一下,再照着给自己的文章制作:

给尺寸、安装、保养三个标题设标记

用自己已写好的支架说明练习,保留真实尺寸、安装和保养内容。进入“文章 → 所有文章”编辑它;新练习稿可从“文章 → 新建文章”开始,先写好三段说明。

三个小节应是“标题”区块。点选后,工具栏能看到H2或H3;只是加粗段落时,用工具栏的区块转换改成“标题”。三个并列小节可用H2,文章总标题通常已有H1。层级问题可参考页面SEO的H标签检查。

按下面的配对设置:

小节标题锚点目录链接
尺寸size#size
安装install#install
保养care#care

先做“尺寸”这个目标:

  1. 点击正文中的“尺寸”标题。
  2. 打开右上角“设置”,在侧栏选择“区块”,而非“文章”。
  3. 展开“高级”(Advanced),找到HTML锚点(HTML anchor)。
  4. 填入size,不加井号。安装标题同一字段填install,保养填care。

“安装”标题的锚点填install,目录链接才填#install:前者给目标起标记,后者告诉浏览器去找这个标记。中文目录文字不必改成英文,这是与锚文本可见文字不同的设置。

别填到“额外CSS类”里,那是样式字段。锚点用这三个小写值,无空格,整张页面各不重复;Install和install也不是同一个值。字段位置见高级设置文档,标记规则见官方页面跳转说明。

本站标题区块高级设置里的HTML锚点,现有值为section-f1cec7a1
本站真实编辑器的只读截图,右侧“高级”中有 HTML 锚点。图中显示的是本篇已有值 section-f1cec7a1,不是练习要求填写的 size;下方“额外的 CSS 类”是另一格。截图没有修改或保存文章。

在开头插入列表,给文字添加链接

导语后点“+”,搜索“列表”(List)并插入。输入“尺寸”,按Enter另起一项写“安装”,再写“保养”。列表前可以加“跳到你要看的部分”。

选中列表里的“尺寸”两个字,点工具栏的链接按钮,或按Ctrl+K,Mac用Command+K。在链接框填#size,按Enter;仍显示Apply(应用)时,再点它确认。按同样方法给“安装”加#install,“保养”加#care。

井号地址填在链接框,不是作为文字写在列表后。原来已有链接时,点编辑链接,换成对应井号地址并应用;“在新标签页打开”保持关闭,让读者在同一篇内移动。当前链接文档支持这种地址,但不会替你判断目标是否存在。

保存后,打开前台点三次

点击“保存”,再从顶栏View(查看)选择Preview in new tab(在新标签页预览),入口可对照当前查看功能文档。编辑器的手机宽度画布只是排版视图,不能代替前台点击。

已公开文章还要用未登录窗口打开正式地址。草稿可先由有权限的账号看预览,按站点流程公开后再检查访客入口;作者预览链接不能直接当公开文章网址。

从目录依次点三项,每次回到目录再点下一项:

  • “尺寸”:地址末尾为#size,看到尺寸标题和说明。
  • “安装”:末尾为#install,看到安装标题和步骤。
  • “保养”:末尾为#care,看到保养标题和内容。

地址变了还不够,落点必须是承诺的小节。短文章接近页底时,浏览器可能无法把标题顶齐屏幕,只要标题和对应内容可见即可。

手机上也把三项点一遍,观察页眉是否挡住标题;电脑可用Tab移动到目录链接,再按Enter,检查键盘访问。

再试从外部直达安装段:复制真实正式地址,删掉原有井号及后面的片段,再加#install,粘到新窗口地址栏打开。下面两行只是文章地址和安装入口的格式例子,请换成自己的已公开地址:

https://example.com/stand-guide/ https://example.com/stand-guide/#install

第二种地址应直接显示安装段。只写#install是在当前页面找标记,不能用于从别的文章或邮件跳到这篇说明。

不跳、跳错或标题被挡住,查哪里?

点击后地址没有井号,回编辑器点那项文字,查看链接是否真正添加。安装项应连#install,不能只是文章首页;改好后应用并保存。

末尾已经有#install却不移动,检查正文安装标题的HTML锚点是否为install:多井号、空格、大小写不同或填到CSS类都可能找不到目标。修正后保存,刷新前台再点。

总跳到另一个同名标题,检查复制的标题区块有没有带来重复锚点。给第二个目标换未使用的标记,并同步其目录链接;不需要定位的重复标题可清空锚点。模板或隐藏内容也占用同一标记时,请维护者检查整张页面。

已到安装段,但标题被固定页眉盖住,提供文章网址、目录项和手机截图给维护者。他可以查看目标在网页中的id,按实际页眉高度给这一处留滚动空间,例如使用scroll-margin-top,属性见MDN说明。无需猜一个高度改全站标题。

完整带井号网址能直达,目录点击却不跳时,把这两个结果一起提供给维护者检查页面脚本;问题不在“有没有目录”本身。

改标题时保留标记,删小节时同步目录

把“尺寸”改为“尺寸与适用设备”,可以保留锚点size,只同步目录显示文字。保存后再点三项,并用原完整#size地址打开:旧分享应仍找到这段。文字改名不要求定位标记也改名。

确实更换锚点,要同步目录链接和能修改的旧引用。删小节就删对应目录项;搬到另一篇时,改为新文章正式地址加新锚点。已有邮件或外站引用难以修改,尽量保留旧定位位置与简短去向说明,让旧访客知道去哪看。

遇到模板、页眉或脚本问题,可在跨境YOUNG联系页提供文章地址、出错项和预期落点,例如“完整地址能跳,目录点击不跳”。

常见问题

新增或改名的小节会自动进入这个目录吗?

不会,这是手动列表。新增小节要设未使用的锚点,再加目录文字和链接。只改显示标题可保留旧锚点,同步目录文字;自动整理目录是另一种功能,应看站点已有工具的行为。

能在文章底部加“返回目录”吗?

可以。给目录上方的标题区块设唯一锚点contents,选中底部“返回目录”文字,添加#contents链接并保存。前台应回到目录标题,标记不能与其他位置重复。

加了目录,Google会显示搜索结果里的小节跳转吗?

不保证。本教程完成访客页内导航,搜索结果是否展示小节链接由搜索系统决定。让目录与实际小节对应即可,无需为期待展示堆重复锚点或链接。

关于跨境YOUNG

跨境YOUNG整理WordPress建站、Google SEO与AI SEO / GEO方法,并提供建站、代运营和顾问服务。

需要有人持续推进SEO?

网站已上线,但页面、内容、技术、内链和月度数据没有持续推进?可先诊断范围与优先级,再按月执行与复盘。

最具性价比的服务器

Hostinger 适合预算有限的新站和中小企业 WordPress 网站,托管、备份与基础性能配置比较完整。通过专属链接可享 20% 折扣,购买前再核对机房位置和续费价格。

专属链接含 20% 折扣;跨境YOUNG可能获得佣金,不会增加你的购买成本。