如何在wordpress主题中文章添加点赞、分享、打赏的样式

最近一直都在搜索关于如何给wordpress主题添加点赞和打赏功能。但一直没有找到好的方法，最后还是放弃修改了。最后发现居然有一个教材简单明了的告诉了我们如何添加点赞和打赏功能。那就是水冷眸博客的一篇文章。特地感谢一下，收藏备用。也可以让更多的朋友知道这个办法。

下面开始教程，首先附上截图一张，或者移至本文底部查看效果。

1、html代码

<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>

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

2、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;}

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

3、关于点赞的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();
    });
});

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

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

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

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

<script src="http://code.jboxcdn.com/0.3.2/jBox.min.js"></script>
<link href="/go?url=aHR0cDovL2NvZGUuamJveGNkbi5jb20vMC4zLjIvakJveC5jc3M="  rel="stylesheet">

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

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

5、打赏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>

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

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

PS：原版教材来源：http://www.slmwp.com/transplant-zan-share-admire.html