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

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

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

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

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

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

主要改进内容：

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

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

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

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

 //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-赞助”即可。

大功告成！