朴人博客

在这个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文件，可以新建或者写在页内，建议自己新建文件并引入。

• 固定链接：https://www.poorren.com/use-google-api-add-qr-code
• 文章标签：api，google，JavaScript，QR，QR CODE，二维码，代码，层，弹出，扫描
• 扫二维码：巧用Google API为文章(文件)添加二维码链接
• 版权所有：除"转载分享"分类外，未经注明，均为原创、整理，转载请注明出处。