分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 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://www.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,但是很多用户不会修改自己站点的默认WordPress图标,就会跟我的站点一样,看上去非常不美观, ...

    点击查看
  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
  • 帅气小琦琦
  • 君子政
  • 熊哥club
  • 楚书业
  • 龙笑天
分享一下我自己设计的赏相关代码
8 + 5 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 5楼
    君子政
    js的引入怎么做到
    君子政 来自天朝的朋友 谷歌浏览器 Windows 10 河南省商丘市 联通 1个月前 (12-15)回复
    • 帅气小琦琦
      @君子政 直接添加到你的主要的JS文件中去 但是不同情况也有不同处理方式,没有一个通用的
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通 1个月前 (12-15)回复
      • 君子政
        @帅气小琦琦 放到主要JS文件里了,但是没起作用
        君子政 来自天朝的朋友 谷歌浏览器 Windows 10 河南省商丘市 联通 1个月前 (12-15)回复
        • 帅气小琦琦
          @君子政 要么是放的位置不对 要么就是别的原因了 不同主题说不明白
          帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 1个月前 (12-15)回复
  2. 4楼
    熊哥club
    很不错。。。。。。。。。。
    熊哥club 来自天朝的朋友 谷歌浏览器 Windows 7 上海市浦东新区 电信 5个月前 (09-05)回复
  3. 3楼
    楚书业
    文章自动生成二维码也在里面?好像没有诶
    楚书业 来自天朝的朋友 QQ浏览器 Windows 10 福建省漳州市 电信 5个月前 (09-02)回复
    • 帅气小琦琦
      @楚书业 恩恩 图片这个部分需要自己更换效果 我这边是直接使用的二维码
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 5个月前 (09-02)回复
  4. 2楼
    龙笑天
    这个很给力,有几个东西收藏了~
    龙笑天 来自天朝的朋友 火狐浏览器 Windows 7 广东省深圳市 电信 5个月前 (08-31)回复
  5. 1楼
    闲鱼
    样式看着很简洁适用
    闲鱼 来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信 5个月前 (08-31)回复