wordpress文章页面添加点赞功能

wordpress的文章点赞方法很多,而且大多数都是依赖插件,插件多的话,网站打开速度较慢。所以分享出来一款非常简洁的纯代码实现wp主题点赞的功能。并且运用cookies有效的解决了重复点赞bug。

1、在functions.php文件中添加点赞方法:

add_action('wp_ajax_nopriv_yd24_goods', 'yd24_goods');
add_action('wp_ajax_yd24_goods', 'yd24_goods');
function yd24_goods(){
    $id = $_POST["um_id"];
    $action = $_POST["um_action"];
    if ( $action == 'click'){
        $yd24_raters = get_post_meta($id,'yd24_click',true);
        $expire = time() + 99999999;
        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; 
        setcookie('yd24_click_'.$id,$id,$expire,'/',$domain,false);
        if (!$yd24_raters || !is_numeric($yd24_raters)) {
            update_post_meta($id, 'yd24_click', 1);
        }else {
            update_post_meta($id, 'yd24_click', ($yd24_raters + 1));
        }
        echo get_post_meta($id,'yd24_click',true);
    }
    die;
}

2、在头部引用jquery-1.11.3.min.js或者jquery其他版本

3、在头部或尾部添加ajax

$(document).ready(function() {
    $.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: "yd24_goods",
                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();
        });
});

4、添加前台点赞的调用代码:

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

5、参考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
}

 

《wordpress文章页面添加点赞功能》有2个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注