从方案到上线的完整流程 · 图片嵌入解决方案

案例分享创建指南 · 设计画布 | 龙脉暖通

案例分享创建指南 · 设计画布

从方案到上线的完整流程 · 图片嵌入解决方案

6步标准化流程：下载照片 → 马维斯编辑命名压缩 → 上传媒体库 → 复制URL给AI → AI嵌入HTML → WordPress自定义HTML区块粘贴发布

核心环节

6步流程

关键角色

马维斯

照片建议

10~15张/案例

压缩标准

80~150KB

发布方式

自定义HTML区块

效率提升

2h → 30min

①

下载到统一文件夹

D:/官网需要的资料/

②

马维斯编辑命名压缩

统一尺寸·规范命名

③

上传WordPress媒体库

添加新文件

④

复制URL给AI

每张照片的媒体库链接

⑤

AI嵌入HTML

自动替换img src

⑥

自定义HTML粘贴

WordPress区块发布

对比案例分享 vs 三种表达风格

维度	线性叙事	组件化代码	设计画布	案例分享
目的	呈现方案细节	工程化批量生成	快速决策	真实故事+信任
图片角色	辅助说明	基本无图	图表为主	核心主角
阅读方式	顺序阅读	在线预览	扫一眼抓关键	看图读故事
制作成本	低	高	中	中(AI辅助)
内容来源	手动编写	数据拉取	AI生成	实拍+原话

核心本质差异

三种风格解决
“方案怎么呈现”

↓

案例分享解决
“别人用下来怎么样”

施工照片是信任的载体，不是装饰

第3步统一编辑·命名·压缩

马维斯统一编辑尺寸、压缩、命名，保存到统一文件夹

第4步上传媒体库·复制链接

上传到WordPress媒体库，点击每张照片复制文件URL

第5步把URL发给AI嵌入

把URL链接发给AI，AI自动嵌入HTML中的img src

规范照片命名规范

格式：地点+户型+品牌+主机型号_照片内容描述.jpg

IMG_20260609_001.jpg → 大林镇自建房日立水墅适225主机一拖8_外机排气阀位置.jpg

微信图片_20260609.jpg → 大林镇自建房日立水墅适225主机一拖8_横1.jpg

新建文件夹/QQ截图.jpg → 大林镇自建房日立水墅适225主机一拖8_竖4.jpg

关键词	含义	对应板块
外机XXX	外机安装相关	外机主管走管
横N	室内管路横向走线	室内管路铺设
竖N	线控器/末端相关	线控器预留预埋
排气阀	外机细节	外机主管走管

发布 WordPress粘贴HTML

⚠️ 不是”代码编辑器”模式！
正确做法是添加 “自定义HTML” 区块

打开WordPress后台，新建或编辑页面

在编辑器中点击 “+” 按钮

搜索 “自定义HTML” 并选中该区块

把AI生成的完整HTML代码粘贴进去

点击“预览”检查效果

确认无误后发布

💡 可按板块拆成多个”自定义HTML”区块，方便单独编辑

模板把URL发给AI的指令模板

// 步骤1：提供客户信息
客户姓名：徐先生
地址：天府新区大林镇
户型：3层自建房（本次装修2楼）
客户原话：”效果要好” “尽量配大点” “不要热水忽冷忽热”

// 步骤2：提供方案配置
外机：日立 RAS-225FPUEN2Q/M（20kW/23kW）
内机：日立零越 × 8台，超配率183%
系统：天水地水两联供 + 恒温恒压热水

// 步骤3：提供照片URL
请把这些链接替换到HTML代码里面：
https://longmai-nt.com/wp-content/uploads/2026/06/…_横1.jpg
https://longmai-nt.com/wp-content/uploads/2026/06/…_横2.jpg
https://longmai-nt.com/wp-content/uploads/2026/06/…_外机竖3.jpg
…

// 步骤4：特殊要求
不体现报价 · 使用南北富森热线 · 地暖尚未进场
      

标准照片压缩规范

用途	尺寸	文件大小
网格缩略图	800×600px	80~150KB
点击放大	1920×1440px	300~500KB

工具：TinyPNG / ImageOptim

压缩率：70%~80%

手机原图3~8MB/张，不压缩15张=60~120MB，页面加载极慢

照片分组建议

分组	张数	展示重点
外机主管走管	2~3张	主机位置、排气阀、减震
室内管路铺设	6~8张	横平竖直、保温、固定
线控器/细节	2~4张	预留预埋、成品保护

✅ 做最佳实践

✓照片统一命名 → AI能理解内容

✓让马维斯统一编辑尺寸、压缩 → 页面加载快

✓媒体库URL交给AI → 嵌入准确

✓WordPress用”自定义HTML”区块粘贴

✓7板块结构 → 信息完整、逻辑清晰

✓不体现报价 → 引流到门店咨询

❌ 不做避坑清单

✗别让工人随便命名（IMG_xxx.jpg没人看得懂）

✗别用微信压缩图（画质差，案例分享要清晰）

✗别在页面里放报价（避免在线比价）

✗别跳过人工校对（AI无法读图，描述可能不准）

✗别用”代码编辑器”模式粘贴HTML（会破坏编辑器）

✗别跳过马维斯的编辑步骤（命名+压缩是后续一切基础）

FAQ 常见问题

问题	答案
地暖还没进场，照片怎么处理？	在板块注明”地暖尚未进场”，用占位说明代替。等进场后补拍照片更新页面。
AI说”无法读取图片”怎么办？	让马维斯在命名时把内容写清楚（如_外机排气阀位置.jpg），AI根据文件名推断内容，发布前人工核对。
WordPress里直接拖图片不行吗？	可以，但命名混乱、无法压缩、AI无法读取。一篇案例可拖图，批量做必须走规范流程。
一个页面放多个”自定义HTML”区块？	可以。按板块拆成多个区块，方便单独编辑某个板块，不用每次操作整段代码。

龙脉暖通 · WordPress发布避坑全指南

WordPress 发布避坑全指南

龙脉暖通 · 纯CSS + iframe 双轨方案 · 生产环境反复验证

✅ 纯CSS优先 📦 一键粘贴发布 🔒 安全红线 📅 最后更新 2026-06-13

★ 方案选择决策图

WordPress 的 kses 过滤器会自动剥离所有 <script> 标签和 onclick 事件属性。面对这个问题，有两条路：

需要交互式页面 ↓ 交互类型是什么？

Tab切换 / FAQ / 平滑滚动 ↓ ✅ 纯CSS方案（直接粘贴）

滚动高亮 / 动态计算 / 复杂轮播 ↓ 📦 iframe方案（上传+嵌入）

✅ 纯CSS方案

直接粘贴到自定义HTML区块
不用上传文件，不用iframe
公司任何人都能操作
零脚本，kses 吃不掉任何东西

⚠️ iframe方案

需要上传HTML到服务器
需要配置高度自适应
操作门槛高，需要FTP
仅用于纯CSS无法实现的复杂交互

优先级：能用纯CSS就不用iframe。绝大多数页面交互（Tab、FAQ、锚点）纯CSS都能搞定。

0 纯CSS方案推荐首选 v2.0新增

核心思路：不用JS，kses就无从吃起

WordPress 的 kses 过滤器只吃 <script> 和事件属性。如果我们根本不用这些，把交互全部用 CSS 实现，那么粘贴进去是什么，发布出来就是什么。

三种交互的纯CSS实现

交互类型	JS方式（被吃）	纯CSS方式（安全）	原理
Tab切换	`onclick="switchTab()"`	`input:radio + label + :checked`	点label选中radio，CSS根据:checked显示对应面板
FAQ手风琴	`onclick="toggleFaq()"`	`<details> + <summary>`	HTML5原生标签，浏览器自带展开/收起
平滑滚动	`scrollTo({behavior:'smooth'})`	`scroll-behavior:smooth`	CSS一行搞定
锚点偏移	`JS计算navHeight`	`scroll-margin-top:140px`	CSS纯静态补偿

纯CSS做不了的（才用iframe）

滚动时导航自动高亮当前章节（需要scroll事件监听）
FAQ手风琴只能展开一个（details/summary可同时开多个）
动态计算元素高度
复杂图片轮播（多组独立滑动）

FAQ可同时开多个，其实是更好的用户体验，不算缺点。

0.1 Tab切换：:checked 技巧

HTML结构

<!– 隐藏的radio控件 –>
<input type=”radio” name=”coreTab” id=”coreTab0″ checked style=”display:none”>
<input type=”radio” name=”coreTab” id=”coreTab1″ style=”display:none”>
<input type=”radio” name=”coreTab” id=”coreTab2″ style=”display:none”>

<!– Tab按钮（label关联radio） –>
<div class=”tab-bar”>
  <label for=”coreTab0″ class=”tab-btn”>核心科技</label>
  <label for=”coreTab1″ class=”tab-btn”>舒适体验</label>
  <label for=”coreTab2″ class=”tab-btn”>智能控制</label>
</div>

<!– 面板 –>
<div class=”tab-panels”>
  <div class=”tab-pane pane-0″>面板0内容</div>
  <div class=”tab-pane pane-1″>面板1内容</div>
  <div class=”tab-pane pane-2″>面板2内容</div>
</div>

CSS样式

/* 默认所有面板隐藏 */
.tab-pane { display: none; }

/* :checked 对应的面板显示 */
#coreTab0:checked ~ .tab-panels .pane-0,
#coreTab1:checked ~ .tab-panels .pane-1,
#coreTab2:checked ~ .tab-panels .pane-2 {
  display: block;
}

/* :checked 对应的按钮高亮 */
#coreTab0:checked ~ .tab-bar label[for=”coreTab0″],
#coreTab1:checked ~ .tab-bar label[for=”coreTab1″],
#coreTab2:checked ~ .tab-bar label[for=”coreTab2″] {
  background: var(–primary);
  color: #fff;
}

radio、tab-bar、tab-panels 必须是同级兄弟元素，`:checked ~` 才能生效。这是此技巧唯一的结构性约束。

0.2 FAQ手风琴：details / summary

HTML结构

<details open>
  <summary>常见问题一：安装周期多久？</summary>
  <div class=”faq-body”>
    一般3-5天完成全部安装调试，具体取决于户型和系统复杂度。
  </div>
</details>

<details>
  <summary>常见问题二：质保几年？</summary>
  <div class=”faq-body”>
    主机质保5年，系统质保2年，终身维护。
  </div>
</details>

CSS美化

details {
  border: 1px solid var(–border);
  border-radius: 8px;
  margin: 8px 0;
}

summary {
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;          /* 去掉默认三角 */
}

summary::before {
  content: ‘▶’;               /* 自定义箭头 */
  margin-right: 8px;
  transition: transform .2s;
}

details[open] summary::before {
  transform: rotate(90deg);  /* 展开时箭头右转 */
}

.faq-body {
  padding: 12px 16px;
  border-top: 1px solid var(–border);
}

加 open 属性的 details 默认展开。不加则默认收起。浏览器原生支持，无需任何JS。

0.3 平滑滚动 + 锚点偏移

两行CSS搞定

/* 全局平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 锚点偏移：防止固定导航栏遮挡目标位置 */
.chapter, [id] {
  scroll-margin-top: 140px;   /* 80px主题header + 60px导航栏 */
}

scroll-margin-top 的值 = WordPress主题header高度 + 你的固定导航栏高度。龙脉官网(Astra主题)header约80px，导航栏约60px，合计140px。

0.4 发布三步法公司任何人都能操作

1 AI生成HTML 纯CSS版，零脚本

→

2 Ctrl+A → Ctrl+C 打开文件全选复制

→

3 自定义HTML粘贴 WordPress区块发布

详细步骤

让AI生成纯CSS版HTML文件（确认没有 <script> 和 onclick）
打开HTML文件，Ctrl+A 全选 → Ctrl+C 复制
WordPress后台编辑目标页面，删除旧的自定义HTML区块内容
新建“自定义HTML”区块（不是”代码编辑器”模式！）
Ctrl+V 粘贴，点预览确认效果
确认无误后发布

不是”代码编辑器”模式！正确做法是添加”自定义HTML”区块。代码编辑器模式会破坏整个编辑器。

1 iframe嵌入方案备选·复杂交互

以下方案仅用于纯CSS无法实现的复杂交互（滚动时导航自动高亮、动态计算高度、复杂多组轮播等）。对于Tab切换、FAQ手风琴、平滑滚动等，优先使用纯CSS方案。

3步流程

1 创建自包含HTML CSS+JS+HTML全写在一个文件

→

2 上传到服务器 wp-content/uploads/

→

3 iframe嵌入自定义HTML区块

核心原理

WordPress 的 kses 过滤器无法干涉 iframe 内部。iframe 是独立沙箱，JS 和 CSS 100% 可用。

WordPress端嵌入代码

<iframe
  id=”solutionFrame”
  src=”https://你的域名.com/wp-content/uploads/2026/06/文件名.html”
  style=”width:100%;border:none;display:block”
  scrolling=”no”>
</iframe>

关键避坑

文件名用英文（如 zunrui-detail.html），中文路径可能报404
图片必须用 https:// 开头的绝对URL
iframe内避免 position:fixed，改用 position:sticky
触摸事件监听器标记 {passive:true}

1.1 iframe高度自适应

方案A：postMessage 动态通信（推荐）

HTML文件内部末尾添加：

// ============ 放在 HTML 的 <script> 末尾 ============
(function() {
  function sendHeight() {
    var h = Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight,
      document.body.offsetHeight,
      document.documentElement.offsetHeight
    );
    window.parent.postMessage({ type: ‘setIframeHeight’, height: h }, ‘*’);
  }
  window.addEventListener(‘load’, function() {
    sendHeight();
    setTimeout(sendHeight, 500);
    setTimeout(sendHeight, 1500);
  });
  window.addEventListener(‘resize’, sendHeight);
  if (window.ResizeObserver) {
    new ResizeObserver(function() { sendHeight(); }).observe(document.body);
  }
})();

WordPress端iframe后面加监听：

<iframe id=”solutionFrame” src=”…”
        style=”width:100%;border:none;display:block”
        scrolling=”no”></iframe>

<script>
window.addEventListener(‘message’, function(e) {
  if (e.data && e.data.type === ‘setIframeHeight’) {
    var frame = document.getElementById(‘solutionFrame’);
    if (frame) frame.style.height = e.data.height + ‘px’;
  }
});
</script>

方案B：固定大高度（简单粗暴）

如果WordPress连外层script也吃掉，直接设一个足够大的高度：

<iframe
  src=”https://你的域名.com/wp-content/uploads/2026/06/文件.html”
  style=”width:100%;border:none;display:block;min-height:8000px”
  scrolling=”auto”>
</iframe>

2 CSS选择器陷阱 ★ 头号Bug来源

致命错误：~ 兄弟选择器 vs 空格后代选择器

这是龙脉项目导致”智能方案对比”Tab完全失效的Bug。

<!– DOM结构 –>
<div id=”compTabs”>              <!– 容器 –>
  <div class=”comp-tabs”>       <!– Tab按钮行 –>
    <button class=”comp-tab”>…</button>
  </div>
  <div class=”plan-body”>       <!– 面板容器 –>
    <div class=”tab-pane”>…</div>  <!– 后代！不是兄弟！–>
    <div class=”tab-pane”>…</div>
  </div>
</div>

选择器	含义	结果
`#compTabs .tab-pane`	后代选择器（空格）	✅ 找到3个面板
`#compTabs > .tab-pane`	子选择器	❌ 空！.tab-pane在.plan-body里
`#compTabs ~ .tab-pane`	兄弟选择器	❌ 空！.tab-pane是后代不是兄弟

核心规则：Tab面板 .tab-pane 几乎永远嵌在 .plan-body 或类似容器里，是后代不是兄弟。选择器用空格。

选择器速查表

选择器	含义	何时使用
`A B`	A的后代B（任意深度）	tab-pane在容器内时（最常用）
`A > B`	A的直接子元素B	明确知道父子关系时
`A ~ B`	A的同级后续兄弟B	仅当B和A在DOM同一层级时
`A + B`	A的紧邻下一个兄弟B	极少使用

首选ID查询

当结构允许时，优先使用 getElementById，它不受嵌套层级影响：

// ✅ 最可靠的方式
var track = document.getElementById(‘prodTrack’);
var slider = document.getElementById(‘prodSlider’);

3 WordPress主题CSS冲突防控 ★

Hero标题颜色4层保护

龙脉暖通（OceanWP/Astra主题）生产环境反复调试总结：

/* 第1层：容器自身 */
.hero-section {
  background: linear-gradient(135deg, #1a3a4a, #0d2130);
  color: #fff !important;
}

/* 第2层：所有直接文本元素逐一声明 */
.hero-title, .hero-subtitle, .hero-desc, .hero-meta,
.hero-section h1, .hero-section h2, .hero-section h3,
.hero-section p, .hero-section span, .hero-section li {
  color: #fff !important;
}

/* 第3层：次级文字（半透明） */
.hero-section .dim-text {
  color: rgba(255,255,255,0.75) !important;
}

/* 第4层：通配符兜底 */
.hero-section * {
  color: #fff !important;
}

容器宽度对齐

:root { –maxw: 1400px; }  /* ← 改为目标网站的容器宽度 */

.wrap {
  max-width: var(–maxw);
  margin: 0 auto;
  padding: 0 24px;
}

position: fixed → sticky

iframe内 position:fixed 会相对iframe视口定位，产生非预期偏移。在自定义HTML块中同理，改用 sticky：

❌ 避免 .geo-nav { position: fixed; top: 0; }

✅ 推荐 .geo-nav { position: sticky; top: 0; z-index: 100; }

4 固定悬浮导航栏滚动时始终可见

原理

position: sticky 的元素在滚动到指定位置前正常流布局，到达后”钉”住不动。

关键CSS

.side-nav {
  position: sticky;
  top: 80px;        /* 距视口顶部80px（让出Astra/OceanWP主题header） */
  z-index: 1000;    /* 层级最高，内容从下方穿过 */
  max-height: calc(100vh – 80px – 32px);
  overflow-y: auto;  /* 导航太长时自身可滚动 */
}

top值怎么定？

主题	Header高度	sticky top值
Astra（龙脉官网）	~80px	`top: 80px`
OceanWP	~70px	`top: 70px`
无固定header	0	`top: 0`

锚点偏移配合

/* 防止导航栏遮挡锚点目标 */
html {
  scroll-behavior: smooth;
  scroll-margin-top: 140px;  /* 80px header + 60px nav */
}

[id] {
  scroll-margin-top: 140px;
}

position: sticky 比 position: fixed 更好：不需要手动补偿内容偏移，元素自然在文档流中。

5 安全红线：XML-RPC 与远程修改必读

发生了什么

AI助手（马维斯）通过 WordPress 的 XML-RPC 接口（xmlrpc.php）直接调用 wp.editPost 修改了页面内容，无需登录WordPress后台。

❌ XML-RPC远程修改的风险

没有”确认环节”，改了就是改了
改错后线上页面直接乱掉
没有备份对比，无法一键回退
凭据泄露=任何人都能改你的网站

✅ 安全做法：AI生成 + 人工粘贴

AI只生成代码，不碰网站
你登录后台，确认后再粘贴
粘贴前可预览，不对就不贴
钥匙始终在你手里

立刻做3件事

删除Application Password：WordPress后台 → 用户 → 个人资料 → Application Passwords → 全部删除
关闭XML-RPC：主题 functions.php 末尾加 add_filter('xmlrpc_enabled', '__return_false');
改强密码：如果密码是弱密码，趁现在改掉

标准工作流：AI来做 → 你来看 → 你来贴 → 你来发。每一步都在你手里。

6 精确替换原则马维斯翻车教训

两次修改对比

	❌ 第一次（翻车）	✅ 第二次（正常）
操作方式	重构了整个 post_content，把 <div class=”entry-content”> 外层也塞了进去	只对 post_content 做精确字符串替换（img src + alt）
后果	嵌套 entry-content 容器，CSS选择器冲突、布局塌陷、导航失效	零结构改动，CSS和DOM原封不动
根因	没有区分”外层容器”和”内部内容”	只替换目标字符串，不动其他任何东西

铁律

不要重构整个 post_content，只做精确替换
不要把 WordPress 主题生成的 <div class=”entry-content”> 也塞进去
不要假设 AI 能看到渲染效果——AI 看不到页面，改完必须人工验证

即使未来恢复远程修改能力，也必须遵循：精确替换，绝不重构。改完人工预览确认后再生效。

7 自检清单

纯CSS方案自检

所有交互不依赖 JS（用 :checked 或 details/summary 实现）
没有 <script> 标签和 onclick 事件
在本地浏览器验证通过
图片使用绝对 URL（https:// 开头）
Hero/深色背景文字颜色使用 !important 保护
固定导航用 sticky 而非 fixed
锚点设置了 scroll-margin-top 补偿
直接粘贴到自定义HTML区块即可发布

iframe方案自检

所有 JS 交互已在本地浏览器验证通过
每个 querySelectorAll 选择器路径与 DOM 嵌套一致
没有误用 ~ 兄弟选择器指向后代元素
图片使用绝对 URL
Hero 区域文字颜色 4 层 !important 保护
没有 position: fixed，改用 sticky
触摸事件监听器标记了 {passive: true}
HTML 文件名用英文，已上传到 wp-content/uploads/
iframe 高度自适应代码已配置

8 AI指令模板复制给AI智能体

纯CSS方案指令

展开：纯CSS方案AI指令

你是一个 WordPress 页面构建专家。在为我创建嵌入 WordPress 的交互式 HTML 页面时，必须遵守以下规则：

【整体流程】
1. 所有内容写入单个 HTML 文件
2. 零 JavaScript：不使用 <script> 标签、不使用 onclick 等事件属性
3. 发布方式：直接粘贴到 WordPress 自定义HTML区块

【交互实现】
– Tab切换 → 隐藏radio + label[for] + CSS :checked 伪类
– FAQ手风琴 → HTML5 <details> + <summary> 原生标签
– 平滑滚动 → CSS scroll-behavior: smooth
– 锚点偏移 → CSS scroll-margin-top: 140px

【CSS 选择器铁律】
– 找 Tab 面板用「空格」（后代选择器）
– 严禁用「~」（兄弟选择器）找面板
– :checked 技巧要求 radio、tab-bar、tab-panels 是同级兄弟

【Hero 颜色保护】
– 深色背景 Hero 必须 4 层保护，每层都加 !important

【CSS 变量隔离】
– 所有变量在 :root 中自建，不引用任何 wp-* 或 theme-* 变量

【固定导航】
– 用 position: sticky 而非 fixed
– top 值 = WordPress主题header高度（Astra约80px）
– 配合 scroll-margin-top 补偿锚点偏移

iframe方案指令

展开：iframe方案AI指令

你是一个 WordPress 智能滑块构建专家。在为我创建需要复杂JS交互的嵌入页面时，必须遵守以下规则：

【整体流程】
1. 所有内容写入单个 HTML 文件（CSS + JS + HTML）
2. 发布方式：上传 HTML 到服务器 → WordPress 页面中用 iframe 嵌入
3. iframe 内必须包含高度自适应 postMessage 代码

【CSS 选择器铁律】
– 找 Tab 面板用「空格」（后代选择器）
– 严禁用「~」（兄弟选择器）找面板

【Hero 颜色保护】
– 深色背景 Hero 必须 4 层保护，每层都加 !important

【安全规则】
– 不直接修改 WordPress 页面内容
– 只生成代码，由人工粘贴发布

9 附录：案例分享创建指南 · 设计画布

6步标准化流程

1 下载照片 D:/官网需要的资料/

→

2 马维斯编辑命名·压缩·尺寸

→

3 上传媒体库添加新文件

4 复制URL给AI 每张照片链接

→

5 AI嵌入HTML 替换img src

→

6 粘贴发布自定义HTML区块

核心参数

维度	内容
照片建议	10~15张/案例
压缩标准	80~150KB
发布方式	自定义HTML区块
效率提升	2h → 30min

照片命名规范

格式：地点+户型+品牌+主机型号_照片内容描述.jpg

原始文件名	规范命名
IMG_20260609_001.jpg	大林镇自建房日立水墅适225主机一拖8_外机排气阀位置.jpg
微信图片_20260609.jpg	大林镇自建房日立水墅适225主机一拖8_横1.jpg

照片压缩规范

用途	尺寸	文件大小
网格缩略图	800×600px	80~150KB
点击放大	1920×1440px	300~500KB

给AI的指令模板

展开：案例分享AI指令模板

// 步骤1：提供客户信息
客户姓名：徐先生
地址：天府新区大林镇
户型：3层自建房（本次装修2楼）
客户原话：”效果要好” “尽量配大点” “不要热水忽冷忽热”

// 步骤2：提供方案配置
外机：日立 RAS-225FPUEN2Q/M（20kW/23kW）
内机：日立零越 × 8台，超配率183%
系统：天水地水两联供 + 恒温恒压热水

// 步骤3：提供照片URL
请把这些链接替换到HTML代码里面：
https://longmai-nt.com/wp-content/uploads/2026/06/…_横1.jpg
https://longmai-nt.com/wp-content/uploads/2026/06/…_横2.jpg
…

// 步骤4：特殊要求
不体现报价 · 使用南北富森热线 · 地暖尚未进场

最佳实践 vs 避坑

✅ 做

照片统一命名 → AI能理解内容
统一编辑尺寸、压缩 → 页面加载快
媒体库URL交给AI → 嵌入准确
WordPress用”自定义HTML”区块粘贴
7板块结构 → 信息完整逻辑清晰
不体现报价 → 引流到门店咨询

❌ 不做

别让工人随便命名（IMG_xxx.jpg没人看得懂）
别用微信压缩图（画质差）
别在页面里放报价（避免在线比价）
别跳过人工校对（AI无法读图）
别用”代码编辑器”模式粘贴HTML
别跳过马维斯的编辑步骤

从方案到上线的完整流程 · 图片嵌入解决方案

从方案到上线的完整流程 · 图片嵌入解决方案

WordPress 画布页面构建及避坑指南+

WordPress 发布避坑全指南

龙脉暖通 · 纯CSS + iframe 双轨方案 · 生产环境反复验证

核心思路：不用JS，kses就无从吃起

三种交互的纯CSS实现

纯CSS做不了的（才用iframe）

HTML结构

CSS样式

HTML结构

CSS美化

两行CSS搞定

详细步骤

3步流程

核心原理

WordPress端嵌入代码

关键避坑

方案A：postMessage 动态通信（推荐）

方案B：固定大高度（简单粗暴）

致命错误：~ 兄弟选择器 vs 空格 后代选择器

选择器速查表

首选ID查询

Hero标题颜色4层保护

容器宽度对齐

position: fixed → sticky

原理

关键CSS

top值怎么定？

锚点偏移配合

发生了什么

立刻做3件事

两次修改对比

铁律

纯CSS方案自检

iframe方案自检

纯CSS方案指令

iframe方案指令

6步标准化流程

核心参数

照片命名规范

照片压缩规范

给AI的指令模板

最佳实践 vs 避坑

致命错误：~ 兄弟选择器 vs 空格后代选择器