最新消息:如果微饭的文章帮助了您那就为微饭点个赞吧!丨微Fan'交流群: [ 79453197] 分享好玩的~丨个人作品集 / 网址导航 / 好压

WordPress开发:免插件为H级标题添加文章目录

771℃
.

心血来潮心优化了一下WordPress,免插件给文章的二级标题添加文章目录,代码来自露兜的文章目录插件,也就是很简单的几个代码,顺便再发下经过微饭改善过的文章目录CSS样式,瞬间感觉微饭的强迫症又得到治疗!

文章目录的作用

让文章结构更加清晰化,让读者能轻松的获得文章的段落结构,哪个段落是自己急需的,并提供导航链接直接跳转到该段落,能提高用户体验度,微饭就一直在努力。文章目录还能给文章添加锚链接,对SEO也是相当有帮助的。

代码实现方法

将以下代码放到模板函数 functions.php<?php 下面即可:

注:代码里面的H2为你经常用的文章H1、H2、H3等标题,如果用的H3比较多,就将代码里面的H2改为H3即可。

请将以下CSS代码加入你的 style.css 文件中

 使用说明

在编辑文章的时候,切换到HTML模式,将需要添加到目录中的标题用<h2></h2>括起来就可以了,如<h2>我是索引标题</h2>。当然你也可以用其他标签,如<h1><p>等,将以上代码中的h2改成你自己的标签名称就可以了。CSS可以根据自己WordPress博客的模板进行改进,当然微饭提供的这个CSS也能适应大部分自适应主题的需要。

需要更强大功能

本文章提供的代码仅提供一次嵌套,也就只能嵌套一个级别的标题, h2 h3 不能同时嵌套,需要更强大的插件的话,可以尝试使用以下微饭推荐的文章目录插件:

本站部分内容来自网络,如有侵权,请联系我们进行处理,转载本站文章请注明出处!
发表我的评论
取消评论
表情 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址