Products
GG网络技术分享 2025-03-18 16:14 0
给自己的网站增加代码，网上搜搜看看发现大都是增加一个插件，大多数插件还是付费的，大家都知道对于wordpress来说，插件越多会越增加站点的负担，所以本人采用了纯代码的方式。废话不多说，效果图如下：
设置步骤为：
第一：将需要插入打赏功能的页面、模板（比如 single.php 文件）位置添加下面的 html 代码。
<div class=\"reward\">
<div class=\"reward-button\">
赏 <span class=\"reward-code\"><span class=\"alipay-code\"><img class=\"alipay-img\" src=\"支付宝二维码图片路径（200*200px）\"><b>支付宝扫码打赏</b></span><span class=\"wechat-code\"><img class=\"wechat-img\" src=\"微信二维码图片路径（200*200px）\"><b>微信打赏</b></span></span>
</div> <p class=\"reward-notice\"> 如果文章对您有帮助，欢迎移至上方按钮打赏作者 </p>
</div>
注：记得将图片的URL替换掉
第二：将 css 代码放到主题的 style.css 文件
.reward {
padding: 5px 0
}
.reward .reward-notice {
font-size: 14px;
line-height: 14px;
margin: 15px auto;
text-align: center
}
.reward .reward-button {
font-size: 28px;
line-height: 58px;
position: relative;
display: block;
width: 60px;
height: 60px;
margin: 0 auto;
padding: 0;
-webkit-user-select: none;
text-align: center;
vertical-align: middle;
color: #fff;
border: 1px solid #f1b60e;
border-radius: 50%;
background: #fccd60;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
}
.reward .reward-code {
position: absolute;
top: -220px;
left: 50%;
display: none;
width: 350px;
height: 200px;
margin-left: -175px;
padding: 15px;
border: 1px solid #e6e6e6;
background: #fff;
box-shadow: 0 1px 1px 1px #efefef
}
.reward .reward-button:hover .reward-code {
display: block
}
.reward .reward-code span {
display: inline-block;
width: 150px;
height: 150px
}
.reward .reward-code span.alipay-code {
float: left
}
.reward .reward-code span.alipay-code a {
padding: 0
}
.reward .reward-code span.wechat-code {
float: right
}
.reward .reward-code img {
display: inline-block;
float: left;
width: 150px;
height: 150px;
margin: 0 auto;
border: 0
}
.reward .reward-code b {
font-size: 14px;
line-height: 26px;
display: block;
margin: 0;
text-align: center;
color: #666
}
.reward .reward-code b.notice {
line-height: 2rem;
margin-top: -1rem;
color: #999
}
.reward .reward-code:after,.reward .reward-code:before {
position: absolute;
content: \'\';
border: 10px solid transparent
}
.reward .reward-code:after {
bottom: -19px;
left: 50%;
margin-left: -10px;
border-top-color: #fff
}
.reward .reward-code:before {
bottom: -20px;
left: 50%;
margin-left: -10px;
border-top-color: #e6e6e6
}
第三：这个时候就可以刷新页面显示了。
费劲心思增加了打赏模块，后来反复的想了想，现在有多少人看文章是会打赏的呢？？打赏是阅后付费，基于个人欣赏和认同，自愿、冲动消费；内容付费是阅前付费，基于读者对未来交付信息的预期进行理性消费。相对而言，内容付费比打赏的收入要更加稳定，并且用户粘性和留存率会更高，利于在内容创作流程中产生正向循环，更适合用于内容创业的长期变现模式。
引用简书的作者文章理论：
但是要想通过打赏来获得收入也是不简单的，因为读者往往只是匆匆一瞥正好看到你的文章而已，不具备用户粘性，所以我们要做到的是：
首先，你的粉丝要足够多。有的作者粉丝上万，甚至上十万，这样大的量，在忠实的粉丝群体中，自然有一些愿意为你打赏。
其次，你的文章要质量高。好文章谁都能够看出来，文章的优劣，读者心理有杆秤，对自己有用的知识，信息，很多人是愿意给你鼓励的。
第三，你的作品要有侧重。你不可能眉毛胡子一把抓，想写好各种类型的文章，但又各种文章都写的不够好，倒不如一心一意钻研一种文章，用自己最擅长的一方面知识，分享出来，让粉丝产生共鸣。
最后，你的文章要有空间。能满足读者需求，那是最起码的要求，不能产生共鸣的文章不是好文章，看别人的文章，其实也就是体验一种人生，一种生活。
原文出处：https://www.lixiaodong.com.cn/archives/190
谢谢，看完记得打赏哦~
本文实例讲述了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建站有所帮助。
Demand feedback
