在WordPress中添加锚链接(Anchor Link)

在WordPress中添加锚链接(Anchor Link)

我们将围绕站点参考可用性和用户体验 (UX) 做出许多设计选择。更重要的是,博客内容——通常是阅读我们网站的页面——具有很大的价值。如果我们将这两者结合起来,我们通常会考虑帮助我们的内容用户体验的手段。WordPress锚链接是内容用户体验的主要内容。

将锚链接视为相关文章的内联导航。我们可以将它们放在任何地方,但标题是一个常见的用例。这让读者可以在不迷路的情况下随意跳转文章。这是一流的UX考虑因素,也是大多数网站所有者应该考虑的问题。

为了向我们展示使用它们是多么简单,这篇文章将着眼于WordPress锚链接。在我们探讨添加它们的不同方式之前,让我们先谈谈它们是什么,以及它们可以为我们做什么。

什么是锚链接

在一般意义上,锚链接是可点击的内嵌导航。它特定于一段内容,并将带我们到页面的稍后位置。我们在闪电博使用它们来帮助我们跳转到教程中的不同步骤:

闪电博文章锚链接示例

如果我们单击该链接,该页面将跳至我们指定的相关部分。这是一个简单的实现,可以对我们网站的可用性产生很大影响。接下来我们将探讨其中的一些实例。

为什么要在WordPress中使用锚链接

我们提到可用性是使用WordPress锚链接的关键动力,这是使用它们的主要原因。但是,有很多用例可以将它们添加到我们的站点。例如:

  • 如果我们想向读者提供超长格式的内容(例如3,000字的文章),我们通常会有一个目录。这是为锚链接量身定制的用途。
  • 当我们共享书签文章时,锚点也可以工作。如果我们在URL中包含锚点,读者将直接跳转到我们希望他们看到的位置。
  • 我们的搜索引擎优化 (SEO)可以得到提升,因为在某些情况下,搜索引擎会将这些WordPress锚链接显示为单独的条目。

简而言之,如果我们希望我们的读者留在我们的网站上并与我们的内容互动,那么WordPress锚链接是争夺流量的重要武器。至于将它们添加到我们的网站,接下来的几节将向我们展示。

将锚链接添加到任何HTML代码

添加WordPress锚链接的基础是HTML。事实上,我们可以在任何网站上使用这些,而不仅仅是在WordPress中。有两部分:锚点和标签。

首先,我们将像添加任何其他超链接一样添加锚链接——使用标签。对于链接本身,我们将在它之前使用“octothorpe”(也称为井号):

Click further down the page

但是,如果我们单击此链接,则该链接将无处可去。为了让它去某个地方,我们将在内容中添加与稍后相同的href链接id,而不使用octothorpe:

这会将两个标签链接在一起,并创建我们需要的内联导航。请注意,我们在这里使用了一个标题标签,但这可以是任何HTML标签。欢迎我们使用段落标签、图像标签或HTML的任何其他元素,如果这样可以将用户带到他们需要的地方。

添加WordPress锚链接

我们现在将向我们展示WordPress锚链接的真实示例!以下是我们将在接下来的几节中介绍的内容:

  • 我们可以将锚点添加到区块编辑器元素,并在其他元素上设置ID。这在经典编辑器中也是可能的。
  • Elementor等页面构建器将提供一个模块,让我们将WordPress锚链接添加到内容。
  • 有些插件可以为我们的内容添加自动锚链接,这可以节省我们一些设置时间。

首先,我们将看看手动手段。虽然听起来很难,但使用区块编辑器让这一切变得简单。

1. 使用手动手段将锚链接添加到区块编辑器

对于大多数用户来说,区块编辑器提供了将WordPress锚链接添加到我们的内容所需的一切。首先,突出显示要添加链接的一段文本,就像使用超链接一样:

WordPress编辑器高亮文本

接下来,使用相关选项将其转换为链接,并添加我们的锚标记,前面有一个octothorpe:

区块编辑器锚标签

你会知道你是否做对了,因为你会在链接旁边看到“internal”这个词。保存后,转到我们想要将锚点设置到的内容部分。我们将使用标题。

我们需要前往右侧边栏中的Block > Advanced部分,然后展开它。在那里,我们将看到HTML锚字段:

html锚字段

在这里,添加WordPress锚链接的文本,不带octothorpe。这就是我们需要做的所有事情,如果我们查看实时预览,我们会发现锚链接有效。

将锚链接添加到经典编辑器

经典编辑器的过程是完全手动的HTML手段和区块编辑器的混合体。首先,我们将在Visual页面中添加指向我们的内容的链接……

经典编辑器添加锚链接

…然后我们将切换到文本编辑器并将锚点添加到我们想要的元素:

经典编辑锚标签示例

切换回可视化编辑器后,我们将看到该链接,但在我们预览文章之前,它可能无法按预期工作。

2.使用页面构建器插件添加锚链接

大多数页面构建器插件,例如Elementor或Beaver Builder都提供模块来将锚链接添加到我们的内容中。这些可以像HTML一样灵活,因为它们可以去任何其他模块可以去的地方。

例如,在Elementor中,我们将使用Menu Anchor元素:

elementor锚菜单

要使用它,请将其拖动到我们选择的点。我们建议我们将其放在任何标题元素之前,或者至少在我们需要锚定的部分之前。

菜单锚id

保存更改后,我们可以测试锚链接。不同的页面构建器使用不同的手段添加WordPress锚链接,我们还会在前端找到不同的实现。但是,概念是相同的,我们也会得到相同的最终结果。

3.使用插件将自动锚链接添加到我们的站点

如果我们想为我们的网站添加更多功能,并帮助我们的WordPress锚链接上一个台阶,我们可以使用目录 (ToC) 插件。有一些可用,但大多数没有针对当前WordPress版本的测试,或者没有定期更新。但是,SimpleTOC插件勾选了所有正确的框:

simpletoc插件

当然,我们需要以通常的方式安装并激活插件,然后前往区块编辑器。接下来,保存我们的内容,然后搜索SimpleTOC区块:

simpletoc区块

将其添加到文章后,它将自动获取内容中任何标题的链接。ToC将显示这些标题,我们无需执行任何手动标记。

simpletoc示例

但是,如果我们愿意,可以限制ToC中的某些标题。如果我们将simpletoc-hiddenCSS类添加到Heading Block的Additional CSS class(es)字段,这将从我们的ToC中隐藏它。我们可以在与HTML锚字段相同的位置找到此字段:在“区块”>“高级”侧边栏中:

css类字段

这是一个简单的实现,可能没有手动手段那样的灵活性,但它很快,让我们无需太多努力就能以典型的方式使用WordPress锚链接。

结语

用户的体验是最重要的,因此,我们需要考虑让他们在网站上的时间变得重要。WordPress锚链接可以实现这一点。它们帮助我们创建内联内容导航,反过来,这将帮助我们的用户滚动到他们需要的内容,而不会大惊小怪或延迟。

这篇文章介绍了几种将WordPress锚链接添加到我们的网站的手段。这是一个快速回顾:

  • 我们可以将它们作为HTML标签的一部分添加到任何网站上,而不仅仅是WordPress。
  • 区块编辑器允许我们以与添加超链接相同的方式添加锚点。
  • Elementor等页面构建器通常具有专用模块,可让我们向内容添加锚点。
  • 诸如SimpleTOC之类的插件可以将自动WordPress锚链接添加到我们的内容中。在某些情况下,插件会更新其目录以匹配我们文章的标题。
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论