添加类似懿古今博客打赏功能的图文教程

2017年08月19日 22:58:34  阅读 243 次

好吧,我真不懂如何为这篇教程起名字了,所以只能弄了这么一个类似懿古今博客打赏功能的图文教程,其实懿古今分享的主题都带有分享功能,不过是做成按钮的样式而已,现在分享的这个教程是把按钮变成图片而已,具体如何取舍自己决定就好。具体效果如下:

添加类似懿古今博客打赏功能的图文教程 技术文档 第1张

实现以上的打赏功能方法也很简单,今天我们就以 WordPress版本的 Blogs 主题为例进行说明。

第一步:将以下两张图片下载上传到Blogs 主题的images文件夹内

PS:如果修改了这个打赏二维码图片的大小规格,那么就需要调整第三步的 CSS 代码,所以不太建议改变打赏图片的尺寸大小。

第二步:将以下代码添加到 Blogs 主题的 single.php 文件适当位置

  1. <div class="reward plxiaoshi">
  2.     <div class="reward-button">
  3.         <img class="aligncenter size-medium box-hide box-show" src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/shang.png">
  4.         <span class="reward-code"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/dashangerweima.jpg"></span>
  5.     </div>
  6.     <p class="reward-notice">
  7.         如果文章对你有帮助,请赞赏支持懿古今发展!
  8.     </p>
  9. </div>

PS:记得修改代码中的懿古今为自己的名字或站名哦,还有代码中的两张图片名称要跟第一步的名称一致哦,比如 shang.png 就是第一张赏的图片,dashangerweima.jpg 就是打赏的二维码图片。

比如我们直接添加到文章版权上方就会跟本站的效果一致,具体如下图所示:

添加类似懿古今博客打赏功能的图文教程 技术文档 第2张

第三步:将以下CSS代码添加到Blogs 主题的 style.css 文件中

  1. .reward{padding:5px 0}
  2. .reward .reward-notice{font-size:1pc;line-height:1pc;margin:15px auto;text-align:center}
  3. .reward .reward-button{line-height60px;positionrelative;width108px;margin: 0 auto;}
  4. .reward .reward-code{position:absolute;top:-210px;left:50%;display:none;width:350px;height:200px;margin-left:-175px;border:1px solid #e6e6e6;background:#fff;box-shadow:0 1px 1px 1px #efefef}
  5. .reward .reward-button:hover .reward-code{display:block}
  6. .reward .reward-code img{display:inline-block;float:left;margin:0 auto;border:0}

PS:如果第一步中的打赏二维码图片大小尺寸改变的话,需要自行调整第4行的代码,要不然显示会不太正常哦。当然,如果没有修改图片大小尺寸的话是没有任何问题的。

至此,我们就成功为文章页添加了这个图片样式的打赏功能,如果还想为页面添加的,请自行将第二步的代码添加到主题的 page.php 文件的适当位置即可。其他模板文件的添加方法也是一样的,具体的话只能靠大家自己动手丰衣足食了。

如果文章对你有帮助,请赞赏支持懿古今发展!

历史上的今天:

本文地址:https://yigujin.cn/1309.html
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!
boke112导航_独立博客导航平台

发表评论


表情

  1. 闲鱼
    闲鱼 【助理】 @回复

    [偷笑] 一分一毛都是钱,来者不拒

    • 懿古今
      懿古今【老板】2017-08-21 15:45  回复

      @闲鱼[嘻嘻] 虽然没什么人打赏,但是挂上这个功能还是比较不错的。万一有人打赏呢

  2. 明月登楼
    明月登楼 【副总】 @回复

    不错,这个很个性呀!

    • 懿古今
      懿古今【老板】2017-08-21 15:48  回复

      @明月登楼[偷笑] 感觉比起按钮来更喜庆一些,希望大家看完更乐意打赏

  3. 康乐民博客
    康乐民博客 【转正】 @回复

    是挺好看的,不过现在愿意打赏的人真的是太少了,啥时候把懿古今文章底部的轮番图片广告代码分享下啊!

    • 懿古今
      懿古今【老板】2017-08-20 19:43  回复

      @康乐民博客不挂上打赏感觉对不起自己,所以管它又没人打赏先挂上再说。

  4. 九哥
    九哥 【转正】 @回复

    可以按这个方法自己DIY下。

    • 懿古今
      懿古今【老板】2017-08-20 19:44  回复

      @九哥是的,很多东西只要自己多折腾就会明白

  5. Koolight
    Koolight 【副总】 @回复

    这个和分享一样,只是标准化功能了。

    • 懿古今
      懿古今【老板】2017-08-20 19:44  回复

      @Koolight是的,好过没有而已,靠这个打赏,一年都未必有一笔打赏