本赞助页面源于Zibll主题的赞助页面，说起Zibll主题，是我原来用的主题，貌似很多子比美化，都是从星语的小木屋慢慢汇总流传的。想当年因为投稿被采纳的原因，成了星语的尊贵会员，一直到2025年结束，只可惜，大佬突然闭站，成为了一个传说。

如果我记得没错，这个赞助页面时星语的原创，并且并没有公布源码，只分享给当时赞助他网站的星友，并且不得二次转发。但是从闭站之后，Zibll官方论坛就出现了源码，文件达40KB左右。我最初得到的源码被我删除了，后来让淇云博客从他的站上给我转了一份，这次的赞助页面就是从这份开始比葫芦画瓢做的。说起淇云博客站长，实在是一个大好人，我刚开始建站使用宝塔面板，什么都不会，是他抽空从安装面板、安装网站所需要的环境开始一步步帮我搭建好的，现在我用的免费VPS服务器也是看了他的文章，在他的帮助下申请通过的，特别感谢他！

言归正传，话说淇云博客把源码给我之后，我先上传，立马问题全部显现如下：

1、CSS完全错位，没有一处不错位的。

2、点击赞助金额，最核心的功能，弹不出支付弹窗，更别提显示二维码了。

我看了源码，本地搭建了网站做实验，最终确定源码里的变量或者函数引用的Zibll的变量，大概率是其他主题用不了的。但是它这个界面着实喜欢，就开始比葫芦画瓢照搬它的文字、CSS和核心功能，代码自己重新弄了下，使用的Wordpress默认的函数和变量，可能适用于每个主题，不过非PIX主题需要修改下CSS调整下布局。

主要改进内容：

1、点击图片弹出支付窗口时，无需关闭，直接点击另外图片可以直接切换相应金额二维码。

2、增加了QQ支付，尽管很多人都不用这个。

在主题的页面目录下，一般是page或pages目录，建立一个PHP源码文件，名称随便填写，我的叫donate.php，页面名称叫donate-赞助，把下面代码放进去：

[reply]

<?php
/**
 * Template name: donate-赞助
 */
get_header(); ?>
<style>:root{--main-bg-color:#fff;--highlight-color:#fe85ca;--box-shadow-color:rgba(0,0,0,0.1);--hover-box-shadow-color:rgba(0,0,0,0.2)}body{margin:0;padding:0;font-family:Arial,sans-serif}.donate-page{text-align:center;padding:20px 10px}.donate-container{max-width:790px;margin:0 auto;display:flex;flex-wrap:nowrap;flex-direction:column}.donate-item{border:2px solid #ddd;padding:20px;border-radius:10px;background-color:#f9f9f9;box-shadow:0 4px 8px var(--box-shadow-color);transition:transform 0.3s ease,box-shadow 0.3s ease;cursor:pointer;flex-basis:calc(100% / 2 - 20px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:auto;position:relative}.donate-item:hover{transform:translateY(-5px);box-shadow:0 6px 12px var(--hover-box-shadow-color)}.donate-item img{width:110px;height:110px;margin-bottom:-30px}.donate-item h3{font-size:1.4em;margin-bottom:10px}.amount{width:70px;height:30px;line-height:30px;background:var(--highlight-color);border-radius:0 5px 0 10px;font-weight:700;color:var(--main-bg-color);font-size:18px;text-align:center;position:absolute;top:-2px;right:-2px}.donate-modal-option:hover{background-color:#333;color:#fff}.first-row,.second-row{display:flex;justify-content:space-evenly} .donate-modal{display: none; position: fixed; z-index: 1000; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; background-color: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);} .donate-modal-content{height: 100%; display: flex; flex-direction: column;} .donate-modal-content h2{flex: 0 0 auto; background-color: #f0f0f0; padding: 5px; cursor: pointer; font-size: 16px; font-weight: bold;} .close-modal{position: absolute; right: 15px; cursor: pointer; font-size: 22px; font-weight: bold;} .donate-modal-text{flex: 1 1 auto; text-align: center; padding: 3px; overflow: auto; display: flex; justify-content: center; align-items: center; flex-direction: column;} .qr-display{flex: 3 1 auto; display: flex; justify-content: center; align-items: center;} .donate-modal-options{display:inline-block;background:var(--main-border-color);border-radius:99px;border:1px solid var(--main-border-color);overflow:hidden;padding:15px;display:flex;justify-content:center;} .donate-modal-option{display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}.donate-modal-options .donate-modal-option{border-radius:99px;background:0 0;transition:all .5s} .icon-container{display: flex; align-items: center; justify-content: center; padding-top: 20px;}.icon-item{width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; letter-spacing: 1px; line-height: 28px; text-align: center; font-size: 16px; font-weight: bold;}.icon-zan{background-color: #85d6ac; transform-origin: right bottom; transform: rotate(16deg); margin-right: 20px;}.icon-zhu{background-color: #ff8566; transform-origin: left bottom; transform: rotate(-16deg); margin-left: 4px; margin-right: 15px;}.icon-fang{background-color: #ffcd59; transform-origin: right top; transform: rotate(16deg); margin-right: 10px;}.icon-an{background-color: #7fceff; transform-origin: left top; transform: rotate(-16deg);}</style>
<div>
    <section style="text-align: center;">
        <section class="icon-container">
            <div class="icon-item icon-zan">赞</div>
            <div class="icon-item icon-zhu">助</div>
            <div class="icon-item icon-fang">方</div>
            <div class="icon-item icon-an">案</div>
        </section>
    </section>
</div>
    <div class="donate-page">
        <div class="donate-container">
            <div class="first-row">
                <div class="donate-item" onclick="openDonateModal('一个鸡腿')">
                    <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/jitui.webp" alt="一个鸡腿">
                    <h3>一个鸡腿</h3>
                    <div class="amount">¥5</div>
                </div>
                <div class="donate-item" onclick="openDonateModal('一杯咖啡')">
                    <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/kafei.webp" alt="一杯咖啡">
                    <h3>一杯咖啡</h3>
                    <div class="amount">¥10</div>
                </div>
                <div class="donate-item" onclick="openDonateModal('一个汉堡')">
                    <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/hanbao.webp" alt="一个汉堡">
                    <h3>一个汉堡</h3>
                    <div class="amount">¥15</div>
                </div>
            </div>
            <div class="second-row">
                <div class="donate-item" onclick="openDonateModal('一份肯德基套餐')">
                    <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/kendeji.webp" alt="一份肯德基套餐">
                    <h3>一份肯德基套餐</h3>
                    <div class="amount">¥40</div>
                </div>
                <div class="donate-item" onclick="openDonateModal('一份全家桶')">
                    <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/quanjiatong.webp" alt="一份全家桶">
                    <h3>一份全家桶</h3>
                    <div class="amount">¥60</div>
                </div>
                <div class="donate-item" onclick="openDonateModal('爱心红包')">
                    <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/hongbao.webp" alt="爱心红包">
                    <h3>爱心红包</h3>
                    <div class="amount">自定义</div>
                </div>
            </div>
        </div>
    </div>
    <div class="wzw-donate-programme mb20 main-bg main-shadow radius8">
        <div class="wzw-programme-title">
            <section class="wzweditor style_1">
                <section style="display: flex;align-items: center;justify-content: center;">
                    <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/zu1.webp" style="width:40px;vertical-align:middle;" class="small_image style_4" _src="https://images.my1981.cn/wp-content/themes/pix/img/donate/zu1.webp" data-isstyleimage="1" draggable="false">
                    <section style="margin: 0 10px;">
                        <section style="display: flex;align-items: center;background: linear-gradient(to top,#FFE8E6 40%,rgba(255, 255, 255, 0) 40%);padding: 0 0 3px 0;justify-content: center;">
                            <section>
                                <section class="wxqq-Color style_11" style="color: #FF6B4D;letter-spacing: 1.5px;line-height: 16px;text-align:justify;font-size: 16px;font-weight: bold;">
                                    <p class="wzwbrush style_12">赞助说明</p>
                                </section>
                            </section>
                            <section>
                                <section class="wxqq-Color style_14" style="color: #FF6B4D;letter-spacing: 1.5px;line-height: 20px;text-align:justify;font-size: 12px;font-weight: bold;">
                                    <p class="wzwbrush style_15">HAPPY HOLIDAY</p>
                                </section>
                            </section>
                        </section>
                    </section>
                    <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/zu2.webp" style="width:40px;vertical-align:middle;" class="small_image style_17" _src="https://images.my1981.cn/wp-content/themes/pix/img/donate/zu2.webp" data-isstyleimage="1" draggable="false">
                </section>
            </section>
        </div>
        <div class="wzw-programme-content box-body theme-box">
            <div class="wzw-text-content">
                <section class="wzweditor style_1">
                    <section style="padding-bottom:2px;box-sizing:border-box;">
                        <section style="width:30px;margin:0px 0px -11px 50px;line-height:20px;transform:skew(-20deg);-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);">
                            <section style="display:inline-block;vertical-align:middle;margin-right:5px;width:10px;height:20px;line-height:20px;background-color:#ffe4e4;"></section>
                            <section style="display:inline-block;vertical-align:middle;width:10px;height:20px;line-height:20px;background-color:#ffe4e4;"></section>
                        </section>
                        <section style="display:-webkit-flex;display:flex;align-items:stretch;">
                            <section style="width:20px;padding:20px 0px;box-sizing:border-box;">
                                <section style="height:100%;width:20px;background-color:rgba(255,228,228,0.5);"></section>
                            </section>
                            <section style="flex:1;">
                                <section style="background-color:rgba(255,228,228,0.5);padding:20px 0px;box-sizing:border-box;">
                                    <section style="background-color:rgba(255,228,228,0.5);padding:20px 30px;box-sizing:border-box;">
                                        <section class="wxqq-Color style_12" style="color:#ff9396;letter-spacing:1px;line-height:24px;text-align:justify;">
                                            <p class="wzwbrush style_13" style="font-size:14px;padding:0px;margin:0px;">似水流年自上线以来，努努力加加班定时更新博客，几年下来教程质量有了一些提升，发布的技术教程完全免费，只需要回复即可，能坚持这么多年很不容易。随着时间推移，维持网站运行需要支出高昂的服务器和带宽费用。为了能继续坚持免费做下去，似水流年希望大家能够赞助，给似水流年加油打气！激励似水流年继续创作下去！谢谢！</p>
                                        </section>
                                    </section>
                                </section>
                            </section>
                            <section style="width:20px;padding:20px 0px;box-sizing:border-box;">
                                <section style="height:100%;width:20px;background-color:rgba(255,228,228,0.5);"></section>
                            </section>
                        </section>
                        <section style="width:30px;margin:-11px 50px 0px auto;line-height:20px;transform:skew(-20deg);-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);">
                            <section style="display:inline-block;vertical-align:middle;margin-right:5px;width:10px;height:20px;line-height:20px;background-color:#ffe4e4;"></section>
                            <section style="display:inline-block;vertical-align:middle;width:10px;height:20px;line-height:20px;background-color:#ffe4e4;"></section>
                        </section>
                    </section>
                </section>
            </div>
            <hr />
            <section class="wzweditor style_1">
                <section style="text-align: center;">
                    <section class="wzw-bacolor wxqq-bg style_5" style="box-sizing: border-box;padding:0px;background-color:#FF898C;width: 30px;height: 30px;margin-bottom: -30px;transform: rotate(0deg);"></section>
                    <section class="wxqq-borderBottomColor wxqq-borderTopColor wxqq-borderRightColor wxqq-borderLeftColor style_6" style="box-sizing: border-box;border:10px solid #FFDCDB;padding:10px 0;">
                        <section style="box-sizing: border-box;padding:20px 0;background-color:#fff;transform: rotate(0deg);">
                            <section class="wxqq-Color style_8" style="color: #FF898C;letter-spacing: 1.5px;margin-left: 1.5px; line-height: 28px;text-align:center;font-size: 14px;">
                                <p class="wzwbrush style_9">这朵世间最美好的玫瑰，</p>
                                <p class="wzwbrush style_10">星尘为泥，银河滋养，永远不会枯萎，</p>
                                <p class="wzwbrush style_11">永远在沉静宇宙中盛放。</p>
                                <p class="wzwbrush style_12">这是我要给你的，宇宙级别的浪漫。</p>
                            </section>
                        </section>
                    </section>
                    <section style="width:30px;margin: -36.2px 0 0 auto;line-height:2px;transform: rotate(0deg);">
                        <img src="https://images.my1981.cn/wp-content/themes/pix/img/donate/zu4.webp" style="vertical-align:middle;width:100%;" class="small_image style_14" data-isstyleimage="1" _src="https://images.my1981.cn/wp-content/themes/pix/img/donate/zu4.webp">
                    </section>
                </section>
            </section>
        </div>
    </div>
<div id="donate-modal" class="donate-modal">
    <div class="donate-modal-content">
        <h2>赞助似水流年</h2>
        <div id="donate-modal-text"></div>
        <div class="qr-display" id="donate-modal-qr"></div>
        <div class="donate-modal-options">
            <button data-type="wx" class="donate-modal-option active" onclick="showPaymentQR('微信支付')">微信支付</button>
            <button data-type="zfb" class="donate-modal-option" onclick="showPaymentQR('支付宝支付')">支付宝支付</button>
            <button data-type="qq" class="donate-modal-option" onclick="showPaymentQR('QQ支付')">QQ支付</button>
        </div>
        <span class="close-modal" onclick="closeDonateModal()">×</span>
    </div>
</div>

<script>
function openDonateModal(itemText) {
    document.getElementById('donate-modal').style.display = 'block';
    let parts = itemText.split(' ');
    let name = parts[0];
    let rawAmount = parts[1];
    let amount = rawAmount === '自定义'? rawAmount : `￥${rawAmount.substring(1)}`;
    document.getElementById('donate-modal-text').innerHTML = `<div style="text-align: center;">${name}&nbsp${amount}</div>`;
    showPaymentQR('微信支付');
}

document.querySelectorAll('.donate-item').forEach(item => {
    item.addEventListener('click', function() {
        let name = item.querySelector('h3').textContent;
        let amount = item.querySelector('.amount').textContent;
        openDonateModal(`${name} ${amount}`);
    });
});

function closeDonateModal() {
    document.getElementById('donate-modal').style.display = 'none';
}

function showPaymentQR(paymentMethod) {
    let qrDisplay = document.getElementById('donate-modal-qr');
    //let imgPath = "<?php echo get_stylesheet_directory_uri();?>/img/donate/"; //当前主题目录下/img/donate/
    let imgPath = "https://images.my1981.cn/wp-content/themes/pix/img/donate/";
    let textContent = document.getElementById('donate-modal-text').innerHTML;
    let parts = textContent.split('&nbsp');
    let amount = parts[1];
    let paymentAbbreviation;
    if (amount === '自定义') {
        if (paymentMethod === '微信支付') {
            paymentAbbreviation = 'wx';
        } else if (paymentMethod === '支付宝支付') {
            paymentAbbreviation = 'zfb';
        } else if (paymentMethod === 'QQ支付') {
            paymentAbbreviation = 'qq';
        }
        // 如果 amount 为 '自定义'，直接使用 paymentAbbreviation
        let imgName = paymentAbbreviation;
        let imgSrc = `${imgPath}${imgName}.webp`;
        qrDisplay.innerHTML = `<img src="${imgSrc}" alt="${paymentMethod}支付二维码" style="height:240px;width:auto;">`;
    } else {
        // 使用正则表达式提取纯数字金额，先判断 amount 是否为 null 或 undefined
        if (amount === null || amount === undefined || amount === '') {
            amount = null;
        } else {
            let matches = amount.match(/\d+/);
            amount = matches? matches[0] : null;
        }
        if (paymentMethod === '微信支付') {
            paymentAbbreviation = 'wx';
        } else if (paymentMethod === '支付宝支付') {
            paymentAbbreviation = 'zfb';
        } else if (paymentMethod === 'QQ支付') {
            paymentAbbreviation = 'qq';
        }
        if (amount === null) {
            let imgName = paymentAbbreviation;
            let imgSrc = `${imgPath}${imgName}.webp`;
            qrDisplay.innerHTML = `<img src="${imgSrc}" alt="${paymentMethod}支付二维码" style="height:240px;width:auto;">`;
        } else {
            let imgName = amount + paymentAbbreviation;
            let imgSrc = `${imgPath}${imgName}.webp`;
            qrDisplay.innerHTML = `<img src="${imgSrc}" alt="${paymentMethod}支付二维码" style="height:240px;width:auto;">`;
        }
    }
}

document.addEventListener('click', function(event) {
    if (event.target.id === 'donate-modal' || event.target.classList.contains('close-modal')) {
        closeDonateModal();
    }
});

document.querySelector('.donate-container').addEventListener('click', function(event) {
    if (event.target.classList.contains('donate-item')) {
        let name = event.target.querySelector('h3').textContent;
        let amount = event.target.querySelector('.amount').textContent;
        openDonateModal(`${name} ${amount}`);
    }
});
</script>
<?php get_footer();
?>

[/reply]

代码里主要是修改自己的图片地址和图片名称，关键语句我已经做了注释，如：

 //let imgPath = "<?php echo get_stylesheet_directory_uri();?>/img/donate/"; //当前主题目录下/img/donate/
    let imgPath = "https://images.my1981.cn/wp-content/themes/pix/img/donate/";

如果你是直接放在自己的主机，自己的主题目录下就选上面这一行，修改成自己的图片路径；如果像我一样使用的是CDN，用下面这一行，改成自己的图片路径。

支付二维码图片命名规则：金额+赞助方式（微信支付wx，支付宝支付zfb，QQ支付qq），比如第一个金额5元，微信支付的二维码图片名称就是5wx.webp，支付宝支付的二维码图片名称就是5zfb.webp，QQ支付的二维码图片名称就是5qq.webp。（我的代码里，我用的图片是webp格式，如果你是png或者jpg格式，就是5wx.png或者5wx.jpg，依次类推，代码里搜索${imgPath}${imgName}.webp，把webp改成png或者jpg）

后台建立一个新页面，模板选择 “donate-赞助”即可。

大功告成！