如何在 WordPress 中创建和添加锚链接：详细指南

锚链接，也称为跳转链接或跳过链接，通过减少滚动改善了较长或文本较多的 WordPress 页面和帖子的导航和用户体验。它们允许用户通过单击链接快速跳转到同一页面上的特定内容部分。

在本指南中，我们将详细介绍在 WordPress 中添加锚链接的所有步骤和注意事项，包括经典编辑器、Gutenberg 编辑器和 WPBakery 页面构建器中的实现方法。

什么是锚链接？

锚链接是一种超链接，它不会将你带到新页面，而是跳转到同一页面的特定部分。例如，如果你正在阅读一篇较长的文章，并且顶部有一个目录，可以点击链接直接转到你感兴趣的部分。

通常，锚点被添加到文本元素，如标题或段落，但也可以添加到菜单项、按钮、图像或表单。

为什么要使用锚链接？

使用锚链接可以改善你网站的用户体验，让用户无需无休止滚动即可快速找到他们所需内容，并且还有利于网络可访问性。锚链接可以帮助 Google 等搜索引擎更好地理解你的页面结构，从而提高网站的排名。

锚链接的结构

为了理解锚链接，让我们分解一下它们的结构。锚链接由两个主要部分组成：

1. ID（标识符）

这是你添加到要链接到的元素的唯一标识符。在 HTML 中，可以像这样向元素添加 ID：

<h2 id="section1">section1</h2>

这里，id="section1" 是唯一标识符。

2. 链接

这是可点击的部分，可跳转到你创建的 ID。使用井号（#）后跟 ID。例如：

<a href="#section1">Go to Part 1</a>

href="#section1" 部分告诉浏览器在点击链接时跳转到 ID 为“section1”的元素。

如何在 WordPress 中创建锚链接

使用 WordPress 经典编辑器

首先介绍在 TinyMCE 的经典编辑器中添加锚链接的方法，这是在 WordPress 中编辑帖子和页面的经典方式。

1、为元素添加唯一 ID

1. 打开要添加锚链接的帖子或页面。
2. 从可视模式切换到文本模式，可直接编辑 HTML。
3. 找到要附加锚点的内容部分。
4. 为元素添加唯一 ID，例如：

<h2 id="section1">第 1 节</h2>

如果你想在某个段落中为特定单词或短语添加 ID，可以像这样添加：

<p>这是一个 <a id="specificWord">特定单词</a> 的示例。</p>

2、链接到锚点

1. 从文本模式切换回可视模式。
2. 选择将用作链接的文本，然后单击工具栏中的“插入/编辑链接”。
3. 在弹出窗口中，使用井号（#）后跟你创建的 ID：

<a href="#section1">Go to section 1</a>

单击“添加链接”，保存更改，就完成了在经典编辑器中创建锚链接。

3、从导航栏添加锚点

1. 在 WordPress 信息中心中，转到“外观”，然后转到“菜单”。
2. 在菜单编辑器中，点击“自定义链接”将其展开。
3. 添加指向目标页面的链接，将井号（#）与元素 ID 一起添加到你的链接：

<a href="#section1">Go to section 1</a>

保存更改并查看结果。

使用 Gutenberg 编辑器

接下来介绍如何在 Gutenberg 编辑器中创建锚链接，这是 WordPress 中较新的基于块的编辑器。

1、为元素添加唯一 ID

1. 打开要添加锚链接的帖子或页面。
2. 选择要添加锚点的块。
3. 在区块设置中，向下滚动并点击“以 HTML 格式编辑”。
4. 找到要附加锚点的内容部分，为元素添加唯一 ID：

<h2 id="section1">第 1 节</h2>

或者，你也可以通过选择块，转到右侧块设置中的“高级”部分，然后在那里输入你的唯一 HTML 锚点。

2、链接到锚点

1. 单击“可视化编辑”切换回文本块。
2. 选择将用作链接的文本，然后单击工具栏中的“链接”。
3. 在弹出窗口中，使用井号（#）后跟你创建的 ID：

<a href="#section1">转至第 1 部分</a>

按“Enter”键，保存更改，就完成了在 Gutenberg 中添加锚链接。

在 WPBakery 页面构建器中创建锚链接

最后，让我们探索如何在 WPBakery Page Builder 中添加锚链接，这使你可以将锚点添加到 WordPress 页面或帖子中的任何元素。

1、为元素添加唯一 ID

1. 选择并添加要添加锚点的元素（或者换句话说，链接将跳转到的目的地）。
2. 打开元素的编辑窗口。
3. 向下滚动到“元素 ID”部分并添加你的唯一 ID：

<h2 id="section1">section 1</h2>

2、链接到锚点

1. 选择并添加要添加锚链接的元素（换句话说，单击时将跳转到目的地的元素），例如“按钮”。
2. 打开元素的编辑窗口。
3. 导航至“URL（链接）”部分并点击“选择 URL”。
4. 在弹出窗口中，使用井号（#）后跟你创建的 ID：

<a href="#section1">Go to section 1</a>

单击“设置链接”，保存更改，并检查您的锚链接如何工作！

锚链接的最佳实践

以下是在 WordPress 中使用锚链接的一些最佳做法：

1. 确保唯一 ID

创建元素 ID 时，确保它们在页面（或同一 HTML 文档）上是唯一。重复的 ID 可能导致意外的跳转行为。

2. 避免在 ID 中使用特殊字符

元素 ID 不能包含空格、标点符号和特殊字符，也不能以数字或破折号 (-) 开头。虽然 HTML 允许这样做，但这可能会在其他情况下造成麻烦，例如 CSS 和 JavaScript，因此最好尽量避免这样做。

3. 链接以“#”开头，但 ID 中不包含“#”

例如，链接应为“#section1”，ID 应为“section1”。这是一个常见错误，会导致锚链接无法正常工作。

4. 避免使用裸锚链接

裸锚链接或原始锚链接是使用 URL 本身作为锚点的链接，例如 https://example.com。虽然在某些情况下可能需要它们，但它们缺乏上下文，并且不能提供与描述性锚文本相同的 SEO 优势。

5. 使锚文本清晰且具有描述性

不要使用“了解更多”、“单击此处”或“继续”等含糊不清的短语，而要使用更具体的文本，例如“单击此处下载用户手册 PDF”或“了解有关我们团队的更多信息”。这可以提高网络可访问性，帮助用户了解链接将带他们去哪里。

6. 测试锚链接是否正常工作

始终测试锚链接以确保其正常工作。无效链接会让用户感到失望，并损害你的 SEO。

何时使用锚链接？（示例）

WordPress 中的锚链接在很多情况下都非常有用。以下是一些示例：

1. 目录

如果您有一篇很长的文章，顶部带有锚链接的目录可以帮助读者跳转到他们想要阅读的部分。

2. 单页导航

对于单页网站，锚链接可以帮助用户快速到达不同的部分，如“关于”、“服务”和“联系”。

3. 行动呼吁 (CTA)

使用锚链接引导用户执行特定操作，例如填写表格或查看产品。

4. 长篇内容

将长篇内容分成带有锚链接的部分，以便读者可以轻松找到所需的信息。

5. 滚动回到顶部

引入“滚动回到顶部”按钮（通常位于网站的右下角），可以帮助用户返回顶部并快速采取行动。

常见问题解答

1. 锚链接和常规链接有什么区别？

锚链接指向同一页面的特定部分，而常规链接通常会将你带到不同的页面。

2. 锚链接能改善 SEO 吗？

是的，锚链接是内部链接策略的一部分，它可以帮助搜索引擎了解页面内容的结构和重要性，从而改善 SEO。

3. 锚链接可以提高可访问性吗？

是的，锚链接可以帮助用户（尤其是残障人士）更有效地浏览长内容，从而提高可访问性。

4. 我如何测试我的锚链接是否有效？

可以通过点击锚链接来测试它们是否将你带到正确的部分。还可以使用浏览器开发人员工具来检查是否存在任何问题。

5. 有什么插件可以帮助我向 WordPress 添加锚链接吗？

是的，有一些插件可以帮助你创建并添加锚链接至 WordPress 布局中的任何元素，例如 WPBakery Page Builder。

结论

在 WordPress 中添加锚链接可以极大地改善您网站的导航、用户体验、SEO 和可访问性。通过遵循本指南中概述的方法，可以使用经典编辑器、Gutenberg 编辑器或 WPBakery 页面构建器轻松地在 WordPress 中创建锚链接。每种方法都有其优点，但如前所述，WPBakery 脱颖而出，允许你将锚链接添加到页面上的任何元素。