用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

转载自： 

用 jQuery 和 Bootstrap 在 WordPress 中添加进度条 - 丘壑博客​

bestscreenshot.com

需求

昨天整理了一下Genesis的系列教程的翻译进度，汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。 今天突然想放一个进度条，可以直观看下显示一下翻译了几篇。

思路

手动更新肯定是不行的，程序员就是要懒。思路其实挺简单的，就是动态获取到已经翻译了几篇，除以总数得到百分比，并让页面上的进度条部分根据这个百分比变化就行了。方法还是有挺多的，很多JavaScript的库都可以实现这个功能，但是因为WordPress里已经自动加载了jQuery了，所以就不想再引入其他库了，而且这个需求也很简单，用jQuery就足够了。

第一步

原作者一共写了15篇，这是定死了的， 只需要获取到我已经在丘壑博客上翻译了几篇就可以了，除以总数15篇就得到了百分比。本想自己写个 WP_Query 查出来，发现有个插件可以很方便的获取到，就不用重复造轮子了 Display Posts – Easy lists, grids, navigation, and more, 很强大，可以用各种过滤条件动态查找文章并显示出来

在页面上加上如下的 shortcode，就可以把所有标签为 genesis-explained 的文章按顺序查出来并显示

第二步

因为用display-posts显示出来的列表自带了一个css样式，所以可以很容易用jQuery选择器来获取到文章数量：

第三步

数据有了，那么还需要在页面上加一个div区域，可以让jQuery来动态更新区域的内容，很简单，编辑页面，插入一段html

现在，再把上面的 JavaScript代码再补充一下，用来更新进度条里的文字内容，完整版的如下：

第四步

现在是光秃秃的，太丑了，再加入一点CSS，穿件衣服。写CSS是我的弱项，所以我就选择了Bootstrap，完整版的太臃肿了，包含了太多不需要的东西，完整引入也有可能会把现有主题搞乱，所以在 Bootstrap官网上定制化下载了一个最简版的，只包含alert和 progress部分，其他部分都不要。然后再加上一点自定义的样式：

第五步

现在基本上就已经可以达到效果了，最后，我只想在这一个页面上显示这个进度，其他页面上都不需要，所以，新建一个针对这个页面的模板 page-genesis-explained.php，放在子主题的目录下。为什么叫这个名字呢？可以参看这里 Template Hierarchy。因为这是一个页面，slug是genesis-explained，所以就叫page-genesis-explained.php，加入以下代码，作用就是用add_action()把上面的JavaScript脚本和CSS注册进入WordPress，添加动作的方法可以参考这篇文章 。

当然要先把需要用的文件FTP上传到对应的目录下，我就全扔到wp-content/themes/genesis-sample/js 这里了。

最终效果在这里 神级 WordPress 主题框架 Genesis 从入门到精通

结语

不知不觉都已经翻译一大半了，60%了才想起来做个进度表，翻译过程其实还是有收获的，细嚼慢咽的也可以消化的更好一点，希望早点到达100%吧

转载于:https://juejin.im/post/5c74f99b6fb9a049f571cd3b