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

您将围绕站点参考可用性和用户体验(UX)做出许多设计选择。更重要的是,博客内容——通常是阅读您网站的页面——具有很大的价值。如果您将这两者结合起来,您通常会考虑帮助您的内容用户体验的方法。WordPress锚链接是内容用户体验的主要内容。将锚链接视为相关文章的内联导航。您可以将它们放在任何地方,但标题是一个常见的用例。这让读者可以在不迷路的情况下随意跳

anchor-links-wordpress.pngo_

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

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

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

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

toc-list-sample-1024x223.pngo_

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

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

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

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

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

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

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

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

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

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

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

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

highlighted-text.pngo_

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

block-anchor-tag.pngo_

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

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

html-anchor-field.pngo_

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

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

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

classic-editor-link.pngo_

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

classic-editor-anchor.pngo_

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

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

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

elementor-menu-anchor.pngo_

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

menu-anchor-id.pngo_

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

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

simpletoc-plugin.pngo_

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

simpletoc-block.pngo_

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

simpletoc-example.pngo_

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

css-classes-field.pngo_

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

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

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

  • 您可以将它们作为HTML标签的一部分添加到任何网站上,而不仅仅是WordPress。
  • 区块编辑器允许您以与添加超链接相同的方式添加锚点。
  • Elementor等页面构建器通常具有专用模块,可让您向内容添加锚点。
  • 诸如SimpleTOC之类的插件可以将自动WordPress锚链接添加到您的内容中。在某些情况下,插件会更新其目录以匹配您文章的标题。

本文内容来源于公开网络,出于传递信息之目的整理发布。原文版权归原作者所有,若涉及侵权请先提供版权后联系我们删除

(0)
WP之家WP之家
上一篇 2025年3月13日 下午5:09
下一篇 2025年3月13日 下午5:10

相关推荐

  • 如何在WordPress文章或页面中显示Pinterest图像

    您的WordPress网站非常适合作为在线营销的中心枢纽。一个原因是它与社交媒体的整合程度如何。例如,如果您想在WordPress文章或页面中嵌入Twitter内容、显示TikTok或显示Pinterest图像,则这些平台非常出色。WordPress包括一些显示Pinterest内容的方法,但也有“官方”方法。幸运的是,它们都很容易在您的网站上实施。在这篇文章中,我们将提供两种在WordPress

    2025年3月13日
  • 怎样提升wordpress网站的安全性?Wordfence为您的安全保驾护航

    如何安装安全插件,配置wordfence,让你的网站更安全。 安装Wordfence 后台安装新插件,在插件搜索栏输入wordfence,第一个选择安装,启动。 点击获取wordfence许可证。 选择最左边免费证书 输入邮箱得到安装链接和…

    2025年3月17日
  • 如何使用插件或者自定义页面创建一个WordPress着陆页

    着陆页可以通过鼓励访问者采取所需的行动来提高您的WordPress网站的转化率,例如订阅新闻通讯、购买产品或注册网站。虽然着陆页的平均转化率为9.7%,但添加图片或社交等元素可能会进一步提高转化率。因此,创建一个好的目标网页对于促进您的业务至关重要。在本文中,我们将向您展示如何在WordPress中创建着陆页并讨论何时使用的三种简单有

    2025年3月13日
  • 如何设置WordPress文章待审核邮件通知

    当作者提交文章至WordPress网站进行审核时,如果配合电子邮件通知,体验就更佳了。在WordPress博客中管理多个作者可能会很忙。如果你有一个多作者博客,那么你可能会发现知道作家何时提交文章供评论是有帮助的。在本教程中,我们将向您展示如何获得在WordPress中等待审核的文章的电子邮件通知。当你第一次开始你的WordP

    2025年3月13日
  • 如何使用LearnPress搭建WordPress在线课程网站

    课程通过以具有指导性和易于遵循的方式为您的受众提供价值,为您提供了一种增加业务收入和电子邮件列表的绝妙方式。您可以通过提供成熟的课程来实现这一目标,从而可能赚取数万元的收入,或者只需使用免费的迷你课程作为磁石来吸引您的电子邮件列表的新订阅者。无论您为什么要创建课程,LearnPress都可以帮助您在WordPress中构建它。Lear

    2025年3月13日
  • 古腾堡编辑器教程:如何使用WordPress封面区块

    WordPress封面区块很有趣。它允许您在背景中放置图像、视频或纯色,并将内容区块添加到前景。这意味着您可以将区块放置在其他块上。它比大多数块有更多的选择。了解如何使用封面区块可以极大地增强您网站的设计。在本教程中,我们将了解封面区块的功能并查看其设置

    2025年3月13日
  • 如何安装WordPress插件(三种不同方法)

    安装WordPress插件对某些人来说似乎微不足道,但我们想涵盖您可以执行此操作的所有不同方法。这包括适合初学者的简单方法和更高级的方法;对于那些拥有更多经验的人,例如WordPress开发人员。今天,我们将深入探讨如何在您的网站上安装WordPress插件的三种不同方法。这包括从WordPress仪表盘中搜索、通过SFTP手动上传插件以及通过WP

    2025年3月13日
  • 如何配置WordPress隐私设置

    隐私政策是WordPress网站中最不被重视的部分之一,尽管几乎每个访客都要点击一个按钮来同意它。正因为如此,拥有一份可靠的隐私政策是您能为网站做的最重要的事情之一。从提供法律保护(国内和国际)到成为搜索引擎优化排名的因素,您的WordPress隐私政策应该是一流的、清晰的和最新的。我们有一些工具和资源可以帮助您做到这一点,还有一些关于WordPress隐私政策中应包

    2025年3月13日