教程:WordPress 文章页添加页面文章二维码

Wordpress 天白 5个月前 (03-19) 371次浏览 0个评论

下面就来说明以下如何在当前页添加文章二维码。

(工作模式:调用API接口方式)

1.在主题下的style.css文件添加

.QRcode {

    position:relative;

    z-index:0

}

.QRcode:hover {

    background-color:transparent;

    z-index:50

}

.QRcode span {

    position:absolute;

    background-color:#FFFFE0;

    left:-10px;

    border:1px dashed gray;

    visibility:hidden;

    color:#000;

    text-decoration:none;

    padding:5px 5px 0;

}

.QRcode span img {

    border-width:0;

    padding:2px 2px 0;

    height:120px;

    max-width:120px;

    margin:0

}

.QRcode:hover span {

    visibility:visible;

    top:25px;

    left:30px

}

2.在主题下single.php文章页文件的对应位置添加

 

<strong>手机访问:</strong>扫描<a class="QRcode" href="#">二维码<span><img src="http://qr.liantu.com/api.php?text=<?php the_permalink() ?>&w=200"></span></a>,穿越到手机端继续阅读。

http://qr.liantu.com/api.php?text=是二维码接口地址。
如果站点是https的,这个二维码生成的api接口地址也必须是https的。
&w=200是二维码的宽度,可根据自己需要修改。

目前可用二维码的api接口

https://www.kuaizhan.com/common/encode-png?large=true&data=
http://qr.liantu.com/api.php?w=200text=
http://mobile.qq.com/qrcode?url=
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data= (德国服务器)

 

或者参考以下方法:

对于移动端的样式查看,手机扫码浏览起来更为方便,那如何才能快速的把页面链接生成二维码呢,我们可以通过第三方的二维码网站api接口,快速生成链接二维码。

通用网址链接生成二维码方法

<img src="http://qr.liantu.com/api.php?w=200text=此处加入链接" alt="此处加入图片描述"/>

wordpress网站文章链接生成二维码方法

怎样在wordpress主题的内容页面中快速通过文章链接生成当前内容链接的二维码图片呢?
我们只需要把上面文章链接替换成wordpress的链接函数

<?php the_permalink(); ?>

即可生成,下面给大家提供了三个可选用的API。

<img src="http://qr.liantu.com/api.php?w=200text=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>
<img src="https://www.kuaizhan.com/common/encode-png?large=true&data=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>
<img src=" http://api.qrserver.com/v1/create-qr-code/?size=100x100&data=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>

其中w,size等属性后面的数值是指二维码图片的尺寸,大家可以根据自身的wp主题功能开发需求进行尺寸的数值调整。

 

参考文选:传送门A      传送门B

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址