让文章目录插件wp-toc在侧边栏显示

2017/05/05

在文章页面增加文章目录有利于SEO，大大降低了网站美观，像我这种有强迫症的人，最好是鱼和熊掌兼得，必须尽其所能做到美观和功能兼顾的局面（当然是在自己能力范围内哈），像本博客简洁的样式如何搭配文章目录呢，我在《增加文章目录toc功能并和.back-to-top同时出现》这篇文章介绍过方法。今天再介绍一种方法，效果差不多，但是独立出来的，比较灵活。

让文章目录插件wp-toc在侧边栏显示+渐隐渐现效果

第一步，加一段JS代码

把下面代码添加到footer.php文件</body>前，

<script>//文章目录
    $(function () {
        $(function(){
            $(window).scroll(function(){
                if($(window).scrollTop() > 100){
                    $("#toc").fadeIn(1000);//一秒渐入动画
                }else{
                    $("#toc").fadeOut(1000);//一秒渐隐动画
                }
            });

        });
    });
</script>

把以上代码添加到footer.php，或者single.php里面，js文件里也可以，为了方便更改加上注释。

第二步在上面的代码里修改参数，淡入淡出时间，滚动条离浏览器顶部间距。

第四步在后台插件设置里修改css，如

/**文章目录css代码**/
#toc {
    max-width: 230px;
    min-width: 150px;
    padding: 6px;
    margin: 0 0 20px 20px;
    border: 1px solid #EDF3DE;
    font-size: 13px;
    position: fixed;
    max-height: 500px;
    overflow: hidden;
    color: #666;
    right: 1px;
    bottom: 10px;
}
#toc ul{
        margin-bottom: 0;
        max-height: 80px;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 40px;
}
#toc ul:hover {
        margin-bottom: 0;
        max-height: 80px;
        overflow-y: scroll;
        overflow-x: hidden;
}

#toc p {
    margin:0 4px;
}
#toc strong {
    border-bottom:1px solid #EDF3DE;
    display:block;
}
#toc span {
    display:block;
    margin:4px 0;
    cursor:pointer;
}
#toc li{
    margin:0;
        counter-increment: 序列;
        list-style-type: none;
}
#toc li:before {
        content: counter(序列, decimal-leading-zero) "/ ";
        color: #999;
}
#toc small {
    float:right;
}