WordPress纯代码实现AJAX点赞功能

在WordPress网站中，增加访客互动和展示文章热度是非常重要的。除了常见的阅读数和评论数之外，点赞功能也是一个非常有趣的元素，就像QQ空间中的“赞”一样，能够让用户更好地参与互动。网上有许多现成的点赞插件可供下载，但使用插件可能并不是最理想的选择。对于主题开发者来说，如果将点赞功能集成到代码中，不仅可以让主题更加简洁，还能避免用户需要单独安装插件的麻烦。接下来，我们将详细介绍如何通过代码实现这一功能。首先，您需要将以下PHP代码添加到您的主题函数文件（functions.php）中：


add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
add_action('wp_ajax_bigfa_like', 'bigfa_like');

function bigfa_like(){
    global $wpdb,$post;
    $id = $_POST@["um_id"];
    $action = $_POST@["um_action"];
    
    if ( $action == 'ding'){
        $bigfa_raters = get_post_meta($id,'bigfa_ding',true);
        $expire = time() + 99999999;
        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; 
        setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
        
        if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
            update_post_meta($id, 'bigfa_ding', 1);
        } else {
            update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
        }
        echo get_post_meta($id,'bigfa_ding',true);
    }
    die;
}

标签接下来，您需要在主题中加入相应的JavaScript代码，以便处理前端的点赞操作：


$.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: "bigfa_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();
});

标签最后，在您希望显示点赞按钮的地方，例如文章内容的尾部，插入以下HTML代码：



    
        喜欢
        
            ID,'bigfa_ding',true) ){
                echo get_post_meta($post->ID,'bigfa_ding',true);
            } else {
                echo '0';
            }?>

标签为了确保点赞按钮的样式美观，您可以参考以下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网站添加点赞功能了。希望这个教程对您有所帮助！

推荐阅读