页面跳转(也称为锚点链接)是指您点击某个链接,就会立即在一个篇幅较长的页面中向上或向下移动,简化了WordPress独立站的导航菜单和组织,使用户能够快速找到所需内容。本文主要为大家介绍在WordPress中创建页面跳转的具体流程。

一、为什么要使用页面跳转

页面跳转是链接到页面某一部分的绝佳方式。通过点击页面跳转,您的站点访客可以从同一长页面中的某一部分跳转到另一部分。

例如,假设您在某个页面的顶部添加了一个部分名称列表。您可以将每个名称与页面下方的相关部分建立链接,以便访客能够直接跳转至其感兴趣的特定信息所在的部分。然后,您可以将读者直接链接回页面开头处的所有部分原始列表。

二、WordPress创建页面跳转的流程

 

1、创建锚点链接

第一步是选择您希望读者点击页面跳转时到达的部分。为此,我们可以在您想要跳转到的区块上创建一个所谓的“锚点”。

点击要为其添加锚点的区块。许多常见区块都支持锚点,包括段落、标题、图片、列和按钮。

查看右侧边栏中的区块设置。如果您在右侧没有看到边栏,请点击右上角的“设置”图标以打开设置。这个图标看起来像两个宽窄不一的栏目拼在一个方框里面:

创建锚点链接

突出显示位于WordPress编辑器顶部的设置图标。

右上角的“设置”图标

在区块设置底部,点击“高级”。

在“HTML锚点”文本框中键入一个单词。该单词将成为您的锚点。请务必使用一个尚未在页面其他处被用作锚点的唯一单词。如果您想使用多个单词,系统会自动在单词之间插入连字符(-),例如:two-words:

创建锚点链接

在“HTML锚点”部分添加两个由连字符连接在一起的单词,以创建页面跳转。

2、链接到您的锚点

接下来,创建页面跳转的自身链接。访客点击该链接后,即可到达您在第1步中创建的部分。

输入一些文本,或添加图片、按钮或导航菜单项,供您的读者点击。

选择文本/图片/按钮/菜单项,然后点击区块工具栏中的链接选项。链接选项是一个形如链环的图标,如下图突出显示:

链接到您的锚点

键入您在第1步中创建的HTML锚点,并以井号(#)开头。例如,假设您创建了一个名为create-a-page-jump的锚点,那么链接应输入为#create-a-page-jump

点击编辑器右上角的“保存/更新/发布”,保存您的更改。

大功告成!现在,您可以在公共页面上测试您的链接,以确保您在第2步中创建的链接指向您在第1步中创建的锚点。请注意,页面跳转链接在预览页面或文章时不起作用,因此请在已发布的版本上进行测试。

3、导航菜单中的页面跳转

您可以从导航菜单中创建页面跳转,链接到页面的特定部分。这对于主页滚动时间较长的站点十分常见。页面跳转能让访客更轻松地查看他们想要查看的主页部分。

第一步是创建一个锚点,作为跳转的目标位置。

在您的菜单中,添加一个新的项目,即一个“自定义链接”。

在“文本”字段中,输入您希望该菜单项显示的名称。这不会影响页面跳转。

在“URL”字段中,输入您的锚点,并在前面加上井号(#)。

导航菜单中的页面跳转

如何使用“自定义链接”选项在导航菜单中添加页面跳转。

在菜单中添加一个页面跳转

请记住,类似#my-anchor的页面跳转仅在锚点所在的同一页面上有效。

4、跳转到其他页面

页面跳转不必只用于链接到同一页面中的部分。您可以使用页面跳转从一个页面链接到另一个页面上的特定区域。

不同之处在于,我们不再像上文第2步那样仅链接到锚点(例如将链接写为#create-a-page-jump),而是将链接指向包含锚点的完整页面URL。

例如,如果您的页面URL如下:

https://yourgroovydomain.com/example/

并且您在该页面上创建了一个名为unique-identifier的锚点,则完整的跳转链接将是:

https://yourgroovydomain.com/example/#unique-identifier

5、创建“返回顶部”链接

要创建返回页面顶部的跳转链接,请执行以下步骤:

在页面开头的某个区块中添加一个锚点。

在页面下方输入文本,例如“返回顶部”或“跳至开头”。

将该文本链接到您创建的锚点。

相关推荐:

《WordPress锚链接怎么设置》

《WordPress优化教程:网站锚文本怎么做》

《WordPress建站教程:WordPress伪静态设置方法》

相关文章

  • 关闭WordPress主题或插件自动更新功能

    如何关闭WordPress主题或插件自动更新功能?

    通常情况下WordPress主题或插件应该保持自动更新功能,以实现维护WordPress网站安全和网站正常运行的作用,但有时这一功能可能会带来网站代码覆盖,甚至会网站崩溃的问题,所以这时候用户可以通过插入代码或者是安装Easy Updates Manager插件实现WordPress主题或插件自动更新功能的关闭,下文将为大家具体展示这一过程,希望可以助力大家外贸建站工作的顺利开展。 一、插入代码关闭WordPress主题或插件自动更新 1、通过wp-config.php文件禁用WordPress…

    开发教程 2024年 10月 31日
  • 点击添加产品按钮

    Shopify独立站建站教程:产品上架

    Shopify产品上架是商家在搭建Shopify跨境电商独立站极易忽视的优化细节,多数卖家因缺乏系统方法,经常会遗漏SEO优化、库存跟踪等关键环节,导致曝光不足、转化率低。本文聚焦这一痛点,以全流程实操框架,拆解从信息填写到发布的专业要点,帮卖家规避误区、规范流程,既让新手快速上手,也助力老手提高转化! 一、登录Shopify账户 如果还没有Shopify商店,点击查看《Shopify注册流程及注意事项》相关注册教程。 或者如果已经有Shopify账号,登录Shopify管理仪表盘,向商店添加新…

    开发教程 2026年 1月 6日
  • 建站小白必看的320个必备Web开发专业术语

    建站小白必看:30个必备Web开发专业术语

    做外贸建站的商家离不开Web开发,无论是自己学习技术开发网站还是寻找专业的外贸建站公司进行外包建站,用户都有必要了解Web开发的专业术语,不仅可以帮助商家将自己的建站需求精准传达给客户,而且可以进一步丰富自己的网站建站知识,所以接下来将基于此为大家展示建站小白必看的30个必备Web开发专业术语,以供大家参考。 一、什么是Web开发 Web开发与网站设计密切相关,通常用于网站和应用的实际构建和编程,主要是指在互联网上创建网站的过程。Web开发人员通过编写代码,使用各种编程语言来实现这一点,这些语言…

    开发教程 2024年 12月 4日
  • WordPress教程菜鸟教程

    WordPress网站建设 WordPress建站教程

    WordPress作为是目前市场上最受欢迎的网站建设平台之一,越来越多的商家选择基于WordPress进行外贸独立站的搭建工作,但是又WordPress网站建设技术有一定的门槛,所以在建站之前需要好好学习一下,接下来为大家具体介绍WordPress建站教程,快速搭建一个独立站。 一、域名注册 域名是网站在网络上的“住址”,相当于一间房子的门牌号,用户只有知道网站的住址,才能通过域名访问到网站。域名注册是外贸独立站建站的第一步,任何一个网站都不能例外。域名注册其实非常简单,只需要确定注册的域名和注…

    开发教程 2024年 10月 16日
  • WordPress更换域名详细教程

    WordPress更换域名详细教程

    当商家遇到WordPress独立站改版或者域名到期等问题时,不免会涉及到WordPress域名的更改,那么这一步骤该如何操作呢,对于大部分外贸建站的新手来说,可谓是一个令人头疼的问题,所以本文接下来讲为大家讲解WordPress更换域名详细教程。 一、WordPress后台更换域名 登录WordPress后台,在仪表盘—设置—常规中,点击然换域名,将里面的WordPress 地址(URL)和站点地址(URL)都修改为新的域名,然后点击保存更改。 二、phpMyAdmin更换WordPress域名…

    开发教程 2024年 9月 24日
  • WordPress代码修改

    WordPress怎么改代码

    WordPress 怎么改代码?一般可以从文章 / 页面的 HTML、单篇页面 CSS 样式,以及主题 PHP 文件三个层面入手。对多数用户来说,优先在区块编辑器或经典编辑器中修改 HTML、通过 “附加 CSS” 管理样式更安全;如果涉及主题模板或功能逻辑,建议使用子主题操作,避免更新后丢失代码。对于正在做外贸建站的企业站或外贸站,修改前应先备份并在测试环境验证,本文将按 HTML、CSS、PHP 三类代码分别讲清楚具体操作和注意事项。 一、操作前须知 修改代码存在网站错乱风险!操作前务必备份…

    开发教程 2026年 6月 18日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

工作时间:周一至周日,9:00 - 21:00,节假日不休息

在线客服
微信客服
微信客服
分享本页
返回顶部