3步搞定wordpress怎么在文章中做一个单词链接到本文章中的一段文字

改个需求建站公司拖一周？这种糟心事儿我见得太多了。上周客户急着要上线一个知识付费专栏，要求文章里点击特定单词能直接跳转到文章底部的“常见问题”章节，结果外包团队报价五千还要排期。我自己从后台捣鼓了二十分钟，代码粘贴进去，刷新页面，完美运行。这就是技术在手，心里不慌。很多新手觉得wordpress怎么在文章中做一个单词链接到本文章中的一段文字是个高深难题，其实只要你从零搭建过哪怕一个最简单的站点，理解HTML锚点机制，这事儿就难不倒你。

项目背景与需求：为什么这个功能卡住了很多站点

去年帮一家做工业设备维修的公司做官网改版。他们的官网用WordPress建的，内容库里有几百篇维修教程。老板发现用户读完长文后，经常找不到“保修政策”或者“免责声明”在哪里，每次都要往下拉好几屏。客服每天要接几十个重复咨询，问“保修期多久”、“发票怎么开”。

老板的需求很具体：能不能在文章正文里，把“保修期”这三个字做成蓝色链接，用户一点击，页面自动平滑滚动到文章末尾的“保修条款”段落？不要新开页面，不要跳到首页，就在这个长文章内部跳转。

这个需求看似简单，实则踩中了两个技术痛点。第一，WordPress默认编辑器是块编辑器（Gutenberg），它把内容拆成了一个个“块”，不像老版TinyMCE那样可以随意插入HTML标签。第二，长文章如果直接跳转，浏览器默认是瞬间移动，用户体验很生硬，最好能平滑滚动。

更麻烦的是，很多新手站长不知道，WordPress生成的HTML结构中，段落是包裹在<p>标签里的，而锚点ID（ID）通常不会自动加在段落上。如果你直接在编辑器里打一个<a href="#section">，你会发现点不动，因为页面上根本没有id="section"的元素。这就是为什么很多人搜wordpress怎么在文章中做一个单词链接到本文章中的一段文字时，看到的教程要么过时，要么太复杂。

我还注意到一个数据细节。根据中国互联网络信息中心(CNNIC)发布的第52次《中国互联网络发展状况统计报告》，截至2023年6月，我国网站总数约为409万个，其中使用开源CMS（如WordPress）构建的站点占比极高。这意味着，解决WordPress内部的交互问题，比定制开发一套前端框架要普及得多，也更有参考价值。如果你的站点还在用静态HTML，那更得学这一招，因为静态站改一个链接位置都得重新部署。

技术选型：别被花里胡哨的功能插件坑了

面对这个需求，市面上有三条路。

第一条路，装插件。确实有插件叫“Table of Contents Plus”或者“Easy Table of Contents”，它们能自动生成目录。但目录是列表形式，而我们要的是正文中的内联链接。有些插件支持自定义锚点，但往往需要付费版，而且加载了多余的JS文件，拖慢网站速度。对于追求极致性能的站点，能少装一个插件就少装一个。

第二条路，用短代码插件。比如Insert Headers and Footers，或者Code Snippets。你可以在函数文件里加代码，但这需要编辑主题文件或者用子主题。对于不懂PHP的新手，一旦改错，白屏警告等着你。风险太高，不推荐作为首选方案。

第三条路，纯前端实现。利用HTML5的原生锚点功能，配合一点CSS或原生JS实现平滑滚动。这是最轻量、最稳定、性能最好的方案。我推荐大家走这条路。

这里有个关键的技术选型细节：WordPress的块编辑器在保存时，会自动给每个块生成一个wp-block类的div包裹，或者如果是旧版，就是直接输出<p>。我们需要确定我们要锚定的目标元素是什么。

通常，我们希望在文章末尾放一个“常见问题”区块。在WordPress中，这个区块可以是“分组块”（Group）、“列块”（Columns）或者简单的“段落块”。为了确保ID能准确挂上去，我建议用一个“HTML块”或者“自定义HTML块”来包裹我们要锚定的内容。这样最可控。

另外，关于平滑滚动，现代浏览器（Chrome 61+，Firefox 36+，Safari 13+）都支持scroll-behavior: smooth这个CSS属性。这意味着，你甚至不需要写一行JavaScript代码，只需要在CSS里加这一行，所有锚点跳转都会自动变成平滑滚动。这大大简化了实现难度。

所以，我们的技术栈非常清晰：WordPress原生块编辑器 + 自定义HTML锚点ID + 全局CSS平滑滚动。不需要PHP，不需要复杂的JS，不需要付费插件。

核心实现：手把手教你写代码

现在进入实操环节。假设我们的文章标题是《2024年工业泵维修指南》，我们需要在正文第三段的“保修期”一词，链接到文章末尾的“保修政策”章节。

第一步：给目标段落加上ID

在WordPress块编辑器中，找到你文章末尾的那个“保修政策”标题或段落。选中这个块，点击块工具栏右上角的“三个点”菜单，选择“高级”（Advanced）。

在高级设置面板中，你会看到“锚点”（Anchor）输入框。在这里输入一个唯一的ID，比如policy-section。

注意：这个ID必须是英文、数字或下划线，不能有空格，不能以数字开头。输入后，保存或预览一下。

此时，这个块的HTML结构大致长这样（具体取决于你用的块类型）：

<div class="wp-block-group" id="policy-section"><h2>保修政策</h2><p>所有维修部件享有12个月保修...</p>
</div>

如果用的是段落块，结构可能是：

<p id="policy-section">所有维修部件享有12个月保修...</p>

无论哪种，只要id属性存在，锚点就能生效。

第二步：在正文中创建链接

回到文章正文，找到你要做链接的那段文字。比如“本服务包含12个月保修期”。

选中“保修期”这三个字。在块编辑器的工具栏上，点击“链接”图标（链条形状）。在弹出的链接输入框中，输入#policy-section。

点击“应用”。

此时，编辑器里会显示“保修期”变成了蓝色带下划线的链接。但是，如果你现在直接点，可能没反应，或者跳转后没有平滑效果。这是因为浏览器默认行为。

第三步：实现平滑滚动（关键优化）

为了让用户体验更丝滑，我们需要添加CSS。

方法一：全局CSS（推荐）

进入WordPress后台，外观 -> 自定义 -> 附加CSS。在输入框里加入以下代码：

html {scroll-behavior: smooth;
}

这一行代码会让全站所有的锚点跳转（包括导航栏跳转、页脚跳转）都变成平滑滚动。这是最优雅的做法。

方法二：针对特定链接的CSS（如果不想影响全站）

如果你担心影响其他地方的跳转体验，可以给这个特定的链接加一个class。在块编辑器中，选中刚才那个链接，在高级设置里添加CSS类：smooth-link。

然后在附加CSS中写：

html {scroll-padding-top: 80px; /* 预留顶部导航栏的高度，防止跳转后被遮挡 */
}/* 注意：scroll-behavior: smooth 是 html 元素的属性，不能直接给 a 标签用 */
/* 所以还是推荐上面的全局方法，或者用 JS 增强 */

等等，scroll-behavior 确实是写在 html 或 body 上的。如果只用CSS，全局平滑是最简单的。

但是，有一个坑：固定定位的导航栏（Fixed Header）。如果你的网站顶部有一个高度为80px的固定导航栏，当锚点跳转时，目标段落会被导航栏遮住。

解决方案是在 html 上设置 scroll-padding-top：

html {scroll-behavior: smooth;scroll-padding-top: 80px; /* 根据你的导航栏高度调整 */
}

第四步：测试与调试

点击“预览”。

点击正文中的“保修期”链接。
页面应该平滑滚动到文章末尾的“保修政策”部分。
注意看，滚动停止的位置，应该是“保修政策”标题上方留出80px的空隙，而不是标题被顶部导航栏盖住。

如果没反应，检查两点：

ID是否拼写错误？#policy-section 和 id="policy-section" 必须完全一致，区分大小写。
是否有其他插件劫持了锚点行为？可以暂时禁用其他JS插件排查。

进阶：如果用的是旧版编辑器

如果你的网站还在用经典编辑器（TinyMCE），操作更简单。切换到“文本”模式（Text tab）。

找到你要锚定的段落，手动添加id：

<p id="policy-section">所有维修部件享有12个月保修...</p>

然后找到你要做链接的文字，手动写HTML：

<a href="#policy-section">保修期</a>

切换回“可视化”模式，就能正常编辑了。

上线与优化：细节决定成败

功能做完了，别急着上线。还有几个细节会影响最终效果。

1. URL变化问题

当用户点击链接跳转后，浏览器地址栏的URL会发生变化，后面会加上#policy-section。比如从https://example.com/post-123/变成https://example.com/post-123/#policy-section。

这对于SEO是友好的。用户如果刷新页面，依然会定位在那个段落。这对于分享链接也很有用，用户可以把这个带锚点的URL发给别人，别人打开就能直接看到那段话。

但是，有些用户会觉得地址栏变了很突兀。目前主流浏览器都没有提供“不改变URL”的锚点跳转方案，除非用JS操作history API，但这会增加复杂度，且对SEO不利（因为搜索引擎爬虫可能无法正确抓取这种动态状态）。所以，保持URL变化是正确做法。

2. 移动端体验

在手机上测试一下。移动端的滚动条行为与桌面端略有不同，但scroll-behavior: smooth同样有效。注意，有些老版iOS Safari对scroll-behavior支持不佳，可能需要JS fallback。但考虑到iOS 13+已经支持，且目前iOS 17/18普及率极高，纯CSS方案已经足够覆盖95%以上的用户。

3. 性能影响

这个方案几乎没有性能开销。没有额外的HTTP请求，没有大型JS库。CSS只有一两行。对于追求PageSpeed Score 90+的站点，这是最安全的交互增强方式。

4. 多语言站点注意

如果你的站点是多语言的，比如使用WPML插件。确保每个语言的版本中，锚点ID保持一致，或者对应翻译后的内容。如果中文站是#policy-section，英文站最好也是#policy-section，或者#warranty-policy，只要在同一语言页面内自洽即可。