WoodMart 全局设置：主题选项面板与性能优化

一、认识主题选项面板（Theme Settings）

💡 WoodMart 不依赖 WordPress 自带的「外观 → 自定义」，而是有一套独立的主题选项面板，控制着站点从头到脚的几乎所有视觉和功能设置。

🚪 1.1 面板入口

1. 登录 WordPress 后台。
2. 左侧菜单找到 WoodMart → 主题设置（Theme Settings）。
3. 点击进入后，你会看到一个分左右两栏的设置页面：左侧是分类菜单，右侧是具体选项。

💡 面板顶部有一个搜索框，如果你不知道某个设置在哪个分类下，直接搜关键词就能定位。

📋 1.2 主要模块一览

WoodMart 的主题选项分为以下模块，每个模块控制站点的不同部分：

模块	控制内容
General（常规）	搜索、促销弹窗、Cookie 提示、移动端底部导航、粘性导航
Page title（页面标题）	页面顶部的标题栏、面包屑导航
Footer（页脚）	页脚布局、版权信息、预页脚
Typography（排版）	全站字体设置、自定义字体上传
Styles and colors（样式与颜色）	主色调、页面背景、按钮样式、表单样式
Blog（博客）	博客列表页和文章页设置
Portfolio（作品集）	作品集页面设置
My account（我的账户）	登录/注册表单、账户面板相关设置
Shop（商店）	产品筛选、对比、愿望清单、购物车、结账等 WooCommerce 功能
Product archive（产品列表）	产品网格布局、分类样式、筛选器、侧边栏
Single product（产品详情）	产品图片、加购按钮、评价、标签页、相关产品
Performance（性能）	CSS/JS 优化、字体加载、延迟加载、DOM 优化
Custom CSS / Custom JS	自定义代码
Import / Export / Reset	设置备份、恢复、迁移

📌 本篇重点关注 Styles and colors、Typography、Performance 和 Custom CSS / JS 这几个模块。Shop、Product archive、Single product 等电商相关模块会在后续课程中详细讲解。

---

二、全局配色与样式设置

🎨 配色是用户对你的网站的第一印象。WoodMart 的配色系统不是让你设每一个元素的颜色，而是定义几个全局主色，然后自动应用到按钮、链接、提示框等各处。

🎨 2.1 主色调设置

1. 进入 WoodMart → 主题设置 → Styles and colors → Colors。

2. 你会看到以下几个核心颜色选项：

   • Primary color（主色）：用于主要按钮、链接高亮、选中状态等。这是你的品牌色。

   • Secondary color（辅助色）：用于次要按钮、悬停状态等。

   • Links color（链接颜色）：正文中的链接文字颜色。

3. 点击颜色框，用取色器选色，或直接输入十六进制色值（如 #1a73e8）。

💡 建议主色和辅助色之间有足够的对比度，但不要冲突。一个实用原则：主色用于「希望用户点的」，辅助色用于「可选的操作」。

🔘 2.2 按钮样式

1. 在 Styles and colors → Buttons 中设置。

2. 可调整的选项包括：

   • 按钮背景色、文字色、悬停背景色、悬停文字色

   • 圆角大小（Border radius）

   • 内边距（Padding）

   • 字体大小和粗细

3. 设置完成后，所有使用主题默认样式的按钮都会自动更新。

⚠️ 如果你使用了页面构建器（如 Elementor）给单个按钮设置了独立样式，那些按钮不会被这里的全局设置覆盖。

🖼️ 2.3 页面背景

1. 在 Styles and colors → Pages background 中设置。
2. 可以设置全站背景色或背景图片。
3. 大多数电商站点使用纯白或浅灰背景，让产品图片更突出。

---

三、字体与排版设置

字体直接影响阅读体验和页面加载速度。WoodMart 支持 Google Fonts、自定义字体上传和 Adobe Fonts（原 Typekit）。

🔤 3.1 基础字体选择

1. 进入 WoodMart → 主题设置 → Typography。

2. 在 Basic（基础）选项卡中，你可以为不同元素设置字体：

   • 正文（Body）

   • 标题（Headings：H1–H6）

   • 导航菜单（Menu）

   • 按钮文字（Buttons）

   • 价格（Price）

3. 点击字体下拉框，WoodMart 内置了完整的 Google Fonts 列表，可以直接选择。

💡 速度建议：全站字体不要超过 2 个家族（family）。一个用于正文，一个用于标题，足够了。每多加载一个字体家族，浏览器就要多发一次请求。

📦 3.2 自定义字体上传

如果你购买了商业字体（非 Google Fonts），可以通过以下方式上传：

1. 进入 Typography → Custom fonts。
2. 点击「上传字体」，选择你准备的字体文件（支持 .woff2、.ttf、.otf 格式）。
3. 为字体命名，保存后即可在 Basic 和 Advanced 的字体下拉列表中找到它。

⚠️ 上传字体前请确认你有该字体的 Web 使用授权。很多桌面授权不包含网页嵌入权限。

🌐 3.3 Google Fonts 本地化加载

默认情况下，Google Fonts 从 Google 的服务器加载。这对站点速度和隐私合规都不理想。WoodMart 提供了一键本地化：

1. 进入 WoodMart → 主题设置 → Performance → Fonts & Icons。
2. 开启 Load Google Fonts locally（本地加载 Google 字体）。
3. 开启后，WoodMart 会自动把字体文件下载到你的服务器，从你自己的域名加载。

✅ 这是性能优化中性价比最高的一个开关。开启后减少了对外部服务器的 DNS 查询，改善 LCP（Largest Contentful Paint，最大内容绘制）指标，同时也符合 GDPR 等隐私法规的要求。

---

四、布局与容器宽度

📐 布局设置决定你的站点内容是铺满整个屏幕还是固定在中间一个区域，以及内容区域有多宽。

📏 4.1 全宽与盒装布局

1. 进入 WoodMart → 主题设置 → General。

2. 找到 Site layout（站点布局）选项：

   • Wide（全宽）：内容铺满整个浏览器宽度，适合现代电商站点。

   • Boxed（盒装）：内容固定在一个居中的容器中，两侧留白，适合博客或传统风格站点。

3. 大多数电商站点建议选 Wide。

📐 4.2 内容宽度设置

1. 在 General 中找到 Content width（内容宽度）。
2. 默认值通常是 1200px，适合大多数显示器。
3. 如果你希望内容区域更宽或更窄，可以在这里调整。

💡 内容宽度只影响内容区域的最大宽度，不影响全宽的页眉、页脚和幻灯片。

---

五、性能优化设置

⚡ WoodMart 8.5 已经在底层做了大量性能优化：CSS 文件体积比上一版减小了 30%，小 CSS 文件自动内联到 HTML，非关键 CSS 默认延迟加载。你不需要从零开始调优，只需要根据自己站点的实际情况，关掉用不到的功能、开启需要的优化。

📌 以下所有设置都在 WoodMart → 主题设置 → Performance 中。

🎯 5.1 CSS 优化

1. Disable default Gutenberg block styles（禁用默认 Gutenberg 区块样式）：

   • 建议开启。WoodMart 自带 Gutenberg 区块，不需要 WordPress 默认的区块样式。

   • 即使你同时使用 Elementor，这个选项也是安全的——它只移除 WordPress 默认区块的 CSS，不影响页面构建器的样式。

2. Inline styles size limit（内联样式大小限制）：

   • 设置为 40–80 KB 之间。

   • 开启后，小于这个值的 CSS 文件会被内联到 HTML 中（从 <link> 标签变成 <style> 标签），减少 HTTP 请求。

   • 不建议设得太大，否则回访用户的页面体积会增大（内联 CSS 无法被浏览器缓存）。

⚡ 5.2 JS 优化

1. Remove jQuery Migrate（移除 jQuery Migrate）：

   • 建议开启。jQuery Migrate 是一个兼容旧代码的脚本，现代插件通常不需要它。

   • 移除后减少一个请求和一处渲染阻塞脚本。

   • 如果某个老插件报错，再把它打开就行。

🔤 5.3 字体与图标优化

1. Load Google Fonts locally（本地加载 Google 字体）：

   • 建议开启（本篇 3.3 节已说明）。

2. font-display for text fonts（正文字体的 font-display 策略）：

   • 设为 Swap（交替显示）。正文字体加载完成前，先用系统字体显示文字，加载完后自动替换，避免文字长时间不可见。

3. font-display for icon fonts（图标字体的 font-display 策略）：

   • 如果你希望首屏图标立刻显示正确，设为 Fallback。

   • 如果你不在意图标首次加载前短暂显示为方块，设为 Swap 可以进一步减少渲染阻塞。

   • 设为 Fallback 时，同时开启 Preload key request（预加载关键请求）中的图标字体（woodmart-font.woff2）预加载，两者配合才能保证首屏图标从首次渲染起就正确显示。

🖼️ 5.4 图片延迟加载（Lazy Loading）

WoodMart 完全兼容 WordPress 原生的延迟加载。在大多数情况下，原生延迟加载已经够用。如果你需要更精细的控制，可以开启 WoodMart 自带的延迟加载：

1. 进入 Performance → Lazy loading。
2. 可配置选项：

选项	说明	建议
Lazy loading for images	延迟加载页面中的图片	开启
Lazy loading for background images	延迟加载背景图片	开启
Offset（偏移量）	图片进入视口前多少像素开始加载	100–200px
Appearance effect	图片加载完成后的显示效果	Fade（淡入）
Disable native WordPress lazy loading	禁用 WordPress 原生延迟加载	开启（避免与主题的重复加载冲突）

⚠️ 首屏可见的图片（特别是 LCP 图片，即页面上最大的可见图片）不要延迟加载，否则会拖慢首屏渲染速度。

🔧 5.5 其他性能选项

1. Mobile DOM optimization（移动端 DOM 优化）：

   • 进入 Performance → Other。

   • 开启后，WoodMart 会根据设备类型移除不需要的资源，减小移动端的 DOM 体积。

   • ⚠️ 前提：你的缓存插件必须为移动端和桌面端分别提供缓存，否则会输出错误的页面结构。

2. Initialize carousel on scroll（滚动时初始化轮播）：

   • 对于首屏以下的轮播组件，开启后它们的脚本会在用户滚动到附近时才执行，减少初始 JS 执行时间。

   • 首屏可见的轮播不要开启，否则反而延迟了需要的脚本。

3. AJAX dropdowns（AJAX 下拉菜单）：

   • 如果你的导航菜单中包含 HTML Block 下拉内容（如超级菜单），开启后这些内容会通过 AJAX 按需加载，而不是一开始就全部写进页面。

   • 菜单内容越多，开启这个越有意义。

4. Load Contact Form 7 JS only where needed（仅在有表单的页面加载 Contact Form 7 脚本）：

   • 如果你安装了 Contact Form 7 插件，它的 JS 默认会在全站每一页加载。

   • 开启后只在有表单的页面加载，减少其他页面的无用脚本。

---

六、自定义 CSS 与 JS

📝 当主题选项面板里的设置无法满足你的定制需求时，WoodMart 提供了直接写代码的位置。

🎨 6.1 Custom CSS（自定义样式）

1. 进入 WoodMart → 主题设置 → Custom CSS。

2. 你会看到三个代码框，分别对应：

   • Desktop（桌面端，宽度 > 1024px）

   • Tablet（平板端，宽度 768–1024px）

   • Mobile（移动端，宽度 < 768px）

3. 在对应的框中写入你的 CSS 代码，保存即可。

💡 主题选项中的 Custom CSS 在主题更新后依然保留，不需要担心丢失。但如果你需要写大量自定义 CSS，建议放到子主题的 style.css 中，更方便管理和版本控制。

⚡ 6.2 Custom JS（自定义脚本）

1. 进入 WoodMart → 主题设置 → Custom JS。
2. 在代码框中写入你的 JavaScript 代码，保存即可。
3. 脚本会在全站每个页面的底部加载。

⚠️ Custom JS 框中的代码会直接输出到页面，不经过任何过滤。确保代码来源可信，不要粘贴来源不明的脚本。

🤔 6.3 什么时候用子主题而非 Custom CSS/JS

场景	推荐方式
改几个颜色、调几个间距	Custom CSS（快速、方便）
需要修改主题函数逻辑（如 functions.php）	子主题的 functions.php
自定义 CSS 超过 100 行	子主题的 style.css（更易管理）
需要添加 PHP 代码片段	子主题的 functions.php
只需要加一小段跟踪脚本	Custom JS（快速、方便）

✅ 简单原则：少量 CSS/JS 用主题选项面板，大量代码或 PHP 逻辑用子主题。

---

七、设置备份与恢复

🛡️ 花了半小时调好的主题设置，万一误操作或换站就全没了。WoodMart 内置了完整的设置备份机制。

💾 7.1 导出/导入设置

1. 进入 WoodMart → 主题设置 → Import / Export / Reset。
2. 导出：点击「Export」，会下载一个 JSON 文件，里面包含你当前所有的主题选项设置。
3. 导入：在另一个站点上安装同版本 WoodMart 后，点击「Import」，上传这个 JSON 文件，所有设置会一键还原。
4. 重置：如果改乱了想从头来，点击「Reset all settings」，所有设置恢复为默认值。

💡 建议每次完成一轮大调整后，导出一份备份存好。尤其在做性能优化之前，先导出一份「优化前」的备份，方便出问题时回滚。

📑 7.2 设置预设（Presets）

1. WoodMart 支持创建多个设置预设（Preset），每个预设保存一套完整的主题配置。

2. 你可以在 WoodMart → Theme settings presets（独立页面，不在主题设置面板内部）中管理预设：

   • 创建新预设并命名（如「夏季促销」「默认风格」「极简模式」）。

   • 在不同预设之间一键切换。

   • 删除不需要的预设。

💡 适合需要在不同风格之间快速切换的场景，比如节假日换主题色调。