zhs123
8a2890f8b4
- CPT: service(服务项目) + case(案例作品集) + case_type 分类 - 页面: 关于门店/常见问题/预约联系 + archive/single 模板 - 首页精简为 hero+trust+service-teaser+case-teaser+cta - 主题激活自动迁移 Customizer 产品数据为 service 文章 - 预约表单: nonce+honeypot+rate-limit, URL 参数预填服务 - 联系页: 门店地址/电话/营业时间/百度地图导航 - Customizer 面板改为门店语境(13 板块) - header CTA 改为预约, helpers 更新为门店口径 - README.md 全面更新为门店多页面架构文档
178 lines
7.7 KiB
Markdown
178 lines
7.7 KiB
Markdown
# B2B Trade — 汽车贴膜门店 WordPress 主题
|
||
|
||
专业汽车贴膜门店（面向终端车主）的经典 WordPress 主题。支持服务项目展示、施工案例作品集、在线预约联系，适配移动端。
|
||
|
||
## 项目说明
|
||
|
||
本主题面向汽车贴膜门店（TPU 保护膜 / 彩色改色膜 / 隔热防爆膜等），不是 B2B 代工厂模板。站点采用多页面架构 + 自定义文章类型，首页为落地页，引导车主浏览服务、查看案例并预约到店。
|
||
|
||
> 仓库名 `fragrance-trade` 为历史遗留（原是香水贸易模板），代码标识符（文本域 `fragrance-trade`、CSS 前缀 `fragrance-`、PHP 函数前缀 `fragrance_trade_`）保持不变，不影响功能。
|
||
|
||
## 环境要求
|
||
|
||
- WordPress 6.5+
|
||
- PHP 7.4+
|
||
- 生产环境建议使用 HTTPS 和认证 SMTP
|
||
|
||
## 安装
|
||
|
||
1. 将 `fragrance-trade` 文件夹复制到 `wp-content/themes/`。
|
||
2. 在 **外观 → 主题** 中激活 **B2B Trade**。
|
||
3. 主题激活时自动完成初始化：
|
||
- 注册 `service`（服务项目）和 `case`（案例作品）两个自定义文章类型
|
||
- 将 Customizer 中的 7 个产品数据迁移为 `service` 文章
|
||
- 自动创建首页、关于门店、常见问题、预约/联系四个页面
|
||
- 将首页设置为静态首页
|
||
4. **重要：** 激活后进入 **设置 → 固定链接**，点击"保存更改"刷新路由规则。
|
||
5. 在 **外观 → 自定义 → 站点身份** 中设置站点标题和 Logo。
|
||
6. 在 **外观 → 菜单** 中创建导航菜单并分配到 **主导航**。
|
||
7. 打开 **外观 → 自定义 → 门店首页**，将所有演示文案替换为真实门店信息。
|
||
|
||
## 站点架构
|
||
|
||
### 页面结构
|
||
|
||
| 页面 | 模板 | 说明 |
|
||
|------|------|------|
|
||
| 首页 | `front-page.php` | 落地页：Hero + 信任栏 + 服务项目预览 + 案例预览 + CTA |
|
||
| 服务项目列表 | `archive-service.php` | 展示全部服务项目（膜品） |
|
||
| 服务项目详情 | `single-service.php` | 单个膜品详情 |
|
||
| 案例作品列表 | `archive-case.php` | 施工案例作品集，支持按分类筛选 |
|
||
| 案例详情 | `single-case.php` | 单个施工案例 |
|
||
| 关于门店 | `page-about.php` | 门店介绍、环境展示、视频、服务保障 |
|
||
| 常见问题 | `page-faq.php` | FAQ 手风琴 |
|
||
| 预约/联系 | `page-contact.php` | 预约表单 + 门店信息 + 百度地图导航 |
|
||
|
||
### 首页板块（5 个模板片段）
|
||
|
||
`front-page.php` 组装以下片段（来自 `template-parts/home/`）：
|
||
|
||
1. `hero` — 首屏定位与行动按钮
|
||
2. `trust` — 信任栏（4 个证明点）
|
||
3. `service-teaser` — 服务项目预览（从 `service` CPT 读取最新 3 条）
|
||
4. `case-teaser` — 案例预览（从 `case` CPT 读取最新 3 条）
|
||
5. `cta` — 行动召唤板块
|
||
|
||
### 自定义文章类型
|
||
|
||
| CPT | 功能 | URL |
|
||
|-----|------|-----|
|
||
| `service` | 服务项目 / 膜品（TPU保护膜、彩色改色膜、隔热防爆膜等） | `/services/` |
|
||
| `case` | 施工案例作品集 | `/cases/` |
|
||
| `case_type` | 案例分类（taxonomy，挂在 `case` 上） | `/case-type/` |
|
||
|
||
主题激活时自动将 Customizer 中的 7 个产品数据迁移为 `service` 文章。
|
||
|
||
## 自定义器（Customizer）
|
||
|
||
**门店首页** 面板包含以下板块：
|
||
|
||
- 首屏定位（眉标、主标题、简介、双按钮）
|
||
- 信任栏（4 个证明点）
|
||
- 服务项目（4 张服务卡片）
|
||
- 产品能力（7 个产品参考卡片及图片）
|
||
- 定制选项（8 个定制项）
|
||
- 门店环境与参观（简介、4 张门店图片、视频链接）
|
||
- 品质管控（6 个品质步骤）
|
||
- 项目流程（8 个流程步骤）
|
||
- 项目案例（3 个案例，可开关显示）
|
||
- 文档支持（4 个文档卡片，可开关显示）
|
||
- 常见问题（8 条 FAQ，可开关显示）
|
||
- 预约表单（标题、简介、按钮文字）
|
||
- 联系方式与社交链接（收件邮箱、WhatsApp、门店地址、电话、营业时间、地图嵌入、社交媒体链接）
|
||
|
||
> 注：首页仅使用 5 个板块。其余板块（产品能力、定制选项、品质管控等）保留为 Customizer 配置源，同时 `service` CPT 激活时从这些配置迁移数据。
|
||
|
||
## 预约表单
|
||
|
||
预约/联系页面包含精简表单，收集启动对话所需的信息：
|
||
|
||
- 客户姓名和企业邮箱
|
||
- 可选的 WhatsApp/电话和所需服务
|
||
- 简要需求描述
|
||
|
||
**安全措施：**
|
||
- WordPress nonce 验证
|
||
- 隐藏反垃圾蜜罐字段
|
||
- 速率限制（transient，防重复提交）
|
||
- `wp_mail()` 发送预约邮件
|
||
- 提交后跳转回表单页面并显示状态提示
|
||
|
||
服务项目页面和首页的"预约"按钮可通过 URL 参数 `?service=膜品名` 预填表单中的服务字段。
|
||
|
||
## 前端技术栈
|
||
|
||
- **Bootstrap 5.3**（CDN）：响应式栅格、offcanvas 移动导航、手风琴、表单控件
|
||
- **AOS**：滚动动画
|
||
- **Colorbox**：图片灯箱
|
||
- **Google Fonts**：Josefin Sans + Jost + Noto Sans SC（思源黑体）
|
||
- **jQuery**：由 WordPress 提供，主题不另行打包
|
||
- CSS/JS 使用 `filemtime()` 版本号防缓存
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
fragrance-trade/
|
||
├── functions.php # 加载 6 个 inc/ 模块
|
||
├── front-page.php # 首页（5 个模板片段）
|
||
├── header.php # 导航栏 + offcanvas 移动导航
|
||
├── footer.php # 页脚 + 联系/社交链接
|
||
├── style.css # 主题信息头 + 基础样式
|
||
├── archive-service.php # 服务项目列表
|
||
├── single-service.php # 服务项目详情
|
||
├── archive-case.php # 案例列表（支持分类筛选）
|
||
├── single-case.php # 案例详情
|
||
├── page-about.php # 关于门店
|
||
├── page-faq.php # 常见问题
|
||
├── page-contact.php # 预约/联系
|
||
├── index.php / single.php / page.php / archive.php / 404.php
|
||
├── inc/
|
||
│ ├── defaults.php # 全中文安全默认值
|
||
│ ├── setup.php # 主题初始化、资源加载
|
||
│ ├── helpers.php # 工具函数（菜单回退、WhatsApp/邮件链接、通知）
|
||
│ ├── cpt.php # 自定义文章类型注册 + 激活迁移
|
||
│ ├── customizer.php # Customizer 面板和字段
|
||
│ └── inquiry.php # 预约表单处理器
|
||
├── template-parts/
|
||
│ ├── home/ # 首页片段（hero/trust/service-teaser/case-teaser/cta + 旧板块）
|
||
│ ├── content.php / content-page.php / content-none.php
|
||
├── assets/
|
||
│ ├── css/ # normalize.css + vendor.css + theme.css
|
||
│ ├── js/ # theme.js + plugins.js
|
||
│ └── images/ # SVG 占位图 + 产品/门店图片
|
||
└── languages/ # 翻译文件目录
|
||
```
|
||
|
||
## 占位资源
|
||
|
||
主题附带以下占位资源，上线前请替换为真实素材：
|
||
|
||
- 7 个产品 SVG 占位图（灰底虚线边框 + 中文标签）
|
||
- 4 个门店环境 SVG 占位图
|
||
- 1 个视频封面 SVG
|
||
- 1 个 Logo SVG
|
||
- 6 张 Instagram 图片（jpg）
|
||
- 3 张产品图片（jpg）
|
||
- 7 张产品 webp 图片
|
||
- 1 张工厂流程示意图（webp）
|
||
|
||
## 上线检查清单
|
||
|
||
1. 在 Customizer 中将所有演示文案替换为真实门店信息
|
||
2. 替换所有 SVG 占位图为实拍照片
|
||
3. 配置认证 SMTP 或事务性邮件插件
|
||
4. 测试预约表单提交、无效邮箱、重复提交
|
||
5. 检查移动端无水平滚动
|
||
6. 验证固定链接路由（`/services/`、`/cases/`、`/about/`、`/faq/`、`/contact/`）
|
||
7. 确认导航菜单链接正确
|
||
8. 测试键盘焦点、跳转链接、图片替代文本等无障碍项
|
||
|
||
## Git 仓库
|
||
|
||
- **远程仓库**：http://git.xgouo.cn/zhs123/car-t-t.git
|
||
- **分支**：main
|
||
|
||
## 许可证
|
||
|
||
GNU General Public License v2 or later。打包的第三方前端资源保留其各自许可证。
|