纯代码实现WordPress添加多级文章目录功能魔改版(非插件)
文章目录[隐藏]
原文标题
——知更鸟begin 主题非H4标题 进入文章目录方法
双层嵌套不显示子标题内内容,只能用同名隐藏h4标题了
<h2>1</h2><div style=”display:none”><h4>1</h4></div>
发现问题,隐藏的h4 无法产生页面茅点
▍|▍▍||▍| ▍|▍▍||▍| ▍|▍▍||2017-10-13 ▍|▍▍||▍| ▍|▍▍||▍| ▍|▍▍||
因为比较喜欢水煮鱼的wpjam的自动目录,所以我想吧知更鸟换成多级目录
想要实现可控的多级目录即可以在文章数据中设定显示目录级别的flag
但是 失败了,那样的控制过于复杂,那么根据我们的习惯,使用1-4级标题h1-h4这样固定的标题级别呢,应该是可以做到的,其实主题实现标题目录只是用了以下简单的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | if (zm_get_option('index_c')) { // 目录 function article_catalog($content) { $matches = array(); $ul_li = ''; $r = "/<h4>([^<]+)<\/h4>/im"; if(preg_match_all($r, $content, $matches)) { foreach($matches[1] as $num => $title) { $content = str_replace($matches[0][$num], '<span class="directory"></span><h4 id="title-'.$num.'">'.$title.'</h4>', $content); $ul_li .= '<li><i class="fa fa-angle-right"></i> <a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n"; } $content = " \n<div id=\"log-box\"> <div id=\"catalog\"> <ul id=\"catalog-ul\">\n" . $ul_li . "</ul> <span class=\"log-zd\"><span class=\"log-close\"> <a title=\"" . sprintf(__( '隐藏目录', 'begin' )) . "\"> <i class=\"fa fa-times\"></i> <strong>" . sprintf(__( '目录', 'begin' )) . "</strong> </a> </span> </span> </div> </div>\n" . $content; } return $content; } add_filter( "the_content", "article_catalog" ); |
除了判断index_c启用目录,只是使用了一些简单的代码生成一个无序列表并加上其他的装饰块
我们只要修改替换一下形式
1 2 | $r = "/<h4>([^<]+)<\/h4>/im"; $r = "/<h[1-4]>([^<]+)<\/h[1-4]>/im"; |
如此启用正则匹配1至四级标题,即可显示,而且之前显示不现实的部分也会显示,又要作一大堆修订了。。。。
至于分级别,暂时就只有良好习惯下使用分局标号一、 1 1.1 1.1.1 的方法加以区分,希望之后能养成好的博文习惯吧。
继续阅读
- 上一篇 >:JuiceSSH:超好用的安卓移动端Linux系统运维终端工具
- 下一篇 >:猎豹https安全认证的bug