如何在WordPress中添加WordPress锚链接(3种方式)

您将围绕网站参考可用性和用户体验(UX)做出的许多设计选择.更重要的是,博客内容-通常,阅读您的网站页面-具有很大的价值.如果您嫁给这两个,则经常会考虑帮助您的内容的UX.WordPress锚链接是您内容的UX的主食.

将锚点链接视为有关帖子的内联导航.您可以将它们放置在任何地方,但是标题是常见的用例.如果他们愿意的话,可以让读者在帖子中跳来跳去.这是一流的UX考虑,大多数网站所有者应该考虑的事情.

向您展示使用它们的简单性,这篇文章将查看WordPress锚点链接.在我们添加不同的方式之前,让我们谈谈它们是什么以及它们可以为您做什么.

什么是锚链接

从一般意义上讲,锚链接是 inline导航.它特定于一件内容,并将您带到页面上的一个点.我们在WPKube上使用它们来帮助您跳到教程中的不同步骤:

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

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

我们将可用性作为使用WordPress锚固链接的关键动机,这是使用它们的可用主要理由.但是,有很多用例将其添加到您的网站中.例如:

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

简而言之,如果您希望读者在网站上坚持下去,并参与您的内容,WordPress锚点链接是交通战斗中的重要武器.至于如何将它们添加到您的网站,接下来的几节将向您显示.

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

添加WordPress锚链接的基础.实际上,您不仅可以在WordPress中使用这些网站上的这些网站.有两个部分:锚和标签.

首先,您将使用<a>标签添加锚点链接.对于链接本身,您将在其之前使用" contothorpe"(否则称为哈希或磅标志):

<a href="#anchor-link">Click further down the page</a>

但是,如果单击此,链接将无处可走.为了使它进入某个地方,您将在内容中添加相同的href链接与id在内容中,而无需octothorpe:

<h2 id="anchor-link">Our Anchored Heading</h2>

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

如何添加WordPress锚链接(3种方法)

我们将立即向您展示WordPress锚链接的真实示例!这是我们将要在接下来的几节中介绍的内容:

  • 您可以将锚添加到 block编辑器元素中,并在其他元素上设置ID.
  • page builders 例如Elementor将提供一个模块,让您将WordPress锚固链接添加到内容.

    首先,我们将研究手动方法.听起来很难,但使用块编辑器使此简单.

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

    对于大多数用户,Block Editor提供了将WordPress锚链接添加到内容所需的一切.首先,突出显示您要添加链接的文本,就像使用超链接一样:

    :

接下来,使用相关选项将其转换为链接,并添加您的锚标签,然后使用octothorpe:

您会知道是否正确,因为您会在链接旁边看到"内部"一词.保存下来后,请转到要设置锚点的内容的一部分.我们将使用标题.

您需要前往右侧侧边栏中的Advanced 部分,然后将其展开.在那里,您会看到 html锚字段:

在这里,添加您的WordPress锚链接的文本,而无需OCTOTHORPE.这就是您需要做的一切,如果您查看实时预览,您会看到锚链接起作用.

添加锚链接到经典编辑器

classic编辑器有点像全手动的HTML方法与那是一种混合方法,块编辑器.首先,您将在视觉页面中添加到内容的链接……

…然后,您将切换到文本编辑器并将锚添加到所需元素中:

切换回Visual编辑器后,您将看到到位的链接,但是在预览帖子之前,它可能无法正常工作.

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

大多数页面构建器插件,例如elementor Beaver Builder 提供模块以在您的内容中添加锚固链接.这些可以像HTML一样灵活,因为它们可以进入其他模块可以的任何地方.

例如,在Elementor中,您将使用菜单锚元素:

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

保存更改后,您可以测试锚点链接.不同的页面构建器使用各种方法添加WordPress锚链接,您还将在前端找到不同的实现.但是,这个概念是相同的,您也将获得相同的最终结果.

3.使用插件将自动锚链接添加到您的网站

如果要在网站上添加更多功能,并帮助您的WordPress锚链接发光,则可以使用内容表(TOC)插件.有一些可用的,但大多数没有针对当前WordPress版本的测试,也没有定期更新.但是, simpleteToc plugin 勾选所有正确的盒子:

当然,您需要以通常的方式安装和激活插件,然后前往块编辑器.接下来,保存您的内容,然后搜索SimpleToc块:

将其添加到帖子中后,它将自动获取内容中任何标题的链接.TOC将显示这些标题,您不必执行任何手动标签.

但是,如果需要,您可以限制TOC的一些标题.如果将simpletoc-hidden CSS类添加到标题块的其他CSS类(ES)字段中,则将其隐藏在您的TOC中.您可以在与HTML锚字段相同的位置找到此字段:在 block> Advanced 侧栏中:

这是一个简单的实现,可能没有与手动方法相同的灵活性,但是它很快,可以让您以典型的方式使用WordPress锚固链接.

结论

用户的体验至关重要,因此,您需要考虑所有可以在网站上花费时间的方式.WordPress锚链接可以实现这一目标.它们可以帮助您创建内联内容导航,反过来,这将帮助您的用户滚动到所需的内容而无需大惊小怪或延迟.

这篇文章已经研究了几种将WordPress锚链接添加到您的网站的方法.这是一个快速回顾:

  • 您可以将它们添加为任何网站上的HTML标签的一部分,而不仅仅是WordPress.
  • 块编辑器让您以添加添加超链接的方式添加锚.
  • 诸如Elementor之类的页面构建器通常具有专用模块,让您在内容中添加锚点.
  • 插件,例如SimpleToc 可以将自动的WordPress锚固链接添加到您的内容中.在某些情况下,插件会更新其内容表以匹配您的帖子标题.

您是否认为WordPress锚链接为您的SEO和您的读者提供价值,如果没有,什么可以帮助他们参与?在下面的评论部分中让我们知道!

4

发表回复