说些傻事,聊些趣事,谈些好事

wordpress如何用html锚点链接定位设置目录

w

有一种简单的方法来将锚点链接添加到WordPress帖子和页面吗?

锚链接是将目录添加到帖子中的绝佳方法,可帮助用户浏览较长的文章。

还可以使用定位链接来帮助你显示在特定的搜索结果中,从而提高排名。

本文将展示如何轻松地在WordPress中创建html锚点链接。

在开始之前,请单击此目录中的任何锚定链接以跳至所需的部分(本目录也是通过锚点定位实现):

目录

什么是HTML锚点链接?

锚点链接是一种链接类型,您可以单击它以自动跳到同一页面上的另一个区域。这使读者更容易在长篇文章和文章中找到特定信息。

比如这篇文章采用的也是锚点定位:

如何用正确的方式培养孩子?(文字版)

Html Anchor Example
Html Anchor Example

在上面的示例中看到的那样,单击锚点链接可立即到页面上的该位置。

 让你的访客互动,最简单方法是帮助他们快速找到所需的信息。

比如可以通过创建定位链接,用户可以直接跳到感兴趣的部分。这是改善用户体验并赢得更多读者的好方法。

锚链接也可以改善WordPress SEO。Google经常在搜索结果中将锚链接显示为“跳转到”链接,以便读者可以直接从结果页面跳至特定部分。

Google在搜索结果中将锚链接显示为“跳转到”链接

有时,Google还会将单个页面上的多个链接显示为“跳转到”链接。事实证明,这些链接可以提高搜索结果的点击率,这意味着您的网站会有更多的点击量

Google还可以在搜索结果中显示单个文章的多个锚链接

那么,如何创建链接以跳转到WordPress页面的特定部分?

如何在WordPress区块编辑器中添加锚链接?

在新的WordPress区块编辑器中创建锚链接非常简单。您只需要做两件事即可使锚点链接正常工作:

  1. 在锚文本之前创建带有#号的链接
  2. 将ID属性添加到您希望用户跳转到的文本

请按照以下说明学习如何自己执行此操作。

第一步是选中你要添加锚链接的文本。然后在WordPress块编辑器中单击插入链接图标。

单击该图标将显示“插入链接”。 比如本文目录:

Image
Image

对于锚链接,必须输入#号和要用户跳转到的部分的关键字。比如:#editor-anchor 

使用的关键字应:

  • 与您链接到的部分相关
  • 不会太长或太复杂
  • 使用大写字母使锚文本更具可读性
  • 包括连字符以分隔单词并使它们更易于阅读

输入锚定链接关键字后,单击Enter创建链接。(不要选在新窗口打开,因为你这是一个页面里操作的)

然后,可以看到在WordPress编辑器中创建的链接,但是单击它不会执行任何操作。

为啥?

因为没有链接到锚链接的ID,单击链接时浏览器会查找该ID。

您可以通过将ID属性添加到要链接的内容区域来解决此问题。


第2步:将ID属性添加到链接文本

在WordPress内容编辑器中,向下滚动到希望用户单击锚链接时跳转到的内容。通常是新段落的标题或开头。 

现在,单击包含要链接的部分的块,然后导航到页面右侧的“区块”

在块设置中,展开“高级”选项卡,然后在HTML锚框中输入与锚文本链接相同的关键字。唯一的区别是,开头不需要#号。

Image 1
Image 1

保存并预览文章时,可以看到锚链接ok啦。只需单击它即可跳至先前链接的内容。

但是要链接的内容区域不是标题,而是常规段落或文本,则过程会有所不同。

在这种情况下,单击块以显示块设置,然后单击三点菜单以显示更多选项。

将WordPress区块编辑为HTML

选择“编辑为HTML”选项,该选项编辑整个内容块的所有HTML。

现在,需要找到要指向的信息的HTML标记。例如,如果它是一个段落,请查找<p>,如果它是一个表,请查找<table>,依此类推。

找到标签后,将定位关键字添加为id属性,类似于下面的示例:

<p id =“bali-hiking-adventures”>

添加关键字后,您会看到一条通知,说明该阻止包含无效或意外内容。

将您的WordPress块转换为HTML,以完成添加锚链接

因此,单击“转换为HTML”按钮以保存更改。

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

如果您仍在使用经典的WordPress编辑器,则添加锚链接会稍有不同。请按照以下步骤学习如何在经典的WordPress视觉内容编辑器中创建锚链接。

首先,突出显示要链接的文本,然后单击内容编辑器顶部的“插入链接”按钮。

使用#前缀和链接段将链接添加到经典WordPress编辑器中。

接下来,添加带有#前缀的锚关键字,然后添加要链接的文本。

步骤2:将ID属性添加到链接文本

下一步是将浏览器指向单击锚链接时希望用户跳至的内容部分。

为此,请在经典的WordPress编辑器中切换到“文本”模式,然后滚动到要显示的部分。

切换到文本编辑器,然后将id属性添加到您的HTML内容中

接下来,找到您想要锚链接定位的HTML标签。例如,<h2>,<h3>,<p>等。

现在,将ID属性与锚链接的关键字一起添加,不带#前缀。这是看起来的示例:

<h2 id =“ bali-hiking-adventures”>

现在,您可以保存更改并预览内容,以查看锚链接。

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

如果你通常使用文本模式在经典的WordPress编辑器中编写内容,则可以通过以下方式手动创建HTML锚链接。

首先,使用<a href=” “>”标签创建带有#前缀的锚链接,类似于以下示例:

<a href="#bali-hiking-adventures">巴厘岛徒步旅行历险记</a>

然后滚动到用户单击链接时要显示的内容部分。通常,该部分是H2或H3标签,但它也可以是另一个HTML元素,例如简单的段落<p>标签。

找到HTML标记后,添加不带#前缀的ID属性和锚文本,如下所示:

<h2 id =“ bali-hiking-adventures”>巴厘岛徒步旅行历险记</ h2>

现在,您可以保存更改并预览内容以测试锚链接。

如何使用WordPress插件自动添加锚链接

如果您定期发布长篇文章,则可以通过自动将锚链接添加到内容中的不同标题,并使用WordPress插件创建目录来节省时间。这使用户可以更轻松地找到所需信息,而无需手动创建每个锚链接。

为此,请下载Easy Table of Contents插件,然后在您的WordPress网站上安装并激活它。如果您需要帮助,请按照以下说明安装WordPress插件。

该插件使用内容中的标题来猜测要链接的部分,并且您可以根据需要完全自定义设置。

安装并激活插件后,导航至“设置”»“目录”以配置设置。

配置简易目录插件的设置

然后为您要添加锚链接的帖子类型启用插件,并取消选中您不希望显示目录的区域。

您也可以打开自动插入选项。这样,插件就可以为所有选定的内容类型(包括较早的内容)自动创建目录。

如果您只想自动为特定文章创建目录,请取消选中此选项。

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

在WordPress中为目录选择位置设置

例如,您可以在第一个标题之前或之后以及文章中存在一定数量的标题时显示目录。

在页面的下方,您可以选择一个主题来匹配您网站的品牌,并查看更多高级设置。

为目录选择一个主题以匹配您网站的品牌。

请记住单击“保存更改”按钮以保存您的设置。

如果启用了自动插入选项,则可以预览标题数量正确的文章,以查看正在使用的目录。

但是,如果要手动生成目录,则需要分别编辑每篇文章。

为此,请转到内容的编辑屏幕,然后向下滚动到编辑器下方的“目录”选项卡。

在此处,单击“插入目录”复选框,然后选择要包含为锚链接的标题。

单击复选框将目录插入文章中

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

英文原文,略有改动:How to Create Anchor Links in WordPress

评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

说些傻事,聊些趣事,谈些好事

立悟公众号

html锚点,目录插件,锚点定位设置

Toolsily工具公众号

html锚点,目录插件,锚点定位设置

目录