隨著手機等移動設(shè)備越來越普及,二維碼(QR Code)的應(yīng)用也越來越廣泛。今天很高興地和大家分享一下 WordPress添加自動生成二維碼功能(支持緩存到本地)。

注:以上配圖是倡萌使用其他工具制作的,不是本文生成的。
前些天看到通過Google API來生成二維碼,但Google的服務(wù)在國內(nèi)一直都不太穩(wěn)定,所以倡萌就考慮到緩存到本地,然后找 @小蝴蝶 折騰出核心功能代碼,再自己修改下,使它支持 首頁、分類、標簽、文章和頁面 。
1.添加緩存函數(shù)到主題的 functions.php 文件
function get_qr($url,$path,$qrpic){
set_time_limit (10); //設(shè)置十秒超時
$destination_folder = $path?$path.'/':'';
$localname = $destination_folder .$qrpic;
$file = fopen ($url, "rb"); //fopen函數(shù)的r+模式: 讀寫方式打開 文件指針指向文件頭
if ($file) {
$newf = fopen ($localname, "wb"); // w+,讀寫方式打開 文件指針指向文件頭 如果文件不存在則嘗試創(chuàng)建之
if ($newf)
while(!feof($file)) {
fwrite( $newf, fread($file, 1024 * 2 ), 1024 * 2 ); //寫入文件,fread控制文件最大的大小,這里是2M
}
}
if ($file) {
fclose($file); //關(guān)閉fopen打開的文件
}
if ($newf) {
fclose($newf);
}
}
注:以上代碼是緩存到本地的功能
2.在網(wǎng)站根目錄建立一個叫 qrcode 的新文件夾,確保有寫入權(quán)限(755或777),用于保存圖片
3.將代碼放到需要輸出二維碼圖片的地方,如single.php、sidebar.php 等
<?php
if(is_single() || is_page() || is_home() || is_front_page() || is_category() || is_tag()) ://只在文章、頁面、首頁、分類/標簽存檔,才加載下面的代碼
$imgsize = 150; //二維碼圖片大小
if (is_single() || is_page()) $imgname = get_the_id();//使用文章/頁面ID命名圖片
elseif (is_home() || is_front_page()) $imgname = 'home';//首頁使用home命名
elseif(is_category()) $imgname = 'cat-'.get_query_var('cat');//分類使用cat-ID 命名
elseif(is_tag()) $imgname = 'tag-'.get_query_var('tag_id');//標簽使用tag-ID 命名
$localqr = ABSPATH .'qrcode/'.$imgname.'.jpg';
if (!file_exists($localqr)) {//如果圖片已經(jīng)存在,則不會再次保存
get_qr( "http://chart.googleapis.com/chart?cht=qr&chs=".$imgsize."x".$imgsize."&choe=UTF-8&chld=L|2&chl=".get_permalink() ,"qrcode", $imgname.".jpg");
}
?>
<img src="<?php echo home_url( '' ); ?>/qrcode/<?php echo $imgname ?>.jpg" width="<?php echo $imgsize ?>" height="<?php echo $imgsize ?>" alt="QR Code"/>
<?php endif; ?>
注:以上代碼是命名和顯示二維碼圖片。添加代碼后,頁面在被第一次訪問就會生成圖片,然后緩存到本地
使用ID來命名圖片,主要是考慮到WordPress的ID是獨一無二的(標簽、分類的ID和文章、頁面的ID可能會重復(fù),所以前面兩種都添加的前綴命名),而且是ID基本不會改變的。這樣一來每個頁面只生成一次圖片并緩存到本地目錄,然后直接調(diào)用本地的圖片,不需要每次都訪問Google API,從而提高加載速度。
Google QR Code API 介紹:https://developers.google.com/chart/infographics/docs/qr_codes
參考資料:http://xiaohudie.net/code/fopen-qr.html





感謝博主的分享,使用谷歌的API的確很方便,但如果動手能力強一點,能用代碼實現(xiàn)的話,也不錯,我整理了一份教程,希望能夠幫助到大家。
怎么將qrcode.js生成二維碼添加到網(wǎng)站上? – wordpress開發(fā)
https://www.npc.ink/15800.html
google的太卡了,建議用這個。 get_qr( “http://m1000000.com/168?s=256&x=l&t=gif&b=2&c=000000&bg=FFFFFF&o=http://m1000000.com/images/m1000000.png&p=5&a=1&e=0&m=http://m1000000.com”,”qrcode”, get_the_id().”.gif”);
?后面的屬性s,x,t,b,c,bg,o,p,e,m都可以自定義.其中o=你的logo,m=網(wǎng)址或文字等二維碼數(shù)據(jù)
-參數(shù)- //說明-描述
s=256 //尺寸size: (64, … 256默認, … 最高3000嘿不怕卡就用)
x=q //誤差的校正 (L = 7% (默認), M = 15%, Q = 25%, H = 30%)
t=png //生成二維碼的格式 (PNG默認, JPEG, GIF)-不區(qū)分大小寫
b=2 //border邊緣的值( (2, 3, 4默認, … 10)推薦小于5,太大了掃描難
c=000000 //方塊的顏色 (黑色000000默認)
bg=ffffff //背景的顏色 (白色ffffff默認)強烈推薦白色為底色,其它色好像不能掃描
o=http://siteurl/logo.png //Logo這個標志將出現(xiàn)在二維碼中間,換上你的LOGO(PNG, JPEG, GIF都可以。LOGO鏈接不對就無法看到二維碼)
p=10 //logo 覆蓋率 (二維碼的百分比 – 推薦 10%)
a=1 //自動調(diào)整的標志 (0/1),1=表示自動調(diào)整
e=1 //二維碼的色彩效果 (0/1),0=單色;1=混合彩色
m=http://sitename.com/ //二維碼的內(nèi)容數(shù)據(jù)(permalink默認連接,留空值是=http://m1000000.com),你可以調(diào)換成80個文字,不怕卡就可以更多字數(shù)
我想問下 白邊問題 你說到可以不使用谷歌的API 使用這一句http://api.qrserver.com/v1/create-qr-code/?size=100×100&data=
請問在代碼哪個地方加?謝謝 我怎么找不到?謝謝了
功能皻,我已經(jīng)放在主題的文章信息中了,掃描也成功了。
不過二維碼生成后,邊緣白色寬度很大很大
&choe=UTF-8&chld=L|2&chl=
可以修改上面的2,為1即可把寬度降低
然后缺點是圖片保存在本地,使用一小時后,光圖片大小就有幾百MB了。每張大約200-700KB不等,非常耗費資源。而我網(wǎng)站是用云存儲的,要是能修改成上傳到指定的云空間就好了。
緩存到本地,這功能不錯
不錯不錯~~