教程：如何给Wordpress添加阅读滚动进度条

现在，某些热门网站在其文章顶部如何显示阅读进度条指示器？这个小条向用户显示了还剩下多少文章可以滚动，并鼓励他们继续阅读。站长99839在做本站主题时也在考虑这个问题，到底要不要加。最后还是决定加上。

在本文中，站长将向你展示如何在WordPress文章中添加阅读进度栏。它非常轻量级，整个js压缩后的大小才不到2k，而且没有css。完全不用担心加载负担。具体的演示请看本页面。

本文用到的js不是站长写的，而是github的大佬写的scrollprogressJS。我们这里真是讲解怎么把它使用在我们的wordpress上面。

1、在这里下载js压缩包，解压出来把其中的scrollprogressJS.js放在您的主题文件夹下的js目录下。然后就是初始化js，具体的参数使用可以看它的官方说明文档。当然我们也做一下简单的中文解释：

document.addEventListener("DOMContentLoaded", function (event) {
progressJS.start({
//进度条颜色
"color": "#003f72",
//进度条高度
"height": "3px",
"top": 0,
"bottom": 0,
"left": 0,
"right": 0,
"zIndex": 9999,
//进度条位置（上下）
"ontop": true,
//进度条起始位置（左右）
"ltr": true,
//使用js样式或是使用自己的css
"css": false,
});
});

您可以把上面的代码参数修改成你自己的，然后把它放在刚才放在主题目录下的scrollprogressJS.js文件末尾即可。当然如果您想多加载一个js，可以把上面的代码另存为一个js加载一样的效果。

2、现在我们做好js了，我们要做的事情就是把它加载到我们想要的页面。我们做进度条一般是单独为文章页面做的。由于这个js是只要页面加载了js就会有进度条，我们就用下面的代码判断只在文章、页面、自定义文章页面中加载js。这样在主页，分类，存档页面就不会有进度条了。代码如下：

// scrollprogress
if (is_singular()) {
wp_enqueue_script( 'scrollprogress', get_template_directory_uri() . 'https://cdn.ietheme.com/assets/js/scrollprogress.js', array( 'jquery' ), '1.0.0', true );
}

把上面的代码放在您的主题的funtion.php里面即可，注意，我们代码只加载了一个js是因为我们把js都糅合在一起了。如果您按步骤1的最后一句的方法，则需要加载你自己命名的js。就这么简单 ，您学会了么？