纯代码实现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这样固定的标题级别呢，应该是可以做到的，其实主题实现标题目录只是用了以下简单的代码

if (zm_get_option('index_c')) {
// 目录
function article_catalog($content) {
$matches = array();
$ul_li = '';
$r = "/&lt;h4&gt;([^&lt;]+)&lt;\/h4&gt;/im";

if(preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $num =&gt; $title) {
$content = str_replace($matches[0][$num], '&lt;span class="directory"&gt;&lt;/span&gt;&lt;h4 id="title-'.$num.'"&gt;'.$title.'&lt;/h4&gt;', $content);
$ul_li .= '&lt;li&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt; &lt;a href="#title-'.$num.'" title="'.$title.'"&gt;'.$title."&lt;/a&gt;&lt;/li&gt;\n";

 

}
$content = "
\n&lt;div id=\"log-box\"&gt;
&lt;div id=\"catalog\"&gt;
&lt;ul id=\"catalog-ul\"&gt;\n" . $ul_li . "&lt;/ul&gt;
&lt;span class=\"log-zd\"&gt;&lt;span class=\"log-close\"&gt;
&lt;a title=\"" . sprintf(__( '隐藏目录', 'begin' )) . "\"&gt;
&lt;i class=\"fa fa-times\"&gt;&lt;/i&gt;
&lt;strong&gt;" . sprintf(__( '目录', 'begin' )) . "&lt;/strong&gt;
&lt;/a&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;\n" . $content;
}
return $content;
}
add_filter( "the_content", "article_catalog" );

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\">

<strong>" . sprintf(__( '目录', 'begin' )) . "</strong>

</a>

</span>

</div>

</div>\n" . $content;

}

return $content;

}

add_filter( "the_content", "article_catalog" );

除了判断index_c启用目录，只是使用了一些简单的代码生成一个无序列表并加上其他的装饰块

我们只要修改替换一下形式

        $r = "/&lt;h4&gt;([^&lt;]+)&lt;\/h4&gt;/im";
        $r = "/&lt;h[1-4]&gt;([^&lt;]+)&lt;\/h[1-4]&gt;/im";

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