分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » 分享一下我自己设计的赏相关代码
+

分享一下我自己设计的赏相关代码

【文章目录】

今天一个用户询问我文章下面的赏是这么实现的,我设计之初并没有打算分享出来,毕竟在很多人看来这个是很简单的东西,但是这位用户确实是很执着,我也是很佩服,所以我特意写了这篇文章,希望能帮助到他。

首先这里我想说一下,所有的设计是参考知更鸟的排版,这个我之前也说了,JS方面是参考TOB主题的样式,颜色参考来自colors,最后就是这样的样式结果了:
分享一下我自己设计的赏相关代码-BanYuner

准备工作

首先样式方面需要自己设计,如果你觉得我设计的是很好的话,那么你就可以采用我的CSS,如果你觉得不合适,那么可以自己设计一个CSS的样式表。

同样的,其中的图标采用的是Font Awesome中的图标,如果你自己修改为自己的图标,也可以自己设计的。

另外,代码添加到哪里这个是自己决定的,一般来说是添加到single.php里面的,但是很多主题很多时候是喜欢自定义文件名的,所以这里有可能不一样,希望大家理解。

single.php修改过程

步骤一

自己设计一个样式,也就是三个按钮的样式表,那么这里我就直接附上我自己的代码了:

<div class="shang"><span  id="shang_left" class="shang_left"><i class="fa fa-plus"></i> 关注我们</span><span id="shang_center" class="shang_center"><i class="fa fa-money"></i> 打赏</span><span id="shang_right" class="shang_right"><i class="fa fa-share"></i> 分享此文</span></div>

因为我写的是纯代码的方式,所以看上去还是有点困难的,所以希望大家理解。代码为三个部分:关注,打赏,分享。这段代码的作用首先就是确定一个框架,确定框架之后我们再考虑点击之后的功能实现。

弹框界面

这里我是通过JS点击事件绑定ID实现的,那么这里我们需要设计一个弹出框,弹出框的内容分别自定义,但是根据不同情况可能会设计三个不同的弹出框。我的相关代码如下:

<div id="shang_pic" class="shang_pic">
<span id="shang_pic_close" title="关闭"><i class="fa fa-times fa-2x"></i></span>
<span class="guanzhu">微信扫码,关注我们</br><img src="http://static.banyuner.com/wp-content/themes/dux/img/weixin.jpg" height="200" width="200">
</span>
<span class="dashang">
<span class="item_reward1" id="item_reward_zhifubao1">扫码,支持我</br>
<img src="http://static.banyuner.com/wp-content/themes/dux/img/zhifubao1.png" width="200" height="200" alt="<?php the_title(); ?>"/></br>支付宝(点击图片切换)
</span>
<span class="item_reward1" id="item_reward_weixin1">扫码,支持我</br>
<img src="http://static.banyuner.com/wp-content/themes/dux/img/weixin1.jpg" width="200" height="200" alt="<?php the_title(); ?>"/></br>微信(点击图片切换)
</span>
</span>
<span class="fenxiang">
<span class="item_qrcode1"> 扫码,手机看</br>
<img src="<?php echo home_url( '' ); ?>/qrcode/<?php the_id()?>.jpg" width="200" height="200" alt="<?php the_title(); ?>"/>
</span>
</span>
</div>

先给一个大的框架,之后再给一个小的框架,这样是比较方便的。我这里使用了span标签,至于你喜欢使用div标签或者span标签,这个就看个人了。

到这里,我们需要添加到single里面的文件已经完毕了,接下来就是点击事件,也就是JS部分的代码,

main.js修改过程

JS部分的代码通过点击事件实现,也就是说绑定了相关的ID:

/* 关注,赏,转发 */
$(document).ready(function(){
$("#shang_left").click(function(){ //这个是关注按钮的点击事件
$(".guanzhu,#item_reward_background,#shang_pic_close,.shang_pic").fadeIn();
});
$("#shang_center").click(function(){ //这个是打赏按钮的点击事件
$(".dashang,#item_reward_background,#shang_pic_close,.shang_pic").fadeIn();
});
$("#shang_right").click(function(){ //这个是转发按钮的点击事件
$(".fenxiang,#item_reward_background,#shang_pic_close,.shang_pic").fadeIn();
});
$("#shang_pic_close").click(function(){  //这个是弹框关闭按钮的点击事件
$(".fenxiang,.dashang,.guanzhu,#item_reward_background,#shang_pic_close,.shang_pic").fadeOut();
});
$("#item_reward_zhifubao1").click(function(){ //这个是点击打赏图片更换图片的点击事件
$("#item_reward_zhifubao1").hide();
$("#item_reward_weixin1").show();
});
$("#item_reward_weixin1").click(function(){ //这个是点击打赏图片更换图片的点击事件
$("#item_reward_weixin1").hide();
$("#item_reward_zhifubao1").show();
});
});

上面每段代码方面我已经给了相关的介绍了,代码方面可能看上去不会那么懂,因为命名方式我没有规律,可能也只有我自己能懂,有些设计可能还是存在缺陷,我自己也感觉到了,后续如果有时间的话,会尽可能的利用所学知识再次优化。

style.css修改过程

样式方面大家点击看看就知道什么效果了,这里我就不再次放出演示图了,大家可以参考,并修改部分代码看看。

下面是我参考TOB主题的相关代码,根据目前使用的主题加以修改之后的代码,仅供参考:

/* 文章底部赏 */
.shang_left, .shang_center, .shang_right{
padding: 5px 10px;
font-weight: bold;
margin: 0 15px 0 15px;
display: inline-block;
width: 100px;
cursor: pointer;
}
.shang_pic {
position: fixed;
top: 50%;
left: 50%;
margin: -200px 0 0 -140px;
background-color: #FFF;
padding: 40px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
z-index: 9999;
display: none;
text-align: center;
}
.shang_left {
background: #ff7473;
}
.shang_center {
background: #ffc952;
}
.shang_right {
background: #47b8e0;
}
.item_reward1, .item_qrcode1, .guanzhu{
text-align: center;
margin-top: -20px;
color: red;
font-weight: bold;
}
#shang_pic_close {
float: right;
margin-top: -35px;
margin-right: -35px;
cursor: pointer;
}
.shang {
margin: 50px 0 30px 0;
text-align: center;
}

上面的代码大家可以参考一下,完全复制到自己站点里面可能并不会像我的站点一样,因为有些代码我自己也记得是修改哪里了,因为这个主题已经被我修改的不成人形了,希望大家谅解,有缺失CSS的地方,大家可以自行摸索一下。

总结

其实这个功能方面,会的用户可能觉得很简单,但是不会的用户可能觉得还是很复杂的,如果你会扒代码,我相信,上面的所有代码你估计最多半个小时之内应该可以调试成功,毕竟我的代码并没有加密或者怎么样。

后续因为功能方面我想更加完善,可能会考虑到加密部分代码,当然这个仅仅是想想而已。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
分享一下我自己设计的赏相关代码
支付宝(点击图片切换)
扫码,支持我
分享一下我自己设计的赏相关代码
微信(点击图片切换)
扫码,手机看
分享一下我自己设计的赏相关代码

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

 相关推荐

换一批 换一批
  • WordPress搜索只显示标题中含有关键字的文章

    WordPress搜索只显示标题中含有关键字的文章

    今天在知更鸟博客上面看到了这篇文章,整体来说,这个功能在某些方面还是比较有用的,如果说通过标题中的关键字来寻找文章的 ...

    点击查看
  • 如何给WordPress站点添加wow.js效果

    如何给WordPress站点添加wow.js效果

    今天折腾了以下这个东西,为什么会折腾这个东西呢,因为之前经常逛知更鸟博客,后来一次更新之后,发现知更鸟博客多了一种加 ...

    点击查看
  • 如何在WordPress评论中显示更多HTML标签

    如何在WordPress评论中显示更多HTML标签

    我见过很多站点,都可以在评论里面添加各种标签,什么自己加粗,然后添加图片,添加链接等等,当时我个人觉得可能并不适合我 ...

    点击查看
  • WordPress显示一年前当天的文章

    WordPress显示一年前当天的文章

    最开始看到这个功能是在112博客,那个时候看到这个功能的第一感觉可能就是觉得,这个功能不是很实用,可能会增加SQL语句的查 ...

    点击查看
  • 给你的WordPress站点添加一个打印按钮

    给你的WordPress站点添加一个打印按钮

    这个功能很久之前就已经在知更鸟博客上面看到了,但是一直没有想过是什么原理,但是今天无意间发现了一个方法,目前觉得还是 ...

    点击查看
  • WordPress显示一周热评

    WordPress显示一周热评

    WordPress站点如何显示一周热评,我相信还是有很多人都想要知道的,那么这里就简单的说说实现方法了。

    点击查看
  • WordPress 限定显示评论者链接的输出

    WordPress 限定显示评论者链接的输出

    最近从bigfa的相关站点看到了这个更新内容,我个人觉得还是很有用的,对于一些广告用户还是有一定的作用的,毕竟有些时候, ...

    点击查看
  • WordPress文章段落间插入广告

    WordPress文章段落间插入广告

    很久之前就已经在留意这个功能了,但是一直没有找到相关的解决办法,今天我算是找到了这个相关代码。使用这个功能对于我们宣 ...

    点击查看
  • 最轻便的复制页面内容到剪切板的JS:clipboard.js

    最轻便的复制页面内容到剪切板的JS:clipboard.js

    今天早些时候在水煮鱼博客看到了这篇文章,我一开始是想要用到代码方面的,毕竟代码很多时候都是直接复制编辑的,但是后来想 ...

    点击查看
  • WordPress前台显示站点有多少注册用户

    WordPress前台显示站点有多少注册用户

    虽然我的站点目前已经关闭了注册,所有已经注册过的用户已经清理完毕了,这里说声抱歉。那么今天这个文章就是给大家一个方法 ...

    点击查看
  • WordPress添加一个底部漂浮栏

    WordPress添加一个底部漂浮栏

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但 ...

    点击查看
  • WordPress避免手残导致文章意外发布

    WordPress避免手残导致文章意外发布

    有些时候,我们编辑好了文章,但是我们可能并不想发布,但是很多时候,我们就是手残,也就是误发布了,这种事情可能对于博客 ...

    点击查看

  目前有 7 条评论 其中:访客: 4 条, 博主: 3 条

分享一下我自己设计的赏相关代码
评分: 6 + 4 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 4楼
    很不错。。。。。。。。。。
    熊哥club 来自天朝的朋友 谷歌浏览器 Windows 7 上海市浦东新区 电信 3个月前 (09-05)Reply
  2. 3楼
    文章自动生成二维码也在里面?好像没有诶
    楚书业 来自天朝的朋友 QQ浏览器 Windows 10 福建省漳州市 电信 3个月前 (09-02)Reply
    • @楚书业 恩恩 图片这个部分需要自己更换效果 我这边是直接使用的二维码
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 3个月前 (09-02)Reply
  3. 2楼
    这个很给力,有几个东西收藏了~
    龙笑天 来自天朝的朋友 火狐浏览器 Windows 7 广东省深圳市 电信 3个月前 (08-31)Reply
  4. 1楼
    样式看着很简洁适用
    闲鱼 来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信 3个月前 (08-31)Reply