纯代码实现 WordPress 文章目录

HuPan
HuPan
  • 102 次浏览

添加 PHP 代码

编辑主题或子主题的 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' );

多级目录显示

//文章目录
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)) {
        $preValue = 2;
        $hStack = new SplStack();
        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 . '</h'. $value . '>', $content);
 
            // The following part implements the hierarchy of contents table
            if(!$hStack->isEmpty()){
                if($hStack->top() == $value){
                    $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                } elseif($hStack->top() < $value){
                    $ul_li .= "<ul>\n" . '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                    $hStack->push($value);
                } elseif($hStack->top() > $value){
                    while($hStack->top() > $value){
                        $ul_li .= "</ul>\n";
                        $hStack->pop();
                    }
                    $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                }
            } else{
                $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
                $hStack->push($value);
            }
        }
$content = "\n<div id=\"article-toc\" class=\"article-toc\">
\n<div class=\"toc-title\">
<p> 文章目录</p>
<span class=\"toc-switch\">
<i class=\"wpcom-icon menu-item-icon\"><svg aria-hidden=\"true\"><use xlink:href=\"#icon-shangxia\"></use></svg></i><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 代码

目录展开隐藏功能，页脚代码中插入如下 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 代码

编辑主题或子主题的 style.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;
}

目录粘性定位

.article-toc {
		position: sticky;
		top: 1px;
}
1
0