分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » 分享一下我自己设计的赏相关代码
  • +
  • 12
  • 分享一下我自己设计的赏相关代码

  • 准备工作
  • single.php修改过程
  • main.js修改过程
  • style.css修改过程
  • 总结
  • 今天一个用户询问我文章下面的赏是这么实现的,我设计之初并没有打算分享出来,毕竟在很多人看来这个是很简单的东西,但是这位用户确实是很执着,我也是很佩服,所以我特意写了这篇文章,希望能帮助到他。

    首先这里我想说一下,所有的设计是参考知更鸟的排版,这个我之前也说了,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 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    • WordPress 获取分类第一篇文章第一张图片地址

      WordPress 获取分类第一篇文章第一张图片地址

      这个功能我不知道网络上面有没有相关教程,至少我是没有看到的,所以这里还是简单的说一下,可能其中有不少问题,也可能是我的方法太过复杂,但是还是...

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