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

栏目: jQuery · 发布时间: 5年前

内容简介:昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面手动更新肯定是不行的,程序员就是要懒。思路其实挺简单的,就是动态获取到已经翻译了几篇,除以总数得到百分比,并让页面上的进度条部分根据这个百分比变化就行了。方法还是有挺多的,很多JavaScript的库都可以实现这个功能,但是因为WordPress里已经自动加载了jQuery了,所以就不想再引入其他库了,而且这个需求也很简单,用jQuery就足够了。原作者一共写了15篇,这是定死了的, 只需要获取到我已经在丘壑博客上翻译了几篇就可以了,除以总数
用 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 的文章按顺序查出来并显示

[display-posts tag="genesis-explained" orderby="ID" order="ASC"]

第二步

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

用 jQuery 和 Bootstrap 在 WordPress 中添加进度条
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%了才想起来做个进度表:disappointed:,翻译过程其实还是有收获的,细嚼慢咽的也可以消化的更好一点,希望早点到达100%吧

参考资料

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


以上所述就是小编给大家介绍的《用 jQuery 和 Bootstrap 在 WordPress 中添加进度条》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP Cookbook

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 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具