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

文章目录(展开/隐藏→)

展开
4.7
(6)

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

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

纯代码实现文章目录

编辑主题或子主题的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' );
WordPress纯代码实现文章索引目录优化教程

目录展开隐藏功能

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

主题设置,插入代码,页脚代码中输入如下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;
}

目录随滚动条固定

此功能即,当滚动条到文章内容部分时,目录会自动固定于顶部,这样方便切换目录,快速定位到各级标题。同时,会分开不同平台打到不同的效果,详细可以参考本站的标题样式。

付费内容如下:

您需要付费解锁才能查看当前内容

已付费?登录刷新

如果你对插件实现文章目录比较感兴趣,可以参考文章:《WordPress 目录插件table-of-contents美化教程》。同样的,目录随滚动条固定,采用了付费的机制。

文中的JS代码,如果想放到某个js文件中引入,记得去掉开头结尾的<script>以及</script>

最后,再来展示下结果吧:

共计6人评分,平均4.7

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress-code-content.html

(1)
上一篇 2022年08月22日 20:14
下一篇 2022年08月25日 20:35

相关推荐

发表回复

登录后才能评论

评论列表(2条)

    本站APP