wordpress 生成滚动目录

为了增加用户体验度，使得页面更加美观，我把文章目录嵌入 菜单层里，很多方法可以直接使用插件实现，但是整体来说效果也不是很美观，使用WPJAM插件可以快速实现，且很方便

使用此方法任意缩放滚动目录不会变形，且切换到手机端体验完美！

准备工作

• 安装WPJAM插件

文章目录调用函数

①打开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文件里面。

如果你对于页面菜单放置位置没有太多要求建议直接使用WPJAM默认的即可

设置样式表

将下面代码放置在WPJAM文章目录css样式区,你也可以放置于主题的css 样式表，但是放置于样式表更新主题什么的可能会替换你的css代码

#article-index {
    -moz-border-radius: 6px 6px 6px 6px;
    margin: 0 0 15px 15px;
    padding: 0 6px;
    position: fixed;
    left: 150px;
    opacity: 0.5;
    transition: all .2s;
   
}

#article-index:hover {
    opacity: 1;
}
#article-index strong {
border-bottom: 1px dashed #DDDDDD;
display: block;
line-height: 30px;
padding: 0 4px;
}
#index-ul {
margin: 0;
padding-bottom: 10px;
}

#index-ul li {
    background: none repeat scroll 0 0 transparent;
    list-style-type: disc;
    padding: 0;
    margin-left: 20px;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 220px;
}

#index-ul a {
    color: #4c4c4c;
    border-bottom: 0px;
    font-size: 12px;
    font-weight: 600;
}
#index-ul a:hover {
  color: #2f9833;
}
@media screen and (max-width:1720px){#article-index {
    display:none;
}}
code {
    color: #0f9960;
}x

修改WPJAM

你可以修改上面样式表，让其与WPJAM默认的类相匹配，但是我觉得比较麻烦因此我使用的是修改WPJAM的插件文件

修改目录如下

/wp-content/plugins/wpjam-basic/public/wpjam-toc.php

替换其中的toc为article-index，新增ul 为id="index-ul"

如果觉得还是比较麻烦可以直接使用替换wpjam-toc.php文件