博主博客中的打赏功能是在yusi主题的基础上参考git主题做的修改

显示效果

很简单的代码，修改主题文件下的single.php文件中的代码，具体请参考下列代码。红色部分是添加的代码，请根据实际情况修改css和链接图片

<div class="article-social">
<a href="javascript:;" data-action="ding" data-id="788" id="Addlike" class="action" data-original-title="" title="" _hover-ignore="1"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">554</span>)</a>
<span class="or shake shake-little shake-constant shake-constant--hover" _hover-ignore="1"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;" data-original-title="" title="" _hover-ignore="1">赏
<div class="weixin-popover">
<div class="popover bottom in">
<div class="arrow"></div>
<div class="popover-title">
<center>
[您的支持是我最大的动力]
</center>
</div>
<div class="popover-content">
<img width="200px" height="200px" src="http://此处换成支付宝或微信收款二维码091ndy5yir7qsscu67.png" alt="wordpress文章后添加打赏按钮，喜欢和分享中间添加打赏按钮实现抖动效果" />
</div>
</div>
</div></a></span>
<span class="action action-share bdsharebuttonbox bdshare-button-style0-24" data-bd-bind="1470193232840"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)
<div class="action-popover">
<div class="popover top in">
<div class="arrow"></div>
<div class="popover-content">
<a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="" data-original-title="分享到新浪微博"></a>
<a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="" data-original-title="分享到QQ空间" _hover-ignore="1"></a>
<a href="#" class="tencentweibo fa fa-tencent-weibo" data-cmd="tqq" title="" data-original-title="分享到腾讯微博"></a>
<a href="#" class="qq fa fa-qq" data-cmd="sqq" title="" data-original-title="分享到QQ好友"></a>
<a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="" data-original-title="分享到人人网"></a>
<a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="" data-original-title="分享到微信"></a>
<a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more" data-original-title="" title=""></a>
</div>
</div>
</div></span>
</div>

为了突出赏字，熊哥特意加了抖动效果

shake shake-little shake-constant shake-constant--hover 就是这段class样式

div抖动效果添加方法

引入css文件即可

<!--引入抖动css -->
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">

使用方法请点击下方链接

本文地址: https://www.xiongge.club/wordpress/tutorial/794.html

转载请注明：熊哥club → wordpress文章后添加打赏按钮，喜欢和分享中间添加打赏按钮实现抖动效果

©熊哥club，本站推荐使用的主机：阿里云，CDN建议使用七牛云。

关注微信公众号『熊哥club』

免费提供IT技术指导交流
  关注博主不迷路~

喜欢 (250)赏

[您的支持是我最大的动力]

分享 (0)