记录一下文章目录组件开发过程。
内容参考iymark。
1.在function.php最下面添加：
|
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
_filter( 'woocommerce_add_to_cart_fragments', 'specia_add_to_cart_fragment' ); //文章目录 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 t=\"1694146929887\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2692\" width=\"20\" height=\"20\"><path d=\"M0 0h1024v1024H0z\" fill=\"#FFFFFF\" p-id=\"2693\"></path><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#323333\" p-id=\"2694\"></path><path d=\"M774.208 398.976l-265.088 338.88-265.024-338.88\" fill=\"#FFFFFF\" p-id=\"2695\"></path></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' ); |
2.在footer.php最下面添加：
|
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!--====================================== article-toc ========================================--> <script> jQuery(document).ready(function($){ // 目录随页面滚动，稍微固定一些 var $movingElement = $(".article-toc"); function get_start(){ var scrollt = document.documentElement.scrollTop + document.body.scrollTop; if(scrollt>500){ scrollt=500; } var start = 0.75*document.documentElement.clientHeight-scrollt; return start; } $('.article-toc').attr("style", "top:"+get_start()+"px;"); $(window).scroll(function(){ //只要窗口滚动,就触发下面代码 $('.article-toc')[0].style.top = ""+get_start()+"px"; var t1,t2,t3; if($('.toc-show-hide').is('#toc-show')){ t1 = document.documentElement.clientHeight-get_start()-20; t2 = document.getElementById('toc-ul').clientHeight + 45; if(t1<t2){t3=t1;} else {t3=t2;} $('.article-toc-expended')[0].style.height = ""+t3+"px"; } t1 = document.documentElement.clientHeight-get_start()-65; t2 = document.getElementById('toc-ul').clientHeight; if(t1<t2){t3=t1;} else {t3=t2;} $('.toc-content')[0].style.height = ""+t3+"px"; }); //点击展开/隐藏目录 $('.toc-switch').click(function(){ if($('.toc-show-hide').is('#toc-show')){ $('.article-toc').removeClass('article-toc-expended'); $('.article-toc')[0].style.height = "40px"; $('.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')){ $('.article-toc').addClass('article-toc-expended'); $(".toc-content").attr("style","display:block;"); var t1 = document.documentElement.clientHeight-get_start()-20; var t2 = document.getElementById('toc-ul').clientHeight + 45; var t3; if(t1<t2){t3=t1;} else {t3=t2;} $('.article-toc-expended')[0].style.height = ""+t3+"px"; t1 = document.documentElement.clientHeight-get_start()-65; t2 = document.getElementById('toc-ul').clientHeight; if(t1<t2){t3=t1;} else {t3=t2;} $('.toc-content')[0].style.height = ""+t3+"px"; $('.toc-show-hide').attr("id","toc-show").attr("title","show").text("隐藏"); } }) }); </script> |
3.添加自定义CSS：
|
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.article-toc{ position: fixed; right: 20px; width: 150px; height: 40px; border: dashed 2px #666!important; padding: 5px 10px!important; margin: 0px 0px 10px 0px!important; background:#fff!important; z-index:99999!important; } .article-toc-expended{ position: fixed; right: 20px; width: 550px; border: dashed 2px #666!important; padding: 5px 10px!important; margin: 0px 0px 10px 0px!important; background:#fff!important; z-index:99999!important; } /*目录内部滚动*/ .toc-content{ display:none; transition-duration:.3s; overflow: auto; } /*隐藏滚动条*/ .toc-content::-webkit-scrollbar { width: 0; background: transparent; } #toc-ul li { list-style:circle; padding-right:20px; margin-bottom:0px; } .toc-title .toc-switch .toc-show-hide{ color: black; text-decoration: none; position: relative; top:-3px; font-size: 17px; } .toc-title .toc-switch{ float: right; } .toc-title p { display: contents; } |