WordPress非插件实现文章AJAX点赞功能
     2016-4-9    +12°    1276  

有不少工具都提供这个功能,如百度喜欢,还有一些插件,虽然插件提供了丰富的自定义功能,但其实我们都是不需要的,我们只是需要最简单的赞功能。简单的几行代码就可以实现。

实现原理

通过自定义字段保存赞数量,通过cookies来禁止重复赞。
WordPress非插件实现文章AJAX点赞功能

实现方法

下面的代码加入到你的 functions.php 中:

add_action('wp_ajax_nopriv_specs_zan', 'specs_zan');
 	add_action('wp_ajax_specs_zan', 'specs_zan');
 	function specs_zan(){
 	    global $wpdb,$post;
 	    $id = $_POST["um_id"];
 	    $action = $_POST["um_action"];
 	    if ( $action == 'ding'){
 	        $specs_raters = get_post_meta($id,'specs_zan',true);
 	        $expire = time() + 99999999;
 	        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
 	        setcookie('specs_zan_'.$id,$id,$expire,'/',$domain,false);
 	        if (!$specs_raters || !is_numeric($specs_raters)) {
 	            update_post_meta($id, 'specs_zan', 1);
 	        }
 	        else {
 	            update_post_meta($id, 'specs_zan', ($specs_raters + 1));
 	        }
 	        echo get_post_meta($id,'specs_zan',true);
 	    }
 	    die;
 	}

 

JS代码:

$.fn.postLike = function() {
    if ($(this).hasClass('done')) {
        alert('您已赞过该文章');
        return false;
    } else {
        $(this).addClass('done');
        var id = $(this).data("id"),
        action = $(this).data('action'),
        rateHolder = $(this).children('.count');
        var ajax_data = {
            action: "specs_zan",
            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();
});

 

在你想显示的地方加入如下代码,推荐加到文章内容尾部

<div class="post-like">
    <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite <?php if(isset($_COOKIE['specs_zan_'.$post->ID])) echo 'done';?>">喜欢 <span class="count">
        <?php if( get_post_meta($post->ID,'specs_zan',true) ){
                    echo get_post_meta($post->ID,'specs_zan',true);
                } else {
                    echo '0';
                }?></span>
    </a>
</div>

 

参考CSS样式:

.post-like{text-align:center;padding:10px}
.post-like a{ background-color:#21759B;border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none}
.post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;}
.post-like a.done{cursor:not-allowed}

 

点击无效问题解决

请引用版本为1.10或以上的jQuery。

本站的点赞、赏及分享

结合上面所说的点赞方法,说一下本站的点赞、赏及分享按钮的做法!
首先在需要插入该功能的地方插入一下代码:

<section class="to-tip">
    <div class="inner">
        <div class="like">
            <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="我赞" class="favorite<?php if(isset($_COOKIE['specs_zan_'.$post->ID])) echo ' done';?>"><i class="fa fa-thumbs-up"></i><i class="fa fa-heart"></i>&nbsp;赞&nbsp;<span class="count">
                <?php if( get_post_meta($post->ID,'specs_zan',true) ){
                    echo get_post_meta($post->ID,'specs_zan',true);
                } else {
                    echo '0';
                }?></span>
            </a>
        </div>
        <div class="top-tip-shap">赏<span class="code"><b class="fa fa-heart"> <strong>如果认为本文对您有所帮助请赞助本站</strong></b><br><img src="微信图片地址" /><img src="支付宝图片地址" /><br><b>微信、支付宝 扫一扫</b></span></div>
        <div class="share"><a><i class="fa fa-share-alt"></i>&nbsp;分享</a>
            <span class="code">
                <div id="share">
                <div class="bdsharebuttonbox">
                    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                    <a href="#" class="bds_more" data-cmd="more"></a>
                </div>
                </div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"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>
            </span>
        </div>
    </div>
</section>

将上面的微信及支付宝图片地址改成自己的,然后将百度分享的代码改成自己的。
然后引入一下CSS代码:

/*微信打赏、点赞、分享*/
.to-tip {
    text-align:center;
    border-top: 1px dotted #ddd;
    margin: 10px 0 0;
}
.to-tip .inner {
    display:inline-block;
    padding:10px 0 0;
}
.top-tip-shap {
    border-radius:100%;
    width:60px;
    height:60px;
    color:#fff;
    font-size:24px;
    line-height: 58px;
    background:#606a88;
    position:relative;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    float: left;
}
.top-tip-shap:hover .code {
    display:block
}
.top-tip-shap:hover {
    color:#fff;
    background:#2ba72a;
}
.to-tip .code {
    position:absolute;
    width:260px;
    padding:5px 5px 0 10px;
    background-color:rgba(0,0,0,0.4);
    line-height:14px;
    top:-171px;
    left:50%;
    -webkit-transform:translate3d(-50%, 0, 0);
    transform:translate3d(-50%, 0, 0);
    display:none;
    border-radius: 4px;
    z-index: 9999;
}
.share .code {
    width: 195px;
    padding:5px 0 3px 5px;
}
.to-tip .share .code {
    top:-46px;
}
.to-tip .code:before,.to-tip .code:after {
    position:absolute;
    content:"";
    border:10px solid transparent
}
.to-tip .code:before {
    border-top-color:rgba(0,0,0,0.1);
    left:50%;
    margin-left:-10px;
    bottombottom:-20px
}
.to-tip .code:after {
    border-top-color:rgba(0,0,0,0.4);
    left:50%;
    margin-left:-10px;
    bottombottom:-19px
}
.to-tip .code img {
    padding: 0 5px 0 0;
    width:120px;
    height:120px;
}
.to-tip .code b {
    color:#fff;
    font-size:12px;
    font-weight:normal;
    line-height: 24px;
}
.to-tip .code strong{
    color:#fff;
}
.to-tip .code .fa-heart{
    color:#f70000;
}
.to-tip .code b i{
    color:#129214;
}
.like{
    display: block;
    padding: 10px;
    background: #0a84c2;
    width: 100px;
    border-radius:5px;
    text-align: center;
    position:relative;
    rightright:20px;
    top:11px;
    float:left;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}
.share{
    display: block;
    padding: 10px;
    background: #0a84c2;
    width: 100px;
    border-radius:5px;
    text-align: center;
    position:relative;
    left:20px;
    top:11px;
    float:left;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}
.like:hover,.share:hover{
    background: #129214;
}
.share a{
    color: #fff;
}
.share a:hover{
    color: #fff;
}
.like a,.share a,.like a{
    color: #fff;
}
.like a:hover,.share a:hover,.like a:hover{
    color: #fff;
}
.favorite .fa-heart{
    display: none;
}
a.done .fa-thumbs-up{
    display: none;
}
a.done .fa-heart{
    display: inline-block;
    color: #fa0000;
}
.share:hover .code {
    display:block
}
.bdsharebuttonbox{
    width: 186px;
    padding:0 0 0 5px;
}
#share .bdsharebuttonbox .bds_tsina { background: url(images/gbRes_6.png) no-repeat center center/24px 24px; }
#share .bdsharebuttonbox .bds_qzone { background: url(images/gbRes_4.png) no-repeat center center/24px 24px; }
#share .bdsharebuttonbox .bds_tqq { background: url(images/gbRes_5.png) no-repeat center center/24px 24px; }
#share .bdsharebuttonbox .bds_weixin { background: url(images/gbRes_2.png) no-repeat center center/24px 24px; }
#share .bdsharebuttonbox .bds_sqq { background: url(images/gbRes_3.png) no-repeat center center/24px 24px; }
#share .bdsharebuttonbox .bds_renren { background: url(images/gbRes_1.png) no-repeat center center/24px 24px; }
#share .bdsharebuttonbox .bds_more { background: url(images/gbRes_7.png) no-repeat center center/24px 24px; }

 
好的,这就完成了。赶紧自己动手试试吧!

  网盘云盘下载