使用jQuery.qrcode为WordPress文章动态生成二维码
来自老赵茶馆的使用jQuery.qrcode为WordPress文章动态生成二维码
jQuery.qrcode地址：link
在线生成器：link
网上流传的方法是采用外网的API方式生成，好处是简单粗暴，缺点是自定义不够；我主题使用的是jQuery.qrcode，好处是自定义功能丰富，缺点是要加载额外js。
首先是载入jQuery，载入jQuery.qrcode，然后在single.php里加入以下代码：
<script>
jQuery(window).load(function() {
jQuery("#qrcode").qrcode({
text: "<?php the_permalink(); ?>"
});
});
</script>当然，这是最简单的配置，再加些css美化下就OK了，下面说说所有配置的，可按需添加。
{
// 渲染方式默认有html5的画布canvas，还有image、div
render: 'canvas',
// 版本version范围为1到40，就是格子的密度
minVersion: 1,
maxVersion: 40,
// 容错率从低到高四种模式: 'L', 'M', 'Q' or 'H'
ecLevel: 'L',
// 如果画布渲染时的上像素偏移
left: 0,
top: 0,
// 像素大小
size: 200,
// 填充颜色
fill: '#000',
// 背景颜色
background: null,
// 内容，可以使文本或者网址
text: 'no text',
// 圆角: 0.0 到 0.5
radius: 0,
// 空白的边界
quiet: 0,
//模式
// 0: normal，正常模式即最简洁模式
// 1: label strip，可插入标签条
// 2: label box，可插入标签盒子
// 3: image strip，可插入图像条
// 4: image box，可插入图像盒子
mode: 0,
// 分别是标签或图像的缩放，x偏移，y偏移
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
// 标签文字、字体、颜色
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
// 图像的地址
image: null
}就这么简单，就是有一个难点，就是模式3和模式4的插入图像问题，你不能直接在image选项后面直接填入图像地址，那样会报错。作者解释说道，在运行生成二维码之前，图像必须先载入，然后通过选择器填入image选项。
就是说，图像必须在二维码之前载入，那就简单，我把图像载入但是通过css把它隐藏掉
<div id="qrcode">
<img id="qrcode_img" style="display:none" src="/images/qr-img.png">
</div>
...
<script>
jQuery(window).load(function() {
jQuery("#qrcode").qrcode({
mode: 4,
image: jQuery('#qrcode_img')[0],
text: "<?php the_permalink(); ?>"
});
});
</script>
...