WoodMart 页眉（Header）制作与调用

一、认识 Header Builder

💡 WoodMart 不使用 WordPress 自带的「外观 → 自定义」来编辑页眉，而是有一套独立的可视化页眉构建器（Header Builder），通过拖拽元素的方式搭建页眉，所见即所得。

🚪 1.1 进入 Header Builder

1. 登录 WordPress 后台。
2. 左侧菜单找到 WoodMart → Header Builder。
3. 进入后你会看到页眉预览区域，分为上、中、下三个横向区域，每个区域内可以放置不同的元素。

📋 1.2 页眉的三个区域

区域	说明	常见用途
Top Bar（顶部条）	页眉最顶部的一条窄区域	促销信息、语言切换、联系方式
Header Main（主区域）	页眉的核心区域	Logo、主菜单、搜索框、购物车图标
Header Bottom（底部区域）	页眉最底部的一条区域	分类导航菜单、副菜单

💡 不是每个区域都必须用。大多数电商站点只使用 Header Main 放 Logo + 菜单 + 搜索 + 购物车图标，顶部条和底部区域按需启用。

---

二、添加页眉元素

🧩 2.1 添加元素的方法

1. 在 Header Builder 中，将鼠标悬停在某个区域上，会出现「+」按钮。
2. 点击「+」，从弹出的元素列表中选择你需要的元素。
3. 元素会自动添加到该区域中。
4. 可以通过拖拽调整元素在区域中的位置（左、中、右）。

📌 电商站点最常用的组合：Logo（左）+ Main Menu（中）+ Search + Cart + My Account（右）

---

三、设置 Logo

🖼️ 3.1 添加 Logo 元素

1. 在 Header Main 区域左侧添加一个 Logo 元素。
2. 点击 Logo 元素进入设置面板。
3. 上传你的 Logo 图片。
4. 可选：上传 Retina 高清版本（用于高分辨率屏幕）。

💡 Logo 建议使用透明背景 PNG 或 SVG 格式。推荐尺寸宽度 180–250px，高度 40–60px。如果 Logo 尺寸不合适，可以在元素设置中调整 Logo 宽度。

📐 3.2 Logo 尺寸说明

WoodMart 的 Logo 元素会根据你设置的宽度自动等比缩放图片。如果发现 Logo 在移动端太大或太小，可以切换到移动布局单独调整移动端的 Logo 尺寸。

---

四、添加菜单和功能图标

📌 4.1 添加主菜单

1. 在 Header Main 区域添加一个 Main Menu 元素。
2. 在元素设置中，选择你在「外观 → 菜单」中创建并分配到 Main Menu 位置的菜单。
3. 菜单会自动显示在页眉中。

💡 如果一级菜单项太多，一行放不下时会挤压 Logo 和功能图标的空间。建议控制一级菜单项数量（一般不超过 7 个），次要入口移到页脚菜单或超级菜单中。

🔍 4.2 添加搜索框

1. 添加 Search 元素到 Header Main 区域。
2. 在元素设置中可以选择搜索框的样式：
   • Icon（图标）：只显示一个搜索图标，点击后展开搜索框
   • Full-width（全宽）：直接显示完整搜索框
3. 对于电商站点，建议使用全宽搜索框，方便用户直接搜索产品。

🛒 4.3 添加购物车和账户图标

1. 添加 Cart 元素：显示购物车图标和商品数量角标，鼠标悬停时展开迷你购物车。
2. 添加 My Account 元素：显示账户图标，点击跳转到「我的账户」页面。
3. 可选：添加 Wishlist 和 Compare 元素（前提是已开启对应功能）。

---

五、配置响应式页眉

📱 5.1 切换设备视图

Header Builder 支持为桌面端和移动端分别配置页眉布局。

1. 在 Header Builder 顶部工具栏切换到 Mobile layout（移动布局）。
2. 你会看到当前页眉在移动端（≤1024px，手机和平板共用此布局）的预览；Desktop layout（桌面布局）则应用于 1025px 及以上的屏幕。
3. 可以针对不同设备：
   • 隐藏某些元素（如搜索框在移动端隐藏，改为点击图标展开）
   • 调整元素位置
   • 使用不同的元素（如移动端使用汉堡菜单代替完整菜单）

💡 也可以整行隐藏：点击某个区域（如 Top Bar）的设置，开启 Hide on mobile（在移动端隐藏），该区域就不会出现在手机和平板上。

📱 5.2 移动端页眉建议

移动端屏幕空间有限，建议：

• ✅ Logo 居中或左对齐
• ✅ 使用汉堡菜单代替完整菜单
• ✅ 购物车图标保留（移动端用户需要随时查看购物车）
• ❌ 隐藏搜索框（改为在菜单内放置搜索图标）
• ❌ 隐藏 Wishlist、Compare 等次要图标

💡 WoodMart 自带的移动端菜单会自动折叠为汉堡菜单，你不需要额外创建移动端专用菜单。

---

六、页眉样式设置

🎨 6.1 页眉配色方案

1. 在 Header Builder 设置中找到 Color Scheme 选项。
2. 可选 Dark（深色：深色文字 + 浅色背景）或 Light（浅色：浅色文字 + 深色背景）。
3. 如果你的页眉背景是深色（如黑色或深蓝色），选择 Light 方案，确保文字和图标可见。

📏 6.2 页眉高度

1. 在 Header Builder 中选择对应的区域（Top Bar / Header Main / Header Bottom）。
2. 在区域设置中找到 Height 选项。
3. 调整高度值（单位为像素），默认通常是 60–80px。

💡 每个区域的高度可以分别为桌面端、移动端、粘性（滚动后）状态设置不同的值。建议移动端高度比桌面端低 10–20px，给小屏幕留出更多内容空间。

↔️ 6.3 元素间距

1. 点击某个元素进入设置。
2. 找到 Margin 或 Padding 设置。
3. 可以为元素的左右两侧添加间距，避免元素之间过于拥挤。

---

七、粘性页眉与页眉重叠

📌 7.1 粘性页眉（Sticky Header）

粘性页眉让页眉在用户向下滚动时固定在屏幕顶部，始终可见。

1. 点击要固定的区域（如 Header Main）的设置。
2. 开启 Make it sticky，该区域会在滚动时固定在顶部。
3. 可选：在 Header Builder 左上角的齿轮图标 → Header settings 弹窗中，设置 Sticky effect（滚动时固定 / 下滑后滑出）和 Sticky header clone（滚动后切换为只含 Logo、菜单、搜索、购物车的简化布局）。

💡 粘性页眉会占用屏幕空间，移动端建议关闭，或使用 Sticky header clone 让滚动后只保留最简元素。

🔄 7.2 页眉重叠（Make it overlap）

页眉重叠让页眉浮在页面内容上方，页面内容从页眉底部开始排列。

1. 点击 Header Builder 左上角的齿轮图标，打开 Header settings 弹窗。
2. 开启 Make it overlap（页眉重叠），页眉会覆盖在页面顶部内容上。
3. 这种效果适合首页有全屏幻灯片的站点，让页眉与幻灯片融为一体，通常只用于首页。

⚠️ 开启页眉重叠后，页眉背景需要设为透明或半透明，否则会遮挡内容。同时需要确保页眉下方的页面内容有足够的上内边距，避免被页眉遮挡。

八、为特定页面设置不同页眉

🎯 8.1 创建多个页眉

WoodMart 支持创建多个不同的页眉，然后分配给不同的页面。

1. 在 Header Builder 中点击「Add New Header」。
2. 为新页眉命名（如「产品页专用页眉」「促销活动页眉」）。
3. 配置好元素和样式后保存。

🎯 8.2 分配页眉到特定页面

1. 编辑需要使用不同页眉的页面。
2. 在页面编辑器底部的 页面设置（Page Settings） 面板中。
3. 找到 Header 选项。
4. 从下拉列表中选择你创建的特定页眉。
5. 更新页面。

💡 如果某个页面没有单独设置页眉，它会自动使用在 Header Builder 中设为「Default」的全站默认页眉。

---

九、页眉的导出与导入

💾 9.1 导出页眉

1. 在 Header Builder 中找到当前页眉的设置。
2. 点击 Export，会生成一段 JSON 配置数据。
3. 保存好这段导出的数据。

💾 9.2 导入页眉

1. 在另一个站点上进入 Header Builder。
2. 点击 Import。
3. 粘贴之前导出的 JSON 数据。
4. 页眉配置会一键还原。

💡 适合在测试站调好页眉后，迁移到正式站的场景。