提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

如何在WordPress中使用锚点链接(Anchor Links)?

文章导航

本文介绍如何在WordPress中使用锚点链接(Anchor Links),锚点链接可以实现点击链接快速定位到页面中某一个区块内容,是一种比较常用的链接形式。

什么是锚点链接(Anchor Links)?

锚点是网页制作中超级链接的一种,又叫命名锚记,像一个迅速定位器一样,是一种页面内的超级链接,运用相当普遍。 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。 然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。

锚点链接是如何工作的?

最常见的锚点链接就是我们通常在博客页面使用的Table Of Content元素。它是一种默认的锚点链接,你不用去设置锚点即可实现,他是通过H标签的内容来实现的锚点链接跳转。

如何在WordPress中使用锚点链接(Anchor Links)?锚点链接是如何工作的

锚点链接通过设置锚点元素的CSS ID,然后在需要点击跳转的地方添加锚点链接即可,锚点链接通常是通过#加CSS ID的形式。

举个例子:

在某一个页面中,你需要实现点击A跳转到B,那么设置B的CSS ID为b,在A那里添加链接:#b,那么就能实现点击A跳转到B的位置。

如何设置锚点或者CSS ID的内容?

必须是数字和字母(小写),单词之间使用”-“链接,不能有空格,不能有中文字符。

错误的示范:

锚点

Mao Dian

MaoDian

Maodian123

正确的示范:

mao-dian

123

maodian123

如何通过Elementor设置锚点链接?

在Elementor编辑器中使用锚点链接有2种方法可以实现:

1、直接设置元素的CSS ID

在Elementor编辑页面中确定一个你需要跳转的位置,在当前位置的任何元素中设置CSS ID。

比如说,我需要定位到页面中这个标题的位置,那么我设置这个标题的CSS ID为title。

image 72 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

让后我在页面其他的地方添加一个按钮,并为按钮添加链接为#title。

image 73 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

设置完成之后保存,即可实现点击按钮跳转到标题的位置。

2、使用菜单锚点元素

菜单锚点元素实现的锚点链接跳转的方法,本质上还是通过设置CSS ID的方式来实现,菜单锚点元素可以让你不用调整你页面内容,锚点元素可以按照你需要拖放在任何地方,相对更加灵活。

image 69 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

将菜单锚点元素拖拽到页面之后设置菜单锚点元素的ID,比如下图我设置ID为about。

image 70 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

在页面中需要点击跳转到菜单锚点位置的元素(文字/按钮/图片等等)添加链接如下:

image 71 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

设置完成之后保存页面,即可实现点击这个关于按钮,在页面中跳转到菜单锚点所在的位置。

如何在古腾堡编辑器中使用锚点链接?

本文内容使用古腾堡编辑器编辑,下面是我设置跳转到文章顶部的锚点链接实例。

首选我在需要跳转到的顶部的Block的高级设置中设置HTML锚点为123

image 67 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

我在需要点击跳转的地方添加链接 #123

image 68 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

设置完成之后即可实现锚点链接跳转,通过下面的链接你可以测试设置结果:

这是一个锚点链接,点击跳转到文章顶部

可以设置跨页面的锚点链接吗?

当然可以!

比如你可以设置一个带锚点的链接,用户点击之后可以直接跳转到对应页面的指定位置。

实现的方法也非常简单,只需要在链接中添加对应的页面URL并在URL末尾填加#锚点ID即可。

比如我在本站首页模版模块设置了一个锚点。为模板模块的标题元素添加一个CSS ID为template。

image 75 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

在当前博客中添加一个链接直接跳转到首页的模版模块。这里我是设置的站内跳转,所以使用了相对路径,当然你也可以使用像这样的绝对路径:http://app-wolf.kn8t4avieh-zng4p0jyo6dp.p.temp-site.link/#template

image 76 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

点击下面的链接试试效果:

查看外贸建站B2B模版

image 77 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

需要注意的事情

锚点链接定位是非常直接的,定位的位置是相对的浏览器窗口最顶部的位置,如果你设置粘性页眉,那么粘性页眉会挡住跳转位置,所以会出现跳转位置不准确的情况。

本文中的古腾堡设置的锚点链接就有这样的情况,我设置的锚点定位是定位到文章的第一个段落,但是实际上,我点击按钮看到的最上面的位置是本文的第二个段落。

image 74 - 如何在WordPress中使用锚点链接(Anchor Links)? - NUTSWP

解决的办法就是取消掉粘性页面,或者在跳转位置的上方设置一个大于粘性页眉高度的距离,以避免遮挡的情况出现。后者的设置可能还会影响到整体的页面布局效果。

文章分类
文章标签
文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!