版本：V1.0
更新日期：2026年5月15日
贡献者：官网12号（老官网经验）、官网13号（新知识经验）、官网14号（可视化搭建实战）
适用对象：所有参与龙脉官网建设的DS、编辑、管理者
一、核心原则：从“代码思维”到“模块思维”
1.1 我们的转型
| 阶段 | 方式 | 代表页面 | 问题 |
|---|
| 过去 | 纯HTML代码写死 | 旧首页、case.html | 改一个字就可能崩布局，不敢动 |
| 现在 | 古腾堡可视化模块 | 新首页、服务保障聚合页 | 拖拽搭建，换链接不影响结构 |
关键认知：不是“不会代码才用可视化”，而是可视化更稳定、更可维护。用模块搭建的页面，后来者打开就能看懂结构，不用去猜代码逻辑。
1.2 三大铁律
- 永远用可视化编辑器，不切代码模式。只有在删除卡死的模块时，才临时切到“代码编辑器”精准清除，然后立刻切回可视化。
- 一个模块一个坑。标题用标题模块，段落用段落模块，按钮用按钮模块，不用HTML块手写。
- 样式问题去额外CSS统一解决，不在单个模块里写内联style。
二、页面搭建标准流程
2.1 新建页面
- 【页面】→【新建页面】，标题填好。
- 先不要加任何内容，检查右侧“页面设置”里的模板是否为“默认模板”。如果是“空白模板”，导航栏和页脚不会显示。
- 如果找不到模板选项，说明主题自动处理，跳过这步。
2.2 按板块顺序搭建
首页标准结构（从上到下）：
| 序号 | 板块 | 使用模块 | 锚点 |
|---|
| 1 | 导航栏 | 主题自动生成，不手动加 | 无 |
| 2 | 英雄栏 | 封面 (Cover) | 无 |
| 3 | 搜索条 | 搜索 (Search) | 无 |
| 4 | 轮播区 | Smart Slider 3 | 无 |
| 5 | GEO理论窗口 | 栏目 (Columns) 三列 | 无 |
| 6 | 业务板块 | 标题 + 栏目 (Columns) | 无 |
| 7 | 产品中心 | 标题 + 栏目 (Columns) | products |
| 8 | 壁挂炉品牌 | 标题 + 栏目 (Columns) | boilers |
| 9 | 官方授权 | 标题 + 图像 | authorization |
| 10 | 精工六步法+2 | 标题 + 表格 (Table) | installation |
| 11 | 服务保障入口 | 标题 + 按钮 | 无 |
| 12 | 门店地址 | 标题 + 栏目 (Columns) 两列 | store-details |
| 13 | 页脚 | 段落模块，手动放备案号 | 无 |
2.3 内链规范
所有内部链接使用完整路径，不依赖短链接：
| 页面 | 链接格式 |
|---|
| 页面（朴素模式） | /?page_id=625 |
| 文章 | /?p=1159 |
| 锚点 | https://longmai-nt.com/#authorization |
| 静态页 | /case.html（老页面）或 /guide/index.html |
铁律：每次创建新页面后，立刻记下页面ID，更新内链清单。
三、古腾堡编辑器避坑指南
3.1 栏目 vs 组 vs 列表
| 模块 | 用途 | 常见误用 |
|---|
| 栏目 (Columns) | 横向并排多列 | 不要当表格用 |
| 组 (Group) | 纵向堆叠多个模块，绑成一个整体 | 不要当栏目用 |
| 列表 (List) | 纯文字列表项 | 不要当栏目用 |
| 表格 (Table) | 数据对比、步骤展示 | 不要当栏目用 |
3.2 常见错误
| 错误 | 症状 | 解决 |
|---|
| 栏目开启了“同步列” | 左右两列内容会互相复制 | 关掉“同步列”开关 |
| 段落模块默认左对齐 | 文字靠左，不居中 | 工具栏选“居中对齐” |
| 图片尺寸不一致 | 下面标题错位 | 统一设置图片宽度 |
| 模块删除不掉 | 点击删除没反应 | 切到“代码编辑器”精准删除对应代码 |
3.3 图片规范
| 项目 | 标准 |
|---|
| 比例 | 统一 3:4 |
| alt属性 | 每张必填，包含关键词 |
| 路径 | /images/ 开头，不用IP地址 |
| 版权 | 实拍优先，厂家授权次之，严禁直接下载官网图 |
四、Smart Slider 3 轮播使用指南
4.1 创建滑块
- 后台左侧菜单 → Smart Slider → 新建滑块。
- 名称自定，类型选“简单”。
- 画布尺寸：宽度1024px，高度根据首页容器调整（建议 300-500px）。
- 限制轮播宽度：三个断点全部开启。
- 布局选盒装。
4.2 添加幻灯片
- 点击 “添加幻灯片”，选择 “发布” 模式（不用“空白”）。
- 在幻灯片里添加图层：标题、文本、按钮。
- 按钮链接到对应的页面或文章。
- 每帧都确认文字颜色和背景有足够对比度。
4.3 常见问题
| 问题 | 原因 | 解决 |
|---|
| 手机端页面左右滑动 | 轮播宽度大于容器宽度 | 宽度设为1024px，开启断点限制 |
| 底部有重复文字条 | 轮播计数功能开启 | 关闭“文字条”或“轮播图计数” |
| 轮播不自动播放 | 自动播放关闭 | 开启自动播放，设置间隔4000-8000ms |
| 轮播一片空白 | 幻灯片没有添加图层 | 每帧添加标题、文本、按钮图层 |
| 删除不掉滑块 | 插件兼容性问题 | 切代码编辑器，删除 <!-- wp:smartslider3/... 整段 |
五、菜单管理
5.1 核心原则
只添加核心页面到菜单，不勾选“自动添加页面”。
5.2 标准菜单结构
| 菜单项 | 链接 |
|---|
| 首页 | / |
| 知识中心 | /knowledge/ |
| 产品中心 | /guide/index.html |
| 服务保障 | /?page_id=625 |
| 案例展示 | /?page_id=待定 |
| 关于我们 | /about.html |
5.3 避坑
| 错误 | 后果 | 解决 |
|---|
| 勾选“自动添加页面” | 所有公开页面暴露在菜单里 | 取消勾选 |
| 菜单里放了密码保护页面 | 手机端三杠仍显示标题 | 删除菜单项 |
| 删除菜单后微信端不更新 | 微信缓存 | 用 debugx5.qq.com 清缓存 |
六、SEO基础配置
6.1 每页必填
| 项目 | 标准 |
|---|
| SEO标题 | 包含完整关键词，品牌名在前 |
| 元描述 | 120-156字符，包含关键词 |
| 图片alt | 每张必填，描述+关键词 |
6.2 首页SEO标准示例
- SEO标题：
龙脉暖通 · 成都中央空调地暖暖气片新风净水 | 日立官方授权
- 元描述：
龙脉暖通是成都22年家庭舒适节能系统服务商，提供日立中央空调、地暖、暖气片、新风、净水、软水的一站式设计安装服务。日立官方授权，精工六步法+2标准施工，会员终身服务。
七、备份与安全
7.1 修改前必须备份
无论是改页面、装插件、调设置，操作前先确认有备份手段：
- WordPress备份插件（如 UpdraftPlus）
- 宝塔面板手动备份网站文件
7.2 密码保护
敏感页面（指令、价格库、策略卡）必须设置密码保护，且不加入任何菜单。
八、经验教训清单
| 序号 | 教训 | 具体案例 |
|---|
| 1 | 不要在可视化编辑器里手写HTML导航栏 | 旧首页导航栏改一个字导致布局崩溃 |
| 2 | 不要勾选“自动添加页面” | 手机端菜单暴露了全部内部页面 |
| 3 | 插件先验证删除功能再正式用 | Super Block Slider添加后删不掉 |
| 4 | 轮播宽度不能超过容器宽度 | 1200px轮播在1024px容器里导致手机端滑动 |
| 5 | 密码保护页面不加入菜单 | 菜单里仍显示标题，虽无法访问但不安全 |
| 6 | 每次新建页面立刻记ID | 多次忘记ID导致内链出错 |
| 7 | 老页面分批重建，不一次性替换 | 先重建首页，再逐步处理case.html等 |
九、图片处理标准流水线
所有上传到官网的图片，必须经过以下四步处理。这是保证页面加载速度和视觉统一性的硬性要求。
| 步骤 | 操作 | 工具 | 标准 |
|---|
| 第一步：统一比例 | 裁剪为统一比例 | 美图秀秀/手机相册编辑 | 3:4 或 4:3，全站统一，不混用 |
| 第二步：压缩 | 减小文件体积 | tinypng.com | 压缩至原大小50%以下，肉眼无明显画质损失 |
| 第三步：规范命名 | 重命名文件 | — | 用“内容描述+日期”格式，如 d10-install-20260515.jpg，禁止用“微信图片_随机数”之类的原始名 |
| 第四步：上传并填写alt | 上传到WordPress并补充SEO信息 | WordPress媒体库 | 每张图片必填替代文本（alt），包含关键词，如“龙脉暖通日立中央空调安装现场” |
命名规范示例
| 场景 | 正确命名 | 错误命名 |
|---|
| D10工地安装照 | d10-install-20260515.jpg | IMG_1234.jpg |
| 授权证书 | license-dealer-2026.jpg | 微信图片_20260504150504.jpg |
| 梁总档案封面 | liang-wuheng-cover.jpg | 图片1.png |
严禁行为
| 禁止 | 原因 |
|---|
| 直接上传手机原图 | 文件过大（可能5MB+），拖慢页面加载 |
| 不填alt属性 | SEO扣分，AI无法识别图片内容 |
| 混用不同比例图片 | 页面排版错乱，标题不对齐 |
河流已汇成。 缪老师在长达一个月的时间，跟四个DS合作，从无到有、从,0到1，建设出了龙脉暖通完整版官网。缪老师把做官网WordPress的踩过的坑、形成的经验、包括各种插件的使用，汇总成一条经验的河流，可以灌溉所有的来饮。这篇文章，把这一个多月的每一块鹅卵石——轮播的坑、菜单的坑、栏目的坑——都铺在了河床上。后来者涉水而过时，至少知道哪里深、哪里浅。
