专栏首页一丘一壑用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

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

需求

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

思路

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

第一步

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

页面上加上如下的 shortcode,就可以把所有标签为 genesis-explained 的文章按顺序查出来并显示(默认显示10篇, 多于10的话可以自己设置数量,或者用posts_per_page=”-1″不限制)

display-posts的查询很强大,支持各种条件

第二步

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

display-posts的样式

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官网上定制化下载了一个最简版的,只包含alertprogress部分,其他部分都不要。然后再加上一点自定义的样式:

.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%了才想起来做个进度表?,翻译过程其实还是有收获的,细嚼慢咽的也可以消化的更好一点,希望早点到达100%吧

参考资料

See the Pen Bootstrap Goal Progress Bar by Justin Cron (@justincron) on CodePen.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Genesis框架从入门到精通(3):框架的内置动作

    在本系列的第一部分, Genesis框架从入门到精通(1):什么是框架? ,从总体上解释了Genesis框架是如何工作的,并展示了文件中的钩子长什么样子。在第二...

    丘壑
  • 2019年WordPress流行趋势预测

    WordPress的流行趋势和时尚界无异。少数的流行趋势会保持不变,其他的也会冒出来。

    丘壑
  • Genesis框架从入门到精通(11): 图像函数

    Genesis Explained Image Functions

    丘壑
  • 着陆页跳转,你需要了解什么?

    原创作者:朱顺意 本文长度为1400字 ,建议阅读10分钟。 今天iCDO原创团队志愿者朱顺意将为我们深入探索着陆页跳转的小“心机“! 访客点击社交网站的广...

    iCDO互联网数据官
  • Spark Core项目实战(3) | 页面单跳转化率统计

      计算页面单跳转化率,什么是页面单跳转换率,比如一个用户在一次 Session 过程中访问的页面路径 3,5,7,9,10,21,那么页面 3 跳到页面 5 ...

    不温卜火
  • 一分钟学Python| Python的运算符 (上)

    运算符就是想数学中的加、减、乘,除的符号就是运算符,这次带大家来学习Python中的运算符中的运算符的介绍,因为内容过长,为了不违背 “一分钟“ 的原则,所以会...

    Python进击者
  • 求排列数

    分析:  P(10, 3) = P(10, 2) * 8 = P(10, 1) * 9 * 8 = P(10, 0) * 10 * 9 * 8 = 1 *...

    海天一树
  • Stack Overflow上最火的答案居然有Bug?

    最近,一位叫做 Aioobe 的开发者在一项调查中,发现了一段自己十年前写在Stack Overflow 上复制次数最多、传播范围最广的代码,其实是有 bug ...

    老九君
  • 使用Kubernetes和容器扩展Spinnaker

    Kubernetes和容器完全改变了我们对完成工作所使用的工具的看法。扩展自动化平台需要通过fork开发定制扩展,并决定是否应该贡献上游的日子已经一去不复返了。...

    CNCF
  • 【Go 语言社区】如何实现单服务器300万个长连接的?

    不是吹牛,理论上完全可以达到。 (以下参考值皆是Linux平台上) 1,Linux单个进程可以维持的连接数(fd)理论值是通过ulimit -a设置,或在se...

    李海彬

扫码关注云+社区

领取腾讯云代金券