wordpress主题如何给文章添加点赞和打赏

🚀 使用方法

1. 把你现在 functions.php 里所有旧的点赞代码全部删除
2. 粘贴我上面这段完整代码
3. 清空浏览器缓存 + 刷新文章页面
4. 点击爱心 → 数字立刻增加

// 文章点赞功能 - 终极兼容版
function add_post_like_ajax() {
    add_action('wp_ajax_nopriv_post_like', 'post_like_action');
    add_action('wp_ajax_post_like', 'post_like_action');
}
add_action('init', 'add_post_like_ajax');

function post_like_action() {
    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
    if (!$post_id) {
        wp_send_json_error('ID错误');
    }

    $like_key = 'post_likes';
    $likes = get_post_meta($post_id, $like_key, true);
    $likes = $likes ? intval($likes) : 0;
    $new_likes = $likes + 1;

    update_post_meta($post_id, $like_key, $new_likes);
    wp_send_json_success($new_likes);
}

function show_post_like_button($content) {
    if (!is_single()) return $content;
    global $post;

    $likes = get_post_meta($post->ID, 'post_likes', true);
    $likes = $likes ? intval($likes) : 0;
    $post_id = $post->ID;
    $ajax_url = admin_url('admin-ajax.php');

    // 强制加载jQuery
    wp_enqueue_script('jquery');

    $html = '<style>
.post-like{margin:30px 0;text-align:center;position:relative;}
.like-btn{background:#2163b9;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:99px;font-size:16px;color:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.08);transition:all 0.3s;}
.like-btn.active{background:#ff5080;}
.heart-icon{font-size:20px;transition:transform 0.3s;}
.like-btn.active .heart-icon{transform:scale(1.2);}
.float-heart{position:absolute;pointer-events:none;font-size:16px;color:#ff5080;animation:floatUp 1s ease-out forwards;}
@keyframes floatUp{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-60px);}}
</style>

<div class="post-like">
<button class="like-btn" data-id="'.$post_id.'">
<span class="heart-icon">♥</span>
<span class="like-count">'.$likes.'</span>
</button>
</div>

<script>
document.addEventListener("DOMContentLoaded", function(){
    const btn = document.querySelector(".like-btn");
    if(!btn) return;

    btn.addEventListener("click", function(){
        if(this.classList.contains("active")) return;

        // 飘心动画
        for(let i=0; i<6; i++){
            const heart = document.createElement("span");
            heart.className = "float-heart";
            heart.innerText = "♥";
            this.parentElement.appendChild(heart);
            const x = (Math.random() - 0.5) * 60;
            heart.style.left = "50%";
            heart.style.marginLeft = x + "px";
            setTimeout(()=>heart.remove(), 1000);
        }

        const id = this.dataset.id;
        const self = this;

        // 原生JS AJAX，不依赖jQuery
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "'.$ajax_url.'", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                const res = JSON.parse(xhr.responseText);
                if(res.success) {
                    self.querySelector(".like-count").innerText = res.data;
                    self.classList.add("active");
                }
            }
        };
        xhr.send("action=post_like&post_id=" + id);
    });
});
</script>';

    return $content . $html;
}
add_filter('the_content', 'show_post_like_button');

文章加个打赏功能，用代码就能搞定，不用插件，直接复制到 functions.php 里就能用。

一个微信 / 支付宝双码版，带按钮弹窗，点击就能弹出二维码，样式也很好看。

💰 打赏功能完整代码（直接用）

// 文章末尾添加打赏功能
function add_donate_button($content) {
    if (!is_single()) return $content;
    global $post;

    // 在这里替换成你自己的打赏二维码图片地址
    $wechat_qr = "https://你的域名/wp-content/uploads/wechat-pay.jpg";
    $alipay_qr = "https://你的域名/wp-content/uploads/alipay-pay.jpg";

    $html = '
    <style>
    .donate-wrap{margin:30px 0;text-align:center;}
    .donate-btn{
        background:#ff6b6b;color:#fff;border:none;
        padding:10px 24px;border-radius:99px;
        font-size:16px;cursor:pointer;
        box-shadow:0 3px 10px rgba(255,107,107,0.3);
        transition:all 0.3s;
    }
    .donate-btn:hover{background:#ff5252;transform:translateY(-2px);}
    .donate-modal{
        display:none;position:fixed;top:0;left:0;
        width:100%;height:100%;background:rgba(0,0,0,0.6);
        z-index:9999;justify-content:center;align-items:center;
    }
    .donate-modal.show{display:flex;}
    .donate-box{
        background:#fff;border-radius:12px;padding:20px;
        max-width:320px;width:90%;text-align:center;
        box-shadow:0 10px 30px rgba(0,0,0,0.2);
    }
    .donate-title{font-size:18px;color:#333;margin-bottom:15px;}
    .donate-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:15px;}
    .donate-tab{padding:6px 12px;border:1px solid #ddd;border-radius:4px;cursor:pointer;}
    .donate-tab.active{background:#07c160;color:#fff;border-color:#07c160;}
    .donate-qr{width:200px;height:200px;border-radius:8px;object-fit:cover;display:none;margin:0 auto;}
    .donate-qr.show{display:block;}
    .donate-close{margin-top:15px;color:#999;cursor:pointer;}
    </style>

    <div class="donate-wrap">
        <button class="donate-btn" id="donateBtn">☕ 请作者喝杯咖啡</button>
    </div>

    <div class="donate-modal" id="donateModal">
        <div class="donate-box">
            <div class="donate-title">感谢您的支持！</div>
            <div class="donate-tabs">
                <div class="donate-tab active" data-type="wechat">微信</div>
                <div class="donate-tab" data-type="alipay">支付宝</div>
            </div>
            <img src="'.$wechat_qr.'" class="donate-qr wechat show" alt="微信打赏">
            <img src="'.$alipay_qr.'" class="donate-qr alipay" alt="支付宝打赏">
            <div class="donate-close" id="donateClose">关闭</div>
        </div>
    </div>

    <script>
    document.addEventListener("DOMContentLoaded", function(){
        const btn = document.getElementById("donateBtn");
        const modal = document.getElementById("donateModal");
        const close = document.getElementById("donateClose");
        const tabs = document.querySelectorAll(".donate-tab");
        const qrs = document.querySelectorAll(".donate-qr");

        btn.addEventListener("click", ()=>modal.classList.add("show"));
        close.addEventListener("click", ()=>modal.classList.remove("show"));
        modal.addEventListener("click", (e)=>{if(e.target === modal) modal.classList.remove("show");});

        tabs.forEach(tab=>{
            tab.addEventListener("click", function(){
                tabs.forEach(t=>t.classList.remove("active"));
                qrs.forEach(q=>q.classList.remove("show"));
                this.classList.add("active");
                document.querySelector(".donate-qr."+this.dataset.type).classList.add("show");
            });
        });
    });
    </script>';

    return $content . $html;
}
add_filter('the_content', 'add_donate_button');

感谢您的支持！

微信

支付宝

关闭