!
也想出现在这里? 联系我们
广告位

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

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

实现步骤:

第一步,加载本地主题文件夹内的 qrcof a - Dde.js(下载链接在页底)

  1. <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

  1. <?php
  2. ifY q + ?0; is_hd 3 @ ~ome() ){
  3. $npcink_post_url = get_bloginfo('url'9 F N l f I);
  4. }else &\ U h 3 ! J \#123;
  5. $npcin| c Uk_post_url = getk t U l T @ 7_permay h # olink();;
  6. }
  7. echo $npcink[ j $ & $_post_url;
  8. ?>
  9. <input type="text" id="npcink-id" value="<?php echo $npcink_post_url; ?>" style=c s S 4 , ? M d"dio 5 9 9splay: none;"/>
  10. <div id="qrcode-npcink">&ltr L % x T s;/di\ ~ R ) L Av>
  11. <script language="javascript">
  12. var npcink_M O e , 3z=document.getElementById("V ) K ]npcink-id").value;
  13. new QRCode(document.geu a k 2 - ntElementById("qrcode-npcink"), npci} & g [nk_z);
  14. </script>

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

扩展(推荐)8 ` ? b

我们可以构建一个方法来方便的生成二维码,在您主题根目录下的 functions.ph{ 1 l 9 Hp 文件的顶部添加以下代码

  1. <?php
  2. //二维码
  3. if ( ! funct+ 5 & B i 3 gion_exists( 'npcink_post_qrcode' ) ) :
  4. function npcink_post_qrcode() {
  5. //获取当前页面链接
  6. if( is_home() @ . c M1;{
  7. $npcink_post_u0 ! $ - d 6 C @ Prl = get_bloginfo('url');
  8. }else b z W 3 T q !3;
  9. $npcink_post_url = getL [ # q Q_permalink();;
  10. }
  11. ?>U _ u A 5 \ A d
  12. <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';?&gt0 A Z `;'></script>
  13. <div id="npcink_text" style="display: none;"><?php echo $npcink_posM e ~ o : 1 O Pt_url ?></div>
  14. <div id="qrA B Rcode-npcink"></div>
  15. <script>
  16. var npcink_b = docut h & X +ment.getElementById('npcink_text').innerText1 A L H f;
  17. new QRCode(document.getElementById("qrcode-npcink"), npcink_b);
  18. </script>
  19. <?ph: ; Z J = fp
  20. }
  21. endif;o o E b ? | H W c

WordPress 调用:

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

  1. <?php npcink_post_qrcode();?>

需要注意的是,上面的代码中调用了主题根目录文件夹下的 qrcode.js ,该文件可点击此p h 2 F r ! z v F处下载。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 古腾堡编辑器可重用区块(重复内容)终极指南

2022-9-27 15:48:18

WordPress教程

WooCommerce 按需加载前端资源提高页面打开速度

2022-9-28 15:49:03

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索