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

在文章页面增加文章目录有利于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;
}

赞 赏

    推 荐 阅 读

  • 用is_mobile()函数判断手机设备wordpress

    为了使得手机端和PC端显示不一样的内容字数,用了<?php if (is_mobile() ): ?>、<?php endif ;?>来判断,不过在此之前需要在 functions.php 内添加如下代码才能有效...

    用is_mobile()函数判断手机设备wordpress
  • 不变形原比例缩放图片代码

    自己整理了几种图片展示的方法,实现图片原比例缩小、放大、不失真、不变形,先来看看实例图: 不变形原比例缩放图片代码 以下是对应的各种样式的代码。 <!DOCTYPE html> ...

    不变形原比例缩放图片代码
  • 增加文章目录toc功能并和.back-to-top同时出现

    为了增加用户体验度,使得页面更加美观,我把文章目录嵌入.back-to-top层里,好处是不用再写script,直接引用.back-to-top的js功能,与“返回顶部”按钮在滚动条离顶部一定间距时...

    增加文章目录toc功能并和.back-to-top同时出现
  • 调用站内文章/文章内链短代码

    昨天在大发的博客里看到他调用的站内文章样式很好看,高大上。随即给他留言向他请教,今天回复了一条教程链接,原来发哥早就写过教程,有需要的也可以看看,链接地址:https://f...

    调用站内文章/文章内链短代码
  • 设计了一个网站…

    近一段时间累的一塌糊涂也过的一塌糊涂,基本每天凌晨三五点睡,恨不得不用吃饭不用睡觉的敲代码,睡梦中还在php if 、else if 、div class…。虽然知道熬夜不好,但生怕一...

    设计了一个网站…