GG资源网

为你的wordpress网站加入扫微信和支付宝二维码打赏功能,非插件(wordpress给文章生成二维码的方法)

为你的wordpress网站加入扫微信和支付宝二维码打赏功能,非插件

打赏功能并不复杂,因为现在微信和支付宝都提供二维码收款功能,只需把对应的二维码图片放在网站某个位置,扫一扫即可收钱。

最近网站流量也是处于上涨态势,那有必要为自己网站加个打赏功能,追一下内容付费的潮流。话不多说,方法如下。

下面是华哥的实践方式与对应代码。

1.functions.php,在最后面空白处添加代码如下:

//打赏

function orwei_ds_alipay_wechat(){

echo ‘<section class=”to-tip”><div class=”inner”><div class=”top-tip-shap”><a>赏<span class=”code”><img alt=”” src=”http://www.xiaoyunhua.com/wp-content/uploads/2018/08/shang.png”></span></a><p>这篇文章对俺有帮助,打赏犒劳下作者吧〜</p></div></div></section>’;

}

注意,此处只用到一个图片,图片是在ps中,合成了微信二维码和支付宝二维码。

(因文章不能使用带二维码的图片,你可以想像一下,就是两个二维码左右摆放在一排)

2.将此功能添加至文章内容页面single.php,一行代码即可。

<?php echo orwei_ds_alipay_wechat();?>

如参考文章所示,通常此代码是加在<?php the_content(); ?>后面,你也可以选择其他位置。

3.样式,style.css中添加打赏的样式,可以自行修改美化。

@media (max-width: 800px) {

.to-tip {display:none !important}

}

.to-tip {

background:#fff;

text-align:center

}

.to-tip .inner {

display:inline-block;

margin-bottom:40px;

}

.to-tip .top-tip-shap {

border-radius:100%

}

.to-tip a {

display:block;

width:75px;

height:75px;

border:1px solid #eee;

border-radius:100%;

line-height:75px;

color:#FFF;

font-size:32px;

font-weight:bold;

background:#ff9800;

position:relative;margin:0 auto;

}

.to-tip a:hover .code {

display:block

}

.to-tip div {

color:#666;

margin-top:4px

}

.to-tip .code {

position:absolute;

padding:20px;

border:1px solid #e6e6e6;

background-color:#fff;

line-height:14px;

width:360px;

height:224px;

top:-200px;

left:50%;

-webkit-transform:translate3d(-50%, 0, 0);

transform:translate3d(-50%, 0, 0);

display:none

}

.to-tip .code:before,.to-tip .code:after {

position:absolute;

content:””;

border:10px solid transparent

}

.to-tip .code:before {

border-top-color:#e6e6e6;

left:50%;

margin-left:-10px;

bottom:-20px

}

.to-tip .code:after {

border-top-color:#fff;

left:50%;

margin-left:-10px;

bottom:-19px

}

.to-tip .code img {

width:360px;

height:223px

}

.to-tip .code b {

color:#333;

font-size:12px;

font-weight:normal

}

wordpress给文章生成二维码的方法

最简单的调用办法就是直接调用google,代码如下:

<img src=\"https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=<?php the_permalink(); ?>\" width=\"150\" height=\"150\" alt=\"QR 码\"/>

上面的代码中只要修改 150 这个图片大小就好了,代码如下:

<?php the_permalink(); ?>

是自动获得文章链接,如果要生成博客站点的二维码只要替换成博客域名固定链接就可以了,我给改了下,封装成函数,这样图片大小可以改变,不过其实使用起来也不大方便,因为用主题时即使是函数肯定也是写死的,除非结合后台设置二维码图片大小,所以用处不大.

上面方法是直接通过 google 的 api 生成图片,有些地方可能因为网络问题,会很慢,所以小蝴蝶同学在胡长萌的要求下,又做了本地缓存图片的处理

一、functions.php 里加入代码:

function get_qr($url,$path,$qrpic){
set_time_limit (10); //设置十秒超时
$destination_folder = $path?$path.\'/\':\'\';
$localname = $destination_folder .$qrpic;
$file = fopen ($url, \"rb\"); //fopen函数的r+模式: 读写方式打开 文件指针指向文件头
if ($file) {
$newf = fopen ($localname, \"wb\"); // w+,读写方式打开 文件指针指向文件头 如果文件不存在则尝试创建之
if ($newf)
while(!feof($file)) {
fwrite( $newf, fread($file, 1024 * 2 ), 1024 * 2 ); //写入文件,fread控制文件最大的大小,这里是2M
}
}
if ($file) {
fclose($file);  //关闭fopen打开的文件
}
if ($newf) {
fclose($newf);
}
}

二、在网站根目录建立一个叫qrcode的新文件夹,确保有写入权限

三、以下代码放到需要输出二维码图片的地方,如 single.php,代码如下:

<?php
$localqr =  ABSPATH .\'qrcode/\'.get_the_id().\'.jpg\';
if (!file_exists($localqr)) {//如果图片已经存在,则不会再次保存
get_qr( \"http://chart.googleapis.com/chart?cht=qr&chs=100x100&choe=UTF-8&chld=L|4&chl=\".get_permalink() ,\"qrcode\", get_the_id().\".jpg\");//图片名以文章id命名
}
?>
<img src=\"<?php echo home_url( \'\' ); ?>/qrcode/<?php the_id()?>.jpg\" width=\"100\" height=\"100\" alt=\"QR 码\"/>
<!--默认二维码图片大小是100*100,如果要改,需要改4个地方,已经用蓝色标注-->

希望本文所述对大家的WordPress建站有所帮助。

wordpress给文章生成二维码的方法 (https://www.wpmee.com/) WordPress使用教程 第1张

由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » 为你的wordpress网站加入扫微信和支付宝二维码打赏功能,非插件(wordpress给文章生成二维码的方法)

发表回复

CAPTCHAis initialing...