WordPress自定义点赞功能的实现方法（无插件版）

功能需求说明

在一些情况下，我们希望在WordPress网站中添加文章点赞功能，用户点击按钮后即可为文章点赞，同时避免重复点赞。以下是详细的实现方法和代码示例。

代码示例

1. 在文章页面中添加点赞按钮

在主题的文章模板文件（如 single.php）中添加以下代码：

<div class="btn-zan <?php if(isset($_COOKIE['bigfa_ding_'.get_the_ID()])) echo ' liked'; ?>" data-id="<?php echo get_the_ID(); ?>" data-action="ding">
    <i class="wpcom-icon fa fa-thumbs-o-up"></i> 赞 
    <span class="entry-action-num">(
        <?php 
        if( get_post_meta(get_the_ID(),'bigfa_ding',true) ){            
           echo get_post_meta(get_the_ID(),'bigfa_ding',true);
       } else {
           echo '0';
       }?>
    )</span>
</div>

2. 添加样式

在主题的样式文件（如 style.css）中添加以下样式：

.entry-action .btn-zan {
    display: inline-block;
    padding: 4px 30px;
    font-size: 18px;
    line-height: 30px;
    color: #f8504b;
    border: 1px solid #f8504b;
    border-radius: 4px;
    vertical-align: top;
}
.entry-action .btn-zan.liked, .entry-action .btn-zan:hover {
    color: #fff;
    background-color: #f8504b;
    cursor: pointer;
    border-color: #f8504b;
}
.entry-action .btn-zan i {
    position: relative;
    vertical-align: top;
    line-height: 30px;
}

3. 添加点赞功能的JavaScript代码

在主题的脚本文件（如 scripts.js）中添加以下代码，或者直接在模板文件中添加 <script> 标签：

<script type="text/javascript">
    
//获取cookie
function getCookie(cookieName){  
    var cookieValue="";  
    if (document.cookie && document.cookie != '') {   
        var cookies = document.cookie.split(';');  
        for (var i = 0; i < cookies.length; i++) {   
             var cookie = cookies[i];  
             if (cookie.substring(0, cookieName.length + 2).trim() == cookieName.trim() + "=") {  
                   cookieValue = cookie.substring(cookieName.length + 2, cookie.length);   
                   break;  
             }  
         }  
    }   
    return cookieValue;  
}
jQuery(document).ready(function($) {
    $.fn.postLike = function() {
        if ($(this).hasClass("liked")) {
            var post_id = $(this).attr("data-id");
            //获取COOKIE
            if ( getCookie('bigfa_ding_' + post_id) != '' ){
                alert('您已经点过赞了！');
            }
            return false;
        } else {
            $(this).addClass("liked");
            var id = $(this).data("id"), action = $(this).data("action"), rateHolder = $(this).children(".entry-action-num");
            var ajax_data = {action: "bigfa_like", um_id: id, um_action: action};
            $.post("<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php", ajax_data,
            function(data) {
                $(rateHolder).html(data);
            });
            return false;
        }
    };
    $(document).on("click", ".btn-zan", function() {
        $(this).postLike();
    });
    
});
</script>

4. 在 functions.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; // make cookies work with localhost
        setcookie('bigfa_ding_'.$id, $id, $expire, '/', $domain, false);
        if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
            add_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();
}

代码整理与错误修正

1. 确保所有PHP代码块都已正确关闭。

2. 确保JavaScript代码块中的 jQuery 代码正确无误。

3. 确保在调用 get_the_ID() 和 the_ID() 之前已经有 the_post() 被调用。

4. 检查PHP和JavaScript代码中的变量和函数名称是否一致。

总结

通过以上代码，我们可以在WordPress网站的文章页面中实现点赞功能，用户点击按钮即可为文章点赞，并避免重复点赞。此功能既可以提高用户互动性，又能为文章提供更多的社会证明。