内容简介:昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面手动更新肯定是不行的,程序员就是要懒。思路其实挺简单的,就是动态获取到已经翻译了几篇,除以总数得到百分比,并让页面上的进度条部分根据这个百分比变化就行了。方法还是有挺多的,很多JavaScript的库都可以实现这个功能,但是因为WordPress里已经自动加载了jQuery了,所以就不想再引入其他库了,而且这个需求也很简单,用jQuery就足够了。原作者一共写了15篇,这是定死了的, 只需要获取到我已经在丘壑博客上翻译了几篇就可以了,除以总数
需求
昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。今天突然想放一个进度条,可以直观看下显示一下翻译了几篇。
思路
手动更新肯定是不行的,程序员就是要懒。思路其实挺简单的,就是动态获取到已经翻译了几篇,除以总数得到百分比,并让页面上的进度条部分根据这个百分比变化就行了。方法还是有挺多的,很多JavaScript的库都可以实现这个功能,但是因为WordPress里已经自动加载了jQuery了,所以就不想再引入其他库了,而且这个需求也很简单,用jQuery就足够了。
第一步
原作者一共写了15篇,这是定死了的, 只需要获取到我已经在丘壑博客上翻译了几篇就可以了,除以总数15篇就得到了百分比。本想自己写个 WP_Query 查出来,发现有个插件可以很方便的获取到,就不用重复造轮子了 Display Posts – Easy lists, grids, navigation, and more , 很强大,可以用各种过滤条件动态查找文章并显示出来
在页面上加上如下的 shortcode,就可以把所有标签为 genesis-explained 的文章按顺序查出来并显示
[display-posts tag="genesis-explained" orderby="ID" order="ASC"]
第二步
因为用display-posts显示出来的列表自带了一个css样式,所以可以很容易用jQuery选择器来获取到文章数量:
var completed=$(".display-posts-listing li").size() var progress= parseInt((completed / 15) *100) + "%"
第三步
数据有了,那么还需要在页面上加一个div区域,可以让jQuery来动态更新区域的内容,很简单,编辑页面,插入一段html
<div class="progress progress-striped active"> <p class="alert alert-success completed"><strong></strong> </p> <p class="alert alert-success goal"><strong>共: 15 篇</strong></p> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only"> </span> </div> </div>
现在,再把上面的 JavaScript代码再补充一下,用来更新进度条里的文字内容,完整版的如下:
( function( $ ) { 'use strict'; var completed=$(".display-posts-listing li").size() var progress= parseInt((completed / 15) *100) + "%" $('p.completed strong').text("已完成: "+completed+" 篇") $('span.sr-only').text( progress+" 已完成") $('div[role=progressbar]').width(progress) })( jQuery );
第四步
现在是光秃秃的,太丑了,再加入一点CSS,穿件衣服。写CSS是我的弱项,所以我就选择了Bootstrap,完整版的太臃肿了,包含了太多不需要的东西,完整引入也有可能会把现有主题搞乱,所以在 Bootstrap官网上 定制化下载 了一个最简版的,只包含 alert
和 progress
部分,其他部分都不要。然后再加上一点自定义的样式:
.progress { position:relative; height:70px; } .completed { position:absolute; top:10px; left:10px; padding: 10px; } .goal { position:absolute; top:10px; right:10px; padding: 10px; }
第五步
现在基本上就已经可以达到效果了,最后,我只想在这一个页面上显示这个进度,其他页面上都不需要,所以,新建一个针对这个页面的模板 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
这里了。
<?php add_action('wp_enqueue_scripts','child_bootstrap_processbar'); function child_bootstrap_processbar(){ wp_enqueue_style( 'child_bootstrap_processbarCSS', get_stylesheet_directory_uri().'/js/bootstrap-processbar.css'); wp_enqueue_style( 'child_bootstrap_processbar_goalCSS', get_stylesheet_directory_uri().'/js/bootstrap-processbar-goal.css'); wp_enqueue_script( 'child_bootstrap_processbarJS', get_stylesheet_directory_uri().'/js/bootstrap-processbar.js', array( 'jquery' ), CHILD_THEME_VERSION, true ); }; genesis();
最终效果在这里 神级 WordPress 主题框架 Genesis 从入门到精通
结语
不知不觉都已经翻译一大半了,60%了才想起来做个进度表:disappointed:,翻译过程其实还是有收获的,细嚼慢咽的也可以消化的更好一点,希望早点到达100%吧
参考资料
See the Pen Bootstrap Goal Progress Bar by Justin Cron ( @justincron ) on CodePen .
以上所述就是小编给大家介绍的《用 jQuery 和 Bootstrap 在 WordPress 中添加进度条》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Android - 条纹进度条实现,调整view宽度仿进度条
- 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题
- iOS- 音频进度条
- imchenwen进度:优化
- golang 进度条功能实现
- iOS 实现步骤进度条
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP Cookbook
Adam Trachtenberg、David Sklar / O'Reilly Media / 2006-08-01 / USD 44.99
When it comes to creating dynamic web sites, the open source PHP language is red-hot property: used on more than 20 million web sites today, PHP is now more popular than Microsoft's ASP.NET technology......一起来看看 《PHP Cookbook》 这本书的介绍吧!
MD5 加密
MD5 加密工具
HSV CMYK 转换工具
HSV CMYK互换工具