B2C品牌站搭建实录：WoodMart+WooCommerce从裸站到完整框架全公开

🪐前言

阶段 3/11：框架搭建 | 时间：2025年12月 | 当前进度：30%

前两篇把定位和设计都定完了，这篇是真正的苦力活——从零开始把一个品牌站搭起来。

说实话，WoodMart的Demo导入功能能帮你省掉80%的基础结构搭建。但剩下的20%才是决定这个站像不像你自己的关键。大多数人的问题是Demo导完之后就当成品用了，结果满大街的站长得一模一样。

这一期记录Demo导入后如何清理、全局样式怎么套用品牌规范、Header和Footer的逐模块搭建、以及移动端逐一适配的全过程。

一、环境准备与WoodMart安装

🖥️ 主机环境

Cloudways上开了一台DigitalOcean 2GB的服务器，选了新加坡机房——因为我们主要面向亚太用户，这个位置对国内和东南亚用户速度都不错。

PHP 8.2
MySQL 8.0
Nginx + Redis缓存
免费SSL（Let's Encrypt自动续）

WordPress安装走Cloudways一键部署，然后装主题。

📦 主题与核心插件安装

WoodMart 7.6.x（ThemeForest购买）
WooCommerce 9.x
Elementor（WoodMart自带Pro授权）
RankMath SEO（免费版）
WP Mail SMTP
Wordfence Security
UpdraftPlus（备份）

我安装插件有个原则——装一个问一遍"不用它会死吗"。最后严格控制在10个以内。上一篇文章预算里列的WooCommerce扩展暂时不买，免费功能先把基础跑通。

二、Demo导入与深度清理

🔌 选择Demo

WoodMart提供了几十个Demo，选了一个最接近我们需求的"Minimal Fashion"。这个Demo的整体结构和我们信息架构图里的布局有六七成像。

导入过程大概10分钟。导入完成后第一件事不是开始搭，是删东西。

🧹 清理清单

Demo导入后自带了大量我们不需要的内容：

示例产品：删除所有Demo产品和分类（大约40个产品+8个分类）
示例页面：删掉多余的演示页面，只保留Homepage草稿
示例博客文章：删除全部
示例导航菜单：清空重建
多余的Widget：清理Sidebar和Footer Widget区域
插件：WoodMart自带推荐的插件列表，除了前面列的核心，全部跳过

清理加手动整理花了一整个下午。这一步虽然枯燥但很重要——残留的Demo数据会干扰后续的产品导入和SEO。

三、全局样式设置：把品牌规范搬进网站

设计阶段定好的配色和字体，现在真正落地。

🎨 主题设置 → 颜色

WoodMart的全局颜色管理在 WoodMart → Theme Settings → Styles & Colors。这里有一个坑：它分了好几层颜色设置——全局主色、Header颜色、按钮颜色、链接颜色等等。不是改一个地方就行的。

我先把设计阶段的5个颜色填入：

变量位置	颜色值	用途
Primary Color	#7B8FA1（薄雾蓝）	全局主色
Alternative Color	#C27D6B（砂岩红）	强调色
Body BG	#FBFAF8（暖白）	页面背景
Dark	#3A3A3C（石墨灰）	深色元素
Light	#D4C9BC（燕麦米）	浅色区块

改完之后又去检查了几个关键位置：

按钮hover效果 —— 主色加深15%
链接颜色 —— 主色
价格颜色 —— 深色文字，不打红
促销标签 —— 砂岩红

🔤 字体设置

在 WoodMart → Theme Settings → Typography 中配置：

Primary Font (正文)：Inter，400字重正文/500字重强调
Heading Font (标题)：Cormorant Garamond，500字重起步
Advanced：字体显示策略选Swap，避免FOIT（不可见文字闪烁）

字体加载顺序很重要。WoodMart默认从Google Fonts加载，在国内访问可能会有延迟。后面如果速度有问题，再考虑本地化字体文件。

四、Header逐模块搭建

Header是用户进站看到的第一块区域，设计上我们定了三个原则：简洁、功能完整、移动端友好。

🏗️ Header结构

Header Builder在WoodMart后台是一个可视化的拖拽界面：

[Logo] — [主导航: Shop/Collections/Our Story/Blog] — [搜索图标] — [账户] — [购物车]

📌 搭建设置

Logo区域：

上传白色底和透明底两个版本
高度设28px（桌面）和24px（移动）
Sticky Header缩小到22px

主导航：

4个一级项，暂不设下拉
字体Inter Medium 14px
间距拉开一些，不要太挤
当前页有下划线指示

图标区：

搜索：点击弹出全宽搜索栏
账户：WooCommerce的My Account页面链接
购物车：侧滑式购物车面板（WoodMart自带，非常好用）

📱 移动端Header

移动端完全是另一套逻辑：

Logo居中显示
左侧汉堡菜单
右侧购物车图标
搜索放在展开菜单里

汉堡菜单展开后是一个全屏覆盖层，包含导航+搜索+账户入口。WoodMart的移动端菜单默认效果不错，我们只微调了字体大小和间距。

五、首页模块化组装

首页是Demo基础上改的，保留了整体布局框架，但每个区块都替换成我们自己的内容和风格。

🖼️ 区块顺序

Hero区：

全宽轮播Banner，两张轮播图
第一张：品牌主视觉模特场景图 + 文字"Smart Carry for Urban Days"
第二张：新品系列特写
Button指向Shop页面

系列入口：

三个并列卡片，背景用燕麦米底色
通勤收纳 / 旅行洗漱 / 托特内胆
每张卡片用柔和的产品场景图

畅销单品：

4个产品用WoodMart的Product Carousel展示
自动轮播关闭，手动滑动
显示产品名+价格+颜色变体小圆点

品牌价值条：

三个图标+短文案：全球免邮 / 30天无忧退换 / 1年质保

买家秀轮播：

Instagram风格图片轮播（暂时放占位图，等UGC内容到位后替换）

Newsletter订阅：

燕麦米背景 + 简单表单
一句话："首单9折，新品提醒"

六、Footer搭建

Footer看着简单，但很多站做得特别随便。我们的Footer分了四栏：

栏目	内容
品牌信息	Logo + 一句话介绍 + 社交媒体图标
购物帮助	Shipping / Returns / FAQ / Contact
品牌信息	About Us / Our Story / Blog
政策	Privacy Policy / Terms of Service

底部再加版权信息+支付方式图标（PayPal/Stripe/Apple Pay）。

为什么要放支付图标？这是一个信任信号——用户看到自己常用的支付方式会安心一些。哪怕你还没接完所有支付方式，图标先放上去没问题。

七、移动端逐一适配

这是全程最花时间的环节。Desktop看着好好的，切换到手机就各种问题。

🔍 逐页检查

我用Chrome DevTools的移动端模拟器逐一检查了以下页面：

首页：所有区块正常，图片没有溢出。产品轮播滑动流畅。
产品集合页：两列网格间距正常。筛选器以折叠面板呈现，不占太多空间。
产品页：图片占满屏宽，加购按钮固定在底部。
品牌故事页：段落间距OK，图片缩放正常。
购物车：侧滑面板操作顺滑。
结账页：表单字段宽度正常。

⚠️ 修了一个坑

WoodMart移动端的Sticky Add to Cart按钮默认出现在产品页。但有个问题——它在iPhone Safari上有时候会挡住底部的安全区，导致"加入购物车"按钮的一半被Cover。解决方法是加了1行CSS：

.sticky-add-to-cart {
    padding-bottom: env(safe-area-inset-bottom, 16px);
}

就这一行，不需要插件。

本篇复盘

✅ 阶段成果

WoodMart Demo导入并彻底清理
全局配色和字体完整落地
Header + Footer 搭建完成
首页5大区块组装完成
移动端逐页适配完成
网址框架完整可用（除了产品还没上架）

🕳️ 踩坑记录

Demo残留数据太多：WoodMart的Demo内容丰富，但删起来也费劲。建议导入后第一件事就删完再开始搭。
全局颜色不止一个地方要改：Theme Settings + Elementor全局设置 + WooCommerce设置，三处都要检查。
移动端安全区：iPhone底部横条会挡住固定元素，env(safe-area-inset-bottom) 是必须知道的CSS值。

💸 本阶段成本

本月主机：$26（Cloudways 12月账单）
本阶段额外支出：$0（全部用免费工具）

⏱️ 本阶段耗时

Demo导入+清理：1天
全局样式配置：半天
Header/Footer搭建：半天
首页组装：1天
移动端适配：1天
总计：约4个工作日

💰 累计成本

第1阶段：$171
第2阶段：$128
第3阶段：$26（主机）
累计：$325

🔮 下篇预告

站的主体框架搭完了，但没有任何产品。下一篇进入产品上架全流程——产品图片拍摄标准、变体设置、库存管理、批量导入工具的使用。12个SKU怎么高效上架，怎么设变体才不会乱？

下一篇：98-B2C产品上架全流程实录：从产品图片到变体到库存管理的每一步

站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供网络资源分享服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请联系我们一经核实，立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时，保证优秀的服务质量。

本站文章90%为原创内容,拥有所有权,转载时请加上所属。

{{userData.name}}已认证