增加文章目录toc功能并和.back-to-top同时出现

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

步骤一 文章目录调用函数

①打开footer.php,在<div class=”back-to-top u-hide” onclick=”backToTop();”>后面插入代码<?php echo wpjam_get_toc(); ?>(这个是调用文章目录的函数),自己看了代码总结的,哈哈,有点小确幸 😀 ,
注意,因为footer.php里面没有文章循环函数,所以必须加上这个循环,否则不显示,无效!完整代码如下:

<?php while ( have_posts() ) : the_post(); ?><?php echo wpjam_get_toc(); ?><?php endwhile; ?>

②或者直接把single.php文件里面的<?php endwhile; ?>剪切到footer.php文件里面。

 

步骤二   修改css

把插件里的css替换成,如:(具体根据自己需要美化)

#toc {
    max-width: 240px;
    min-width: 150px;
    padding: 6px;
    margin: 0 0 20px 20px;
    border: 1px solid #EDF3DE;
    font-size: 13px;
    position: absolute;
    right: 500%;
    max-height: 500px;
    overflow: hidden;
    color: #666;
    right: 320%;
    top: -300%;
}
#toc ul:hover {
        margin-bottom: 0;
        max-height: 110px;
        overflow-y: scroll;
        overflow-x: hidden;
}
#toc ul:hover::scrollbar-track, #toc ul:hover::-webkit-scrollbar-track, #toc ul:hover::-moz-scrollbar-track {
   width: 4px;
 }
#toc ul:hover::scrollbar-track, #toc ul:hover::-webkit-scrollbar-track, #toc ul:hover::-moz-scrollbar-track {
   background-color:#808080;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius:2em;
 }
#toc p {
    margin:0 4px;
}
#toc strong {
    border-bottom:1px solid #EDF3DE;
    display:block;
}
#toc span {
    display:block;
    margin:4px 0;
    cursor:pointer;
}
#toc ul{
        margin-bottom: 0;
        max-height: 110px;
        overflow: hidden;
}
#toc li{
    margin:2px 0;
}
#toc small {
    float:right;
}

 

步骤三   更改DIV

打开footer.php文件,找到这行<div class=”back-to-top” onclick=”backToTop();”><div id=”toc-container”>,把 onclick=”backToTop();”删除,换到<span class=”icon-circle-up” >里面,替换后是<span class=”icon-circle-up” onclick=”backToTop();”></span>

 

步骤四  修改js

设置滚动条离顶部间距达到多少时出现或隐藏。打开bundle.js文件,找到下面这句,修改参数即可

window.addComment=addComment;e(window).scroll(function(){var t=e(this).scrollTop(),o=e(".back-to-top");if(t>200){o.removeClass("u-hide")}else{o.addClass("u-hide")}});var i=function(){jQuery("html,body").animate({scrollTop:0},800)};

 

步骤五

开启文章目录功能

大功告成!

 

 

历史的今天:

赞 赏

    推 荐 阅 读

  • Gravatar全球公认头像

    把邮箱注册成全球公认的头像,只要在全球任何一个网站评论时留下您的邮箱,就会出现您的头像,听起来是不是很梦幻…这个世界就是这么神奇! 评论成功后,奇迹出现了~~ 除...

    Gravatar全球公认头像
  • 自定义个性化文章形式

    添加内置文章形式(post-formats),列表循环不同的文章形式。   第一步 打开wp-includes/文件夹里的post-formats.php文件,添加需要增加的样式名称,   第二步 将add_...

    自定义个性化文章形式
  • 不变形原比例缩放图片代码

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

    不变形原比例缩放图片代码
  • 给网站开启CDN加速和云存储!

    什么是CDN加速 相信很多站长朋友都在用wp-super-cache这款插件给自己的网站开启静态加速,它的原理是通过把网站生成静态页面缓存到本地,让访客直接浏览的是这个文件,而不需要...

    给网站开启CDN加速和云存储!
  • 调用站内文章/文章内链短代码

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

    调用站内文章/文章内链短代码