完美移植知更鸟点赞、打赏和分享的样式教程

很多人都比较喜欢知更鸟大神最新主题文章页中的点赞、打赏和分享样式，一直都有人问如何实现，如何移植等等，今天就将完美移植知更鸟点赞、打赏和分享的样式的详细过程分享给大家。

需要注意的是，本文分享的教程所使用的 Tooltip 特效采用的是 Jbox 的插件，不确定是否会与你们本身的主题特效有冲突。还有的就是，动手之前，记得备份，养成好习惯！

完美移植知更鸟点赞、打赏和分享的样式教程-第1张-boke112百科(boke112.com)

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

<div id=“z_s_s”>
<div class=“social-main”>
<span class=“like”><a href=“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>
</div>

第二步：将以下CSS代码直接添加到主题style.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文件里面。

$(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();
});
});

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

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

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

<script src=“http://code.jboxcdn.com/0.3.2/jBox.min.js”></script>
<link href=“http://code.jboxcdn.com/0.3.2/jBox.css” rel=“stylesheet”>

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

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

打赏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=’http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=’+~(-new Date()/36e5)];
</script>