这是一套面向 WPC 户外建材产品展示、WooCommerce 商城页面、企业官网、案例展示、博客内容和资源下载 的静态 HTML 网站主题。
整套页面以现代企业站和产品展示型商城为设计方向，重点关注：
- 页面结构完整
- 模块层级清晰
- 交互效果实用
- 后期易于 WordPress / WooCommerce 动态化
- 适合继续扩展成正式网站主题
- 适合用于 GitHub Pages 或本地静态预览
本主题没有包含统一的 Header 和 Footer，方便后期接入已有网站的全局头部导航和底部结构，也方便拆分为 WordPress 主题模板文件。
这套 HTML 主题适合以下类型的网站：
- WPC 地板网站
- WPC 墙板网站
- WPC 围栏网站
- 户外建材企业官网
- 产品目录型网站
- B2B 产品展示网站
- WooCommerce 商城前端原型
- WordPress 企业站主题开发基础
- Elementor / Gutenberg 页面结构参考
- 产品展示 + 博客内容 + 案例展示综合型网站
页面内容以 WPC 产品展示为主要参考场景，但整体布局和模块也可以扩展到其他行业，例如：
- 建材
- 家居
- 户外用品
- 工业产品
- 展厅展示
- 产品样品目录
- 项目案例网站
本主题的核心目标不是追求复杂的前端工程化，而是先通过普通的 HTML、CSS 和 JavaScript，把一个完整网站所需的页面结构和交互效果全部梳理清楚。
主要设计目标包括：
-
页面覆盖完整
覆盖企业官网、产品商城、博客内容、案例、下载、FAQ、搜索、404、作者、标签、联系、关于我们、产品对比等常见页面。 -
结构便于后期开发
页面模块清晰，便于拆分为 WordPress 模板、WooCommerce 模板或自定义组件。 -
视觉统一
使用统一的色彩、按钮、卡片、标题、间距和响应式规范。 -
交互实用
使用轮播、弹框、筛选、加载更多、数字动画、自动目录、Before / After 对比等常见实用交互。 -
图片路径易维护
图片按页面类型分类存放，背景图多数通过内联style设置，方便后期程序动态输出。 -
适合静态预览和主题开发双用途
既可以直接作为静态 HTML 页面预览，也可以作为 WordPress 主题开发前的页面原型。
当前主题包含以下页面：
| 页面文件 | 页面名称 | 页面用途 |
|---|---|---|
index.html |
预览入口页 | 用于集中展示所有页面链接 |
home.html |
首页 | 网站首页整体展示 |
products.html |
产品列表页 | 产品归档页 / 产品分类页 |
product-detail.html |
产品详情页 | WooCommerce 单品详情页结构 |
product-detail-legacy.html |
产品详情旧版 | 旧版详情页备份 |
blog.html |
博客列表页 | 文章归档 / 新闻列表 |
blog-detail.html |
博客详情页 | 文章内容页 |
faq.html |
常见问答页 | FAQ 问答展示 |
downloads.html |
资料下载页 | 手册、色卡、安装指南、证书下载 |
projects.html |
案例展示页 | 项目案例展示和弹框图库 |
search.html |
搜索结果页 | 站内搜索结果模板 |
404.html |
404 页面 | 页面不存在提示 |
author.html |
作者页 | 作者文章归档 |
tag.html |
标签页 | 标签文章归档 |
contact.html |
联系我们页 | 联系表单和联系方式 |
about.html |
关于我们页 | 公司介绍、实力展示、客户评价 |
compare.html |
产品对比页 | Before / After 产品效果对比 |
/
├── index.html
├── home.html
├── products.html
├── product-detail.html
├── product-detail-legacy.html
├── blog.html
├── blog-detail.html
├── faq.html
├── downloads.html
├── projects.html
├── search.html
├── 404.html
├── author.html
├── tag.html
├── contact.html
├── about.html
├── compare.html
├── assets/
│ ├── css/
│ │ └── waco-pages.css
│ ├── js/
│ │ └── waco-pages.js
│ └── images/
│ ├── about/
│ ├── archive/
│ ├── blog/
│ ├── compare/
│ ├── contact/
│ ├── downloads/
│ ├── faq/
│ ├── products/
│ └── projects/
└── README.md
本主题采用轻量级静态前端技术，不依赖复杂构建工具。
| 技术 | 用途 |
|---|---|
| HTML5 | 页面结构、表单、文章内容、卡片、模块组织 |
| CSS3 | 页面视觉、响应式布局、卡片、按钮、动效、排版 |
| JavaScript | 页面交互、筛选、弹框、目录、数字动画、图片对比 |
| Swiper.js | 轮播图、缩略图轮播、客户评价轮播、案例弹框图库 |
| CSS Grid | 多列卡片、详情页左右布局、页面主结构 |
| Flexbox | 按钮组、标签、卡片内部对齐 |
| IntersectionObserver | 滚动进入视口动画、数字动画触发 |
| CSS Sticky | 博客目录、侧边栏固定效果 |
| CSS Clip-path | Before / After 图片对比遮罩 |
| CSS Line Clamp | 标题和描述最大行数控制 |
| CSS Clamp | 响应式字号控制 |
| CSS Transition / Animation | 卡片动效、图标浮动、图片切换 |
| Range Input | Before / After 滑块拖动控制 |
后期如果继续升级，可以逐步加入：
| 技术 / 工具 | 可用于 |
|---|---|
| WordPress | 主题化、内容管理 |
| WooCommerce | 产品、购物车、订单和变体 |
| ACF | 页面模块字段、案例、FAQ、下载资料字段 |
| Contact Form 7 / Fluent Forms | 联系表单提交 |
| GSAP | 更高级滚动动画和页面动效 |
| Lenis | 平滑滚动体验 |
| Isotope / MixItUp | 更复杂的筛选和 Masonry 布局 |
| Fancybox / PhotoSwipe | 图片灯箱图库 |
| Alpine.js | 更轻量的局部交互 |
| Vite | 后期工程化开发、资源打包 |
| Sass / SCSS | 更系统的 CSS 组织 |
| WebP / AVIF | 图片性能优化 |
| Lazy Loading | 图片懒加载和性能提升 |
主题整体风格偏向：
- 简洁
- 大气
- 高端
- 商业化
- 自然色系
- 产品展示型
- 卡片化
- 留白充足
- 建材行业适配
主要视觉特征：
- 深绿色作为主色
- 暖棕色作为强调色
- 米白和浅灰作为页面背景
- 大圆角卡片
- 柔和阴影
- 大标题
- 简短描述
- 半透明白色卡片
- 通用占位图风格
- 多处使用内联背景图，方便后期替换
assets/css/waco-pages.css
该文件包含：
- 全局变量
- 页面容器
- 按钮样式
- 标题系统
- 卡片系统
- 内页 Banner
- 响应式断点
- 页面专属样式
- Swiper 样式
- FAQ 样式
- 产品详情样式
- 博客详情排版
- 案例弹框样式
- 表单样式
- Before / After 样式
assets/js/waco-pages.js
该文件包含：
- 页面 reveal 动画
- Swiper 初始化
- 产品详情图切换
- FAQ 折叠
- 下载页分类筛选
- 案例页筛选和加载更多
- 案例弹框图库
- 博客详情自动目录
- 关于我们数字滚动
- 为什么选择我们切换
- 联系表单静态演示
- Before / After 图片对比滑块
index.html 是整个静态页面主题的预览入口。
Hero 介绍区
页面分组导航
核心品牌页面入口
商城页面入口
博客与内容页面入口
资源与互动页面入口
WordPress 工具模板入口
底部说明
- 独立页面内 CSS
- 不引用公共主题 CSS
- 不影响其他页面样式
- 卡片式页面入口
- 页面分组导航
- 响应式布局
用于集中预览所有 HTML 页面，尤其适合静态部署后作为访问首页。
首页是网站的主视觉入口和主要转化入口。
首屏 Swiper Banner
产品范围模块
应用场景 Swiper
项目灵感模块
优势展示模块
CTA 转化模块
- Swiper 首屏轮播
- Swiper 应用场景轮播
- 多列卡片布局
- 图片比例控制
- 标题描述行数控制
- 滚动 reveal 动画
- 响应式适配
- 首页 Banner 后台动态管理
- 产品范围绑定 WooCommerce 分类
- 应用场景绑定自定义文章类型
- 首页模块排序
- 首页模块开关控制
- 增加视频 Banner
- 增加客户 Logo 墙
产品列表页适合作为产品归档页、产品分类页或 WooCommerce Shop 页面。
内页 Banner
面包屑导航
产品分类按钮
三列产品卡片
产品价格
加入购物车按钮
分页
- CSS Grid 三列产品布局
- 产品卡片等高
- 标题和描述最大行数控制
- 分类按钮式导航
- 分页样式
- 响应式单列适配
- 对接 WooCommerce 产品循环
- 对接真实产品分类
- 加入价格筛选
- 加入排序功能
- 加入颜色筛选
- 加入 Ajax 加载更多
- 加入快速查看弹框
产品详情页是 WooCommerce 单品页面的静态结构参考。
产品主图区域
Swiper 主图轮播
缩略图轮播
颜色选择
产品标题
价格
短描述
数量选择
加入购物车
产品详情内容
相关产品
- Swiper 主图轮播
- 缩略图 Swiper 联动
- PC 端缩略图显示数量控制
- 移动端缩略图显示数量控制
- 颜色按钮切换图片
- 产品详情左右布局
- 相关产品卡片
- 响应式适配
- 对接 WooCommerce 产品图库
- 对接 WooCommerce 变体属性
- 颜色切换绑定真实变体图片
- 加入库存状态
- 加入 SKU
- 加入产品规格表
- 加入安装视频
- 加入资料下载
- 加入产品评价
该页面是旧版产品详情页备份。
保留早期产品详情交互
作为旧版样式对比
作为历史版本备份
作为特殊详情模板参考
- 可以删除
- 可以保留为备用模板
- 可以作为 A/B 测试页面
- 可以作为特殊产品详情页模板
博客列表页适合作为文章归档、新闻中心或知识中心。
内页 Banner
推荐博客 Swiper
博客分类按钮
博客卡片列表
分页
CTA
- 推荐文章整卡 Swiper
- Swiper 分页器
- 三列博客卡片
- 文章标题最大行数控制
- 分类按钮结构
- 响应式布局
- 对接 WordPress 文章循环
- 推荐文章绑定置顶文章
- 分类按钮绑定文章分类
- 增加文章搜索
- 增加 Ajax 分类筛选
- 增加阅读量或发布时间
- 增加作者信息
博客详情页是内容系统中最完整的页面。
内页 Banner
文章标题和信息
文章主图
文章正文
右侧自动目录
Tags 标签
侧边 CTA
作者框
上一篇 / 下一篇
推荐文章
相关文章
底部 CTA
- JavaScript 自动读取正文
h2 - 自动生成内容目录
- 目录点击平滑滚动
- 当前章节自动高亮
- 时间轴式目录样式
- Sticky 右侧栏
- 完整文章排版系统
- 作者框
- 上一篇 / 下一篇
- 推荐文章卡片
正文中已经为常见 HTML 标签设置样式：
h1 ~ h6
p
ul
ol
li
blockquote
table
thead
tbody
tr
th
td
code
pre
dl
dt
dd
figure
img
figcaption
div 提示块
- 自动目录对接 WordPress 正文
- Tags 动态输出
- 作者信息动态输出
- 上一篇 / 下一篇动态输出
- 推荐文章根据分类或标签匹配
- 增加文章分享按钮
- 增加阅读进度条
- 增加评论区
- 增加文章 Schema
FAQ 页面用于集中展示客户常见问题。
内页 Banner
帮助中心卡片
FAQ 分类按钮
折叠问答列表
默认第一条展开
支持提示卡片
底部 CTA
- Accordion 折叠交互
- 分类按钮筛选
- 默认展开第一条
- 切换分类后自动展开第一个可见问题
- 无匹配提示
- 响应式布局
- 对接 FAQ 自定义文章类型
- 对接 FAQ 分类
- 增加 FAQ 搜索
- 增加 FAQ Schema
- 增加“是否有帮助”反馈
- 增加热门问题排序
资料下载页用于展示产品资料、安装指南、色卡和证书文件。
内页 Banner
资料类型概览
下载分类按钮
下载资料卡片
下载说明侧边栏
文件类型说明
底部 CTA
- 分类筛选
- 下载卡片列表
- 文件类型标签
- 侧边信息卡
- 无匹配提示
- 响应式布局
- 对接 WordPress 媒体库
- 对接 ACF 文件字段
- 增加下载次数统计
- 增加文件大小自动读取
- 增加下载权限控制
- 增加提交表单后下载
- 增加 PDF 预览
案例展示页用于展示实际项目、应用场景和客户案例。
内页 Banner
案例分类按钮
三列案例卡片
Load More 加载更多
案例详情弹框
弹框主图 Swiper
弹框缩略图 Swiper
案例介绍文字
底部 CTA
- CSS Grid 三列布局
- 同一行卡片底部自动对齐
- 标题最多两行
- 描述最多两行
- 分类筛选
- 加载更多
- Modal 弹框
- Swiper 主图轮播
- Swiper 缩略图联动
- ESC 关闭弹框
- 点击遮罩关闭弹框
- 弹框内容独立滚动
- 对接案例自定义文章类型
- 案例分类动态输出
- 案例弹框内容动态生成
- 增加项目地点
- 增加使用产品
- 增加项目面积
- 增加项目年份
- 增加真实图片图库
- 增加 Ajax 加载更多
搜索结果页用于展示站内搜索结果。
内页 Banner
搜索框
结果类型筛选
搜索结果列表
侧边栏结果说明
热门搜索标签
分页
- 搜索结果卡片布局
- 结果类型筛选
- 侧边栏 Sticky
- 不同内容类型标签
- 分页样式
- 响应式布局
- 对接 WordPress 搜索结果
- 区分产品、文章、案例、下载资源
- 增加关键词高亮
- 增加 Ajax 搜索
- 增加搜索建议
- 增加无结果推荐内容
404 页面用于页面不存在时的提示。
全屏背景
大号 404 数字
错误说明
搜索框
快捷链接
返回首页按钮
浏览产品按钮
- 全屏居中布局
- 半透明毛玻璃效果
- 搜索表单
- 快捷入口按钮
- 响应式适配
- 对接 WordPress 404 模板
- 增加热门产品推荐
- 增加热门文章推荐
- 增加自动记录失效链接
- 增加返回上一页按钮
作者页适合作为 WordPress 作者归档模板。
作者 Banner
作者资料卡
作者统计
作者文章列表
分页
- 作者头像占位
- 作者介绍卡片
- 文章卡片列表
- 分页样式
- 响应式布局
- 动态输出作者名称
- 动态输出作者头像
- 动态输出作者简介
- 输出作者文章列表
- 增加作者社交链接
- 增加作者文章分类筛选
标签页适合作为 WordPress 标签归档模板。
标签 Banner
标签简介
标签 Chips
相关文章列表
分页
- 标签归档结构
- 当前标签高亮
- 文章卡片列表
- 分页样式
- 响应式布局
- 动态输出当前标签
- 动态输出相关标签
- 动态输出标签文章
- 增加标签 SEO 描述
- 增加标签筛选
- 增加标签云
联系我们页面用于客户咨询、样品请求、报价请求和项目沟通。
内页 Banner
联系信息卡片
咨询表单
右侧支持说明
营业时间
地图占位
底部 CTA
Name
Phone
Email
Subject
Requirement Description
对应中文：
姓名
手机
邮箱
标题
需求描述
- HTML 表单
- 必填字段
- 输入框和 Textarea 样式
- 右侧 Sticky 信息卡
- 静态提交演示
- 地图占位模块
- 响应式布局
- 对接 Contact Form 7
- 对接 Fluent Forms
- 对接后端邮件发送
- 增加文件上传
- 增加 Google reCAPTCHA
- 增加提交成功页
- 增加客户来源字段
- 增加 CRM 对接
关于我们页面用于展示品牌实力、产品优势和客户信任感。
内页 Banner
公司介绍
数据实力
产品优势
为什么选择我们
客户评价
底部 CTA
- 数字滚动动画
- IntersectionObserver 触发动画
- 产品优势卡片
- 图标轻微浮动
- 滚动逐个出现
- 为什么选择我们 Accordion
- 左侧标题描述切换
- 右侧图片同步切换
- 客户评价 Swiper
- PC 三列、平板两列、手机一列
- 数据数字后台可编辑
- 产品优势字段化
- 客户评价动态管理
- 增加公司时间线
- 增加工厂图片展示
- 增加证书和资质展示
- 增加团队介绍
- 增加合作伙伴 Logo
产品对比页用于展示 Before / After 前后效果。
内页 Banner
页面说明卡片
Before / After 对比滑块
每个滑块下方标题和描述
底部 CTA
安装前 / 安装后
普通木材 / WPC
老旧地面 / 翻新后
- CSS
clip-path实现前后图片遮罩 - Range input 控制分割线
- JavaScript 同步 CSS 变量
- 中间拖动分割线
- Before / After 标签
- 响应式高度控制
- 替换真实项目图片
- 增加更多对比组
- 绑定产品分类
- 绑定案例数据
- 增加对比说明点
- 增加移动端滑动提示
- 增加自动播放对比动画
使用场景：
首页 Banner
首页应用场景
产品详情图
博客推荐
案例弹框图库
客户评价
优势：
- 成熟稳定
- 移动端体验好
- 支持分页器
- 支持箭头
- 支持缩略图联动
- 易于后期动态输出
使用场景：
faq.html
功能：
- 默认第一条展开
- 点击切换展开项
- 分类筛选
- 切换分类后自动打开第一个可见项
使用场景：
projects.html
功能：
- 点击案例卡片打开弹框
- 弹框内主图 Swiper
- 缩略图 Swiper
- 弹框文字介绍
- 点击遮罩关闭
- ESC 关闭
- 内容较长时弹框内部滚动
使用场景：
blog-detail.html
功能：
- 自动读取文章正文中的
h2 - 自动生成目录
- 点击目录平滑滚动
- 滚动时自动高亮当前章节
- 时间轴样式目录
- 右侧 Sticky 显示
使用场景：
about.html
功能：
- 滚动到数据模块时触发
- 数字从 0 滚动到目标值
- 使用 IntersectionObserver 控制触发时机
使用场景：
compare.html
功能：
- 中间拖动分割线
- 左右对比图片变化
- 使用 range input 控制
- 使用 CSS 变量控制图片遮罩
- 适合展示安装前后、材料对比、翻新前后
整体页面按照常见断点进行适配：
@media (max-width: 1024px) {}
@media (max-width: 760px) {}典型响应式策略：
| 屏幕 | 处理方式 |
|---|---|
| PC | 多列布局，展示完整视觉结构 |
| 平板 | 两列或单列布局 |
| 手机 | 单列布局，按钮和卡片上下排列 |
| 详情页 | 左右布局变为上下布局 |
| Swiper | PC 多列，移动端单列 |
| 弹框 | PC 固定宽度，移动端自适应宽度 |
| 表单 | 双列变单列 |
assets/images/about/
assets/images/archive/
assets/images/blog/
assets/images/compare/
assets/images/contact/
assets/images/downloads/
assets/images/faq/
assets/images/products/
assets/images/projects/
好处：
- 图片不混乱
- 页面维护更直观
- 后期替换真实图片更方便
- 方便迁移到 WordPress 主题目录
示例：
style="background: url('assets/images/...') center / cover no-repeat;"好处：
- 后期动态输出图片方便
- 适合 ACF 图片字段
- 适合 WordPress 缩略图
- 不需要在 CSS 中维护大量图片路径
每个页面都按照模块划分，并使用注释标记结构。
适合后期拆分为：
template-parts/hero.php
template-parts/cta.php
template-parts/product-card.php
template-parts/blog-card.php
template-parts/project-card.php
template-parts/faq-item.php
脚本中大部分交互都会先判断当前页面是否存在对应 DOM，再执行初始化。
好处：
- 避免其他页面报错
- 一个 JS 文件可以支持多个页面
- 后期可以继续拆分为模块化 JS
可以将当前 HTML 页面拆分为：
header.php
footer.php
front-page.php
page.php
single.php
archive.php
search.php
404.php
single-product.php
archive-product.php
template-parts/
适合逐步开发成完整 WordPress 主题。
产品相关页面可对接：
产品列表
产品分类
产品标签
产品价格
产品图库
产品变体
库存状态
加入购物车
相关产品
产品评价
重点页面：
products.html
product-detail.html
product-detail-legacy.html
compare.html
适合使用 ACF 管理：
首页模块
Banner 图片
CTA 内容
关于我们数据
产品优势
客户评价
FAQ
下载资料
案例详情
Before / After 图片
联系信息
可以将以下内容做成 WordPress Custom Post Type：
Projects / 案例
FAQ / 常见问答
Downloads / 下载资料
Testimonials / 客户评价
Compare Items / 对比项目
Applications / 应用场景
可扩展：
WPML
Polylang
多语言字段
多语言菜单
多语言 URL
多语言 SEO
重点需要多语言的内容：
- 产品标题
- 产品描述
- 表单字段
- FAQ
- 下载资料
- 案例介绍
- 博客文章
- CTA 文案
后续可增加：
页面 Title / Description
Open Graph
Twitter Card
Schema.org
Breadcrumb Schema
Product Schema
Article Schema
FAQ Schema
LocalBusiness Schema
图片 ALT
语义化 heading 层级
重点页面：
products.html
product-detail.html
blog-detail.html
faq.html
about.html
contact.html
后期可以继续优化：
图片压缩
WebP / AVIF
Lazy Load
CSS 拆分
JS 按页面拆分
Swiper 按需加载
关键 CSS 内联
减少未使用 CSS
CDN 资源优化
字体加载优化
可继续增强：
产品 Ajax 筛选
产品快速查看
案例 Ajax 加载更多
案例弹框深链接
搜索自动建议
表单验证
提交成功弹窗
图片懒加载
页面滚动进度条
产品颜色实时切换
Before / After 自动演示动画
如果后期接入 WordPress，可以将内容拆分成：
产品数据
博客文章
FAQ 问答
下载资料
案例展示
客户评价
首页模块
关于我们数据
联系信息
产品对比图片
这样可以让非技术人员也能在后台维护内容。
建议优先完成：
- 替换真实产品图片
- 替换真实项目案例图片
- 替换真实公司介绍
- 替换真实产品描述
- 替换真实联系方式
- 替换真实下载文件
- 替换真实 FAQ 内容
建议将重复模块整理为组件：
内页 Banner
CTA
产品卡片
博客卡片
案例卡片
FAQ Item
下载卡片
表单字段
分页
建议逐步接入：
Header / Footer
菜单系统
页面模板
文章循环
产品循环
ACF 字段
WooCommerce 模板
表单插件
可以继续增加：
页面加载动画
图片懒加载
交互提示
表单验证
筛选动画
搜索建议
滚动进度
移动端菜单
产品快速咨询
建议重点优化：
页面速度
图片大小
结构化数据
Meta 信息
内容层级
关键词布局
内部链接
移动端体验
Core Web Vitals
建议从以下页面开始查看：
index.html
该页面集中展示了所有页面入口，方便快速预览整套主题。
建议优先确认：
- 页面布局是否符合业务需求
- 模块顺序是否合理
- 图片比例是否适合真实素材
- 卡片高度是否稳定
- 交互是否适合后期动态化
- 移动端效果是否清晰
建议按以下顺序推进：
- 整理 Header / Footer
- 拆分公共模板模块
- 接入 WordPress 页面模板
- 接入 WooCommerce 产品数据
- 接入 ACF 字段
- 接入真实表单提交
- 替换真实内容
- 优化 SEO 和性能
- 当前图片大多是通用占位图，正式使用时需要替换为真实产品图和项目图。
- 当前表单是静态演示，正式使用时需要接入后端或 WordPress 表单插件。
- 当前下载按钮为占位结构，正式使用时需要绑定真实文件地址。
- 当前产品价格、产品描述和产品属性为示例内容，后期需要由 WooCommerce 动态输出。
- 当前案例弹框数据写在前端 JS 中，后期建议改为文章数据或 Ajax 获取。
- 当前页面没有包含统一 Header 和 Footer，便于后期接入已有网站结构。
index.html是独立预览入口页，其 CSS 写在页面内部，不参与主题公共样式系统。
这套 HTML 主题已经覆盖一个产品展示型企业网站和 WooCommerce 风格商城常见的大部分页面场景。
它的核心价值在于：
- 页面类型完整
- 模块结构清晰
- 交互效果实用
- 视觉风格统一
- 易于静态预览
- 易于继续开发成 WordPress 主题
- 易于接入 WooCommerce 和 ACF
- 适合作为正式网站开发前的高质量静态原型
后续可以在此基础上继续进行真实内容替换、WordPress 主题化、WooCommerce 动态化、SEO 优化和性能优化。