- 删除 7 个死模板文件 (products/services/quality/process/projects/customization/rfq) - 删除 13 个旧图片素材 (jpg/png/webp) - 新增 CDN SRI 完整性校验 (Bootstrap CSS/JS) - 新增面包屑导航模板组件 - 新增代码清理方案与代码审查标准文档 - 更新 README.md
8.8 KiB
B2B Trade — 汽车贴膜门店 WordPress 主题
专业汽车贴膜门店(面向终端车主)的经典 WordPress 主题。支持服务项目展示、施工案例作品集、在线预约联系,适配移动端。
项目说明
本主题面向汽车贴膜门店(TPU 保护膜 / 彩色改色膜 / 隔热防爆膜等),不是 B2B 代工厂模板。站点采用多页面架构 + 自定义文章类型,首页为落地页,引导车主浏览服务、查看案例并预约到店。
仓库名
fragrance-trade为历史遗留(原是香水贸易模板),代码标识符(文本域fragrance-trade、CSS 前缀fragrance-、PHP 函数前缀fragrance_trade_)保持不变,不影响功能。
环境要求
- WordPress 6.5+
- PHP 7.4+
- 生产环境建议使用 HTTPS 和认证 SMTP
安装
- 将
fragrance-trade文件夹复制到wp-content/themes/。 - 在 外观 → 主题 中激活 B2B Trade。
- 主题激活时自动完成初始化:
- 注册
service(服务项目)和case(案例作品)两个自定义文章类型 - 将 Customizer 中的 7 个产品数据迁移为
service文章 - 自动创建首页、关于门店、常见问题、预约/联系四个页面
- 将首页设置为静态首页
- 注册
- 重要: 激活后进入 设置 → 固定链接,点击"保存更改"刷新路由规则。
- 在 外观 → 自定义 → 站点身份 中设置站点标题和 Logo。
- 在 外观 → 菜单 中创建导航菜单并分配到 主导航。
- 打开 外观 → 自定义 → 门店首页,将所有演示文案替换为真实门店信息。
站点架构
页面结构
| 页面 | 模板 | 说明 |
|---|---|---|
| 首页 | 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/):
hero— 首屏定位与行动按钮trust— 信任栏(4 个证明点)service-teaser— 服务项目预览(从serviceCPT 读取最新 3 条)case-teaser— 案例预览(从caseCPT 读取最新 3 条)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 配置源,同时
serviceCPT 激活时从这些配置迁移数据。
前端技术栈
- 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,分 5 个阶段:
| 阶段 | 内容 | 状态 |
|---|---|---|
| 一 | 删除死模板 + 死图片 | ✅ 已完成 |
| 二 | JS 依赖瘦身 | 待执行 |
| 三 | 死表单处理器处理 | 待执行 |
| 四 | CDN SRI 加固 | ✅ 已完成 |
| 五 | Customizer 配置清理 | 待执行 |
代码审查
详见 CODE_REVIEW_STANDARD.md,包含 WordPress 主题专项审查清单(安全/功能/性能/可维护性/前端质量)、优先级体系(🔴阻断 / 🟡建议 / 💭细节)和审查流程。
上线检查清单
- 在 Customizer 中将所有演示文案替换为真实门店信息
- 替换所有 SVG 占位图为实拍照片
- 配置认证 SMTP 或事务性邮件插件
- 测试预约表单提交、无效邮箱、重复提交
- 检查移动端无水平滚动
- 验证固定链接路由(
/services/、/cases/、/about/、/faq/、/contact/) - 确认导航菜单链接正确
- 测试键盘焦点、跳转链接、图片替代文本等无障碍项
Git 仓库
- 远程仓库:http://git.xgouo.cn/zhs123/car-t-t.git
- 分支:main
许可证
GNU General Public License v2 or later。打包的第三方前端资源保留其各自许可证。