这个快递员为什么很失败

最近在京东买了几批东西准备过年,快递发过来不少,就遇到了同一个快递公司的两个不同的快递员。然后他们俩个给我的体验是完全不同的,从做事的角度上来说,很显然,其中一个会变成主管或者高层,另一个会被辞退,如果他们继续这样下去。

先说不好的一个,他姓王,他是这样送快递的。第一天,我在京东上查询到了我的快递正在送货,在上午。从前两天的送货来看,这家快递公司一般在中午之后的下午左右到我家附近送货,所以我就一直在等着。果然下午的时候,来了一个电话,是我妈接的。他在那头问,我家在哪里。我妈细心的跟他说了半天,走那条街到什么路口之类的。然后他说他现在在一个离那里比较远的地方,可不可以晚点过去送。我妈比较和善,就说可以,说一直都有人最晚来送也可以。然后我等到睡觉,也没来送货的。甚至,我连是哪个货都不知道。

第二天早上,虽然已经九点了,但是我还在睡觉。这时候,电话响了,是他来送快递,说还有两分钟到我们家附近的街道,让我出来拿快递。有没有搞错?!送快递的,让我从家出去到外面的大街上拿快递。没办法,我也是个好人,就急忙起来随便穿了几件衣服,然后就跑出去了。临出去之前,我突然想到一个事情,这个是不是那个货到付款的货?为了保险,我特意带上了钱包。这时候外面下着小雨,气温很低,我穿的比较单薄,而且从我家下楼到外面的大街,需要走几百米的路。我就这样哆哆嗦嗦的出去了,然后他又打电话给我,问我在哪。然后我就看见他了,在一个封闭的三轮车上。我走过去,他拿出快递,然后撕开说货到付款。幸亏我提前拿了钱,因为我还订了其他不是货到付款的快递。

然后他找了一会钱,这时候,我看到了三轮车后面坐着两个女的。男的还回头说了一声,稍微等一下。之后找完了钱,头也不抬的说,没有两毛钱。然后我就直接说不要了,就回来了。很明白了,他在利用快递的途中,顺便拉客,多赚一些钱。然后根据拉客的需求,顺便送一下附近的快递。他也解释了昨晚为什么没来送了,说昨晚已经到了六点半了,然后就没来送。也没有道歉,也没有诚意。所以我扭头就走。

下午,同一个公司的另一个快递员也来送货了,也是货到付款的快递。她是一个女的,姓马,前两次都是她来送的。下午接到了一个电话,问我在家吗?我说在,然后她说现在可以下楼来拿快递了,货到付款,准备好钱。然后我就穿衣服,拿好钱,用了大约两分钟,然后下楼。她已经在我家楼梯口那里等着,同样也是坐在封闭的三轮车,但是里面都是一些快递。我递上钱,然后她给我货,确认无误之后,就完成了。

对于马来说,实在是有点笨啊。因为从大街上拐进来小区,然后到我楼底下,需要一点点时间和精力,而且要在下面等我一会,然后在出去。真是好浪费时间啊!但是,难道快递不是应该这样的吗?难道快递,要让你自己打车去他们公司拿货吗?!这位姓马的,是我见过的最好的快递员,服务那一切都是那么完美可亲,每次她走,我都要说个谢谢。而那个王快递员,我连骂都不愿意浪费口水。冷静下来,我们透过表面来看一下工作成功的本质因素是什么。

专业技能。对于快递行业来说,认识每个地点在哪里,这是必要也是必备的专业知识。你如果连个地方都不知道在哪里,你怎么去送快递?马快递员,不仅知道我家的小区,还根据上面的楼和门牌号,确定我在哪个楼栋。而王快递员,解释了半天,最终还是在大街上。

诚信。既然你已经说过要晚点来送,那么就是下了下班时间,也应该送过来。因为知道要有快递来,我都没敢出门,一直在家里等。结果最后也没来。即便是有些意外情况,实在是来不了,也应该打个电话来介绍一下,道个歉。连一点诚信都没有,礼貌也没有,知道自己做的不对,连个对不起都不说,理直气壮的说一句“昨晚到了六点半了,就没来送”。

负责。快递讲究什么?当然就是速度。王快递员非常聪明,为了增加自己的收入,利用工作的条件(有车、到处跑),顺便拉人接私活。这样是很聪明,但是你的工作是送快递。用最快的速度把货送到收货人那里。现在则是先拉人,然后到目的地看看有没有货,然后再送。这就是对工作的不负责和不认真。而马快递员全心全意的送快递,而且宁愿自己累点等待,也要让客户得到良好的体验。这就是对工作的认真负责。

这两个不同的快递员,给我的间接印象会造成后面的什么影响?如果他们俩是不同的快递公司,那么我对王快递员所在公司已经失望,以后收发快递都不会使用这家公司,即使他们承诺很快也很便宜。但是他们俩是同一家快递,当王快递员送货之后,我对这家快递也有了很坏的影响,虽然之前感觉他们不错。这种感觉一直到马快递员送完货之后,才得到调整。

对,没错,就是这样。当一个航空公司,一直没有出现失误的时候,突然有一架飞机失事,机毁人亡。那么这家公司虽然一直都很好,但是也很快倒闭了。你可以保证一直提供和以前一样的服务,或者更好一点的服务。但是哪怕有一次,你提供给了客户一次不好的服务,哪怕是稍差一点的,那么这个客户就可能留下很坏的印象,下次不会在合作。正如在很久以前(10天前)我在京东定下的电吉他,到现在都没有收到货。我对京东的态度也开始发生了变化。之前我选择京东,是因为我认为,京东正品、低价、发货速度快。在体验的过程中,也确实如此,一般三天到货。而淘宝第三方快递平均要4-5天,而且第三方快递服务水平有限。但是这件事,让我对京东有了新的认识。

当你特别关注一件货物,而货物迟迟不来的时候,你就会感觉时间更加漫长。虽然只有十天,但是给我的感觉远远超过了十天。页面上的快递电话,也打不通,问在线客服,只能说请您稍等我给您催催。这样,我对京东的购物产生了一种恐惧。这两个月,我不会再在京东上买任何东西。而且以后要在京东买东西之前,我心中都会有几个疑问:我是否愿意为这个商品等待十天?周围商店是否有合适的替代品?如果消费者在购物之前有了疑问和思考,不再冲动,那么电子商务网站的出货量就会大大降低,因为他们就是靠着打折策略等,让消费者不再理性,然后冲动的下上订单。

有点扯远了,这件事情告诉我们,如果你要从事一项工作,那么在具备熟练的专业技能之后,要将就诚信、认真负责的对待客户和工作。做好每一次的用户体验,为客户着想,赢得客户的信任,不容许任何一丝失误。对于公司来说,你只能保持现在的服务状态,或者更好的服务。一旦你的服务体验下降,你将会损失大量的客户,而这里面的有些客户,很有可能决定你的公司是否能继续存活下去。

这就是为什么这个快递员很失败!

一种新型超链接交互样式设计与实现

超链接是网页中,必不可少的内容。超链接的交互设计,也是一个网页中最重要的细节。CSS 也为链接准备了几个伪类选择器,用来设置超链接的交互操作。但是在绝大多数网站中,我们看到的超链接交互样式,通常是:改变一下链接的颜色、取消或者增加下划线、点击链接文本变色或者下划线消失等等。但实际上,超链接的交互设计,并非只能这么简单。

很久没有登录 W3C 的官方网站,今天上去看了一下,从第一眼就看到了他们的超练级的与众不同。把鼠标放上,点击,测试了一下他们的超链接交互设计,感觉非常不错,就稍微思考了一下这个设计是如何实现的。稍微思考一下之后,才发现实现这个效果非常的容易,而且兼容性较好。下面就来介绍一下。

先来看一下他们的效果图片,当然,我更推荐直接去 W3C 官方网站看效果。

w3c 的超链接交互性演示

实现原理和分析

首先,仍然是常规的超链接样式,带一条下划线,但是与普通的超链接样式不同的是,这条下划线要粗(2px 普通的 1px),同时这个下划线和文字颜色不同(用 color 和 text-decoration 定义的超链接下划线颜色是和文本相同的)。所以可以肯定,这个下划线是使用 border-bottom 属性定义的,并且 padding-bottom 了几个像素,空开一定距离。然后交互性操作就很简单了,只需要改变一下底边框的颜色就可以了。当点击事件发生的时候,超链接不是简单的改变了颜色,而是向下移动了几个像素,这样给人的错觉就是按下去了一样,这种用户体验是传统超链接仅仅变换颜色所体验不到的。关于这个的实现,需要使用 position 的 relative 属性,激活 top 属性,即可让超链接脱离原来位置向下偏移一定距离。

既然原理分析完毕,那么我们就开始写出相应代码吧。

HTML 结构

随便输入一些字,加上个链接就 OK 了。

<div>
 这里是 潜行者m 随便打的一些字,用来做链接交互样式的演示,<a href="#">链接在这里</a>。这里是 潜行者m 随便打的一些字,用来做链接交互样式的演示,<a href="#">链接在这里</a>。这里是 潜行者m 随便打的一些字,用来做链接交互样式的演示,<a href="#">链接在这里</a>。
 </div>

CSS 样式

div{width:300px;margin:20px auto;line-height:24px;}
 div a{text-decoration:none;color:#000;padding-bottom:1px;}
 div a:link,div a:visited{border-bottom:2px solid #f00;}
 div a:hover{border-bottom:2px solid #00f;}
 div a:active{border-bottom:2px solid #00f;outline:0 none;position:relative;top:1px;}

对 div 的宽度定义只是为了好看而已,对行高的定义,是为了不让下划线影响到下一行文字,这个可以自己决定。然后先对 a 标签取消默认的下划线和颜色,再就是交互性的操作。注意,对 :active 使用了 outline 属性,防止有些浏览器在点击超链接的时候,超链接会出现边框。

发散思维

既然是用了边框的方式模拟下划线,那么可不可以通过调整超链接的高度让这条线变成一条可以交互操作的 “删除线” 呢?当然是可以的,我们只需要把 height 属性调小一点同时还需要让 a 的 display 属性变成 inline-block,就可以让边框穿过文字,由于 overflow 的默认属性是 visible 所以文本仍然是可见的。

div a{text-decoration:none;color:#000;padding-bottom:1px;height:6px;display:inline-block;}

这样就实现了下图效果

具有交互性的边框模拟删除线样式

需要注意的是 a 元素是行间元素,直接对其使用 height 是没有作用的,但是对其加上 display:block 变成块元素,则会脱离文本,所以需要添加 inline-block 属性。但是这样,对于早期的 IE 浏览器兼容性不太好。

制作这样一个超链接的交互样式非常简单,而且交互效果很不错,平时我们应该多一点细心和发散思维,才能不断提高用户体验。

推荐阅读

a 标签的样式规划

inline-block 前世今生

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

系统默认的滚动条样式,真的已经看的够恶心了。试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭。 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目前寻找的成果来说,找到了两个比较不错的 jQuery 插件:jScrollPane mCustomScrollbar 。关于前者,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大。效果在几年前非常不错,但是放在现在就不好说了。所以我选择了后者: mCustomScrollbar。下图是两者官方示例的简单对比:

jScrollPane 和 mCustomScrollbar 的对比

本文就是介绍如何使用这个插件,大部分的内容,是根据mCustomScrollbar 官方的介绍页面进行一个翻译,但将其部分内容修改,同时增加一些自己在使用中的一些技巧。

关于 mCustomScrollbar

mCustomScrollbar 使用了 jQuery UI,可以通过灵活的通过 CSS 定义你的滚动条。同时可以定义垂直的和水平的滚动条,并且通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,滚动的过程中,还可以缓冲滚动使得滚动更加的平滑。可以自动调整滚动条的位置并且可以定义滚动到的位置等。总之,你知道非常好用就好了。

mCustomScrollbar 效果图

点击这里可以下载这个 mCustomScrollbar

点击这里可以查看这个 mCustomScrollbar 的 Demo

如何使用 mCustomScrollbar

首先,先请你下载作者提供的插件包,里面包含了所有的插件文件和一些例子。以下的四个文件时必须要上传到你的服务器上的:jquery.mCustomScrollbar.js, jquery.mousewheel.min.js, jquery.mCustomScrollbar.css and mCSBbuttons.png。_

第一步:加载插件的样式文件。

可以使用以下代码,引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

第二步:加载必须的 JS 文件。

需要加载的文件有如下几个:jQuery、jQuery UI, jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js。jQuery 和 jQuery UI 是必须的, jquery.mousewheel.min.js 是用来提供滚动支持的,jquery.mCustomScrollbar.js 则是插件的主文件。要注意的是,加载顺序也要按照上面说的来,如果不注意加载的顺序,可能会导致失败,原因请看本人的:网页中代码的顺序是不可忽略的细节

你可以使用如下代码加载:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>

你可以把这段代码放在文档的底部来缩短加载网页内容的时间,原因也可以在上面介绍的那篇文章中看到。这里的加载的代码使用了 Google 的 CDN 加速服务来获得 jQuery 和 jQuery UI,这样的有好处也有坏处。在插件包中,包含了 jQuery 和 jQuery UI(这个 UI 被作者精简了,包含这个插件必须的模块,大小只有 43KB),你当然可以把插件包中的这两个库上传到服务器上使用。它们在插件包的 jquery 目录里面。

如果当你在使用类似 Google 或者 Sina 的常用 Javascript 库的加速服务的话,更推荐采用下面的写法(以 Google 为例):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script>

如果这样写,它会在 库 加载完成之后,做一个判断:如果没有成功加载这个库,那么就生成一段新的 Javascript 引用代码,用来引用本地的文件。这样,如果外面的库无法使用,就会加载本地的库,而不会导致插件无法使用。推荐这种写法。

第三步:对 内容块 激活这个插件

<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

这里我使用了(function($){ … })(jQuery);来包裹 jQuery 代码,这是为了避免 jQuery 和其他的 库 在使用中产生冲突。我还用了window load ($(window).load()) 来激活我的插件功能,因为这样,就可以保证在页面对象全部加载完成之后,加载我的插件。当然,你也可以使用常规的 jQuery 代码加载方法,但是你要明白 ready 和 load 方法之间的不同。一般的 jQuery 代码加载方法如下:

<script>
    (function($){
        $(document).ready(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

第四步:在页面中添加内容和样式

没有内容当然谈不上出现这个插件的效果了。就上述示例代码来说,我们应该在页面中定义一个 class 为 content 的 内容块。并添加一些测试数据:

<div class=".content">
    <p>测试数据.......还有很多很多</p>
</div>

这样当然不算完,自定义滚动条的样式,必须要出现滚动条才可以。所以我们还要对这个块加上一些 CSS 来让它出现滚动条,否则是没有效果的。加上的样式很简单,就是定义一个宽或者高或者宽高都定义,然后再定义一个 overflow 值为 auto。这样如果内容超出了指定的宽高,就会出现一个滚动条。例:

width:100px;height:100px;overflow:auto;

完成上述的操作之后,带有滚动条的内容块的滚动条,就变成这个插件的默认样式了。

使用 mCustomScrollbar 之后的效果图

官方的默认样式相对于白色的对比度不高,所以为了显示的明显一点,我加了一个深色的背景色。

当然还有很多参数开扩展插件的功能,这些参数的使用方法过后再讲。先来说说上面用到的这些文件的用途和简单介绍:

jQuery:这个插件的必备库,你懂。

jQuery UI:扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。

jquery.mousewheel.min.js:这是 Brandon Aaron 编写的一个伟大的只有 2kb 的插件,它面向所有的操作系统和浏览器,为我们提供了鼠标滚动事件的支持。

jquery.mCustomScrollbar.js:这是我们的插件主文件。在插件包的 minified 你可以找到它的压缩版。

jquery.mCustomScrollbar.css: 这个 CSS 文件是让我们来定义边栏用的。你可以在这个文件中定义你的边栏,当然你可以在其他的 CSS 文件中定义,要注意的是,你要用 CSS 中的顺序,其中的优先级关系来覆盖这个文件中的定义。否则可能会无效,关于网页中代码顺序,详情可以看一下 潜行者 m 的这篇文章:网页中代码的顺序是不可忽略的细节

mCSB_buttons.png: 这个 png 图片文件,包含了向上向下向左向右滚动的按钮。可以使用 CSS sprites 技术,来使用这个图片中的相应按钮。插件包中包含了这个图片的 PSD 源文件(sources/mCSB_buttons.psd ),你可以根据自己的需求自定义。

完成这些,你已经可以正确的使用这个插件,并且看到了相应的效果。但是没有人愿意使用如此强大的插件来实现这个默认的效果,下面来说一下进阶的使用。

mCustomScrollbar 的参数介绍

这个插件的功能巨大,所以参数也很多,参数值当然更多。在介绍参数的时候,我想先为新手介绍两种参数值的写法,分别是直接的和合并的。

我 们平时接触的插件用的参数,都是直接跟着参数写上参数值,这个比较直观简单。在这个插件中,参数值太多,所以把一些参数合并起来写。例如下面要介绍到的 scrollButtons 这个参数,它下面有四个属性:enable、scrollType、scrollSpeed、scrollAmount,这四个属性也分别有自己的值,来 实现相应的功能。如果再加上其他的参数,那么我们应该这样写:

$("#main").mCustomScrollbar({
 scrollButtons:{
 enable:false,
 scrollType:"continuous",
 scrollSpeed:20,
 scrollAmount:40
 },
 horizontalScroll:false,
 });

一定要注意闭合的括号和语句之间的逗号,新手可能会因为不小心,没有严格的按照这个规则写导致插件无法运行。好,下面我们介绍详细的参数。

  • set_width:false | 设置你内容的宽度 值可以是像素或者百分比
  • set_height:false | 设置你内容的高度 值可以是像素或者百分比
  • horizontalScroll:Boolean | 是否创建一个水平滚动条 默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false
  • scrollInertia:Integer | 滚动的惯性值 在毫秒中 使用 0 可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)
  • scrollEasing:String | 滚动动作类型 查看 jquery UI easing 可以看到所有的类型
  • mouseWheel:String/Boolean | 鼠标滚动的支持 值为:true.false,像素 默认的情况下 鼠标滚动设置成像素值 填写 false 取消鼠标滚动功能
  • mouseWheelPixels:Integer | 鼠标滚动中滚动的像素数目 值为以像素为单位的数值
  • autoDraggerLength:Boolean | 根据内容区域自动调整滚动条拖块的长度 值:true,false
  • scrollButtons:{ enable:Boolean } | 是否添加 滚动条两端按钮支持 值:true,false
  • scrollButtons:{ scrollType:String } | 滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子
  • scrollButtons:{ scrollSpeed:Integer } | 设置点击滚动按钮时候的滚动速度(默认 20) 设置一个更高的数值可以更快的滚动
  • scrollButtons:{ scrollAmount:Integer } | 设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40 像素
  • advanced:{ updateOnBrowserResize:Boolean } | 根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false 设置 false 如果你的内容块已经被固定大小
  • advanced:{ updateOnContentResize:Boolean } | 自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小 建议除非必要不要设置成 true 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能
  • advanced:{ autoExpandHorizontalScroll:Boolean } | 自动扩大水平滚动条的长度 值:true,false 设置 true 你可以根据内容的动态变化自动调整大小 可以看 Demo
  • advanced:{ autoScrollOnFocus:Boolean } | 是否自动滚动到聚焦中的对象 例如表单使用类似 TAB 键那样跳转焦点 值:true false
  • callbacks:{ onScrollStart:function(){} } | 使用自定义的回调函数在滚动时间开始的时候执行 具体请看 Demo
  • callbacks:{ onScroll:function(){} } | 自定义回调函数在滚动中执行 Demo 同上
  • callbacks:{ onTotalScroll:function(){} } | 当滚动到底部的时候调用这个自定义回调函数 Demo 同上
  • callbacks:{ onTotalScrollBack:function(){} } | 当滚动到顶部的时候调用这个自定义回调函数 Demo 同上
  • callbacks:{ onTotalScrollOffset:Integer } | 设置到达顶部或者底部的偏移量 像素单位
  • callbacks:{ whileScrolling:function(){} } | 当用户正在滚动的时候执行这个自定义回调函数
  • callbacks:{ whileScrollingInterval:Integer } | 设置调用 whileScrolling 回调函数的时间间隔 毫秒单位
    下面是所有参数的列表和它们的默认值
    $(".content").mCustomScrollbar({
    set_width:false,
    set_height:false,
    horizontalScroll:false,
    scrollInertia:550,
    scrollEasing:"easeOutCirc",
    mouseWheel:"auto",
    autoDraggerLength:true,
    scrollButtons:{
      enable:false,
      scrollType:"continuous",
      scrollSpeed:20,
      scrollAmount:40
    },
    advanced:{
      updateOnBrowserResize:true,
      updateOnContentResize:false,
      autoExpandHorizontalScroll:false,
      autoScrollOnFocus:true
    },
    callbacks:{
      onScrollStart:function(){},
      onScroll:function(){},
      onTotalScroll:function(){},
      onTotalScrollBack:function(){},
      onTotalScrollOffset:0,
      whileScrolling:false,
      whileScrollingInterval:30
    }

mCustomScrollbar 的方法

update

用法:\$(selector).mCustomScrollbar(“update”);

调用 mCustomScrollbar 函数的 update 方法去实时更新滚动条当内容发生变化(例如 通过 Javascript 增加或者移除一个对象、通过 ajax 插入一段新内容、隐藏或者显示一个新内容等)

下面是例子:

$(".content .mCSB_container").append("<p>New content here...</p>");
$(".content").mCustomScrollbar("update");
$(".content .myImagesContainer").append("<img src='myNewImage.jpg' />");
$(".content .myImagesContainer img").load(function(){
  $(".content").mCustomScrollbar("update");
});
$("#content-1").animate({height:800},"slow",function(){
  $(this).mCustomScrollbar("update");
});

当新内容完全加载或者动画完成之后,update 方法一直被调用。

scrollTo

用法:\$(selector).mCustomScrollbar(“scrollTo”,position);

你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串(例如 “#element-id”,“bottom” 等)描述或者是一个数值(像素单位)。下面的例子将会滚动到最下面的对象

$(".content").mCustomScrollbar("scrollTo","last");

scrollTo 方法的参数

  • \$(selector).mCustomScrollbar(“scrollTo”,String); | 滚动到某个对象的位置,字符串型的值可以是 id 或者 class 的名字
  • \$(selector).mCustomScrollbar(“scrollTo”,”top”); | 滚动到顶部(垂直滚动条)
  • \$(selector).mCustomScrollbar(“scrollTo”,”bottom”); | 滚动到底部(垂直滚动条)
  • \$(selector).mCustomScrollbar(“scrollTo”,”left”); | 滚动到最左边(水平滚动条)
  • \$(selector).mCustomScrollbar(“scrollTo”,”right”); | 滚动到最右边(水平滚动条
  • \$(selector).mCustomScrollbar(“scrollTo”,”first”); | 滚动到内容区域中的第一个对象位置
  • \$(selector).mCustomScrollbar(“scrollTo”,”last”); | 滚动到内容区域中的最后一个对象位置
  • \$(selector).mCustomScrollbar(“scrollTo”,Integer); | 滚动到某个位置(像素单位)
    scrollTo 方法还有两个额外的选项参数

moveDragger: Boolean | 滚动滚动条的滑块到某个位置像素单位,值:true,flase。例如:\$(selector).mCustomScrollbar(“scrollTo”,200,{ moveDragger:true });

callback:Boolean | 执行回调函数当 scroll-to 完成之后,值:true,false 例如:\$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true });

disable

用法:\$(selector).mCustomScrollbar(“disable”);

调用 disable 方法去使滚动条不可用。如果想使其重新可用,调用 update 方法。disable 方法使用一个可选参数(默认 false)你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。例如:

$(".content").mCustomScrollbar("disable",true);

可以看一些使用 disable 的例子

destroy

用法:\$(selector).mCustomScrollbar(“destroy”);

调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式

可以看一些使用 destroy 的例子

mCustomScrollbar 的原理

通过潜行者 m 对这些插件的使用,对这些插件的实现原理也做了一些分析。原理就是这样的:

首先获取要修改滚动条样式的内容区块,然后使用 CSS 隐藏掉默认滚动条,然后使用 Javascript 添加很多 HTML 结构,再配合 CSS 做出一个滚动条的效果。然后再使用 CSS 定义滚动条的样式,使用 Javascript 相应鼠标的滚动事件,产生滚动下滑的效果。

明白了这点,下面我们就可以看一下滚动条的结构,然后使用 CSS 对其进行定义了。

定义滚动条外观

先了解一下滚动条的 HTML 结构,下面是默认的垂直滚动条结构:

<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox">
    <div class="mCSB_container">
      <!-- your long content here... -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonUp"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger ui-draggable">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonDown"></a>
    </div>
  </div>
</div>

mCSB_buttonUp 和 mCSB_buttonDown 这两个 a 标签只有当你启用了 scroll buttons 功能的时候,才可用。下面这个结构是 水平滚动条 的结构:

<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox mCSB_horizontal">
    <div class="mCSB_container">
      <!-- your long content here... -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonLeft"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger ui-draggable">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonRight"></a>
    </div>
  </div>
</div>

知道这些之后,我们就可以来定义滚动条样式了,对于同一页面多个滚动条,官方推荐如下的写法:

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 1st scrollbar dragger style... */
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 2nd scrollbar dragger style... */
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 3rd scrollbar dragger style... */
}

为了更加直观的看到要定义的滚动条区域,官方给出了一张非常形象的图片

mCustomScrollbar 的滚动条结构图

根据这张图片,就可以很容易的定义滚动条的样式了。

更加进阶的使用

修改浏览器的滚动条

单单是修改某个内容区域的边栏已经无法满足我们的需求了,我们还想修改浏览器边栏应该怎么办?这当然是无法用 Javascript 来实现,因为浏览器是一个容器,Javascript 是容器里面的代码,怎么会把容器修改了呢?当然,有问题就肯定有解决方法。面对这个问题,解决方法很简单,就是虚拟出来一个浏览器窗口。

我们先添加一个 div 块,然后对这个 div 添加 position:absolute 属性,然后就可以指定它的 width 和 height 为 100% 或者稍微小点的 98%。这样,这个 div 就扩充到了整个浏览器界面,这样就可以被当做是一个网页的 body。然后加上 overflow:auto 让其超出自动出现滚动条。这样就可以模拟出修改了浏览器滚动条的效果。

关于更多的进阶使用和技巧,欢迎跟我交流,也可以关注本文,会在后面陆续添加。

字体是网页设计中最重要的细节

一个非创意性质的网页,最重要的内容,就是文字。出现了文字,就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这些细节,往往是非常重要的细节。

好的字体排版,可以让人耐心的看完那些文字,然后得到其中的重要信息,还可以影响到浏览者阅读的心情。同时,字体的选择、大小等,还应该配合企业的 VI 识别系统,还需要配合你作品需要表达的思想感情来确定(例如古典风格,应该选择哥特式字体等)。

好了,关于字体的重要性,我就说这么多,再多说也是废话,只要大家知道很重要,要好好选择调整就好了。

字体的分类和格式

衬线和无衬线

衬线算是一种辅助性的小细节,笼统的谈,太过于抽象,我们来看两个例子:

这两个字体,是有衬线字体,大家可以看到在边角的位置,会多出一些修饰。这样的好处就是,可以清晰的分辨出字母和文字,分辨笔划的起始和终止。但是,这种字体如果设置字体大小太小的话、或者你里文字较远,则会受到衬线影响,分辨不清晰。同时,由于中文系统,默认的字体为宋体,见的太多导致审美疲劳,所以衬线字体比较适合打印文字以及正规文档中使用,通常不太适合使用在网页中。

这两个字体,就是无衬线字体,没有边角的修饰,令人看起来很整齐光滑,没有毛刺。比较适合用在网页中,让浏览者获取大量的文字信息而不会疲劳。

字体系列

字体之间最大的差异并不在于有无衬线,而在于字体与字体之间,形体的差异。但是很多字体(特别是英文字体)之间,差异不大,有些新字体甚至是对已有字体进行了细微的改造后产生的。

于是,就把字体分成了几个大的系列,同一个系列中的字体,大体相同,称作通用字体系列。其中包括以下五个系列:

serif:带衬线字体。Times New Roman 是默认的 serif 字体,中文字体的话,是宋体、仿宋之类的字体。

sans serif:无衬线字体。Arial 是默认的 sans-serif 字体,中文字体中,微软雅黑、黑体等都是这类字体。

monospace:等宽字体。这个字体里面的每个字母都有相同的宽度。通常用于显示程序代码等,Courier 是默认的 monospace 字体。而对于中文,每个汉字都是等宽的。

cursive:模仿手写字体。手写体,比较个性,通常用于标题、logo 等等。这个字体系列没有默认字体,英文来说,通常用 Comic Sans,中文的话,行书系列、草书系列的字体等,都可以算作手写字体。

fantasy:装饰用字体。多数用于标题,极具个性,字体繁多,艺术字体。无法对其的大小、形状下一个统一的定论,所以没有默认字体,在网页中,也通常很少用到,除非你有特殊的用处创意性的设计。

关于通用字体系列的更多解释、描述和字体举例,推荐大家查看在 W3school 上的资料。

字体的格式

格式就是指字体表现出来的粗细、宽度和姿态等等特征。看下面的这张图片:

里面的字,是相同大小的,同时排放在一条竖线上。为其应用了四种不同的字体后,体现出来了不同的形态和粗细大小。在中文字体中,不同的字体,在字间距中通常没有很大的变化。而在英文字体中,不同的字体会改变字母的大小,导致整体的尺寸布局不同,进而导致整个排版混乱。

相同的字体大小,在不同的字体下面,显示的效果几乎完全不同。这是英文字体选择中,比较麻烦和头疼的问题。

字体的选择

上面的这些理论,从某些角度和意义上来说,都是废话。如何选择合适的字体,才真正切合实际。那么我们应该如何选择在网页中使用的字体呢?

解决这个问题,我们先应该知道为什么要纠结于选择字体这个问题。我个人认为应该存在 实用性创意性 这两个方面的因素。创意性很好理解,就是想突破常规,配合自己的网页中的设计思想而选择相应的字体,例如表达程序员的思维,就对代码使用等宽字体,表达恐怖、古典,使用哥特式字体等等。这点自己去找字体好了,不再赘述。最主要的问题是在于 实用性 的方面。

实用性问题,即不需要太过于华丽的字体,只需要大家看的都舒服、稍微带点自己的特色即可。你会说,很容易啊,直接 CSS 定义一条,填上个字体就好了。如果真这样,那就太好了。浏览器解析字体的过程实际上是这样的,当浏览器加载 CSS 后,解析到有关字体的样式,它会在你的系统中查找这个字体,只有找到了相应的字体文件,才会根据那个字体文件对网页中的文字进行渲染,显示出你想要的效果。

既然这样,如果你的操作系统中,并没有安装网页中定义的那种字体,就无法渲染出那种字体的效果,而通常使用当前系统的默认字体来渲染。那么你原有的设计,就不行了,你设计时觉得挺好,字体、位置、大小合适,但在别人的电脑上,清一色的宋体。所以这个问题,才是选择字体的难处所在。当然,有问题就有解决方式:

使用经典通用字体

不同操作系统都有不同的字体系统,但既然是字体,总有一些比较经典老牌的字体共同存在于各个系统中。例如无衬线的 Arial 字体,它产生的时间比较早,同时价格低廉,所以从早期就被 windows 操作系统使用,在其他的操作系统中,也会有较好的不同于默认字体的显示效果。所以 我爱水煮鱼潜行者 m 博客 这些网站,直接在 CSS 中声明使用一个字体:Arial。

使用多个字体属性

上面的方法很简单,但是不灵活,注重简单而不注重细节。CSS 做的很好,它可以在一个网页中,声明指定多个字体,这样当写在前面的字体,在当前操作系统中没有的话,就会使用后面字体顶替。所以当你看一些网页作品的时候,会发现它的 CSS 中的 font-family 属性,指定了一大堆的 字体 名称。但这个也不是可以随便指定的,也有一些注意事项。

你应该这样做,先确定你网页中需要用到的字体,然后确定属于哪个字体系列有无其他的相近字体以及衍生字体,然后编写字体属性。顺序如下:最想用的字体》》可以代替的相近字体》》相近通用字体。例如如下写法:

font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;

这样的意思就是,优先使用 Times 字体,然后系统没有的话,查找同型异名的 TimesNR 字体,如果没有,寻找系统中的相近字体 New Century Schoolbook 等其他字体,最后如果都无法找到,就使用通用字体 serif ,这样浏览器就会寻找系统中的 无衬线 的默认字体,来代替。

字体的大小选择

形容字体大小的单位

在 CSS 中,最常用的描述字体大小的单位有两个:empx。通常认为 em 为相对大小单位,px 为绝对大小单位。但从实际应用中来讲,px 像素其实也是一种相对大小单位。例如,在一块 15 寸分辨率为 800x600 像素的屏幕上,10px 大小的文字,要比一块 10 寸分辨率 1024x768 像素的屏幕上的 10px 大小的文字显得更大一些。下面来说一下它们的区别和用法等。

px:像素单位,10px 表示 10 个像素大小,在现在的网页设计中,常被用来表示字体大小。很方便很直观,但是有一些弊端。对于可用性不太友好,因为是“绝对”单位,所以有些浏览器(早期)的字体放大缩小功能失效。浏览器的默认字体大小为 16px ,早期的网页,由于屏幕分辨率比较低,通常采用 12px 作为网页正文的标准字体大小。但是在现在,感觉有点偏小,比较长的文章来说,浏览者看起来费劲。现在我更主张使用 14px 作为标准字体,16px 作为中等字体,18px 作为较大字体,12px 作为偏小字体比较合适。

em:相对大小,它表示的字体大小不固定,根据基础字体大小进行相对大小的处理。浏览器默认的字体大小为 16px,如果你对一段文字指定 1em,那么表现出来的就是 16px 大小,2em 就是 32px 大小。相对大小单位有很广泛的用途,由于它的相对性,所以对跨平台跨设备的字体大小处理上有得天独厚的优势,同时对于响应式的布局设计也有很大的帮助。但是缺点很明显,你无法直观的看到大小,而且对于不同的大小,你需要精确的计算。

字体实际表现出来的大小

上面只是说了两种形容字体大小的单位,但实际上表现出来的字体大小,并非简单的单位前面的数值。除了数值之外,潜行者 m 个人认为还跟 设备视距 有关。

设备就是指显示设备的分辨率及屏幕大小,跟前面解释 px 单位的相对性相同,如果在一块非常大的分辨率非常低的屏幕(像广场电子屏),即使很小的像素,也会展示出很大的字。这也就是为什么早期的 800x600 像素横行的时候,大家都是用 12px 大小的原因。因为显示的文字已经够大了。

视距就是指浏览者看文字的距离。很明显的道理,眼睛距离屏幕越远,看起来上面的文字就变小了。

所以在选择网页中字体大小的时候,还需要考虑你的用户的实际使用习惯。同一个网页,在笔记本上和在手机上使用的时候,字体大小就不应该相同,因为电脑屏幕大分辨率高,而且视距通常比较近而且固定,手机等屏幕小分辨率较低,视距更近(大家都喜欢躺着或者趴着玩手机啦),所以这些都要考虑,才能得到一个合理的大小。

为什么是偶数字体大小

通过上面的单位介绍,对于 px 单位中,我举得例子都是 12px、14px、16px、18px 等等,为啥不是 11px、15px?这涉及到一个锯齿的问题,特别是在早期的显示器中,往往不能很好的处理文字的锯齿问题,而使用单数的像素,极有可能造成锯齿,所以默认的通常使用偶数大小。

字体的颜色选择

字体的颜色选择同样是一个重要的细节,但是涉及到配色了,已经超出本文要讨论的范围,所以在这里,我只好简单的说一下有关网页中字体颜色的禁忌。

字体的颜色要朴素、正常

什么叫朴素正常?通常来说,文章都是白底黑字,黑色的。所以网页中的文字,通常使用黑色,或者浅灰色,这样更加符合大众的口味。如果不是一些很有创意的设计,请不要随便的使用颜色。就像 我爱水煮鱼 博客里面的一篇文章

如果我为它加上蓝色,你会怎么想?

颜色要与背景有一定的对比度

低对比度,容易导致字体看不清楚。所以要用高对比度的颜色,例如白底黑字,黑底白字等。不信看下图:

如果你在看一篇文章,字体的颜色是上图中,最下面的那个,你还会再看下去吗?

避免特殊颜色

这里要避免的一些特殊颜色,是指网页中的一些默认颜色。特别是蓝色,因为蓝色代表着网页中的超链接,如果网页中有一段蓝色的文字,会让人误以为是可以点击的超链接。所以这种颜色要尽量避免。但是有些时候在设计中,必须要用到这种颜色的设计,所以也有一些其他的方法来解决这个问题。

例如潜行者 m 博客的 Qetro 主题,采用了蓝色调,在正文排版布局的时候思考过关于加粗文字的样式。如果使用常规的粗体黑色来说,较多的加粗内容,会导致页面文字的混乱。加粗的目的是为了醒目,告诉浏览者这是段重要的文字。所以我对文字添加蓝色处理。但是这个蓝色恰巧就跟超链接的默认样式颜色相同。非常容易让人迷惑,于是我将超链接的样式带有默认的下划线。

当用户看到蓝色的时候,可能会试图放在上面看一下,结果无法点击也没有变成手指。再往下拉,看到超链接的时候,一眼就可以看出下划线是可以点击的超链接。这也是一种还不错的折中方法。

与字体有关的 CSS 属性

与字体有关的 CSS 属性,通常有以下几个:font-family、font-style、font-weight、font-size、line-height、letter-spacing、word-spacing、text-align、text-decoration。

font-family:用于定义字体,上面有演示不多说。更详细的资料请看:font-family

font-style:用于定义字体的样式,包括正常、斜体、倾斜等,对应的属性值为:normal - 文本正常显示、italic - 文本斜体显示、oblique - 文本倾斜显示。

font-weight:用于定义文字的粗细,详细的属性值请看:font-weight。

font-size:设置字体大小,不再赘述。

line-height:用于设置文字中的行间距,合适的行间距对用户阅读带来良好体验。同时还可以用于垂直布局单行文字。

letter-spacing:设置文字之间的字间距,使文字之间的距离增大或者减小。

word-spacing:用于调整单词的间距。

text-align:用来对齐文字,例如左对齐、右对齐、居中对齐等。

text-decoration:用来修饰一段文本,例如添加下划线等。常对 a 标签使用这个属性消除其默认的下划线。

上面是与字体相关,比较常用的 CSS 属性,还有其他更加具体的,可以参考网上的资料,推荐 W3school 上面的有关字体的资料。

使用在线字体

在 CSS3 中,引入了一个非常强大而且实用的功能来面对上面的字体选择问题。传统的字体选择,要你的操作系统中安装相应字体才可以显示。如果你在网页作品中,使用了其他的创意字体,那么你需要生成相应的文字图片来替换,否则不会显示。CSS3 中的这个功能,就是 Web Fonts,网页中可以使用安装在服务器端的字体。你可以将选择好的字体,上传到服务器中,然后使用 CSS3 新增的 @font-face 属性,来调用服务器上的字体,然后来渲染网页。

支持 CSS3 这一功能的浏览器,会首先找到服务器上的字体,然后下载下来进行渲染。这样就彻底解决了本地操作系统中,没有对应字体的问题。关于 @font-face 的具体使用方法,由于比较多,在本文不再赘述,请大家自行百度之:@font-face 的使用方法

既然如此,那么选择的余地就很大了,只需要有字体文件就可以。于是一些人就开始想,我可不可以提供一个在线字体的服务,大家可以直接看到字体的效果,然后获取代码引用这个字体?于是就出现了在线字体,比较有名的有 Google 在线字体

不要高兴的太早了,自定义字体,目前只能应用在英文中。为什么呢?你下载个字体看一下就知道了,通常英文字体只有几百 KB,因为它只需要包含数字、标点、英文字母即可。而中文字体通常十几 M,最小的也要好几 M。因为汉字实在是太多,而且还需要对每个汉字进行设计制作。这样的话,汉字就没法应用了,因为你要打开一个网页,还需要先下载个几 M 的汉字字体,在目前国内的网速是不现实的。

参考和推荐文献

本文部分参考并引用了以下网络资料,同时也推荐以下资料:

【基础篇】11,通过 index.php 文件生成 文章页面(single.php)

在上一节我们讲解了如何对 index.php 文件进行分块,这节课就来讲解,如何通过这个文件,生成一个 文章模板(single.php 文件)。通过这节课,你会体验到文件分块的好处。

生成这个 文章页面模板 的步骤很简单。首先,我们先来仔细想一下,文章页面和博客首页有什么不同?除非是很特殊的设计,它们之间的不同,就在于主体区域。因为博客首页,更多的是要展示文章的信息,包括标题、时间、摘要等,通常以列表的形式出现。而具体的文章页面,就需要显示文章内容。至于其他的元素,例如头部、边栏、底部等这些都是不需要变化的。

那么生成的步骤就出来了。只需要把 index.php 复制一遍,然后命名为 single.php ,之后再修改一下这个文件,把结构改一下、添加上评论功能等,就变成了一个文章页面模板了。

修改文档结构

对于文章内容页面,为了更加方便的使用 CSS 对其进行控制,我们需要对其 结构进行修改。之前的结构

修改后的结构,已经添加了 文章信息描述 和 评论模块

之后,我们还要修改调用数据的函数。之前复制的时候,还是 the_excerpt() 这个显示文章摘要,我们现在要使用下面语句来调用全文内容

<?php the_content(); ?>

不需要任何参数,即可直接输出一篇文章的所有内容。当然,也可以为这个函数加上一些参数,这样可以根据自己的需要进行定义。更加详细的用法,请看 官方文档 或者 中文版 的。在这里,就不再赘述了。

完成上述步骤之后,我们刷新一下博客,然后随便打开一篇文章的时候,发现已经可以显示出来文章全文了。下面我们需要来进行一些样式的修饰。

添加 CSS 样式

之后可以看到文章数据之后,我们就需要对其使用 CSS 排版布局。排版主要的内容包括:文章整体布局、文章内元素的修饰、新增结构的布局等。关于文章内元素的修饰,在高级篇还会更加深入的讲解。在初级篇中,我简单的对其进行修饰一下,不对一些文章内的细节进行修饰。之后,文章页面效果图如下:

添加相应数据调用

修饰完成之后,我们需要在新增的“文章信息”模块中,添加相应的数据调用。只需要把下面一段代码复制到那个位置即可:

原创作者:<a href="<?php echo $authordata->user_url; ?>" title="<?php echo $authordata->display_name;?>"><?php echo $authordata->display_name;?></a><br />
 原文链接:<a href="<?php echo get_permalink($post->ID);?>" title="<?php echo $post->post_title; ?>"><?php echo $post->post_title; ?></a><br />
 版权声明:<a href="<?php bloginfo('siteurl'); ?>">© <?php bloginfo('name'); ?> </a> 版权所有,转载请声明版权!

显示效果如下:

上面的代码,对于有一定 PHP 基础的朋友来说,很容易理解。就是通过 WordPress 内置的几个全局对象,调取当前文章的相应信息,然后以 HTML 的方式呈现出来,于是就有了大家看到的那个效果。

添加评论功能

评论功能,是一篇文章必不可少的模块。增加评论模块,通常在 主题目录下面 新建一个名为 comments.php 的文件,然后在里面添加上相应的评论提交、评论调用显示的函数,之后在相应位置,加上调用函数。但是评论模块比较复杂,在基础篇中,就不讲解如何去手动添加评论模块,而是推荐使用第三方评论插件。

在这里推荐一下 多说 这个评论插件。在 WordPress 中安装这个插件,然后在他们官方网站上注册账号,通过密钥链接起来之后,就可以使用他们的插件了。他们定义的评论框样式美观,而且是拥有完整的评论功能,还可以使用社会化的网络登录并且同步到微博等等功能。所以推荐一下,大家可以去他们官方网站(http://duoshuo.com/)得到详细的使用教程和方法。

新建完 comments.php 之后,保持这个文档内容为空即可。然后找到主题文件中的评论功能的位置,在这里添加下面的代码:

<?php comments_template(); ?>

这个函数就是用来调用评论模块的,我们只需要做这么多即可。因为安装 多说 插件之后,它会自动检测 这个函数 然后将其内容替换成他们的评论模块。安装完多说插件,并且安装官方要求配置好之后,就会看到如下的评论框样式。

好,我们的文章页面就这样完成了。

本节课相关资源下载

myTheme(基础篇-11) 主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
  10. 【基础篇】9,制作底部区域 footer
  11. 【基础篇】10,将现有 index.php 文件分块处理

【基础篇】10,将现有 index.php 文件分块处理

WordPress 具有一套成熟的模板系统,在前面第二节 WordPress 的主题机制 中介绍过它的缺失文件替换机制和分离文件分块机制。这个文件分块机制,可以极大的提高代码的重用,而且方面之后的升级和修改。本节课就来讲解如何将现有的主题文件进行分割。

到现在,我们的示例主题 myTheme 已经有三个文件了,分别是:style.css、index.php 、functions.php 三个文件,其中 index.php 文件,就是整个主题的核心文件,下面我们就要对它进行分块,将其分成 头部、主体、边栏和底部 几块。

分出头部区域

头部区域通常包含 HTML 中的 head 区域,以及博客顶部很少变化的区域(例如:logo、标题、描述)。就本示例主题中,head 区域的内容以及 div 中 id 为 header 的区域,都可以划分到头部区域中。所以,我们把它剪切出来,再在目录下面,新建一个文本文档,复制进去。保存为 utf-8 编码的文件,命名为 header.php 。保存为统一的 utf-8 编码,有助于减少网页中的乱码现象,详情可以看一下本人的这篇文章:网页编码就是那点事

之后,在 index.php 文件中的头部原来代码位置中,添加一个句代码

<?php get_header(); ?>

这句代码不需要什么参数,就直接复制上去就可以,从名字上看就可以理解,这个函数的功能是引用主题下面的 header.php 文件,包含进来。

分出主体区域

主题就是当前页面的主要区域,所以这一部分,不用像上面那样,剪切出去,然后使用函数引用进来。确定好主主体区域之后,只需要在当前文件(index.php)中,保留这部分。

主体区域,即用于表示当前页面的主要功能。例如:index.php 文件,首页文件通常包含一个文章列表,那么这个文章列表就是这个页面的主体区域;single.php 文件是用于显示具体文章内容的,所以调用文章内容以及相关信息就变成了它的主体区域。

分出边栏区域

在示例主题 myTheme 中,边栏区域就是 div 元素中 id 为 sidebar 的内容区域。和分离头部区域一样,我们只需要剪切下来,然后复制到 sidebar.php 文件中(需要自己新建且保存为 utf-8 编码)。然后使用下面函数引用

<?php get_sidebar(); ?>

边栏是主体的描述,通常包括一些文章分类、友情链接等等内容。它通常也是高度可重用的模块,可以再几乎所有的网页中调用相同的内容。所以这部分要拿出来。

分出底部区域

通过上面的介绍,分离底部区域还需要过多的介绍吗?剪切出来代码之后,只需要在原位置添加下面代码进行调用即可

<?php get_footer(); ?>

如果不分割

我就是不明白为什么要分割这个文件,分割成不同的区域,我可以不分吗?当然可以,但是你会遇到下面问题。

你在 index.php 文件中,修改头部文件的内容,在访问文章内容页面(使用 single.php 文件作为模板),却发现头部的内容没有变化,因为你没有在 single.php 文件中,修改相应的头部信息代码。如果你修改一处,需要把主题中所有模板文件全部修改一遍才会生效。

由于没有统一文件,你可能会根据不同的页面,对 HTML 结构进行修改或者编辑,这样会导致网站整体风格的不一致和一些意外错误。

而分割之后,上面的这些问题都将不存在。分割的优势在于提高维护的效率等,所以需要进行分割处理。

本节课相关资源下载

myTheme(基础篇-10) 主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
  10. 【基础篇】9,制作底部区域 footer

【基础篇】9,制作底部区域 footer

底部区域的制作非常简单、灵活。通常博客的底部,添加一个作者的版权声明信息等,以及页面列表等内容。

简单是因为没有什么注意事项,直接添加上内容即可。灵活是因为你可以根据你的需要等,随意的添加内容、函数调用等。

至于复杂的相关函数调用等,我会在以后的文章中讲解,但是本系列教程中的实例主题 myTheme 中,底部写的非常精简,就是一句话而已,所以实现起来就很容易了,直接保持现有的状态即可!

本系列文章

  1. 开始执行的wordpress主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress的主题机制
  4. 【基础篇】3、设计制作你的HTML主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
     

学会在互联网的海量信息中学习

首先,不可否认的是互联网是个资料大宝库,这里面包含各种各样的资料。全面性、实时性是它的有点,零散性、不系统是它的缺点。本文就是介绍一下 潜行者 m 在互联网上的学习方法和经验。

发现这些优良资料

资料超级多,正是因为如此多,所以查找起来优秀的资料,就比较麻烦了。最简单方便效果最差的,就是通过搜索引擎搜索了。它确实方便,因为只需要输入想了解的关键词,就会出来很多相关的资源。为什么说效果最差呢?有很多原因:首先限于搜索引擎的技术水平,偶然无法根据算法判断出资料的优劣(百度,你懂)。搜索结果会被”半人为控制”(通过 SEO),而这些控制之后,显示的文章等,通常是一些伪原创的垃圾信息等等。此外找不到原创作者,很多知名的文章,或是被转载不署名或是直接改了版权,搜索引擎都无法判断出原创作者,这样就无法联系,进一步的交流。

使用搜索引擎检索资料,固然是一种必不可少的方式,但是我更推荐使用下面的方式来寻找学习资料。就是很多人常用的“订阅”功能。一个功能完全合理的信息类型的网站,通常都会提供一个 “订阅源”(rss),我们可以通过他们提供的这个订阅源,获取他们网站上的最新更新的文章,或者是之前的内容。现在的问题,就是如何发现这些优秀的内容提供者?首先,你要先确定一下,你关注的领域是什么?你想看到哪一方面的内容和资料?确定下来之后,就可以通过下面几种途径找到优秀的资源:

  • 使用名站导航或者搜索引擎等,找到这一领域比较权威比较热门的网站。
  • 通过名站的友情链接等,发掘其他同类型的网站。这一点很实用,对于一些比较著名的网站来说,他们的友情链接的质量非常的高,绝对是同领域的知名网站。
  • 找到他们网站的订阅源。通常功能完全的网站,会被软件、浏览器等自动检测到订阅源,站长通常也会提供自己网站的订阅源,这一点在独立博客中,尤为体现。
    下面是我推荐的订阅方式和阅读方式。使用的工具很简单,就是 火狐 浏览器 和 Feed Sidebar 插件 火狐浏览器本身就提供了订阅功能,当你打开一个可以用的订阅源的时候,会自动弹出添加订阅菜单。

但是火狐浏览器的这个订阅功能做的不是特别好,如果你想查看订阅的最新信息,你需要打开订阅文件夹,然后打开相应的订阅源才能看到。所以,我推荐使用 Feed Sidebar 这个插件,因为它监控订阅的订阅源,可以设置提醒,当有新消息的时候会立刻提醒。而且还会列出一个更新列表,方便你打开相应的资料。更多的使用方法等,需要你安装一下自己探索,这里不再赘述。

使用本地客户端,其实是一种比较古老的订阅方法,很久以前就出现了一些在线订阅服务。例如:google reader、鲜果订阅等。使用这些在线订阅服务,可以不需要安装软件等,也便于同网友交流等,此外它们通常对订阅源的内容,进行重新排版布局便于阅读。但是我选择使用这种比较古老的方法,是因为:不需要登录等,也比较方便的保护了自己的订阅隐私,不受网速的影响不必登录第三方网站,此外还有一个最重要的原因,我主要关注的是前端、设计方面的内容,通常需要打开他们的页面查看他们的布局设计等。所以我选择很原始的,直接打开网页的方式阅读。

收藏有价值的资料

仅仅发现资料、阅读完资料是不够的。对于优秀的资料,我们还需要收藏整理起来,方便日后的阅读和观看。那么什么资料算是有价值的,可收藏的资料呢?

  • 看完之后,会有一定的感触,认为以后还会想看的资料。
  • 很有收藏价值的资料(例如一些手册之类的)。
  • 现在看不懂,但以后可能会用到的。
    其他资料,如果自己已经知道的东西或者写的不太好,总结不完全的资料,就没有必要收藏了。此外,收藏之后,还需要合理的规划、分类,便于日后的查找。

这里,我推荐使用 有道笔记 来记录收藏资料,各种收藏文档的功能都具备,空间大的一般用不完,还具有日志分享功能、多设备平台同步功能等。通过建立不同的笔记本,进行归类,通过搜索可以迅速查找到需要的文档。还有一个比较方便的功能,可以再浏览器的收藏夹栏里面,加上一个连接“收藏到有道笔记”,点击一下会获取当前页面的信息,然后自动保存到你的笔记本中。

【基础篇】8,添加博客边栏功能

通常的博客都有边栏功能,边栏通常放置文章分类、友情链接等等信息。本节课讲解如何添加博客的边栏相关功能。在 WordPress 系统中,不得不提到的一个强大的功能,那就是 “小工具” ,即在后台中,找到 “外观” 选项下面的 “小工具”。当一款主题支持小工具的时候,我们只需要配置一下小工具,把需要的模块拖动进去,就可以在博客中显示出来。

对于初学者来说,本文暂时不讲解复杂的边栏相关的函数使用,而是直接介绍如何为主题添加“小工具”这个功能的支持。这样就可以实现快速定义博客的边栏。

为主题添加小工具功能,需要两个步骤:1,在 functions.php 文件中声明注册这个功能。2,在主题模板的相应位置,添加对边栏的调用

在 functions.php 文件中声明这个功能

需要用到 register_sidebar 这个函数。这个函数用于注册一个边栏小工具,当然还有一个函数 register_sidebars 与之类似,但是可以注册多个边栏小工具。但是如果你想在主题中,加入多个边栏小工具,我更推荐的是 register_sidebar 函数,因为它可以自己定义更多的输出信息,注册多个,只需要复制几遍即可,更加灵活。

下面介绍一下这个函数的相关参数:

'name'          => __( 'Sidebar name', 'theme_text_domain' ),
'id'            => 'unique-sidebar-id',
'description'   => '',
'class'         => '',
'before_widget' => '<li id="%1$s">',
'after_widget'  => '</li>',
'before_title'  => '<h2>',
'after_title'   => '</h2>' );
  • name:设置这个边栏的名称,在之后的主题中的数据调用中,会用到这个名称。
  • id :用于在 WordPress 内部对这个特定的边栏小工具进行标记,必须是唯一的值,同主题不能有两个相同的 id。
  • description:这个边栏小工具的描述,填写之后,在后台小工具选项配置的时候,可以看到当前工具的描述。
  • class:当前边栏小工具在生成的时候,在 HTML 结构中,加入的 class 属性,这样可以自定义接口,方便 CSS 对其样式的控制。
  • before_widget:在小工具生成的内容前面加上什么?默认加上 li 标签。
  • after_widget:同上。
  • before_title:在后台小工具设置中,添加小工具之后,可以设置小工具的标题,这个属性是为设置的标题包裹什么标签?默认 h2.
  • after_title:同上。
    这个函数还是比较简单的,参数也都容易理解。那么在主题中,想声明一个边栏,就可以编写下面代码:
    if ( function_exists(‘register_sidebar’) ){ //先判断当前 WordPress 是否支持边栏小工具功能
    register_sidebar(array( //以数组的方式,传递参数
    'name' =&gt; '小工具',
    'id' =&gt; 'sidebar1',
    'description' =&gt; '拖动小工具会在边栏显示出来',
    
    ));
    }

    你也可以编写更多的参数,例如制定元素包裹的标签等等,但是在这里,为了演示,其他属性均保持默认。

添加到 functions.php 文件之后,我们登录后台会发现小工具已经可以用了,并且显示出来了设置的信息。

这时,我们就可以把左边的内容拖动到右边去,即可显示出相应的功能。例如拖动“搜索”会生成一个搜索框,拖动“链接”会生成一个有情链接列表。但是刷新主题之后,并没有出现,因为这时候我们还没有在主题中调用这个边栏数据。

在主题中调用边栏数据

声明完成之后,我们找到主题,在相应的位置使用 下面一句代码即可调用某边栏数据:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('小工具') ) : ?><?php endif; ?>

这句代码的意思就是:首先检测是否存在边栏小工具功能,如果存在,检测是否有 “name” 为 “小工具” 的小工具。如果有(即在 functions.php 声明过了)就调用它的数据。即后面的单引号中的内容,就是在 functions.php 文件中声明的 sidebar 的 name 参数值。

在本系列教程的演示主题 myTheme 中,我们需要添加到 id 为 sidebar 的元素中,添加在下面。要注意的是,由于采用了默认的参数,所以每个小工具将会以 li 标签标记,为了符合 W3C 的标准,我们需要在外面加上 ul 标签。

在后台拖动小工具到边栏,配置一下,然后刷新首页就可以看到添加好的小工具内容了。这样,我们的边栏功能就实现了。

为主题添加多个小工具功能

再扩展的多说一些。小工具这个功能非常的使用,而且功能很多。我们可以在主题中添加多个小工具功能,这样修改主题的相关内容,直接在后台编辑小工具即可。例如:在底部添加小工具功能,想修改底部版权文字等,直接通过后台小工具进行编辑就可以了。

前面也说过,添加多个小工具可以使用 register_sidebars 但是我更推荐的是复制多遍 register_sidebar 这个函数,因为它可以对每个边栏都进行描述,让别人更容易看懂。

我们只需要把上面的代码,复制一遍:

if ( function_exists('register_sidebar') ){
    register_sidebar(array(
    'name' => '小工具',
    'id' => 'sidebar1',
    'description' => '拖动小工具会在边栏显示出来',
));
   register_sidebar(array(
    'name' => '底部',
    'id' => 'footer',
    'description' => '这里是底部的小工具',
));
}

然后重新配置一下参数,特别要注意的是,name 和 id 一定不能和其他小工具相同,否则会产生数据调用冲突。之后像上面一样,在相应的位置,加上调用代码即可,当然要修改后面单引号里面的内容为要调用数据的 name 参数值。

本节课相关资源下载

myTheme(基础篇-8) 主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块

【基础篇】7,制作博客的搜索模块

搜索模块几乎成为了信息性网站的标配组件,对于博客来说,更是必不可少的东西。有了搜索就可以快速的定位你的文章。本节就来讲解如何制作博客的搜索模块。

制作搜索表单

搜索模块的实质就是一个表单而已,将搜索的内容,提交给 WordPress ,然后由系统查询返回结果。别告诉我你连一个 HTML 的表单都写不出来,如果真的,请先回去学习一下 HTML 吧,因为这是制作主题必备的基本能力。下面我直接给出一个搜索表单。

<form method="get" action="">
      <input type="text" name="s"  />
      <input type="submit" value="GO" />
</form>

上面就是一个非常简单的搜索表单,有一个 文本框 和一个 提交按钮。WordPress 系统的搜索模块,接受 get 方式发送的数据,同时要注意它的 action 地址,为博客的首页。同时要注意,对于搜索框,必须要对它设置 name 属性值为 s ,这样 WordPress 才能接收搜索字符串。所以,一个可用的 WordPress 搜索表单应该这样写:

<form method="get" action="<?php bloginfo('home'); ?>/">
        <input type="text" name="s"  />
        <input type="submit" value="GO" />
</form>

进一步的优化

单纯的一个表单是不太好的,我们可以加一些修饰,这种修饰包括交互性的修饰、外观的修饰。为了尽量简单照顾初学者,这里不讲外观的修饰,尽量不涉及 CSS 设计相关的内容。下面说一下搜索框的简单的交互性修饰。

通常,我们需要在打开页面的时候,自动将光标聚焦到 搜索框 中,这样可以让用户在敲击键盘的时候,可以自动的在输入框中输入,而不需要让用户手动找到搜索框。实现这个效果,需要为表单加上 autofocus 属性。

此外,我们通常希望能告诉用户,这是一个搜索框,最好的方法就是在搜索框中填写说明文字,当用户点击聚焦的时候,文字自动消失。实现这个效果,可以通过两种方法:1,HTML5 的 placeholder 属性。2,通过一段 JavaScript 代码。第一种方法很简单,直接把说明文本当做这个属性的属性值,即可显示出来。但是这是 HTML5 中新增的属性,所以在早期的浏览器中,不会被支持。那样的话就不会显示说明文字了。所以我更推荐的是下面的这段 JavaScript 代码:

onblur="if (this.value =='') this.value='搜索一下'" onfocus="this.value=''" onclick="if (this.value=='搜索一下') this.value=''"

稍懂 JavaScript 的朋友就能看出来这段代码的意思,即:当光标激活或者点击文本框的时候,判断值是否为空,如果为空,就让值变成“搜索一下”。当焦点移出文本框的时候,会检测文本框的内容,如果为空,就自动变成“搜索一下”。如果你实在是看不懂,就不用管了,直接复制上去就可以了。

最终的版本

我们在 myTheme 主题中,找到边栏模块(id=“sidebar”),在下面新建一个用于搜索的 div 块,然后把代码复制上去:

<form method="get" action="<?php bloginfo('home'); ?>/">
    <input type="text" name="s" onblur="if (this.value =='') this.value='搜一下又不会怀孕...'" onfocus="this.value=''" onclick="if (this.value=='搜一下又不会怀孕...') this.value=''" autofocus />
    <input type="submit" value="GO" />
</form>

这样就完成了一个简单的、没有样式的博客搜索模块了。

完成之后,现在就可以搜索一下看一下效果了哦!

本节课相关资源下载

myTheme(基础篇-7) 主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据