zhs123 8a2890f8b4 refactor: 多页面门店重构 — CPT + 页面模板 + README 更新
- 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 全面更新为门店多页面架构文档
2026-07-24 15:37:40 +08:00

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.3CDN):响应式栅格、offcanvas 移动导航、手风琴、表单控件
  • AOS:滚动动画
  • Colorbox:图片灯箱
  • Google FontsJosefin 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 仓库

许可证

GNU General Public License v2 or later。打包的第三方前端资源保留其各自许可证。

S
Description
No description provided
Readme
16 MiB
Languages
PHP 73%
CSS 21.5%
JavaScript 5.5%