WoodMart 页脚（Footer）制作与调用-WP独立站学院

生成摘要

AI 生成，仅供参考

一、认识 WoodMart 页脚系统

💡 WoodMart 的页脚没有像页眉那样独立的可视化 Builder 面板，而是通过 主题设置（Theme Settings）→ Footer 统一配置。页脚的布局结构、配色方案、版权区域、预页脚区域、粘性页脚等设置全部集中在这一个面板里。

这和很多主题的思路不太一样——WoodMart 不需要你「拖拽搭建」页脚，而是先选好列布局，再往对应的小工具区域里填内容，或者直接用一个 HTML Block（HTML 区块）完全接管。

📋 1.1 页脚的整体结构

WoodMart 页脚从上到下分为三个区域：

预页脚（Prefooter）：页脚主体上方的附加内容区，适合放 Google 地图、Instagram 动态、促销横幅。
页脚主体（Footer）：页脚核心内容区，支持多列布局，适合放导航菜单、关于我们、联系方式、社媒图标。
版权区域（Copyrights）：页脚最底部，适合放版权声明、支付方式图标、备案信息。

📌 不是每个区域都必须启用。大多数站点只需要「页脚主体 + 版权区域」两个部分就够了。预页脚是可选的增强区域。

📋 1.2 两种页脚制作方式

WoodMart 提供两种方式来制作页脚主体内容：

方式	原理	适合场景
小工具方式（Widgets）	在主题设置中选择列布局，然后在外观 → 小工具中向每个列区域添加小工具	结构简单、标准的多列页脚，快速上线
HTML Block 方式	在主题设置中将 Footer Content 设为 HTML Block，用一个页面构建器创建的区块完全替代页脚	需要复杂布局、自定义设计、促销横幅等高级场景

💡 两种方式可以混用：如果你在小工具方式下，某一列需要放一个特别复杂的内容，也可以在那个小工具区域里放一个 HTML Block 小工具，把预先做好的区块嵌进去。

🚪 1.3 进入页脚设置

登录 WordPress 后台。
进入 WoodMart → Theme Settings（主题设置）。
在左侧设置面板中找到并点击 Footer。

✅ 进入后你会看到 Footer 设置的主面板，包含 Footer Content（页脚内容）、Prefooter（预页脚）、Copyrights（版权区域）等设置区块。

二、方式一：使用小工具制作页脚

这是最快速的方式，适合标准的多列页脚。流程是：先在主题设置中选好列布局，再在外观 → 小工具中往对应区域填内容。

🔧 2.1 选择页脚列布局

进入 WoodMart → Theme Settings → Footer。
找到 Footer Content 选项，默认值为 Widgets。

Footer内容类型小工具与HTMLBlock
3. 在下方的布局选项中选择列结构，WoodMart 提供一到四列的多种预定义布局。

4) 选好布局后，点击页面右上角的 Save（保存）按钮。

📦 2.2 查看生成的小工具区域

保存列布局后，WoodMart 会自动在 WordPress 小工具系统中创建对应数量的 Footer Column 小工具区域：

进入 外观 → 小工具（Appearance → Widgets）。
在左侧可用小工具区域列表中，你会看到名为 Footer Column 1、Footer Column 2、Footer Column 3、Footer Column 4 的区域（数量取决于你选择的列布局）。

⚠️ 如果保存了列布局后没有看到对应的 Footer Column 区域，清空缓存插件后刷新页面再试。

🛒 2.3 向各列添加小工具

现在开始往每个 Footer Column 区域中添加小工具。WordPress 区块编辑器风格的小工具页面操作方式如下：

第一列：品牌信息

在左侧找到 Footer Column 1 区域。
添加一个 文本（Text） 小工具，输入你的品牌简介，例如品牌名称、一句话定位、客服邮箱。
想显示社媒图标，先在 Theme Settings → Social profiles → Links to social profiles 中填入你的社媒主页链接（留空的平台不会显示图标）。
再回到 外观 → 小工具，添加社媒图标小工具到 Footer Column 1，它会自动展示上一步配置好的图标。

⚠️ 社媒链接不是在用小工具时逐个填写的，而是统一在 Social profiles 里配置。漏掉这一步，加完小工具前台会什么都不显示。

第二列：导航菜单

找到 Footer Column 2 区域。
添加一个 Navigation Menu（导航菜单）小工具。
在小工具设置中选择一个预先创建的菜单——如果你还没有专门给页脚用的菜单，先去 外观 → 菜单 创建一个，比如命名为「页脚菜单」，添加关于我们、联系客服、退换货政策、隐私政策等页面。

💡 页脚菜单和顶部主菜单是分开的。建议专门建一个页脚菜单，只放政策页面、帮助页面等次要导航，不要把所有页面都塞进去。

第三列：客服与联系信息

找到 Footer Column 3 区域。
添加一个 文本（Text） 小工具，写入客服电话、邮箱、工作时间、发货地等实用信息。
如果有 WhatsApp 或在线客服链接，也可以在这里用文本小工具加入超链接。

第四列：支付方式

找到 Footer Column 4 区域。
添加一个 文本（Text） 小工具，用图片块或 HTML 代码插入支付方式图标（Visa、Mastercard、PayPal 等）。
或者添加一个 WoodMart: HTML Block 小工具，选择一个预先用页面构建器做好的支付方式图标区块。

💡 支付方式图标图片建议使用透明背景的 PNG，宽度统一在 40–50px，排列整齐。

🎨 2.4 调整小工具内容样式

小工具方式下的样式调整空间相对有限，主要通过以下途径控制：

标题样式：部分小工具支持设置标题颜色和大小，在小工具自身的设置面板中调整。
链接颜色：在 Theme Settings → Footer 中可以设置页脚的配色方案（Color Scheme），影响整体文字和链接颜色。
间距：页脚各列之间的间距由主题布局自动控制。如果需要微调，可以在 Theme Settings → Custom CSS 中添加自定义样式。

⚠️ 如果你需要对页脚做精细的样式控制（比如每列不同的背景色、自定义间距、特殊排版），建议使用方式二（HTML Block 方式），用页面构建器来做。

三、方式二：使用 HTML Block 制作页脚

当你需要完全自定义页脚的设计——比如加入促销横幅、多行多列复杂布局、品牌专区、 newsletter 订阅表单等——小工具方式的灵活度就不够了。这时候用 HTML Block 方式，把整个页脚交给页面构建器来设计。

📦 3.1 创建页脚用的 HTML Block

进入后台 HTML Blocks → Add New。
输入区块标题，例如「自定义页脚」。
选择你要使用的页面构建器（Elementor / WPBakery / Gutenberg），点击编辑。

📌 HTML Block 是 WoodMart 特有的内容容器，本质上是一个可以独立编辑、可以被主题在各个位置调用的内容区块。你在第五课制作页眉时已经接触过这个概念。

🏗️ 3.2 用页面构建器设计页脚布局

以 Elementor 为例，设计一个四列页脚：

在 Elementor 编辑器中，添加一个多列区块（Section），设置为四列。
第一列：添加 WoodMart 的品牌信息元素——可以是 Image（Logo 图片）+ Text Editor（品牌简介）+ Social Icons（社媒图标）。
第二列：添加 Icon List（图标列表）或 WoodMart 的导航菜单元素，放置快速链接。
第三列：添加 Text Editor，放入客服联系方式。
第四列：添加 Image 元素或 Icon 元素，排列支付方式图标。
在区块底部再加一行单列区域，放入版权信息和备案号。

💡 Elementor 中可以使用 WoodMart 专属元素（带有 WoodMart 标识的元素），这些元素针对主题样式做了适配，推荐优先使用。

🎨 3.3 在构建器中设置样式

使用 HTML Block 方式的最大优势就是可以用页面构建器的完整样式系统：

字体大小：在每个元素的「样式」标签页中设置文字字号、行高、字重。
颜色：可以分别设置文字颜色、链接颜色、链接悬停颜色、标题颜色。
间距：通过 Elementor 的 Padding（内边距）和 Margin（外边距）控制元素之间的间距。
背景：可以为每列或整个区块设置背景颜色或背景图片。
响应式：在 Elementor 底部切换到平板/手机视图，单独调整移动端的列排列方式（比如从四列改为单列堆叠）。

✅ Elementor 中切换移动端视图的方法是点击底部栏的响应式图标（手机图标），然后在每个元素和区块的设置中分别调整移动端样式。

🔗 3.4 将 HTML Block 应用为页脚

页脚 HTML Block 设计完成后，回到主题设置中启用它：

进入 WoodMart → Theme Settings → Footer。
将 Footer Content 选项从 Widgets 改为 HTML Block。
在下方出现的下拉框中，选择你刚才创建的「自定义页脚」HTML Block。
点击右上角 Save 保存。

⚠️ 切换为 HTML Block 方式后，之前在小工具区域中添加的 Footer Column 小工具内容将不再显示。两种方式是互斥的，同一时间只有一种生效。

📐 3.5 页脚的宽度与容器设置

无论使用小工具方式还是 HTML Block 方式，页脚的宽度都受主题全局容器设置控制：

如果你希望页脚内容区与页面主体宽度一致，保持默认即可。
如果你希望页脚内容铺满全屏宽度（内容紧贴屏幕边缘），需要在 HTML Block 的页面构建器中将区块宽度设为 Full Width（全宽）。
页脚背景色默认铺满全屏宽度，内容区居中。这是 WoodMart 的标准表现，不需要额外设置。

四、预页脚（Prefooter）设置

预页脚是页脚主体上方的一个可选内容区域。你可以把它理解为「页脚和页面内容之间的过渡带」。

📍 4.1 预页脚的用途

常见的预页脚应用场景：

🆕 促销信息横幅：限时折扣公告、免邮提示
📍 Google 地图嵌入：展示实体店或仓库地址
📸 Instagram 动态：展示品牌社媒图片流
📧 Newsletter 订阅表单：收集邮件地址用于营销
💳 支付方式与信任标识：PCI DSS 认证、SSL 加密标识等

🔧 4.2 开启和配置预页脚

进入 WoodMart → Theme Settings → Footer。
找到 Prefooter 设置区块。
开启预页脚开关（Enable Prefooter）。
内容类型有两种选择：

内容类型	说明	操作方式
Text（文本）	简单文本内容，支持基础 HTML	直接在设置框中输入文字或 HTML 代码
HTML Block	使用页面构建器创建的区块	先在 HTML Blocks 中创建好区块，然后在此下拉选择

选择内容类型后，输入对应内容。
可选：设置预页脚的背景颜色。
点击 Save 保存。

💡 预页脚用 Text 类型时支持 HTML 代码，所以你也可以在里面嵌入 Google Maps iframe、Instagram embed 等第三方代码片段。但如果需要复杂的排版和样式控制，建议还是用 HTML Block 类型。

五、版权区域设置

🔧 5.1 开启版权区域

进入 WoodMart → Theme Settings → Footer。
找到 Copyrights 设置区块。

版权区域设置
3. 开启版权区域开关（Enable Copyrights）。

📋 5.2 选择版权区域布局

WoodMart 版权区域提供两种布局：

布局	说明	适用场景
1 Column	单列居中，所有内容居中显示	简洁站点，只有一行版权文字
2 Columns	双列布局，左右分开	左侧放版权文字，右侧放支付方式图标或次要链接

💡 跨境电商站点推荐使用 2 Columns 布局：左侧放版权声明和法律链接，右侧放支付方式图标，这是行业最常见的设计模式。

✏️ 5.3 设置版权文字

在 Copyrights 设置区块中找到 Content area（内容区域），输入你的版权文字。

支持 HTML 标签，常见写法：

© 2025 Your Brand Name. All rights reserved.
加入链接：© 2025 Your Brand Name. <a href="/privacy-policy">Privacy Policy</a> | <a href="/terms">Terms</a>

⚠️ 版权区域中的年份建议手动维护。如果希望自动显示当前年份，可以在内容中插入 PHP 短代码（需安装支持短代码的插件），但这不是 WoodMart 原生功能，不在本篇讨论范围。

🎨 5.4 版权区域样式

版权区域的样式可以通过以下选项控制：

背景颜色：在 Copyrights 设置区块中可设置背景色，建议使用比页脚主体更深或更暗的颜色，形成层次区分。
文字颜色：同样在该区块中设置。
字体大小：通过 Theme Settings → Typography（排版设置）中针对页脚区域的字体选项进行调整。

六、页脚样式与功能设置

除了内容布局，WoodMart 还提供几个实用的页脚功能开关，全部位于 Theme Settings → Footer 面板中。

📌 6.1 粘性页脚（Sticky Footer）

粘性页脚的效果是：页脚固定在页面内容背后，用户滚动到页面最底部时才「露出」页脚。这是一种视觉上有「滚动发现感」的效果。

开启方法：

进入 Theme Settings → Footer。
找到 Sticky footer 选项，开启开关。
保存设置。

⚠️ 粘性页脚是一个纯视觉效果，不影响功能。但要注意：如果你的页面内容很短（比如一个空白的联系页面），粘性页脚可能不会触发滚动发现效果，用户会直接看到页脚。建议在内容较长的页面上使用效果最佳。

📱 6.2 移动端折叠小工具（Collapse widgets on mobile）

这个功能专门针对小工具方式制作的页脚。开启后，页脚中的导航菜单小工具在移动端会默认折叠为可点击展开的形式，用户点击标题才展开内容。这样在手机上不会因为页脚内容过多而占用大量屏幕空间。

开启方法：

进入 Theme Settings → Footer。
找到 Collapse widgets on mobile 选项，开启开关。
保存设置。

💡 如果你使用的是 HTML Block 方式制作的页脚，这个选项不会自动生效。需要在页面构建器中使用「Toggle」（折叠面板）元素来手动实现移动端折叠效果。

⬆️ 6.3 回到顶部按钮（Scroll to top button）

开启后，页面右下角会出现一个按钮，用户点击后页面平滑滚动回到顶部。对于内容较长的电商页面（如商店列表页、博客长文）非常实用。

开启方法：

进入 Theme Settings → Footer。
找到 Scroll to top button 选项，开启开关。
保存设置。

✅ 回到顶部按钮是全站功能，开启后所有页面都会显示。按钮样式（颜色、大小、位置）由主题统一控制，目前不支持单独自定义。

🎨 6.4 页脚配色方案（Color Scheme）

WoodMart 为页脚提供了配色方案设置，可以快速切换页脚的整体色调：

进入 Theme Settings → Footer。
找到 Color scheme 选项。
可选值通常为 Dark（深色方案：深色背景 + 浅色文字）或 Light（浅色方案：浅色背景 + 深色文字）。

💡 跨境电商站点通常使用 Dark 方案——深色背景 + 白色文字，页脚区域和页面主体形成视觉分隔，也让页脚信息显得更干净。如果你的品牌主色调偏浅，可以用 Light 方案配合品牌色背景。

🔤 6.5 页脚字体设置

页脚区域的字体大小和行高可以通过主题排版设置统一控制：

进入 Theme Settings → Typography。
找到与 Footer 相关的排版选项（如 Body text in footer、Headings in footer 等）。
设置字体大小（Font Size）、行高（Line Height）、字重（Font Weight）。

⚠️ Typography 中的具体可用选项取决于主题版本。WoodMart 8.5.5 中，页脚相关排版选项可能合并到通用文字设置中。如果没有独立的 Footer 排版选项，可以通过 Custom CSS 针对 .footer-container 选择器添加字体样式。

七、为特定页面指定不同页脚

大多数情况下，全站使用同一个页脚就够了。但有些场景需要不同页面显示不同页脚，比如落地页（Landing Page）不需要页脚导航，或者特定活动页面需要专门的页脚促销信息。

📍 7.1 在页面编辑器中指定页脚

WoodMart 支持在单个页面级别覆盖全局页脚设置：

进入后台，编辑需要特殊页脚的页面。
如果使用 Elementor，在页面底部的 WoodMart Settings（页面设置面板）中找到 Footer 相关选项。
如果使用 Gutenberg（默认编辑器），在页面右侧的 WoodMart page settings（页面设置）侧边栏中找到 Footer 选项。
可以选择：Disable footer：完全隐藏该页面的页脚。Select custom HTML Block：选择一个不同于全局设置的 HTML Block 作为该页面的页脚。