WordPress 免插件给文章添加文章目录

2018年7月20日 562 次阅读 2 条评论 891 个文字

文章目录一般是一篇文章的重点总结,当你在阅读的时候,如果有一个目录列表,阅读体验会好很多。而且这个目录需要有跳转功能,点击目录中的标题就跳转到文章中标题对应的位置,这个一般是用锚点来实现。

页内跳转超级链接(锚点)

锚点的实现方法如下:

知道锚点的实现方式那么给文章添加文章目录也就不难了,给文章添加文章目录需要分为两步:

  1. 处理标题,把文章中的标题改造成<h2 id="title-1">我是标题1</h2>这样的格式。
  2. 提取标题,并改造成<a href="#title-1">点击跳到标题1</a>这样的形式,返回前端。

处理标题

注意:上面的方式只适合本站所用的主题,其它主题请用下面的代码:

提取标题

并在register_widget('volcano_widget_posts');后面一行加上:

注意:上面的方式只适合本站所用的主题,其它主题请用下面的代码:

针对本主题后续调整

如果你用了和我一样的主题,你会发现向上滚动的时候会显示导航栏,这样上面的部分内容就被遮盖了,这里我们通过js模拟向下滚动,原理也很简单,先向上多滚动一点然后向下滚动回到标题的位置。当然,也随便在目录列表加个高亮。

inc/shortcode.php注释掉下面这行:

效果展示

和我一样的主题效果看我博客就好了,其它主题显示的样式大致是这样的,具体的可以自己调整。

标签:
© 著作权归作者所有

我,超凡绝伦的人中龙凤。

文章评论(2)

  • 杨永信

    按照博主的方法前台网页出现[title][/title] ,怎么解决呢。

    2018年8月21日
    • 周末

      :lol: 转换的操作在【处理标题】这一步,看看是不是没加对。

      2018年8月23日