Products
GG网络技术分享 2025-03-18 16:14 0
打赏功能并不复杂，因为现在微信和支付宝都提供二维码收款功能，只需把对应的二维码图片放在网站某个位置，扫一扫即可收钱。
最近网站流量也是处于上涨态势，那有必要为自己网站加个打赏功能，追一下内容付费的潮流。话不多说，方法如下。
下面是华哥的实践方式与对应代码。
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
}
最简单的调用办法就是直接调用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建站有所帮助。
Demand feedback
