zhs123/car-t-t
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: release B2B Trade theme 2.1.0

Browse Source
This commit is contained in:
WorkBuddy
2026-07-24 22:25:29 +08:00
parent 13a35c7ec7
commit 4f070d4677
64 changed files with 1769 additions and 1762 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+83 -177
View File
@@ -1,193 +1,99 @@
# B2B Trade — 汽车贴膜门店 WordPress 主题
# B2B Trade
专业汽车贴膜门店（面向终端车主）的经典 WordPress 主题。支持服务项目展示、施工案例作品集、在线预约联系，适配移动端。
B2B Trade 是一个面向汽车贴膜门店的 WordPress 经典主题。主题提供服务项目、施工案例、门店介绍、常见问题和联系方式；联系页只展示电话、邮箱、WhatsApp、营业时间与地图导航，不包含提交表单、邮件发送处理器或 SMTP 依赖。
## 项目说明
## 运行要求
本主题面向汽车贴膜门店（TPU 保护膜 / 彩色改色膜 / 隔热防爆膜等），不是 B2B 代工厂模板。站点采用多页面架构 + 自定义文章类型，首页为落地页，引导车主浏览服务、查看案例并预约到店。
- WordPress 6.8 或更高版本
- PHP 8.1 或更高版本
- 当前发布版：2.1.0
- 已针对 WordPress 7.0 系列配置回归环境
> 仓库名 `fragrance-trade` 为历史遗留（原是香水贸易模板），代码标识符（文本域 `fragrance-trade`、CSS 前缀 `fragrance-`、PHP 函数前缀 `fragrance_trade_`）保持不变，不影响功能。
前端依赖仅包含主题内置的 Bootstrap 5.3.8 CSS 和 bundle JS。字体使用操作系统字体栈，不会向字体、脚本或样式 CDN 发起请求。
## 环境要求
## 页面与内容结构
- WordPress 6.5+
- PHP 7.4+
- 生产环境建议使用 HTTPS 和认证 SMTP
首页固定显示 5 个板块：
1. 首屏定位与双按钮
2. 四项信任指标
3. 服务项目（最多 6 项）
4. 案例作品（最多 6 项）
5. 联系门店行动区
关于页承载门店介绍、信任指标、环境图片、外部视频链接和服务文档。FAQ 页复用 8 项手风琴内容；联系页按配置展示门店信息和地图卡片。
主题注册：
- `service` 服务项目文章类型，归档路径 `/services/`
- `case` 案例文章类型，归档路径 `/cases/`
- `case_type` 案例分类法
- `fragrance-capability` 图片尺寸（760 × 720，硬裁切）
服务图片的显示优先级为：
1. WordPress 特色图片
2. 旧站点的 `_service_image` URL
3. 主题内置的中性 SVG 占位图
列表和首页使用 `fragrance-capability`，详情页使用 `large`。
## 首次激活
激活主题后会运行版本化且可重试的初始化：
- 创建 7 个默认服务，并使用 `_fragrance_seed_key` 防止重复；
- 创建或复用 `home`、`about`、`faq`、`contact` 页面；
- 为约定页面补齐模板，但不修改已有正文；
- 不会自动发布或恢复用户已有的草稿、私密页或回收站页面；
- 将已发布的 `home` 设置为静态首页；
- 仅在数据库写入全部成功后推进 `fragrance_trade_schema_version`。
重复激活和重复执行初始化不会增加服务或页面数量。失败信息和未发布页面状态会在后台显示管理员通知。
未分配主导航时，主题输出：首页、服务项目、案例作品、关于门店、常见问题、联系我们。已分配菜单但少于两个菜单项时，后台同样会提醒。
## 外观配置
“外观 → 自定义 → 门店首页”包含 6 个配置板块：
- 首屏定位
- 信任栏
- 门店环境与参观
- 文档支持
- 常见问题
- 联系方式与社交链接
视频链接不会嵌入页面或打开弹窗；配置后会在新标签页直接打开，并带有 `noopener noreferrer`。
地图卡片按以下顺序决定是否显示：
1. 优先使用“地图导航链接”；
2. 没有显式链接但门店地址非空时，生成百度地图导航地址；
3. 两项都为空时，隐藏地图卡片。
Hero 按钮的站内默认路径会通过 `home_url()` 解析，支持 WordPress 子目录安装与多站点路径。
## 安装
1. 将 `fragrance-trade` 文件夹复制到 `wp-content/themes/`。
2. 在 **外观 → 主题** 中激活 **B2B Trade**。
3. 主题激活时自动完成初始化：
- 注册 `service`（服务项目）和 `case`（案例作品）两个自定义文章类型
- 将 Customizer 中的 7 个产品数据迁移为 `service` 文章
- 自动创建首页、关于门店、常见问题、预约/联系四个页面
- 将首页设置为静态首页
4. **重要：** 激活后进入 **设置 → 固定链接**，点击"保存更改"刷新路由规则。
5. 在 **外观 → 自定义 → 站点身份** 中设置站点标题和 Logo。
6. 在 **外观 → 菜单** 中创建导航菜单并分配到 **主导航**。
7. 打开 **外观 → 自定义 → 门店首页**，将所有演示文案替换为真实门店信息。
1. 将主题目录复制到 WordPress 的 `wp-content/themes/`。
2. 在“外观 → 主题”中激活 B2B Trade。
3. 在“外观 → 菜单”中创建并分配主导航；未分配时主题会显示默认导航。
4. 在“外观 → 自定义 → 门店首页”中填写真实门店信息。
5. 在服务项目和案例后台上传实际图片与内容。
## 站点架构
发布前应在 WordPress 6.8 或更高版本、PHP 8.1 或更高版本环境中检查首页、列表、详情、关于、FAQ、联系、搜索与 404 页面，并确认桌面和移动端没有资源 404、控制台错误或横向滚动。
### 页面结构
详细验收项见 `CODE_REVIEW_STANDARD.md`，清理范围与兼容策略见 `CODE_CLEANUP_PLAN.md`。
| 页面 | 模板 | 说明 |
|------|------|------|
| 首页 | `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` 文章。
### 面包屑导航
`template-parts/breadcrumb.php` 提供可复用的面包屑组件，接受 `$args['items']` 数组（每项含 `label` 和可选 `url`）。在服务详情、案例详情等内页中调用以展示层级导航路径。
## 自定义器（Customizer）
**门店首页** 面板包含以下板块：
- 首屏定位（眉标、主标题、简介、双按钮）
- 信任栏（4 个证明点）
- 服务项目（4 张服务卡片）
- 产品能力（7 个产品参考卡片及图片）
- 定制选项（8 个定制项）
- 门店环境与参观（简介、4 张门店图片、视频链接）
- 品质管控（6 个品质步骤）
- 项目流程（8 个流程步骤）
- 项目案例（3 个案例，可开关显示）
- 文档支持（4 个文档卡片，可开关显示）
- 常见问题（8 条 FAQ，可开关显示）
- 预约表单（标题、简介、按钮文字）
- 联系方式与社交链接（收件邮箱、WhatsApp、门店地址、电话、营业时间、地图嵌入、社交媒体链接）
> 注：首页仅使用 5 个板块。其余板块（产品能力、定制选项、品质管控等）保留为 Customizer 配置源，同时 `service` CPT 激活时从这些配置迁移数据。
## 前端技术栈
- **Bootstrap 5.3**（CDN）：响应式栅格、offcanvas 移动导航、手风琴、表单控件
- **Colorbox**：图片灯箱（jQuery 依赖）
- **Google Fonts**（`fonts.loli.net` 镜像）：Josefin Sans + Jost + Noto Sans SC（思源黑体）
- **jQuery**：由 WordPress 提供，主题不另行打包
- CSS/JS 使用 `filemtime()` 版本号防缓存
- **CDN SRI**：Bootstrap CSS/JS 加载时携带 `integrity` 完整性哈希和 `crossorigin` 属性，防止 CDN 劫持
## 安全措施
- 所有 PHP 文件以 `ABSPATH` 守卫开头
- 所有输出经 `esc_html()` / `esc_url()` / `esc_attr()` 转义
- Customizer 字段全部配置 `sanitize_callback`
- RFQ 表单处理器含完整安全链：nonce 验证 + 蜜罐 + 速率限制 + 邮件头注入防护
- 邮箱地址用 `antispambot()` 混淆
- CDN 资源携带 SRI 完整性校验
## 文件结构
```
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 # 主题初始化、资源加载、SRI 加固
│ ├── helpers.php # 工具函数（菜单回退、WhatsApp/邮件链接、通知）
│ ├── cpt.php # 自定义文章类型注册 + 激活迁移
│ ├── customizer.php # Customizer 面板和字段
│ └── inquiry.php # 预约表单处理器
├── template-parts/
│ ├── home/ # 首页片段（hero/trust/service-teaser/case-teaser/cta + video/factory/documents/faq）
│ ├── breadcrumb.php # 可复用面包屑导航组件
│ ├── content.php / content-page.php / content-none.php
├── assets/
│ ├── css/ # normalize.css + vendor.css + theme.css
│ ├── js/ # theme.js + plugins.js
│ └── images/ # SVG 占位图 + 产品/门店图片
├── CODE_CLEANUP_PLAN.md # 代码清理方案（5 阶段）
├── CODE_REVIEW_STANDARD.md # 代码审查标准与流程
└── languages/ # 翻译文件目录
```
## 占位资源
主题附带以下占位资源，上线前请替换为真实素材：
- 7 个产品 SVG 占位图（灰底虚线边框 + 中文标签）
- 7 个产品 webp 图片
- 4 个门店环境 SVG 占位图
- 1 个视频封面 SVG
- 1 个 Logo SVG
> 旧版图片素材（jpg 产品图、Instagram 图、工厂流程图等）已在代码清理中移除。
## 代码质量
### 代码清理
详见 [CODE_CLEANUP_PLAN.md](CODE_CLEANUP_PLAN.md)，分 5 个阶段：
| 阶段 | 内容 | 状态 |
|------|------|------|
| 一 | 删除死模板 + 死图片 | ✅ 已完成 |
| 二 | JS 依赖瘦身 | 待执行 |
| 三 | 死表单处理器处理 | 待执行 |
| 四 | CDN SRI 加固 | ✅ 已完成 |
| 五 | Customizer 配置清理 | 待执行 |
### 代码审查
详见 [CODE_REVIEW_STANDARD.md](CODE_REVIEW_STANDARD.md)，包含 WordPress 主题专项审查清单（安全/功能/性能/可维护性/前端质量）、优先级体系（🔴阻断 / 🟡建议 / 💭细节）和审查流程。
## 上线检查清单
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
- 保留 `fragrance-trade` 文本域和 `fragrance_trade_*` 函数前缀。
- 保留 `store_map_url` 设置键。
- 保留 `_service_image` 只读回退，不自动改写或删除旧元数据。
- 旧的 `fragrance_trade_setup_done` 仅用于识别已有安装；新的流程以 `fragrance_trade_schema_version` 为准。
- 旧的联系页 URL 即使带有额外查询参数也能打开，但主题不再生成、读取、显示或传递服务名称。
## 许可证
GNU General Public License v2 or later。打包的第三方前端资源保留其各自许可证。
主题按 GNU GPL v2 或更高版本发布。Bootstrap 5.3.8 的 MIT 许可证副本位于 `assets/vendor/bootstrap/LICENSE`。