前几天写了一篇《wordpress制作分享按钮到微博，qq空间，微信朋友圈》很是方便自定义网站的分享按钮，对于不想使用如：百度分享，等第三方分享按钮同时想自定义比较特别的朋友，这确实是一个不错的方法。

前语：
之前的方法中，其中微信分享用的二维码是使用的联图网的接口生成的，峰尚在使用过程中，发现这个接口并不稳定，有时候调用不出来，后台找到了一个jQuery 插件：jquery.qrcode.js，查看文档，发现这个插件真的很不错。使用生成二维码的速度也快，并且运用到了我们的平台“优品主题建站平台”上，效果好上很多。

预览：

1. 加载 jQuery 和 jquery.qrcode.js：

1
2

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src=""></script>

2. 创建一个用于包含 QRcode 图片的 DOM 元素，比如 div：

1

<div id="qrcode"></div>

3. 然后通过下面代码生成 QRcode：

1

jQuery('#qrcode').qrcode("");

4. 默认生成的二维码大小是 256×256，当然可以自定义大小：

jQuery('#qrcode').qrcode({width: 64,height: 64,text: "http://www.blhere.com"});

既然 使用方法是这样的，那么我制作一个微信分享的弹窗框。

首先加载 jQuery 和 jquery.qrcode.js我就不说了。

然后添加js代码到footer.php文件的底部（限在single,page生效）

1

$('#post-qrcode').qrcode({width:200,height: 200,text:"<?php the_permalink(); ?>"});

1
2
3
4
5
6
7
8
9
10

jQuery(document).ready(function(){
          //分享到微信
        $('.weixin-share_btn').click(function() {
            $('#openWeixin').show();
        });
        $(document).on("click", "#openWeixin",
        function() {
            $('#openWeixin').hide();
        });
});

1
2
3
4
5
6
7
8
9
10
11
12
13

/*微信分享*/

   
   
   
   
   
   
   

}

这样就做成了，效果如上面的预留图所示。