WordPress如何链接到页面的一部分(WordPress添加HTML锚点跳转到页面指定位置)

在Wordpress 网站的文章编辑器中,我们可以通过后台自带的编辑器功能,为文章中的特定部分添加链接,以实现文章内部不同部分之间的快速跳转效果,这样我们就可以为文章建立一个目录摘要。

要实现这样的效果,我们需要两个步骤:

  1. 为文章中的不同区块添加HTML锚点
  2. 链接到锚点。

首先,您需要一种方法来指定您将链接到的元素。这可以是任何元素,但我们将使用标题,因为它是最常见的链接元素。

添加锚点后,您需要做的就是使用普通链接编辑器和稍微不同的 URL 格式链接到它。

在实践中会很容易理解,所以让我们开始吧。

如何在标题中添加锚点

首先,在编辑器中选择一个标题块。然后在右侧边栏中看到一个默认折叠的高级部分,打开高级部分,便会看到 HTML 锚点选项。

Wordpress如何链接到页面的一部分(Wordpress添加HTML锚点跳转到页面指定位置)
如何在标题中添加锚点

HTML 锚点字段内,为标题指定一个简短的描述性名称。HTML锚点不能有空格,可以使用连字符来分隔单词。添加锚点之后,就可以通过在其他位置添加链接跳转到该位置。

根据链接是否在同一页面上,步骤略有不同。让我们从相同的页面链接开始。

要链接到同一页面上的锚点,请选中要链接的文本并单击链接图标(或使用 cmd+k 快捷方式)。然后在 URL 字段中,输入“#”号,再加上刚才设置的锚点名称即可。

Wordpress如何链接到页面的一部分(Wordpress添加HTML锚点跳转到页面指定位置)
如何链接到锚点

设置完成后,点击回车,链接就已经被添加。

如果要链接到不同页面上的锚点,首先需要添加该页面完整的 URL,然后添加“#”号,后面再添加HTML锚点,如下所示:

Wordpress如何链接到页面的一部分(Wordpress添加HTML锚点跳转到页面指定位置)
链接到其他页面的HTML锚点

需要注意的一点是,前面的完整 URL 的末尾需要添加一个正斜杠,否则该链接可能无法正常跳转。

我们可以使用上面提到的方法,来创建一个Wordpress 单页网站。所谓的单页网站,就是整个网站只有一个页面,这时我们的导航菜单只是链接到了页面的不同部分。当然如果是多页网站也是可以的,只是像上文提到的,要在HTML锚点前加上完整的页面链接。

如何从菜单链接
如何从菜单链接

我们刚才介绍的是为标题添加HTML锚点,其实我们也可以为古腾堡编辑器中所有的区块类型添加HTML锚点,包括图片、段落、列表和引文等等。但是,如果某些使用插件添加的区块,则可能会没有添加HTML锚点的功能。此外,如果使用的是经典编辑器,则HTML锚点功能可能也无法使用,但可以通过下面的方法编辑 HTML 来实现。

如果使用的是 WordPress 经典编辑器(或缺少 HTML 锚点字段的块),则需要执行更多步骤来添加HTML锚点链接。

要添加锚点,可以在编辑器中选择 HTML 模式来编辑文章内容。

在切换到 HTML 模式后,我们会看到文章的各个部分,都被 HTML 标签包裹着,如下所示:

<h3>This is a heading</h3>

如果要添加HTML锚点,只需要在标题中添加 ID 属性。比如下面的例子,为文章段落标题添加一个名为“dog-diet”的HTML锚点:

<h3 id="dog-diet">This is a heading</h3>

上面举的是文章段落标题的例子,其实每个 HTML 元素都可以添加 ID 属性。在经典编辑器中,很多 HTML标签并没有真正显示出来,但是我们可以用“div”标签将某一个部分来包裹起来再添加HTML锚点,像这样:

<div id="link-target">
<p>This is a paragraph</p>
<p>这是div里面的另一个段落</p>
</div>

无论大家使用的是古腾堡还是经典编辑器,像这样编辑 HTML 标签的方式来添加锚点的方法都是相同的。一旦添加了HTML锚点,就可以按照文章介绍的方法来添加了。

原创文章,作者:牛奇网,如若转载,请注明出处:https://www.niuqi360.com/wordpress/link-to-page-content-from-a-wordpress-navigation-menu/

发表评论

登录后才能评论