目录

简介
一、正文
二、后记
三、结果展示


简介

这篇文章是展示如何在文章添加类似目录之类的 文章内部跳转 功能。

一、正文

        使用方法并不是使用 WordPress 插件,而是根据 HTML 对 URL 解析特性,通过在文章内部添加 “隐代码”,使文章页面 “重加载” 至隐代码所在。

        一般写 WordPress 文章,表面上是在文章编辑器上着笔(可视化模式/Visual),但是后台会自动将之转化为一篇 HTML 文件,并存储起来。如果文章仅仅是普通文字写的,那在转化为 HTML 文件时,编辑器不会为文件添加任何的 HTML 标签。但是在文章中使用了如:级别标题、颜色、粗体、斜体、外部 URL 链接、图像等功能的时候,编辑器就会将相关的 HTML 标签添加到文件中。

        例如,WordPress 的插件功能,通过添加插件(实际就是一种 CSS 样式和相关 PHP 代码),挂载到 WordPress 过滤器系统中,然后在编辑器使用功能的时候,会在标签中添加 class 的方式调用相关样式代码。

        实现方法如下:

1. 在文章中的标题标签中添加 ID 标识,如二级标题

2. 然后在目录中创建 WordPress 自带的跳转功能 “link”,或者在编辑器右上角切换至文本编辑模式(文本/HTML),里面添加标签

3. 上步骤中的 href 地址只能跳转到本页面内相对应的 ID 标识标签处,若是需要 新标签页跳转 或者 外部页面跳转 则是需要添加完整的 URL 地址

其他说明:

  • 当页面中没有 # 所请求的 ID 标识时候,页面并不会 404 而是正常从头显示
  • 添加 href 需要 非常!非常!非常!注意 URL 地址,只有正确的 URL 地址才能正确跳转

 

二、后记

(写一下了解了 WordPress 文章内部跳转功能如何实现的原理后,是否可以在其他相似的 HTML 文件中也实现“页面内部跳转”功能)

        根据正文原理,由于 WordPress 文章也是 HTML 文件,理论任何页面都可以通过 id 定锚法,实现页面内部的跳转功能。实际应用上可以结合 CSS 样式中的 display: none; 对含有 ID 锚的 HTML 标签进行隐藏。这样可以使在页面上不显示该标签又不影响关键代码 ID 的他用的情况下,实现锚跳转功能。

三、结果展示

返回文章开头