在这个3G(4G)智能手机的时代,很多事其实都可以在手机上完成了,二维码(QR CODE)的使用也越来越多了。利用手机的拍照功能,再加上一些QR CODE识别软件,就可以通过二维码来记录一些比较枯燥、不好记的信息,比如说长长的网址。现在很多手机软件下载网站都提供了可视化的下载路径,就是将下载路径做成QR CODE,让手机用户快速读取QR CODE中的下载链接转到下载页面。同样道理,为了博客访客能够方便的收藏、分享博客相关链接,我们也可以为每篇文章做一个对应的QR CODE。
由于QR CODE的算法比较深奥,这里我们就不再研究了,推荐大家使用现有的API链接来生成QR CODE。
使用方法
其实就是一个API的引用链接,直接设置自己需要的参数,加上要生成的文件、网址即可。地址是:
https://chart.googleapis.com/chart?cht=qr&chs=300x300&choe=UTF-8&chld=L|3&chl=http://www.poorren.com/
其中有五个参数用法解释如下:
&:网页传至中表示与的标记,这里不再多说。
cht=qr:设置图表类型为qr,也就是二维码。
chs=300×300:设置生成图片尺寸(宽x高)为300×300,但这并不是生成图片的真实尺寸,而是最大尺寸,具体可以受网页元素约束。choe=UTF-8:设置内容的编码格式为UTF-8,此值默认为UTF-8。
chld=L|3:L代表默认纠错水平,3代表二维码边界空白大小,可自行调节。
chl=http://www.poorren.com/:QR内容,也就是解码后看到的信息,包含中文时需使用UTF-8编码汉字,否则将出现问题。
下为本博客域名二维码,可以试试扫描看看。
注:网上提供QR CODE生成的不止Google API,还有很多,常见的还有:
http://api.qrserver.com/v1/create-qr-code/?size=300x300&data=http://www.poorren.com
相对于Google API来说,这个是专门提供QR CODE的链接,参数就只有size和data,所以更为方便,但加载速度就难说了。所以还是用大众点的吧。
添加弹出QR CODE层
知道怎么添加二维码了,但总不能每次手动输入吧,所以针对Wordpress博客来说,我们需要在single.php加一段代码,当然,也可以添加在边栏或者其他任何你希望出现二维码的地方。
至于加入代码的方式这里不再多说了,不会的留言吧。
下面说下本博客二维码的一个弹出层添加方法。
都知道二维码过于小的话会扫描不上,而过于大则影响页面美观,小子的主题来说,这点更为明显了,所以,想了个方法,在文章底部,加了个扫二维码的链接,点击后弹出二维码显示层,这样尽可能的协调模板。效果如下图或者参看本文底部:
在有需要二维码的读者点击链接后弹出如下窗口,即可显示二维码。
如果希望加入这样的层且对网页不熟悉的朋友,请往下看,否则请忽视以下内容。
其实很简单,需要改动三个文件,single.php、style.css、***.js(视实际情况而定,你博客主题中包含的自定义js脚本即可,也可以自己新建,但记得要添加script引入)。
1、single.php中在文章末尾或其他位置添加如下代码:
<div id="chart"> <h5><span>< ?php the_title(); ?></span><a href="javascript:;" onclick="slide();"></a></h5> <img alt="文章《<?php the_title(); ?/>》二维码" src="https://chart.googleapis.com/chart?cht=qr&chs=300x300&choe=UTF-8&chld=L|3&chl=< ?php the_permalink() ?>" /> </div>
在需要添加链接的地方添加如下代码:
扫二维码:<a href="javascript:;" alt="文章《<?php the_title(); ?>》二维码" title="文章《< ?php the_title(); ?>》二维码" onclick="slide('show');">< ?php the_title(); ?></a>
其实具体内容可根据自己需要修改。
2、style.css中添加如下样式:
/*二维码*/ #chart { position: fixed; display: none; width: 300px; border: 6px solid #8F8F8F; padding: 0; background: #F6F6F6; z-index: 100; text-align: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0 0 7px #aaa; -moz-box-shadow: 0 0 7px #aaa; margin-left:-156px; left:50%; top:40%; margin-top:-103px; _margin-left:-156px; _position:absolute; _margin-top:103px; _top:expression(eval(document.documentElement.scrollTop)); } #chart h5 { width: 100%; height: 28px; color: #626262; font: 14px/28px '宋体'; font-weight: 700; text-indent: .5em; float: left; margin: 0; overflow: hidden; } #chart h5 span{ width:250px; overflow: hidden; } #chart h5 a { width: 22px; height: 23px; background: url(poorren/images/a.gif) no-repeat 0 0; cursor: pointer; position: absolute; right: 8px; top: 4px; }
就是控制弹出层的位置,但这样的样式定义后是不能通过W3C验证的,对此如果有洁癖的话建议自己搜索相应Javascript实现代码来控制弹出层的位置,这里不再举例。
3、在***.js中添加如下脚本:
/*二维码*/ function slide(flag){ var chart=document.getElementById("chart"); if(flag=='show'){ chart.style.display='block'; }else{ chart.style.display='none'; } }
如果没有自定义的js文件,可以新建或者写在页内,建议自己新建文件并引入。
上一篇: 关于那些科技公司人事部的评论 下一篇: 关于无觅相关文章插件与无觅网络邀请码