Qrcode - 是一款功能丰富的跨浏览器的纯 JavaScript QRCode 生成库。移动互联网时代已经到来,如何让你的访客方便的在手机上访问你的网站,也许增添一个二维码功能会是一个不错的选择。这次的 WordPress 开发教大家怎么通过 qrcode.js 生成二维码。很简单,就是获取当前日志的 URL 值并在 js 中传_ h 7 K \ r给 QRCode 即可。
实现步骤:
第一步,加载本地主题文件夹内的 qrcof a - Dde.js(下载链接在页底)
- <scriG J F \ \ x + f mpt t} C Z R z b : Jype='text/javascript' src='http://locB $ t @ \ 7 h P {alhost/wG 6 @ @ ip-content/themes/lifet/js/qrcode.min.js?ver=20200508'></~ A H 8 ] V - -script>
第二步:获取当前日志链接并传递给 QRCode
- <?php
- ifY q + ?0; is_hd 3 @ ~ome() ){
- $npcink_post_url = get_bloginfo('url'9 F N l f I);
- }else &\ U h 3 ! J \#123;
- $npcin| c Uk_post_url = getk t U l T @ 7_permay h # olink();;
- }
- echo $npcink[ j $ & $_post_url;
- ?>
- <input type="text" id="npcink-id" value="<?php echo $npcink_post_url; ?>" style=c s S 4 , ? M d"dio 5 9 9splay: none;"/>
- <div id="qrcode-npcink"><r L % x T s;/di\ ~ R ) L Av>
- <script language="javascript">
- var npcink_M O e , 3z=document.getElementById("V ) K ]npcink-id").value;
- new QRCode(document.geu a k 2 - ntElementById("qrcode-npcink"), npci} & g [nk_z);
- </script>
在这里我通过 value 的方式,在 js 中获取链接的值并通过变量传给 QRCode
扩展(推荐)8 ` ? b:
我们可以构建一个方法来方便的生成二维码,在您主题根目录下的 functions.ph{ 1 l 9 Hp 文件的顶部添加以下代码:
- <?php
- //二维码
- if ( ! funct+ 5 & B i 3 gion_exists( 'npcink_post_qrcode' ) ) :
- function npcink_post_qrcode() {
- //获取当前页面链接
- if( is_home() @ . c M1;{
- $npcink_post_u0 ! $ - d 6 C @ Prl = get_bloginfo('url');
- }else b z W 3 T q !3;
- $npcink_post_url = getL [ # q Q_permalink();;
- }
- ?>U _ u A 5 \ A d
- <3 \ ] # 8 | 9script type='text/javascript' src='https://wwI B a 1 [ 2 Aw.22vd.com/<?php echo get_template_directory_uri(&2 f H r l @ L#041; . '/js/qrcode.min.js';?>0 A Z `;'></script>
- <div id="npcink_text" style="display: none;"><?php echo $npcink_posM e ~ o : 1 O Pt_url ?></div>
- <div id="qrA B Rcode-npcink"></div>
- <script>
- var npcink_b = docut h & X +ment.getElementById('npcink_text').innerText1 A L H f;
- new QRCode(document.getElementById("qrcode-npcink"), npcink_b);
- </script>
- <?ph: ; Z J = fp
- }
- endif;o o E b ? | H W c
WordPress 调用:
在需要5 Z | a展示当前日志链接的地方调用以下代码即可。
- <?php npcink_post_qrcode();?>
需要注意的是,上面的代码中调用了主题根目录文件夹下的 qrcode.js ,该文件可点击此p h 2 F r ! z v F处下载。