简介一套Wordpress后端配合微信小程序前端的壁纸下载小程序源码面向有Wordpress建站基础或小程序开发经验的个人站长与自媒体人解决后端内容维护与小程序端展示对接问题适合快速搭建高清壁纸下载及展示站点。压缩包约20.65MB共140个文件其中js脚本承载业务逻辑与接口请求wxml与wxss分别定义页面结构和样式json处理全局与页面配置png等图片素材补充界面资源整体结构完整可按模块直接复用。目前已有135人学习/下载。包内不仅包含Wordpress端适配代码、小程序端核心页面与接口调用示例还带有readme说明文档、二维码图片和默认头像等部署辅助材料目录按功能划分便于二次开发时快速定位壁纸列表、详情预览、下载逻辑等模块同时附带的js辅助脚本覆盖html解析、markdown渲染等交互场景能够有效缩短从环境配置到功能上线的时间适合作为前后端联调与项目拆解的参考。1. 先接住这个标题的两半标题里那个.rar是这行当里最典型的交付形态一个打包好的「现成品」。WordPress 负责当图片和分类的源头微信小程序负责在手机上刷图、搜索、下载。稍微有点经验的工程师看到这个标题第一反应不是「它的接口怎么设计的」而是「里面那套东西能不能在我自己的服务器上跑起来」。这类源码在网上流传很多质量参差不齐有的能直接跑通有的接口路径写死、数据库里连个分类都没建。微信小程序是国内壁纸类工具最常见的前端载体WordPress 是因为服务端生态成熟、不用自己写后台两边用 HTTP 接口对接能在一两天内拼出一个可上架的版本。这篇文按「先拆结构、再动手部署、后补坑」的路子把这条链路上的关键点讲清楚适合刚拿到源码、正准备把它部署在自己环境里的开发者也适合想搞明白这套东西原理再来改的人。2. 拆包之前先看懂WordPress 到底给小程序供了什么数据2.1 壁纸小程序的数据流其实只有一个核心接口源码里再怎么包装壁纸类小程序的服务端逻辑都绕不开一件事把图片 URL、标题、分类、下载地址以 JSON 形式喂给前端。WordPress 在这里不是当 CMS 用的它是当一个「带后台的图片数据库」用的。常见的做法是在 WordPress 里建一个自定义文章类型Custom Post Type叫 wallpaper 或者 picture 之类每一张壁纸就是一篇 post图片放在特色图featured image里分类就用 post type 自带的 taxonomy。小程序端通过wp-json/wp/v2/路径请求这些数据拿回来的是一个标准的 REST 数组。这就是整套架构的底座。你拿到任何一个自称「WordPress 微信壁纸小程序源码」的压缩包第一件事不是去解压小程序端而是先看服务端有没有把 REST API 暴露出来。很多源码包里的 WordPress 侧根本不是一个插件而是直接把wp-json当默认能力用只要你的站点伪静态开着/wp-json/wp/v2/wallpaper?_embed就能直接返回壁纸列表不需要额外装插件。这个小细节决定了整套东西要不要改代码WordPress 默认不启用伪静态时REST API 走的是?rest_route参数一旦你启用了固定链接才走漂亮的路径。也就是说部署这套源码时WordPress 的固定链接设置会直接决定小程序端请求的 URL 长什么样。建议统一用它省去改前端的功夫。2.2 图片 URL 是核心中的核心壁纸小程序和普通内容类小程序的本质区别是图片就是商品本身。所以 WordPress 侧每个 attachment附件的 URL 生成方式直接决定了小程序端能不能显示图。大多数源码在 WordPress 后台里存的是缩略图地址调用时走的是wp_get_attachment_image_src($attachment_id, large)这类函数拿到的是不同尺寸的图片。如果源码里的小程序端写死了某一种尺寸而后台主题没注册这个尺寸首页就会甩一片空白。这里要留意一个行为很多源码为了让图片加载更快会在 WordPress 后台媒体设置里把「缩略图大小」调到很大然后直接用原始图。这个方案在图片数量少的站上是没问题的但壁纸站图片动不动几千张存储和带宽都是成本。你拿到源码后建议看一眼它的请求参数里有没有per_pageWallpaper 小程序常见的加载方式是wx.request({ url: ${apiBase}/wp/v2/wallpaper, data: { per_page: 10, page: 1, _embed: 1 }, success(res) { const items res.data.map((item) { const img item._embedded[wp:featuredmedia]?.[0]; return { id: item.id, title: item.title.rendered, url: img?.source_url || , }; }); }, });这段代码的逻辑是请求wallpaper这个自定义文章类型列表每页 10 条_embed参数要求 WordPress 在返回文章对象的同时把特色图、作者、分类等关联数据一次性嵌进来。用_embed是为了省一次单独的图片信息请求在小程序端就不用先拿 ID、再调一次wp/v2/media/{id}了。source_url是 REST API 返回的原始图片地址title.rendered是经过 WordPress 过滤过的标题会带一些 HTML 实体字符小程序端展示前最好做个decode处理。2.3 看两个文件判断这份源码是原生小程序还是 uni-app 的源码包解压之后不要急着双击它先看两处小程序的根目录有没有app.json以及有没有uni.scss或者manifest.json。app.json是微信原生小程序的标配小程序端代码是pages/目录组织页面而如果有manifest.json和uni.scss说明这是 uni-app 工程需要HBuilderX跑一遍再发行成微信小程序版本。这两者的部署路径天差地别别搞混原生小程序微信开发者工具里直接「导入项目」AppID 填你自己的测试号即可。uni-app 工程得先npm install或者用 HBuilderX 配置好依赖再「发行 - 小程序」产物是一个build/mp-weixin目录然后才轮到微信开发者工具去打开它。另外注意检查路径里有没有node_modules。很多网上流传的源码是直接从别人项目里拷出来的node_modules被压缩进去了但是package.json没带你一跑npm run dev:mp-weixin就会报缺包。这种源码建议先装一遍npm i再看报错不要一上来就去翻代码。如果是原生小程序更快的验证方式是用微信开发者工具打开一个没有后端的小程序静态页应该能直接渲染出来。然后打开调试器 Network 面板刷新首页看请求到底打在哪个域名上这个域名就是这套源码的服务端地址。绝大多数所谓「源码包」前端是齐全的、能看到的后端要么是它自己的一个部署过的站要么就是你本地还没搭的那个 WordPress。这一步能帮你搞清楚距离跑通还有多远。3. 在自己服务器上把整套跑通的最小动作3.1 搭 WordPress 侧装上 PHP 环境、建站、开 REST API部署这套源码服务端需要三个东西一个能跑 PHP 的 Web 环境、WordPress 本体、以及一个装了扩展组件的主题或插件来提供数据接口。大多数源码文档会建议你用宝塔面板不是因为它多好用而是因为它把 PHP、MySQL、Nginx 一次装齐省去折腾编译的时间。装好后新建站点PHP 版本选 7.4 或者 8.1 都行注意别选 8.2 以下版本跑老插件时可能报错。设置伪静态为wordpress通用规则这一步直接决定 API 路径是否正常。接下来是 WordPress 后台。安装过程跳过不细说就讲几个和壁纸源码相关的必改项固定链接选「文章名」即/archives/%post_id%.html或/%postname%/如果仍保持默认的?p123形态/wp-json路径会出问题。然后在「设置 - 媒体」里把缩略图尺寸统一调成1280x0这个尺寸是多数壁纸小程序端期望的large级别宽度。另外如果你的源码包带了一个uploads目录大概率里面全是别人站上的图片。可以保留这些图用于本地测试但不要直接上线版权是一方面另一方面是这些图片的 URL 写死了别人的域名后期你换图很难。批量替换旧域名的 SQL 是这种部署最常见的收尾动作UPDATE wp_posts SET guid REPLACE(guid, http://old-domain.com/wp-content/uploads, https://your-domain.com/wp-content/uploads); UPDATE wp_posts SET post_content REPLACE(post_content, http://old-domain.com/wp-content/uploads, https://your-domain.com/wp-content/uploads); UPDATE wp_postmeta SET meta_value REPLACE(meta_value, http://old-domain.com/wp-content/uploads, https://your-domain.com/wp-content/uploads);三条 SQL 分别处理文章表、内容字段和文章元数据把附件地址全部迁移到新域名。wp_postmeta里存的是特色图的_wp_attached_file这类相对路径有的直接存了绝对 URL带上这条才稳妥。执行前先备份全库这是最基本的自律。3.2 小程序侧把请求域名改成你自己的微信小程序在正式发布之前要求配置请求合法域名。在 mp 后台的开发管理里把https://your-domain.com加入 request 合法域名图片域名和 downloadFile 合法域名也各自加一遍。微信的这个限制是前端强校验的不配置的话开发工具里要勾选「不校验合法域名」才能跑调试真机上直接请求失败。这里面有一个高频误用很多人只配 request 域名忘了壁纸小程序必然要调wx.downloadFile和图片预览这两个 API 分别走 downloadFile 合法域名和业务域名不加的话图片能显示但点保存相册时按钮一直是灰的。改域名时找小程序代码里的config.js或者utils/api.js这类文件通常长这样module.exports { API_BASE: https://your-domain.com/wp-json, QUIET_DOWNLOAD: false, IMG_QUALITY: 80, };API_BASE是这套源码唯一的服务端入口请求都拼它。QUIET_DOWNLOAD控制保存壁纸时是否直接静默保存不弹授权框真机上需要wx.saveImageToPhotosAlbum的授权流程这个值设true之前要想清楚你的用户路径。IMG_QUALITY是图片压缩比网络图时用 80 可以省流量但壁纸原图被压了就失去意义一般设 100 或者不压缩。3.3 跑通验证三行代码确认前后端通了代码改完后在开发者工具里直接点编译然后在 Console 里执行一次请求测试。这里给一个最小验证片段wx.request({ url: https://your-domain.com/wp-json/wp/v2/wallpaper?_embedper_page1, success: (res) { console.log(status, res.statusCode); console.log(data length, res.data.length); console.log(img, res.data[0]?._embedded?.[wp:featuredmedia]?.[0]?.source_url); }, });如果statusCode是 200返回的data长度大于 0且最后一行的img是一个可访问的图片 URL那整条链路就是通的。这时候如果页面还白屏问题大概率在前端渲染层回去检查页面是拿item.url还是拿item.guid之类的字段很多源码在 WordPress 端用的字段名和前端写的不一致这种信息差用 Console 里打印的res.data[0]一眼就能看出来。4. 上线之前必须踩平的三个坑4.1 接口明明能访问小程序里却报url not in domain list这个报错是微信的合法域名校验没过常见原因是你的 WordPress 后台开启了「后台地址」和「站点地址」两个不同域名REST API 返回的图片 URL 域名和请求域名不一致。比如站点地址配了https://www.example.com但后台里的媒体库文件路径是从https://old-domain.com/wp-content/uploads迁移过来的残留值前端请求合法域名里只加了新站点域名图片加载时被微信拦截表现为「列表能出文字图片全挂」。处理方式很直接到 WordPress 的wp_options表里检查siteurl和home两个 option 的值确保一致再做一次 3.1 的 SQL 替换。如果源码里有多个页面各自请求不同域名用全局搜索把.com后缀的常量全找出来统一替换。4.2 下载到相册时失败的三种原因壁纸小程序的留存点全在下载这里是最容易出问题的地方。第一个原因是downloadFile合法域名没配真机上下载直接失败第二个原因是图片地址是http://而非https://微信要求必须 HTTPS第三个原因是 WordPress 那边开了防盗链图片浏览器能看但小程序端请求带不了 Referer直接 403。小程序端无法自定义 Referer所以在 WordPress 侧要解决这个问题。Nginx 对图片目录去掉 Referer 校验即可或者干脆别开防盗链。壁纸站本身不涉及什么隐私数据靠 Referer 防的是别人白嫖你的图片流量但这个站点的流量来源本来就是小程序Referer 是servicewechat.com可以在 Nginx 上给这个域名加白location ~* \.(jpg|jpeg|png|gif|webp)$ { valid_referers none blocked server_names *.servicewechat.com *.qq.com your-domain.com; if ($invalid_referer) { return 403; } }valid_referers的none允许空 Refererblocked允许被防火墙删掉 Referer 的请求*.servicewechat.com覆盖微信小程序的请求来源.qq.com是兜底别人的分享卡片。这段要放进你 WordPress 站点对应的 server 块里而不是wp-config.php因为 PHP 层处理的效率远不如 Nginx。没有改过 Nginx 配置的直接把这段注释掉先保证功能正常上线后带宽被打满了再来收紧。4.3 分类筛选失效传过去的分类 ID 对不上壁纸小程序最常见的 UI 是底部一个分类 tab点「风景」传category3给后端。这个 3 是 WordPress 里分类的 term_id但 WordPress 的分类 ID 不是连续的而且不同源码里建分类的顺序不同ID 完全不同。前端写死 ID 的源码尤其容易翻车。有人会发现后台新建了一个分类后前端下拉列表里不出现原因就出在这小程序端的分类列表来自一个自定义接口可能是wp-json/wallpaper/categories但你数据表里根本没建这个 endpoint。常见做法是给自定义文章类型补一个分类的重写在主题的functions.php里加add_action(rest_api_init, function () { register_rest_route(wallpaper/v1, /categories, array( methods GET, callback function () { $terms get_terms(array( taxonomy wallpaper_cat, hide_empty true, )); $data array(); foreach ($terms as $term) { $thumbnail get_field(cat_cover, wallpaper_cat_ . $term-term_id); $data[] array( id $term-term_id, name $term-name, count $term-count, cover_url $thumbnail ? $thumbnail[url] : , ); } return $data; } )); });register_rest_route是 WordPress 5.x 以后注册自定义 REST 路由的标准方式hide_empty为true表示只返回有内容的分类避免空 tab 挂在导航栏。get_field是 ACF 插件的函数如果你的后台没装 ACF这一行会直接报致命错误——所以不要照抄把get_field那段换成直接读term_description或者忽略封面图即可。加完这段之后访问https://your-domain.com/wp-json/wallpaper/v1/categories看到分类列表说明接口正常这时候前端如果有下拉分类自然就有了数据。5. 验证一张图是否真能被下载到本地的完整链路绕开前端页面直接用原生接口模拟用户行为是上线前最高效的验证方式。微信开发者工具里的模拟器不能完全代表真机网络所以我在改动完域名或图片尺寸后都会在真机上手动走一遍这个路径。流程小程序里点开一张壁纸进入详情页看图片是否完整加载出来点下载按钮观察是否出现「保存成功」提示。如果卡在下载打开小程序后台的「开发调试 - 打开调试」把微信的 vConsole 呼出来拉到 Network 面板看downloadFile那条请求的返回状态码403防盗链未放行按 4.2 处理。404图片路径不存在多半是缩略图尺寸没生成到 WordPress 媒体库看该附件的 URL 能否访问。200 但保存失败检查是否在app.json声明的权限里漏了scope.writePhotosAlbum这个在首次调用wx.saveImageToPhotosAlbum时会被微信拦截弹窗询问用户但你声明没写的话弹窗都不弹直接走 fail 回调。如果不想真机反复点可以在开发者工具里写一段临时脚本放在onLoad里做链路测试。先下载再保存这是两个 API中间跨了wx.env拿临时文件路径的一步wx.downloadFile({ url: https://your-domain.com/wp-content/uploads/2025/wallpaper-test.jpg, success(res) { if (res.statusCode 200) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () wx.showToast({ title: 下载完成 }), fail: (err) console.warn(用户拒绝授权或网络异常, err), }); } }, });res.tempFilePath是微信临时存储不会持久化跨页面使用需要先wx.saveFile或者直接在这一个回调里完成保存。测试完这段代码要删掉留在生产代码里就是一个弹窗炸弹用户每进一次首页就被问一次保存权限这在微信审核时也会被拒。最好把这段测试代码替换成正式入口的倒计时逻辑用户在详情页长按图片触发保存或者点按钮触发。流程都通了之后跑到「微信开发者工具 - 上传」提交代码到后台版本审核前先把「隐私保护指引」里声明你要收集用户相册的用途。微信现在的审核对小程序的图片保存类目重点看两个地方是否有诱导分享的文案以及保存图片前是否明确授权。把源码包自带的那些「分享二维码领取会员」之类的逻辑删干净实在要留也要保证所有权限请求发生在用户主动点击之后。这样发出去的版本过审概率会高不少。本文还有配套的精品资源点击获取