添加跨浏览器的Qrcode生成二维码教程

PetitQ WordPress教程 2020-10-03 1.12K 0 0

Qrcode - 是一款功能丰富的跨浏览器的纯 JavaScript QRCode 生成库。移动互联网时代已经到来，如何让你的访客方便的在手机上访问你的网站，也许增添一个二维码功能会是一个不错的选择。这次的 wordpress 开发教大家怎么通过 qrcode.js 生成二维码。很简单，就是获取当前日志的 URL 值并在 js 中传给 QRCode 即可。

实现步骤：

第一步，加载本地主题文件夹内的 qrcode.js（下载链接在页底）

也想出现在这里？联系我们吧

<script type='text/javascript' src='http://localhost/wp-content/themes/lifet/js/qrcode.min.js?ver=20200508'></script>

第二步：获取当前日志链接并传递给 QRCode

```
<?php
```
```
if( is_home() ){
```
```
$npcink_post_url = get_bloginfo('url');
```
```
}else {
```
```
$npcink_post_url = get_permalink();;
```
```
}
```
```
echo $npcink_post_url;
```
```
?>
```

<input type="text" id="npcink-id" value="<?php echo $npcink_post_url; ?>" style="display: none;"/>

```
<div id="qrcode-npcink"></div>
```
```
<script language="javascript">
```

var npcink_z=document.getElementById("npcink-id").value;

new QRCode(document.getElementById("qrcode-npcink"), npcink_z);

```
</script>
```

在这里我通过 value 的方式，在 js 中获取链接的值并通过变量传给 QRCode

扩展（推荐）：

我们可以构建一个方法来方便的生成二维码，在您主题根目录下的 functions.php 文件的顶部添加以下代码：

```
    <?php
```
```
    //二维码
```

    if ( ! function_exists( 'npcink_post_qrcode' ) ) :

```
    function npcink_post_qrcode() {
```
```
    //获取当前页面链接
```
```
    if( is_home() ){
```

    $npcink_post_url = get_bloginfo('url');

```
    }else {
```

    $npcink_post_url = get_permalink();;

```
    }
```
```
    ?>
```

    <script type='text/javascript' src='<?php echo get_template_directory_uri() . '/js/qrcode.min.js';?>'></script>

    <div id="npcink_text" style="display: none;"><?php echo $npcink_post_url ?></div>

```
    <div id="qrcode-npcink"></div>
```
```
    <script>
```

    var npcink_b = document.getElementById('npcink_text').innerText;

    new QRCode(document.getElementById("qrcode-npcink"), npcink_b);

```
    </script>
```
```
    <?php
```
```
    }
```
```
    endif;
```

WordPress 调用：

在需要展示当前日志链接的地方调用以下代码即可。

```
<?php npcink_post_qrcode();?>
```

需要注意的是，上面的代码中调用了主题根目录文件夹下的 qrcode.js ，该文件可点击此处下载。

添加跨浏览器的 Qrcode 生成二维码教程

已有 279 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

添加跨浏览器的Qrcode生成二维码教程

实现步骤：

扩展（推荐）：

WordPress 调用：

添加跨浏览器的 Qrcode 生成二维码教程

相关文章

无需插件实现WordPress实用功能 [ 上 ]

WordPress短代码实现移动设备上内容不可见

WordPress根据自定义字段查询并排序

发表回复取消回复

热销模板

WordPress教程

实现步骤：

扩展（推荐）：

WordPress 调用：

添加跨浏览器的 Qrcode 生成二维码教程

相关文章

发表回复 取消回复

热销模板

发表回复取消回复