页面跳转(有时也称为锚点链接)是指您点击某个链接,就会立即在一个篇幅较长的页面中向上或向下移动。下面的“目录”就是页面跳转的一个例子。

目录

为什么使用页面跳转?
创建页面跳转
链接到页面跳转
没有文本的跳转链接
跳转到位于其他页面或文章的目标位置
经典编辑器/HTML 页面跳转

为什么使用页面跳转?

页面跳转是将访客从内容的一个部分链接到另一部分的绝佳方式。

例如,假设您在某篇文章的顶部添加了一个名称列表。您可以将各个名称链接到该文章后面的不同位置,以便访客直接找到他们感兴趣的特定名称的信息。然后,您可以将读者直接链接回名称列表。

 这些说明适用于 WordPress 编辑器或区块编辑器。如果您要寻找关于经典编辑器的说明,或是想要使用 HTML 创建跳转链接,请点击此处


↑ 目录 ↑

创建页面跳转

  1. 使用加号图标添加新区块。
  2. 选择标题作为区块类型,或者开始输入/前往作为标题区块的快捷方式。
  3. 输入您的标题文本。
  4. 在区块设置的右下方,点击高级
  5. 输入一个词,它将成为 HTML 锚字段中的链接。

确保您的 ID 不包含空格,因为这会在旧版浏览器中导致问题。此外,确保为您创建的每个目标使用不同的 ID。

创建页面跳转

请记住您输入的锚/页面跳转文本。您在下个步骤中将用到该内容。


↑ 目录 ↑

链接到页面跳转

  1. 输入一些文本,或添加一张图片按钮,这些是您希望访客进行点击以转至另一部分的内容。
  2. 选中该文本或图片/按钮,并从区块的工具栏中选择链接选项。
    页面跳转 - 创建链接
  3. 输入您创建的 HTML 锚,以井号 (#) 符号开头。例如,假设您创建了一个名为 create-a-page-jump 的锚,您将链接到 #create-a-page-jump

现在,当访客点击您创建的链接时,他们将转到您在创建页面跳转时添加 HTML 锚的标题(点击此处跳转回该部分!)

页面跳转说明

跳转链接在您预览站点时无法使用。但是您可以在发布站点页面后测试这些链接。


↑ 目录 ↑

没有文本的跳转链接

如果您不想显示任何文本,还可以创建一个空标题,并向其中添加一个 HTML 锚。

页面跳转 - 空标题

↑ 目录 ↑

跳转到位于其他页面或文章的目标位置

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

当您查看使用页面跳转创建的页面的实时版本时,可以点击所创建的链接,您将看到浏览器栏中的页面地址附加了跳转链接文本。

例如:

  • 您在 groovy 站点上创建了一个名为 Example 的页面,该页面地址是 yourgroovydomain.com/example
  • 然后,您在此页面上创建了名为 unique-identifier 的跳转链接,以链接到下面的页面内容
  • 当您点击跳转链接时,您的页面地址会更改为 yourgroovydomain.com/example/#unique-identifier

现在,您有了目标位置的 URL,可将其用于从站点上的任何其他页面或文章链接到该目标位置:

页面跳转 - 其他页面

经典编辑器/HTML 页面跳转

以下说明适用于经典编辑器;如果您想要使用 HTML 代码手动创建页面跳转,亦可使用。如果您使用的是 WordPress/区块编辑器,请点击此处


↑ 目录 ↑

创建页面跳转

页面跳转的两个组成部分是目标文本链接
点击链接后,系统会将访客带到目标文本所在的页面位置。

以下代码将添加到编辑器的 HTML 版本中。
点击此处查看经典编辑器 HTML 选项。
点击此处查看 WordPress/区块编辑器 HTML 选项。

目标文本书写形式如下:

<p id="unique-identifier">I am the target text.</p>

上述显示 id="unique-identifier" 的文本充当目标文本的标签。

确保您的 ID 不包含空格,因为这会在旧版浏览器中导致问题。此外,确保为您创建的每个目标使用不同的 ID。

链接到目标的一种方法是选择部分文本,然后使用插入/编辑链接按钮。在 URL 字段中,输入 # 符号,后跟目标 ID 的名称,如下所示:

唯一标识符链接设置的图片

注意“Click me!”中的 #unique-identifier 如何匹配前面目标文本的 ID。

如果您想要在 HTML 代码中自行撰写此链接,则其样式应如下所示:

<a href="https://wordpress.com/zh-cn/support/splitting-content/page-jumps/2/#unique-identifier">Click me!</a>

您可以重复此过程以创建其他页面跳转。只需确保每个目标/链接对使用不同的 ID。您可以随心设置 ID,比如“groovy”“awesome”

页面跳转 - 经典

↑ 目录 ↑

将读者送至页面顶部

在文章或页面的开头,使用文字编辑器将其添加到所有其他 HTML 之上:

<div id="top"> </div>

这将在您的文章或页面顶部创建一个不可见的目标,其 ID为 top。如果您不希望向目标位置添加可见文本,不可见的目标将非常有用。

或者,您不需要将 ID 属性放在空的 <div> 标签上以创建不可见的目标,而是将 ID 添加到页面上的第一个元素(例如标题),如下所示:

<h1 id="top">Page Heading</h1>

您可以使用插入/编辑链接按钮将现有的文本链接到该目标,只需将 #top 输入到 URL 字段,或在文字编辑器中写下如下内容:

<a href="https://wordpress.com/zh-cn/support/splitting-content/page-jumps/2/#top">top</a>


↑ 目录 ↑

跳转到位于其他页面或文章的目标位置

如果您已经创建了目标,您可以快速访问链接到该目标的 URL。

假设您已经在页面使用以下 URL 创建了目标:

http://myblog.wordpress.com/example

您要做的就是在 URL 后面添加 # 符号,并且后跟目标 ID,如下所示:

http://myblog.wordpress.com/example/#unique-identifier

现在,您有了目标位置的 URL,可将其用于从站点上的任何其他页面或文章链接到该目标位置:

链接设置的图片

来源:wordpress