本站提供互联网编程技术交流分享,部分技术教程不断更新中,请随时关注或联系我寻求帮助 ,同时也欢迎有兴趣的朋友进行投稿。

wordpress文章后添加打赏按钮,喜欢和分享中间添加打赏按钮实现抖动效果

WP教程 熊哥club 9729℃ 14评论

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

显示效果wordpress文章后添加打赏按钮,喜欢和分享中间添加打赏按钮实现抖动效果

很简单的代码,修改主题文件下的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

转载请注明:熊哥clubwordpress文章后添加打赏按钮,喜欢和分享中间添加打赏按钮实现抖动效果

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


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

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

喜欢 (250)
[您的支持是我最大的动力]
分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(14)个小伙伴在吐槽
  1. 非常感谢楼主的分享。
    申论2016-10-19 22:07 回复
  2. 非常感谢博主,按照你的方法,将注释//去掉之后,文字已经可以显示。如果不想让它自动勾选,又该怎么处理,盼回复!
1 2
×
订阅图标按钮