随着手机等移动设备越来越普及,二维码(QR Code)的应用也越来越广泛。今天很高兴地和大家分享一下 WordPress添加自动生成二维码功能(支持缓存到本地)。
注:以上配图是倡萌使用其他工具制作的,不是本文生成的。
前些天看到通过Google API来生成二维码,但Google的服务在国内一直都不太稳定,所以倡萌就考虑到缓存到本地,然后找 @小蝴蝶 折腾出核心功能代码,再自己修改下,使它支持 首页、分类、标签、文章和页面 。
1.添加缓存函数到主题的 functions.php 文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function get_qr($url,$path,$qrpic){ set_time_limit (10); //设置十秒超时 $destination_folder = $path?$path.'/':''; $localname = $destination_folder .$qrpic; $file = fopen ($url, "rb"); //fopen函数的r+模式: 读写方式打开 文件指针指向文件头 if ($file) { $newf = fopen ($localname, "wb"); // w+,读写方式打开 文件指针指向文件头 如果文件不存在则尝试创建之 if ($newf) while(!feof($file)) { fwrite( $newf, fread($file, 1024 * 2 ), 1024 * 2 ); //写入文件,fread控制文件最大的大小,这里是2M } } if ($file) { fclose($file); //关闭fopen打开的文件 } if ($newf) { fclose($newf); } } |
注:以上代码是缓存到本地的功能
2.在网站根目录建立一个叫 qrcode 的新文件夹,确保有写入权限(755或777),用于保存图片
3.将代码放到需要输出二维码图片的地方,如single.php、sidebar.php 等
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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)) {//如果图片已经存在,则不会再次保存 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可能会重复,所以前面两种都添加的前缀命名),而且是ID基本不会改变的。这样一来每个页面只生成一次图片并缓存到本地目录,然后直接调用本地的图片,不需要每次都访问Google API,从而提高加载速度。
Google QR Code API 介绍:https://developers.google.com/chart/infographics/docs/qr_codes