巧用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.pswuul.tw/

其中有五個參數用法解釋如下:
&:網頁傳至中表示與的標記,這里不再多說。
cht=qr:設置圖表類型為qr,也就是二維碼。
chs=300×300:設置生成圖片尺寸(寬x高)為300×300,但這并不是生成圖片的真實尺寸,而是最大尺寸,具體可以受網頁元素約束。choe=UTF-8:設置內容的編碼格式為UTF-8,此值默認為UTF-8。
chld=L|3:L代表默認糾錯水平,3代表二維碼邊界空白大小,可自行調節。
chl=http://www.pswuul.tw/:QR內容,也就是解碼后看到的信息,包含中文時需使用UTF-8編碼漢字,否則將出現問題。

下為本博客域名二維碼,可以試試掃描看看。
樸人博客QR CODE

注:網上提供QR CODE生成的不止Google API,還有很多,常見的還有:

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

相對于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為文章(文件)添加二維碼鏈接》二維碼
  • 微信打賞
  • 支付寶打賞

已有12條評論

  1. 亳州xd

    很難用上這個

    2019-07-14 16:09 回復
  2. 水流自然

    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

    2015-06-13 17:39 回復
  3. 鄭州婚紗攝影

    對這個不怎么了解啊

    2012-08-21 13:18 回復
  4. 搜趣軟件

    這個有用,我也去試試看。

    2012-08-17 09:21 回復
  5. 樸人博客

    我自己沒有覺得。。

    2012-08-16 15:26 回復
  6. 水晶吊墜

    博主的寫作水平不錯啊!

    2012-08-16 10:46 回復
  7. 藏章博客

    額 ,這個看著是挺高級的,但是這個二維碼用來干嘛啊?

    2012-08-15 20:11 回復
  8. Always.Life

    好東西,有一個會比較好

    2012-08-15 19:11 回復
    • 樸人博客

      我覺得只是個擺設,呵呵目前來說,只能玩玩

      2012-08-15 21:50 回復
  9. 向日葵媒體設計

    沙發,不打算用這玩意

    2012-08-15 09:43 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖