WordPress知识分享

如何给古腾堡编辑器添加HTML锚链接?

古腾堡编辑器添加HTML锚链接十分简单。锚链接(也叫页面跳转、锚链接)是点击链接时立即跳转到一个较长页面上面或下面的某个位置,或者另外一个页面的某个位置。为了实现这个功能在页面中放了一个 HTML锚点作为标题属性,并创建一个跳转到该锚点的链接。

老魏分享过在经典编辑器中WordPress添加锚点定位,操作起来颇为麻烦。而古腾堡编辑器操作起来比经典编辑器容易了很多。下面魏艾斯笔记详细分享如何给古腾堡编辑器添加HTML锚点链接。

1、放置 HTML 锚点

我们给某篇文章的已有标题添加锚点,实现从一篇文章跳转到另一篇文章的某个位置举例讲解。
如果你还没有标题就添加一个,选择标题作为块类型。
输入标题文本,如果不想显示文本可以留空。
鼠标圈选这段文本,在右侧点击“区块”>“高级”>“HTML锚点”。
在 “HTML锚点” 字段中输入一个将成为锚链接的词,输入 avada jiebang后会自动变成 avada-jiebang。
点击上面的“保存”/“更新”按钮。

古腾堡编辑器放置 HTML 锚点

2、HTML锚点语法

  • HTML 锚点在一篇文章中必须是唯一的。
  • HTML 锚点区分大小写。
  • HTML 锚可以包括以下符号:连字符(-)、下划线(_)、冒号(:)、句点(.),但不包含空格。
  • HTML 锚点必须以字母开头。

3、链接到HTML 锚点

这里面包括同一页面锚链接和非同页面锚链接两种情况。

3.1、使用文本、图像、按钮作为希望访问者单击跳转到同一个页面另一位置的内容。
鼠标选择文本、图像或按钮,然后从块工具栏中选择链接选项。
输入刚才创建的 HTML锚点,以 #号开头。比如上面创建了一个名为 avada-jiebang 的锚点,就会链接到 #avada-jiebang。
注意:预览网站时跳转链接不起作用,只能在发布页面后查看效果。
3.2、如果是另外一篇文章的锚链接,添加的链接选项就输入 https://www.vpsss.net/24841.html#avada-jiebang 即可。
比如点击Avada purchase code解绑就能链接到对应的锚点页面位置。

赞(0)
文章名称:《如何给古腾堡编辑器添加HTML锚链接?》
文章链接:https://www.vpsss.net/25724.html
版权声明:本站资源仅供个人学习交流,禁止转载,不允许用于商业用途,否则法律问题自行承担。
图片版权归属各自创作者所有,图片水印出于防止被无耻之徒盗取劳动成果的目的。