文章页底部加一条“我也是有底线哒”提示和滚动进度条

这个小效果分两块：顶部一条随页面滚动变宽的进度条，和正文翻到底时出现的“我也是有底线哒”图文提示。改动很小：一段 CSS 进主题设置，一段 HTML 进页脚模板。

进度条的 CSS

在后台主题设置的“自定义 CSS 样式”里加这一段：固定在顶部、3px 高的渐变条。

#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
/*底部可爱底线提示*/

页脚提示写进模板

打开 wp-content/themes/当前主题目录/ 下的 footer.php，在文件“第一行”下面紧跟贴上下面这块，位置很关键，贴靠后可能不生效。提示图是代码里的绝对地址，想换成自己的图，改其中的图片链接即可。

<!--底部可爱底线提示-->
<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text"  style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>
<!--底部可爱底线提示-->

效果与注意

两点要注意：CSS 里只定义了 #percentageCounter 的样式，滚动百分比计算还需要一小段 JS 给它的宽度赋值，原文没有附，需要自己补；另外直接改 footer.php 的代价是主题升级会被覆盖，改前先留一份底稿。