巧用Google API为文章(文件)添加二维码链接打赏

在这个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

注:网上提供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加一段代码,当然,也可以添加在边栏或者其他任何你希望出现二维码的地方。

至于加入代码的方式这里不再多说了,不会的留言吧。
下面说下本博客二维码的一个弹出层添加方法。

都知道二维码过于小的话会扫描不上,而过于大则影响页面美观,小子的主题来说,这点更为明显了,所以,想了个方法,在文章底部,加了个扫二维码的链接,点击后弹出二维码显示层,这样尽可能的协调模板。效果如下图或者参看本文底部:
qrcode1
在有需要二维码的读者点击链接后弹出如下窗口,即可显示二维码。
qrcode2

如果希望加入这样的层且对网页不熟悉的朋友,请往下看,否则请忽视以下内容。

其实很简单,需要改动三个文件,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文件,可以新建或者写在页内,建议自己新建文件并引入。



巧用Google API为文章(文件)添加二维码链接
文章《巧用Google API为文章(文件)添加二维码链接》二维码
  • 微信打赏
  • 支付宝打赏
  1. bu zhi dao wei ma da bu shang zi …….wei wen zhang tian jia er wei ma zen mo zuo ?kan bu dong dan gan xing qu ,zhe fang mian ben ren xiao bai

无觅相关文章插件,快速提升流量