企业官网建设流程全解析

简介：一套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_page，Wallpaper 小程序常见的加载方式是：

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%/，如果仍保持默认的?p=123形态，/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?_embed&per_page=1", 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允许空 Referer，blocked允许被防火墙删掉 Referer 的请求，*.servicewechat.com覆盖微信小程序的请求来源，.qq.com是兜底别人的分享卡片。这段要放进你 WordPress 站点对应的 server 块里，而不是wp-config.php，因为 PHP 层处理的效率远不如 Nginx。没有改过 Nginx 配置的，直接把这段注释掉，先保证功能正常，上线后带宽被打满了再来收紧。

4.3 分类筛选失效，传过去的分类 ID 对不上

壁纸小程序最常见的 UI 是底部一个分类 tab，点「风景」传category=3给后端。这个 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或者直接在这一个回调里完成保存。测试完这段代码要删掉，留在生产代码里就是一个弹窗炸弹，用户每进一次首页就被问一次保存权限，这在微信审核时也会被拒。最好把这段测试代码替换成正式入口的倒计时逻辑：用户在详情页长按图片触发保存，或者点按钮触发。

流程都通了之后，跑到「微信开发者工具 -> 上传」提交代码到后台，版本审核前先把「隐私保护指引」里声明你要收集用户相册的用途。微信现在的审核对小程序的图片保存类目重点看两个地方：是否有诱导分享的文案，以及保存图片前是否明确授权。把源码包自带的那些「分享二维码领取会员」之类的逻辑删干净，实在要留，也要保证所有权限请求发生在用户主动点击之后。这样发出去的版本，过审概率会高不少。

本文还有配套的精品资源，点击获取