分享：wordpress知更鸟的点赞、分享、打赏的样式教程

之前小浩博客也曾试用过知更鸟begin主题，觉得相当不错。鸟叔的点赞分享打赏的样式做的很好看，今天偶然看到一篇教程移植此样式，特分享给大家。该特效采用的是Jbox的插件，不确定是否会与你们本身的主题特效有冲突。还有的就是，动手之前，记得备份，养成好习惯！

效果如图：

html代码

上面这段代码，添加到single.php里面，具体位置自己调整，需要注意的是，代码中有个<i class=”…”></i>的代码，这是调用fontawesome图标字体的代码，如果你的主题没有采用fontawesome图标字体的代码，可能需要你另行载入fontawesome字体的文件，或者是替换成你主题所采用的图标字体。

<div id="z_s_s">
<div class="social-main">
<span class="like"><a href="https://www.xhsay.com/javascript:;" data-action="ding" data-id="<;?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['solome_ding_'.$post->ID])) echo ' done';?>"><i class="fa fa-thumbs-up"></i>赞 <?php if( get_post_meta($post->ID,'solome_ding',true) ){ echo get_post_meta($post->ID,'solome_ding',true); } else { echo '0'; }?></a></span>
<span class="shang-p"><;a href="#pay_shang" id="shang-main-p">赏</a></span>
<span class="share-s"><a id="share-main-s"><;i class="fa fa-share-alt"></i> 分享</a></span>
<div class="clear"></div>
</div>

css代码

这一段、可以直接添加到主题style.css里面；PS：部分主题可能不是直接主题根目录下style.css里面写css代码，遇到此情况，可以将此css代码添加到任何一个页面有载入的CSS文件即可

#z_s_s{border-bottom:none;padding: 20px 0;}
.social-main{position: relative; margin: 0 auto; width: 283px;}
.social-main a{float: left; color: #fff; line-height: 35px; text-align: center; border-radius: 2px;}
.social-main a:hover{background: #878787; transition: all .2s ease-in 0s;}
.like a{background: #fe594e; width: 140px; display: block;}
.share-s a{background: #fd8764; width: 140px; display: block;}
.social-main i{color: #fff; font-style: normal; margin: 0 5px 0 0;}
.shang-p a{position: absolute; left: 115px; top: -7px; background: #7ab951; width: 50px; height: 50px; font-size: 18px; font-weight: 600; line-height: 40px; border: 4px solid #fff; border-radius: 40px;}
#share{display: none; width: 280px; padding: 15px 13px 15px 30px; background: #fff; border-radius: 5px;}
#share a{font-size: 60px; text-align: center; height: 80px; line-height: 80px; padding: 2px 5px 5px;}

关于点赞的js代码

这段js，作用于点赞样式，直接将其添加到你主题的任意一个js文件里面。

到此，如果环节不出错，样式已经可以在你的文章中正常显示的，但是关于打赏、分享这两个样式，尚未处理完成，知更鸟采用的是点击弹出相关的模态窗口的样式。这里将其变成了Tooltip样式效果，在本文，Tooltip的实现水冷眸直接使用Jbox这个插件。

$(document).ready(function() {
$.fn.postLike = function() {
if ($(this).hasClass('done')) {
return false;
} else {
$(this).addClass('done');
var id = $(this).data("id"),
action = $(this).data('action'),
rateHolder = $(this).children('.count');
var ajax_data = {
action: "solome_like",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data, function(data) {
$(rateHolder).html(data);
});
return false;
}
};
$(document).on("click", ".favorite", function() {
$(this).postLike();
});
});

首先，引入jbox相关的js以及css文件。

Jbox需要jquery库的支持，大部分主题都已经默认有引入的，如果没有，请自行百度。

下面的两个引入文件，为官方的cdn地址，速度如何未曾测试，如果嫌速度慢，可以在本文末尾，自行下载文件将其放进主题内引入。

引入了Jbox相关文件之后，我们开始开始处理打赏、分享这两个Tooltip样式效果。

<script src="https://code.jboxcdn.com/0.3.2/jBox.min.js"></script>
<link href="http://code.jboxcdn.com/0.3.2/jBox.css" rel="stylesheet"&gt;

打赏js、分享Tooltip样式js、百度分享js：

<script>
//打赏效果
$('#shang-main-p').jBox('Tooltip', {
content: '<img src="http://cdn.slmwp.com/slmwp/alipay-qrcode-250.png" />',
closeOnMouseleave: true
});
//分享效果
$('#share-main-s').jBox('Tooltip', {
content: '<div class="bdsharebuttonbox"><;a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"><;/a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a><a href="#" class="bds_mail" data-cmd="mail" title="分享到邮件分享"></a><a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址"></a></div>',
closeOnMouseleave: true
});
//百度分享原生js
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>

上面这段代码，其中第四行，将里面的图片地址替换为你的支付宝付款码地址，然后将整段代码放在footer.php文件，就大功告成了。

附上Jbox下载地址：https://codeload.github.com/StephanWagner/jBox/zip/v0.3.2

原文地址:水冷眸