教程:如何给WordPress添加阅读滚动进度条

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

elements-envato 教程:如何给Wordpress添加阅读滚动进度条

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

how-scrollprogress 教程:如何给Wordpress添加阅读滚动进度条

本文用到的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() . '/assets/js/scrollprogress.js', array( 'jquery' ), '1.0.0', true );
}

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

本文已在Ie主题99839发布

文章来源:https://ietheme.com/scroll-reading-progress-indicator.html


发表评论

撰写评论

电子邮件地址不会被公开。 必填项已用*标注

加入我们

注册完成!

密码重置

请输入您的邮箱地址。 您将收到一个链接来创建新密码。

检查你的邮件中的确认链接。