页面跳转(也称为锚点链接)是指您点击某个链接,就会立即在一个篇幅较长的页面中向上或向下移动,简化了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建站的商家,都会选择借助WooCommerce来搭建购物网站。WooCommerce是一款电子商务插件,使用WooCommerce可以轻松实现销售数据、库存和客户数据的一站式管理,所以本文将教大家如何借助WooCommerce将 WordPress网站变成在线购物网站。 WordPress搭建购物网站一:前提准备 从头开始创建 WooCommerce 网站需要以下三件事: 需要一个 WordPress 托管帐户,所有网站文件都将存储在此处 域名,这是网站的 Inter…

    开发教程 2025年 4月 25日
  • divi主题搭建WordPress网站

    Divi主题搭建WordPress网站教程

    Divi主题目前是WordPress外贸建站可靠且快速的WordPress主题,但是因为Divi主题全英文的操作界面,对于国内一些商家来说,不太友好,所以接下来本文将向各位站长介绍Divi主题搭建WordPress网站教程的详细内容,以供各位参考。 一、获取域和虚拟主机 选择域名和网络托管是创建网站的两个基本步骤。 域名是网站的唯一地址,因此请选择一个相关且令人难忘的域名。另一方面网络托管用于将网站的文件存储在服务器上,因此请根据需要选择可靠的提供商。之后通过域名注册商注册域,进行主机托管设置,…

    开发教程 2025年 10月 6日
  • WooCommerce收款设置

    WooCommerce收款怎么设置?

    WooCommerce收款怎么设置?商家可以通过WooCommerce账户后台的设置-付款选项对WooCommerce收款进行设置。WooCommerce作为WordPress建站生态的一部分,WordPress收款方式的设置是商家使用WordPress进行外贸建站必须熟悉的操作之一,所以下文将为大家带来WooCommerce收款方式设置的有关内容。 一、WooCommerce收款方式 WooCommerce支持Paypal、Stripe、信用卡等多种收款方式,WooCommerce默认的付款方…

    开发教程 2024年 11月 11日
  • WordPress降版本

    WordPress怎么降版本

    WordPress怎么降版本?尽管更新WordPress版本通常会修复以前的安全问题并优化WordPress的功能,但新版本有时会引发主题损坏、性能下降、插件冲突或关键功能缺失等外贸建站问题,尤其在使用老旧或非托管插件与主题时更为常见。此时降级到兼容性更佳的旧版WordPress成为必要选择。 一、为什么WordPress需要降级 降级WordPress乍一听似乎有点反常,毕竟更新旨在修补安全问题、增加新功能并提升平台整体性能。但是有时候最新的WordPress版本却带来了明显多于好处的问题,这…

    开发教程 2026年 2月 19日
  • WampServer在本地安装WordPress

    如何使用WampServer在本地安装WordPress

    如何使用WampServer在本地安装WordPress?先安装WampServer并启动Apache、MySQL服务,再下载WordPress、创建数据库并运行安装程序,即可快速完成WordPress外贸建站本地环境搭建。下面将详细讲解完整安装流程与常见问题解决方法。 一、WampServer是什么软件 WampServer 是 Windows 平台的 Web 开发环境,无需联网即可运行基于 Apache、PHP、MySQL/MariaDB 的动态网站。它自带 phpMyAdmin、Admin…

    开发教程 2026年 5月 14日
  • WordPress PHP

    WorPress PHP版本兼容性及更新原因介绍

    PHP作为WordPress的开发语言,更新PHP版本有利于确保WordPress外贸独立站性能的提升、安全性的增强、功能的维护以及兼容性的增强。因为在更新WordPress PHP版本中经常会遇到不兼容的问题,而本文接下来将基于WorPress PHP版本兼容性及更新原因进行介绍,并在文章第三部分介绍了Hostinger WordPress PHP版本的更新教程。 一、为什么更新WordPress PHP版本 与 WordPress主题和插件一样,PHP经常收到更新和补丁,使用旧版本的 PHP…

    开发教程 2025年 11月 5日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

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

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