其实就是一个API的引用链接

直接设置自己需要的参数，加上要生成的文件、网址即可。地址是：

https://chart.googleapis.com/chart?cht=qr&chs=300x300&choe=UTF-8&chld=L|3&chl=http://www.imdupeng.cn/

其中有五个参数用法解释如下：

1、&：网页传至中表示与的标记，这里不再多说。

2、cht=qr：设置图表类型为qr，也就是二维码。

3、chs=300×300：设置生成图片尺寸(宽x高)为300×300，但这并不是生成图片的真实尺寸，而是最大尺寸，具体可以受网页元素约束。choe=UTF-8：设置内容的编码格式为UTF-8，此值默认为UTF-8。

4、chld=L|3：L代表默认纠错水平，3代表二维码边界空白大小，可自行调节。
chl=http://www.imdupeng.cn/：QR内容，也就是解码后看到的信息，包含中文时需使用UTF-8编码汉字，否则将出现问题。

 

网上提供二维码生成的不止google，还有很多，比如：

http://api.qrserver.com/v1/create-qr-code/?size=300x300&data=http://www.imdupeng.cn/

相对于Google API来说，这个是专门提供QR CODE的链接，参数就只有size和data，所以更为方便。

 

 

下为本博客域名二维码，可以试试扫描看看：

 

 

添加弹出二维码：

知道怎么添加二维码了，但总不能每次手动输入吧，所以针对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文件，可以新建或者写在页内，建议自己新建文件并引入。