
您现在的位置是:首页 > WordPress教程WordPress教程
WordPress怎么添加进度条?
WP集市
2025-08-21
【WordPress教程】
498人已围观
WordPress加进度条?保姆级教程来了,看完就会!
进度条这玩意儿,看着小,作用可不小。你想啊,读者看长文章,滚着滚着不知道读到哪儿了,心里没底;或者页面加载慢,用户干等着着急——加个进度条,直观!今天就手把手教你,WordPress咋加进度条,两种方法,代码党、小白党都照顾到,放心,不难!
先唠唠:进度条是咋干活的?
说实话啊,进度条原理特简单。就拿“滚动进度条”来说(最常用的那种,顶部一条线跟着滚动走),核心就俩字:算百分比。页面滚了多少,占总长度的百分之几,进度条就显示多少。你滚到50%,它就涨50%的宽度,就这么个逻辑,懂我意思吧?
方法一:自己写代码,灵活!(适合稍微懂点的)
别慌,代码不多,复制粘贴就行。咱分三步:搞HTML结构、写CSS样式、加JS逻辑,最后塞到WordPress里。
第一步:HTML结构(进度条的“身体”)
进度条不用复杂,就俩div:一个容器(固定在顶部),一个进度条本身(跟着滚动画)。代码长这样:
<div class="e281-34fc-240c-1298 progress-container">
<div class="34fc-240c-1298-a824 progress-bar" id="myProgressBar"></div>
</div>
简单吧?容器是“框”,进度条是“填充的条”。
第二步:CSS样式(给进度条穿衣服)
光有结构不行,得好看。CSS控制位置、颜色、高度。打开WordPress后台,“外观”->“自定义”->“额外CSS”,把这段扔进去:
/* 进度条容器 */
.progress-container {
width: 100%;
height: 5px; /* 进度条高度,自己调 */
background: #f1f1f1; /* 背景色,浅灰就行 */
position: fixed; /* 固定在顶部,滚页面它不动 */
top: 0;
left: 0;
z-index: 9999; /* 这个数大点,别被导航栏盖住!重要! */
}
/* 进度条填充部分 */
.progress-bar {
height: 5px;
background: #ff4757; /* 进度条颜色,自己换,比如#00ff00是绿的 */
width: 0%; /* 初始宽度0,JS会改这个数 */
}
这里注意啊,z-index设高点,比如9999,你那个导航栏要是z-index比这高,进度条就被盖住了,白费劲。
第三步:JS逻辑(让进度条“动”起来)
现在进度条有身子有衣服了,得让它知道“滚了多少”。JS就是干这个的。代码这样:
window.onscroll = function() {
// 页面滚上去的距离(就是你已经看过的部分)
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
// 整个页面的总高度(内容高度)
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
// 算百分比:滚上去的距离 / 总高度 * 100
let scrolled = (winScroll / height) * 100;
// 把百分比给进度条的宽度
document.getElementById("myProgressBar").style.width = scrolled + "%";
};
这段JS得放在页面底部,等页面加载完再跑。咋加到WordPress里?别直接改主题文件,容易丢!用“Code Snippets”插件(搜这个名,安装启用),新建一个代码片段,选“前端JavaScript”,把上面JS粘进去,保存启用,齐活!
怕麻烦?用钩子也行!
你要是熟悉functions.php,也可以通过钩子加JS。打开子主题的functions.php(别用父主题!更新主题代码就没了!),加这段:
add_action('wp_footer', 'add_scroll_progress_js');
function add_scroll_progress_js() {
?>
<script>
// 上面那段JS代码放这儿
window.onscroll = function() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("myProgressBar").style.width = scrolled + "%";
};
</script>
<?php
}
然后HTML结构呢?可以用同样的钩子,在wp_head里加:
add_action('wp_head', 'add_progress_bar_html');
function add_progress_bar_html() {
?>
<div class="33a8-ff81-7153-6e1a progress-container">
<div class="ff81-7153-6e1a-e720 progress-bar" id="myProgressBar"></div>
</div>
<?php
}
CSS还是放“额外CSS”里。这么搞,代码都在子主题里,安全!
方法二:插件!不用写代码,点几下就好!
不想碰代码?行,插件安排!推荐个简单的:Reading Progress Bar(直接在后台搜这个名)。
- 安装启用插件;
- 后台找到“设置”->“Reading Progress Bar”;
- 调颜色(Progress Bar Color)、高度(Height)、位置(Top/Bottom);
- 保存!完事儿!
就这么简单,插件都给你封装好了,啥也不用想,适合纯小白。
最后说两句
进度条这东西,看着简单,细节得注意:颜色别太扎眼,跟你主题搭;高度别太粗,3-5px就行,不然挡内容。不管用代码还是插件,加完刷新页面看看,滚几下,进度条动了没?没动就F12看看控制台,是不是CSS没生效,或者JS报错了。
说实话啊,WordPress玩的就是这些小细节,加个进度条,用户体验立马上去了。动手试试,不难!有问题评论区喊我,我瞅着。
Tags:
文章版权声明:除非注明,否则均为WP集市原创文章,转载或复制请以超链接形式并注明出处。

相关文章
- 为什么WordPress菜单不显示?
- 如何优化WordPress响应式设计?
- WordPress怎么设置文章密码保护?
- WordPress生成网站地图?这几招包教包会,别再瞎折腾了!
- WordPress评论框美化教程:手把手教你打造高颜值互动区
- WordPress社交媒体集成:从0到1搞掂,代码+插件双管齐下
- WordPress邮件通知搞不定?保姆级教程来了,看完就能用!
- WordForms插件真香!3分钟教你从0到1搞定表单,程序员看了都点头
- WordPress登录页太丑?3步自定义,让用户第一眼就记住你!
- WordPress页面构建器咋选?老司机实测Elementor/古腾堡/ Beaver,代码都给你扒开看
热门文章
