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

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

  • 准备工作
  • 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文章内容主体后添加广告位

      现在做站全凭兴趣的已经很少了,一个站点到了最后肯定是希望盈利来维持服务器的发展,但是有些站长可能对于代码根本不熟悉,那么这里就提供一种非常简...

      点击查看
    • 如何显示WordPress中的评论总数

      如何显示WordPress中的评论总数

      这个方面应该是站点的小功能了,但是我相信很多人还是可以使用到的,所以这里还是简单的分享一下吧,希望对于那些小白或者又需要的用户有帮助。 站点...

      点击查看
    • WordPress如何调用APlayer音乐播放器

      WordPress如何调用APlayer音乐播放器

      HTML结构 相关设置 调用功能 昨天无意中看到了这个播放器,我个人觉得这个播放器非常符合自己的需求,那么我就毫不犹豫的使用起来了,功能实现...

      点击查看
    • 帅气小琦琦
    • 君子政
    • 熊哥club
    • 楚书业
    • 龙笑天
    分享一下我自己设计的赏相关代码
    6 + 6 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)
    1. 5楼
      君子政
      js的引入怎么做到
      君子政 3个月前 (12-15)回复
      • 帅气小琦琦
        @君子政 直接添加到你的主要的JS文件中去 但是不同情况也有不同处理方式,没有一个通用的
        帅气小琦琦    3个月前 (12-15)回复
    2. 4楼
      熊哥club
      很不错。。。。。。。。。。
      熊哥club 7个月前 (09-05)回复
    3. 3楼
      楚书业
      文章自动生成二维码也在里面?好像没有诶
      楚书业 7个月前 (09-02)回复
    4. 2楼
      龙笑天
      这个很给力,有几个东西收藏了~
      龙笑天 7个月前 (08-31)回复
    5. 1楼
      闲鱼
      样式看着很简洁适用
      闲鱼 7个月前 (08-31)回复