WordPress纯代码实现文章索引目录优化教程

这几天折腾了下文章目录插件，用过的有table-of-contents以及LuckyWP Table of Contents，折腾来折腾去，最终用纯代码实现了文章目录的功能。当然，包括目录展开隐藏功能，以及目录随滚动条固定的功能。这里只免费分享一下纯代码实现文章目录以及展开隐藏的部分。关于目录随滚动条固定的方法，这里采用付费分享了，结尾可以解锁。

纯代码实现文章目录

编辑主题或子主题的function.php文件，插入如下PHP代码：

//文章目录
function article_index($content) {
$matches = array();
$ul_li = '';
$r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is';
if(is_single() && preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $key => $value) {
$title = trim(strip_tags($matches[2][$key]));
$content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '">'.$title.'</h2>', $content);
$ul_li .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-toc\" class=\"article-toc\">
\n<div class=\"toc-title\">
<p>文章目录（展开/隐藏→）</p>
<span class=\"toc-switch\">
<a style=\"cursor:pointer;\" class=\"toc-show-hide\" id=\"toc-hide\" title=\"show\">展开</a>
</span>
</div>
<div class=\"toc-content\"><ul id=\"toc-ul\">\n" . $ul_li . "</ul></div>
</div>\n" . $content;
}
return $content;
}
add_filter( 'the_content', 'article_index' );

目录展开隐藏功能

此功能即，目录旁边出现一个展开隐藏的按钮，点击可以切换是否显示文章的所有目录。

主题设置，插入代码，页脚代码中输入如下JS代码：

<script>
jQuery(document).ready(function($){
$('.toc-switch').click(function(){
if($('.toc-show-hide').is('#toc-show')){
$('.toc-content').attr("style","display:none;");
$('.toc-show-hide').attr("id","toc-hide").attr("title","hide").text("展开");
}
else if($('.toc-show-hide').is('#toc-hide')){
$(".toc-content").attr("style","display:block;");
$('.toc-show-hide').attr("id","toc-show").attr("title","show").text("隐藏");
}
})
});
</script>

主题设置，插入代码，自定义CSS中输入如下CSS代码：

.article-toc {
    border: dashed 2px #666!important;
    padding: 5px 10px!important;
    margin: 0 0 10px 0!important;
	background:#fff;
}
.toc-content{
	display:none;
	transition-duration:.3s;
}
#toc-ul li {
	list-style:decimal;
	padding-right:20px;
	margin-bottom:0;
}
.toc-title .toc-switch {
    float: right;
	margin-left:20px;
}
.toc-title p {
    display: contents;
}