如何“轻松”在 WordPress 中添加锚链接(逐步)

我们偶尔会在较长的 WordPress 帖子中使用锚链接来帮助用户快速跳转到他们想要阅读的部分。

锚链接通常用于目录部分,因为它们可以帮助用户在更长的文章中上下移动,而无需重新加载页面。它还可以帮助 SEO,因为 Google 可能会在您的搜索列表下方显示它们以便于导航(稍后会详细介绍)。

在本分步指南中,我们将解释什么是锚链接,并向您展示如何在 WordPress 中轻松添加锚链接。

在 WordPress 中添加锚链接

准备好?让我们从一个锚链接的实例开始。

以下是我们将在本指南中涵盖的所有主题的列表。继续并单击任何这些链接,您将被带到该特定部分。

什么是锚链接?

如何在 WordPress 中手动添加锚链接?

如何在 WordPress 中使用经典编辑器手动添加锚链接?

如何在 HTML 中手动添加锚链接?

如何在WordPress中自动添加标题作为锚链接?

什么是锚链接?

锚链接是页面上的一种链接,可将您带到同一页面上的特定位置。它允许用户跳转到他们最感兴趣的部分。

看看下面的动画截图:

锚链接预览

如您所见,单击锚链接会将用户带到同一页面上的特定部分。

锚链接通常用于较长的文章中作为目录,允许用户快速跳转到他们想要阅读的部分。

锚链接的另一个用途是在您的 WordPress 网站上创建书签链接。这允许您在社交媒体或电子邮件通讯上共享书签链接,因此当页面加载时,您的用户会立即跳转到您希望他们看到的部分。

为什么以及何时应该使用锚链接?

普通用户在决定他们是要留下还是离开您的网站之前花费不到几秒钟的时间。您只有几秒钟的时间来说服用户留下来。

最好的方法是帮助他们快速查看他们正在寻找的信息。

锚链接允许用户跳过其余内容并直接跳转到他们感兴趣的部分,从而使这更容易。这可以改善用户体验并帮助您赢得新客户/读者。

锚链接也非常适合WordPress SEO。谷歌可以在搜索结果中显示一个锚链接作为“跳转到链接”。

跳转到搜索结果中的链接

有时谷歌还可以显示来自该页面的多个链接作为跳转链接,这被证明可以提高搜索结果的点击率。换句话说,您的网站获得了更多流量。

多次跳转到搜索结果下方的链接

说了这么多,让我们来看看如何在WordPress中轻松添加锚链接。

如何在 WordPress 中手动添加锚链接

如果您只想在文章中添加一些锚链接或书签链接,那么您可以轻松地手动完成。

基本上,您需要添加两件事才能使锚文本按预期工作。

在锚文本之前创建一个带有 # 符号的锚链接。

将id属性添加到您希望用户被带到的文本中。

让我们从锚链接部分开始。

步骤 1. 创建锚链接

首先,您需要选择要链接的文本,然后单击WordPress Gutenberg 编辑器中的插入链接按钮。

在 WordPress 中添加链接

这将弹出插入链接弹出窗口,您通常会在其中添加 URL 或查找要链接的帖子或页面。

但是,对于锚链接,您只需使用 # 作为前缀并输入您希望用户跳转到的部分的关键字。

创建锚链接

之后单击输入按钮以创建链接。

关于选择用作锚点的文本的一些有用提示 # 链接:

使用与您链接到的部分相关的关键字。

不要让你的锚链接不必要地长或复杂。

使用连字符分隔单词并使它们更具可读性。

您可以在锚文本中使用大写以使其更具可读性。例如:#Best-Coffee-Shops-Manhattan。

添加链接后,您将能够在编辑器中看到您创建的链接。但是,单击链接不会执行任何操作。

那是因为浏览器无法找到作为 ID 的锚链接。

让我们通过将浏览器指向用户单击锚链接时要显示的区域、部分或文本来解决此问题。

步骤 2. 将 ID 属性添加到链接部分

在内容编辑器中,向下滚动到您希望用户在单击锚链接时导航到的部分。通常,它是新部分的标题。

接下来,单击以选择块,然后在块设置中单击高级选项卡以将其展开。您只需单击标题块设置下的“高级”选项卡即可。

HTML 锚点

之后,您需要添加与“HTML Anchor”字段下的锚链接相同的文本。确保添加不带 # 前缀的文本。

您现在可以通过单击预览选项卡保存您的帖子并查看您的锚链接。

如果您要显示的部分不是标题而是普通段落或任何其他块怎么办?

在这种情况下,您需要单击块设置上的三点菜单并选择“编辑为 HTML”。

编辑为 HTML

这将允许您编辑该特定块的 HTML 代码。您需要选择查找要指向的元素的 HTML 标记。例如,

如果它是一个页面,或者

它是一个表格块,等等。

现在,您需要将您的锚点作为 ID 属性添加到该标签,如以下代码:

您现在将看到一条通知,指出此块包含意外或无效内容。您需要单击转换为 HTML 以保留您所做的更改。

转换为 HTML

如何在经典编辑器中手动添加锚链接

如果您仍在使用 WordPress 的旧版经典编辑器,那么您可以通过以下方式添加锚链接/跳转链接。

步骤 1. 创建锚链接

首先,选择要更改为锚链接的文本,然后单击“插入链接”按钮。

在经典编辑器中添加锚链接

之后,您需要添加带有 # 符号前缀的锚链接,后跟要用于链接的 slug。

步骤 2. 将 ID 属性添加到链接部分

下一步是将浏览器指向您希望在用户单击您的锚链接时显示的部分。

为此,您需要在经典编辑器中切换到“文本”模式。之后向下滚动到要显示的部分。

在经典编辑器中添加锚点 ID

现在找到您要定位的 HTML 标记。例如,

等。

您需要使用不带 # 前缀的锚链接的 slug 为其添加 ID 属性,如下所示:

您现在可以保存更改并单击预览按钮以查看您的锚链接。

如何在 HTML 中手动添加锚链接

如果您习惯于在 WordPress 中以旧版经典编辑器的文本模式编写,那么您可以在 HTML 中手动创建锚链接。

首先,您需要使用常用标签创建带有 # 前缀的锚链接,如下所示:

Best Coffee Shops in Manhattan

接下来,您需要向下滚动到用户单击链接时要显示的部分。

通常,此部分是一个标题(h2、h3、h4 等),但它可以是任何其他 HTML 元素,甚至是一个简单的段落

标记。

您需要将 ID 属性添加到 HTML 标记,然后添加不带 # 前缀的锚链接 slug。

Best Coffee Shops in Manhattan

您现在可以保存更改并预览您的网站以测试锚链接。

如何在 WordPress 中自动添加标题作为锚链接

此方法适用于定期发布长篇文章,需要创建带有锚链接的目录的用户。

您需要做的第一件事是安装并激活Easy Table of Contents插件。有关更多详细信息,请参阅我们关于如何安装 WordPress 插件的分步指南。

此插件允许您自动生成带有锚链接的目录。它使用标题来猜测内容部分,您可以完全自定义它以满足您的需求。

激活后,只需转到设置»目录页面配置插件设置。

简易目录插件设置

首先,您需要为要添加目录的帖子类型启用它。默认情况下,该插件已为页面启用,但您也可以为您的帖子启用它。

您还可以启用自动插入选项。这允许插件自动生成所有文章的目录,包括符合条件的旧文章。

如果您只想为特定文章自动生成目录,则可以不选中此选项。

接下来,向下滚动一点以选择要显示目录的位置以及何时触发它。

选择显示目录的位置和时间

您可以查看页面上的其他高级设置并根据需要进行更改。

不要忘记单击“保存更改”按钮来存储您的设置。

如果您启用了自动插入选项,那么您现在可以查看具有指定标题数量的现有文章。

您会注意到该插件会在文章的第一个标题之前自动显示目录。

如果您想为特定文章手动生成目录,那么您需要编辑要在其中显示带有锚链接的目录的文章。

在帖子编辑屏幕上,向下滚动到编辑器下方的“目录”选项卡。

手动添加带有锚链接的目录

从这里,您可以检查“插入目录”选项并选择要作为锚链接包含的标题。

您现在可以保存更改并预览您的文章。该插件将自动显示锚链接列表作为您的目录。

目录预览

有关更详细的说明,请参阅我们关于如何在 WordPress 中添加目录的文章。

我们希望本文能帮助您了解如何在 WordPress 中轻松添加锚链接。您可能还想查看我们关于如何为 SEO 正确优化博客文章的提示以及我们挑选的最佳 WordPress 页面构建器插件。