从方案到上线的完整流程 · 图片嵌入解决方案
一、案例分享页面的定位与价值
案例分享是龙脉暖通官网最重要的内容类型之一。它不是”方案书”，也不是”销售话术”，而是真实客户故事的完整记录——从痛点出发，到方案选型，再到施工纪实，最后用客户的真实体验说话。
一个好的案例分享页面，能做到三件事：
- 建立信任 — 真实照片 + 真实数据，比任何销售话术都有说服力
- 降低决策成本 — 让潜在客户”对号入座”，快速判断”这个方案适不适合我”
- 沉淀专业知识 — 每一次施工的照片、每一个痛点的解法，都是团队知识的积累
二、与”三种风格”的差异对比
参考文章（三种方案表达风格探索实录）定义了三种表达风格，案例分享与它们有本质不同：
| 维度 | 风格一：线性叙事 | 风格二：组件化代码页 | 风格三：设计画布 | 案例分享（本文方案） |
|---|---|---|---|---|
| 核心目的 | 完整呈现方案细节 | 工程化批量生成 | 快速决策、微信转发 | 真实故事 + 信任建立 |
| 信息组织 | 纵向章节，顺序阅读 | 组件化，数据驱动 | 横向网格，一屏决策 | 纵向叙事 + 照片网格 + 数据卡片 |
| 图片角色 | 辅助说明，数量少 | 基本无图 | 图表为主，少实景图 | 核心主角，施工照片是灵魂 |
| 阅读场景 | 深度阅读，可打印 | 在线预览，版本管理 | 手机端快速浏览 | 官网展示 + 微信转发 |
| 制作成本 | 低（WordPress直接写） | 高（需要前端开发） | 中（需要设计思维） | 中（AI辅助+照片规范） |
| 内容来源 | 方案顾问手动编写 | 简道云数据自动拉取 | AI生成+人工校对 | 真实施工照片 + 客户原话 + 方案数据 |
核心差异总结：
三种风格解决的是”方案怎么呈现“的问题； 案例分享解决的是”别人用下来怎么样“的问题。
案例分享里，施工照片是信任的载体，不是装饰。没有照片的案例分享，就像没有证据的判决书。
三、完整创建流程
四、图片嵌入解决方案（核心）
这是整个流程中最容易出错、也最耗时的一步。正确的做法如下：
4.1 为什么不能直接拖图片到WordPress？
- WordPress编辑器对批量图片处理不友好，容易出错
- 图片命名混乱，后续维护困难
- 没有统一压缩，影响页面加载速度
- AI无法直接读取WordPress媒体库的图片（需要URL）
4.2 标准流程（6步）
第1步：创建统一文件夹
在电脑上创建一个专用文件夹，建议命名格式：
D:/官网需要的资料/客户姓名+核心设备+主机型号/
实例：
D:/官网需要的资料/大林镇自建房日立水墅适225主机一拖8/
✅ 命名规范：地点+户型+品牌+主机型号+内机数量 这样后续查找、马维斯编辑、AI读取都能一眼识别
第2步：下载/拷贝照片到文件夹
照片来源：
- 施工现拍（工人微信发来的原图）
- 以前存在各处的零散照片
操作要点：
- 用原图，不要用微信压缩过的版本
- 如果照片太多，先粗筛，保留最能说明问题的
- 建议每个案例 10~15张 为宜（太少说不清楚，太多加载慢）
第3步：让马维斯统一编辑尺寸、压缩、命名
这是最关键的一步。命名规范直接影响后续所有工作。
命名规范：
地点+户型+品牌+主机型号_照片内容描述.jpg
示例（徐先生案例）：
| 原始文件名（工人拍的） | 规范命名后 |
|---|---|
IMG_20260609_001.jpg | 大林镇自建房日立水墅适225主机一拖8_外机排气阀位置.jpg |
微信图片_202606091430.jpg | 大林镇自建房日立水墅适225主机一拖8_横1.jpg |
新建文件夹(2)/QQ截图20260609.jpg | 大林镇自建房日立水墅适225主机一拖8_竖4.jpg |
命名中的关键词说明：
| 关键词 | 含义 | 用于哪个板块 |
|---|---|---|
外机XXX | 外机安装相关 | 外机主管走管 |
横N | 室内管路横向走线（N=1~8） | 室内管路铺设 |
竖N | 地暖/线控器相关（N=1~4） | 地暖末端 / 线控器预留 |
排气阀 | 外机细节 | 外机主管走管 |
编辑尺寸与压缩标准：
| 用途 | 建议尺寸 | 建议文件大小 |
|---|---|---|
| 缩略图（照片网格） | 800×600px | 80~150KB |
| 大图（点击放大） | 1920×1440px | 300~500KB |
工具推荐：
- 马维斯用 TinyPNG 或 ImageOptim 批量压缩
- 压缩率保持 70%~80%，画质损失肉眼几乎不可见
✅ 让马维斯统一编辑、命名、压缩——这是他的专长，别省这一步
第4步：上传到WordPress媒体库并复制地址链接
- 登录 WordPress 后台
- 进入 媒体库 → 添加新文件
- 把马维斯编辑好的所有照片一次性上传
- 点击每张照片 → 复制文件URL（格式：
https://longmai-nt.com/wp-content/uploads/2026/06/文件名.jpg）
⚠️ WordPress上传后，文件名中的中文会被保留，URL可以直接用
第5步：把URL复制给AI，嵌入HTML
把媒体库里的照片URL整理成列表，发给AI：
请把这些链接替换到HTML代码里面：
https://longmai-nt.com/wp-content/uploads/2026/06/大林镇自建房日立水墅适225主机一拖8_横1.jpg
https://longmai-nt.com/wp-content/uploads/2026/06/大林镇自建房日立水墅适225主机一拖8_横2.jpg
...
AI会自动替换HTML中所有的 img src，生成最终可发布的版本。
第6步：在WordPress中粘贴HTML代码
AI生成完整HTML后，在WordPress中发布：
- 打开WordPress后台，新建或编辑页面
- 点击 “+” 添加区块
- 搜索并选择 “自定义HTML” 区块
- 把AI生成的HTML代码完整粘贴进去
- 预览检查照片是否正常加载
- 发布
✅ 关键操作：选择”自定义HTML”区块，不是”代码编辑器”模式
“自定义HTML”区块可以直接渲染HTML代码，包括样式、表格、图片网格等， 而”代码编辑器”模式会改变整个编辑器的行为，容易出错。
4.3 流程图总结
┌──────────────────────────────────────────────────────┐
│ 工人微信发原图 │
│ ↓ │
│ 下载到电脑统一文件夹 │
│ （D:/官网需要的资料/客户名+设备型号/） │
│ ↓ │
│ 让马维斯统一编辑尺寸、压缩、命名 │
│ ↓ │
│ 上传到 WordPress 媒体库 │
│ 点击每张照片 → 复制文件URL │
│ ↓ │
│ 把URL链接发给AI │
│ AI自动嵌入HTML → 生成完整案例页 │
│ ↓ │
│ WordPress添加"自定义HTML"区块 → 粘贴代码 → 发布 │
└──────────────────────────────────────────────────────┘
✅ 这套流程的核心价值：
- 照片命名规范 → AI能理解每张照片的内容
- 统一压缩 → 页面加载快
- URL交给AI → 嵌入准确，不出错
- “自定义HTML”区块 → 一次粘贴，所见即所得
五、实战演示：徐先生案例页的创建过程
以本文附带的 徐先生案例页 为例，完整演示上述流程：
5.1 素材收集
| 素材类别 | 内容 |
|---|---|
| 客户信息 | 徐先生，天府新区大林镇，3层自建房（本次装修2楼） |
| 客户原话 | “效果要好” “尽量配大点” “不要热水忽冷忽热” |
| 方案配置 | 日立 RAS-225FPUEN2Q/M（20kW制冷/23kW制热），8台零越风机盘管，超配率183% |
| 施工照片 | 13张隐蔽工程实拍（外机2张 + 室内管路8张 + 其他3张） |
5.2 照片处理
按规范命名后上传，获得URL：
https://longmai-nt.com/wp-content/uploads/2026/06/大林镇自建房日立水墅适225主机一拖8_横1.jpg
https://longmai-nt.com/wp-content/uploads/2026/06/大林镇自建房日立水墅适225主机一拖8_横2.jpg
...
（共12张）
5.3 AI生成HTML
提供以下信息给AI：
- 客户信息和原话
- 方案配置表
- 照片URL列表
- 特殊要求（不体现报价、使用南北富森热线、板块名称修改）
AI输出完整HTML，包含：
- 7大板块结构
- 照片网格布局
- 响应式适配
5.4 人工校对
| 检查项 | 结果 |
|---|---|
| 报价是否删除 | ✅ 已删除 |
| 电话是否正确 | ✅ 南富森 028-86131795，北富森 028-65272586 |
| 照片描述是否准确 | ⚠️ 需人工确认（AI无法读图，描述为推断） |
| 板块名称是否正确 | ✅ “外机安装”已改为”外机主管走管” |
5.5 发布到WordPress
在WordPress页面编辑器中，添加 “自定义HTML” 区块，粘贴AI生成的完整HTML代码，预览确认后发布。
六、常见问题与最佳实践
Q1：地暖还没进场，照片怎么处理？
答： 在对应板块注明”地暖尚未进场”，用占位说明代替照片。等地暖进场施工后，补拍照片，更新页面。
徐先生案例就是这样处理的：”线控器预留预埋及成品保护”板块，地暖照片用文字说明占位。
Q2：AI说”无法读取图片”怎么办？
答： 当前模型（非多模态）确实无法读取图片内容。解决方案：
- 让马维斯在命名时就把内容写清楚（如
_外机排气阀位置.jpg） - AI根据文件名推断照片内容，在caption中描述
- 发布前人工逐张核对照片实际内容与描述是否匹配
Q3：照片太多，页面太长怎么办？
答： 建议每个案例 10~15张 为宜，按以下逻辑分组：
| 分组 | 建议张数 | 展示重点 |
|---|---|---|
| 外机安装 | 2~3张 | 主机位置、排气阀、减震处理 |
| 室内管路 | 6~8张 | 横平竖直、保温严密、固定规范 |
| 细节处理 | 2~4张 | 排气阀、分集水器、线控器预留 |
Q4：WordPress编辑器里直接拖图片不行吗？
答： 可以，但不推荐。原因：
| 方式 | 优点 | 缺点 |
|---|---|---|
| WordPress直接拖图 | 简单快捷 | 命名混乱、无法批量压缩、AI无法读取 |
| 本指南流程 | 规范、可维护、AI友好 | 需要马维斯配合，多一步操作 |
如果是一篇案例，直接拖图也行； 如果要批量做案例分享，必须用规范流程。
Q5：HTML代码怎么放到WordPress里？
答： 在WordPress页面编辑器中，添加 “自定义HTML” 区块，把AI生成的HTML代码完整粘贴进去即可。
具体操作步骤：
- 打开WordPress后台，新建或编辑页面
- 在编辑器中点击 “+” 按钮
- 在区块搜索框中输入 “自定义HTML” 或 “Custom HTML”
- 选中该区块
- 把AI生成的完整HTML代码粘贴进去
- 点击”预览”检查效果
- 确认无误后发布
⚠️ 注意：不是切换到”代码编辑器”模式！
“代码编辑器”模式会改变整个编辑器的行为，把所有区块都变成代码形式， 容易导致已有内容丢失或格式混乱。
正确做法是单独添加一个”自定义HTML”区块，只影响这一个区块， 其他区块（标题、段落等）不受影响。
Q6：一个页面里可以放多个”自定义HTML”区块吗？
答： 可以。如果案例页面内容很长，可以把7个板块拆成多个”自定义HTML”区块，每个板块一个。这样方便单独编辑某个板块，不用每次都操作整段代码。
推荐的区块组合：
[标题区块] → 页面标题
[自定义HTML] → 板块01 项目背景 + 板块02 痛点诊断
[自定义HTML] → 板块03 方案配置 + 板块04 核心亮点
[自定义HTML] → 板块05 精工六步法
[自定义HTML] → 板块06 施工纪实（含照片网格）
[自定义HTML] → 板块07 项目总结 + 页脚
✅ 分区块粘贴的好处：修改某个板块时，不需要重新粘贴整页代码
七、最佳实践总结
✅ 做什么：
1. 照片统一命名 → AI能理解内容
2. 让马维斯统一编辑尺寸、压缩 → 页面加载快
3. 媒体库URL交给AI → 嵌入准确
4. WordPress用"自定义HTML"区块粘贴 → 所见即所得
5. 7板块结构 → 信息完整、逻辑清晰
6. 不体现报价 → 避免价格敏感客户只比价
❌ 别做什么：
1. 别让工人随便命名照片（IMG_xxx.jpg 没人看得懂）
2. 别用微信压缩图（画质差，案例分享要清晰）
3. 别在页面里放报价（引流到门店咨询，而不是在线比价）
4. 别跳过人工校对（AI无法读图，描述可能不准确）
5. 别用"代码编辑器"模式粘贴HTML（会破坏整个编辑器）
6. 别跳过马维斯的编辑步骤（命名+压缩是后续一切的基础）
八、总结
案例分享的创建，核心不是”写文案”，而是把真实的施工过程用规范的方式记录下来，并用客户能理解的语言讲出来。
图片嵌入的解决方案，本质上是解决一个问题：
如何让AI准确理解照片内容，并正确嵌入到HTML中？
答案就是这套6步流程：
下载到统一文件夹 → 让马维斯统一编辑/命名/压缩 →
上传媒体库 → 复制URL给AI → AI嵌入HTML →
WordPress"自定义HTML"区块粘贴发布
这套流程一旦跑通，每个案例的创建时间可以从 2小时 压缩到 30分钟，而且质量更稳定。
本文由龙脉暖通团队与AI协作完成 最后更新：2026年6月