网站页眉是访客打开页面后最先看到的区域，通常包含网站LOGO、导航菜单、搜索、账户入口和移动端菜单按钮。一个清楚、简洁的页眉，不仅能让网站看起来更专业，也能帮助访客更快找到产品、案例和联系方式。
SHOPAGG主题提供可视化页眉设计器，可以分别设置电脑端和手机端的LOGO，也可以拖拽调整LOGO与菜单的位置。网站还可以创建多套页眉，并把不同页眉应用到首页、产品页或其他指定页面。
本节是《WordPress建站教程》的第14课，带大家完整了解如何使用SHOPAGG主题修改WordPress网站页眉。
什么是WordPress网站页眉？
页眉也常被称为网站头部或Header，通常位于每个页面的最上方。
一个常见的电商网站页眉会包含：
- 网站LOGO；
- 主导航菜单；
- 产品分类入口；
- 搜索按钮或搜索框；
- 用户账户和购物车；
- 手机端菜单按钮；
- 联系方式或促销信息。
页眉与页脚都属于网站的公共区域。很多网站的首页、产品列表页、产品详情页和文章页虽然主体内容不同，但顶部页眉和底部页脚基本一致。
因此，修改一套正在全站使用的页眉后，变化可能会同步出现在多个页面。正式保存前，应同时检查首页、商品页和手机端效果。
为什么后台会有多套页眉？
启用SHOPAGG主题并导入成品网站后，页眉设计器中可能已经存在多套页眉。其中带五角星标记的，一般是当前网站的默认页眉。
网站允许创建多套页眉，是为了适应不同页面的展示需要。例如：
| 页面 | 可以采用的页眉方案 |
|---|---|
| 首页 | 透明背景、大尺寸LOGO或叠加在首屏图片上 |
| 产品列表页 | 常规背景，突出分类和搜索入口 |
| 产品详情页 | 保留购物车、账户和产品分类入口 |
| 活动落地页 | 精简导航，只保留品牌与行动按钮 |
如果网站所有页面共用同一套页眉，修改后通常会全站生效。如果首页和产品页的页眉明显不同，说明它们可能调用了不同的页眉，需要分别进入相应页面修改。
推荐从网站前台编辑“当前页眉”
虽然可以从WordPress后台打开页眉设计器，但新手面对多套页眉时，经常不知道当前页面到底使用的是哪一套。
更简单的办法是：登录WordPress后台后直接访问网站前台，在顶部管理工具栏中找到“SHOPAGG主题”，然后选择“页眉编辑器”或“编辑当前页眉”。
这样打开的就是当前页面正在使用的页眉，可以减少选错页眉的情况。
操作路径可以概括为：
登录WordPress后台 → 访问网站前台 → SHOPAGG主题 → 页眉编辑器 → 编辑当前页眉。
如果不同页面使用不同页眉，可分别进入首页、产品页等页面，再通过“编辑当前页眉”逐一调整。
认识页眉设计器的三层结构
打开页眉设计器后，可以看到页眉通常被划分为三块：
- 顶部区域；
- 主导航区域；
- 底部区域。
并不是每套模板都会同时使用三个区域。很多成品模板只使用中间的主导航区域，用来放置LOGO、导航菜单、搜索、账户或购物车。
顶部区域可以用于放置联系电话、免邮提示和促销信息；底部区域可以用于增加分类菜单或辅助导航。没有实际用途的区域不必强行填满，页眉越复杂，占用的首屏空间越多。
第一步：修改电脑端网站LOGO
在页眉设计器中找到当前LOGO对应的“徽标”组件。部分中文翻译会把Logo显示为“徽标”，二者指的是同一个内容。
点击徽标组件的编辑按钮，然后完成以下操作：
- 点击当前徽标图片；
- 从媒体库选择已有图片，或者上传设计好的网站LOGO；
- 确认图片；
- 根据页面效果调整LOGO宽度、间距和对齐方式；
- 点击保存。
建议上传透明背景的PNG、WebP或主题支持的SVG格式LOGO。图片边缘应尽量减少多余留白，否则即使设置了合适宽度，视觉上仍可能显得很小。
网站LOGO尺寸怎么选择？
不同模板的页眉高度不同，没有一个适用于所有网站的固定尺寸。更实用的判断标准是：
- 在电脑端能够清楚识别品牌；
- 不要让LOGO把页眉撑得过高；
- 图片保持正确比例，不能被拉长或压扁；
- 文件大小尽量小，避免影响页面加载；
- 深色页眉与浅色页眉可准备不同颜色版本。
上传完成后，最好在真实网站前台检查效果，而不是只看编辑器中的预览。
第二步：单独设置手机端LOGO
SHOPAGG页眉设计器允许分别设置电脑端与手机端效果。修改电脑端LOGO后，不代表手机端一定会同步变化。
在编辑器中点击手机预览按钮，切换到移动端视图。如果手机端仍然显示原来的SHOPAGG演示LOGO，需要再次打开徽标组件并为手机端选择正确图片。
手机屏幕较窄，移动端LOGO通常应该比电脑端更紧凑。可以使用：
- 尺寸更小的完整品牌LOGO；
- 图标加简短品牌名；
- 只有品牌图形的简化版LOGO。
设置完成后再次点击保存，并使用真实手机或浏览器移动端模式进行检查。
第三步：拖拽调整LOGO和菜单位置
页眉设计器支持直接拖拽组件。比如可以把LOGO放到最左侧，把主菜单放在中间，再把搜索、账户或购物车放到右侧。
常见布局有以下几种：
| 布局 | 适合的网站 |
|---|---|
| 左侧LOGO、右侧菜单 | 企业官网、外贸B2B网站 |
| 左侧LOGO、中间菜单、右侧功能按钮 | WooCommerce零售独立站 |
| 居中LOGO、上下两层菜单 | 品牌展示型网站 |
| LOGO加极简导航 | 活动页、单品站和落地页 |
拖拽组件后，前台预览会同步发生变化。确认位置合适后点击保存。
调整时不要只考虑“是否好看”，还要考虑访客是否容易理解。最重要的产品、服务、案例和联系入口应该出现在主导航中，菜单层级也不宜过深。
第四步：检查手机端导航菜单
由于手机屏幕宽度有限，电脑端横向导航通常会在移动端自动收起，变成一个菜单按钮。访客点击按钮后，会从页面侧面打开一个抽屉窗口。
移动端抽屉中可能包含：
- 主导航菜单；
- 产品分类菜单；
- 搜索表单；
- 热门搜索；
- 用户账户；
- 其他快捷入口。
在页眉设计器中找到“移动端菜单”组件，点击设置按钮，就可以控制这些项目是否显示，并调整抽屉菜单的样式。
第五步：精简移动端搜索与分类菜单
成品模板提供的功能比较完整，但并不是每个网站都需要全部显示。
例如，网站产品很少，没有站内搜索的必要，可以关闭“显示搜索表单”；如果不希望菜单和产品分类同时出现，也可以关闭“显示分类菜单”，只保留一个清晰的主菜单。
建议按照业务实际情况保留功能：
- 产品数量较多：保留搜索和产品分类；
- 企业展示型网站：保留主菜单和联系方式即可；
- 需要会员中心：保留账户入口；
- 没有用户登录功能：可以隐藏账户入口；
- 导航项目较少：不要重复增加分类菜单。
每关闭或开启一个选项，都应保存并重新打开移动端菜单检查效果。
保存按钮被翻译按钮遮挡怎么办？
有些网站启用了翻译插件后，页面右侧的翻译按钮可能刚好遮挡页眉设计器的保存按钮。
可以先尝试把鼠标向下移动一点，点击露出的蓝色保存按钮。如果仍然无法正常操作，可以临时停用翻译插件：
- 返回WordPress后台；
- 点击“插件”，进入已安装插件页面；
- 根据插件描述找到网站翻译插件；
- 点击“停用”；
- 返回前台刷新页面，再保存页眉设置。
这里只需要临时停用插件，不建议直接删除。完成页眉编辑后，可以重新启用翻译插件，并再次检查多语言功能是否正常。
如果不确定哪个是翻译插件，应先查看插件名称和描述，不要随意停用网站缓存、安全、支付或其他正在使用的插件。
修改页眉后为什么有些页面没有变化？
最常见的原因是不同页面使用了不同的页眉。
例如，修改了默认页眉后，首页发生变化，但产品详情页没有变化，这通常说明产品页使用了另一套专用页眉。此时应打开没有变化的页面，从前台工具栏选择“编辑当前页眉”，再修改对应页眉。
除此之外，还可能由以下原因造成：
- 设置后没有点击保存；
- 修改的是电脑端，但正在查看手机端；
- 页面缓存或浏览器缓存尚未更新；
- 当前页面设置了单独的页眉覆盖规则；
- 页眉组件在当前设备上被设置为隐藏。
排查时先确认当前页面调用的页眉，再检查设备视图和缓存，通常就能找到原因。
网站页眉应该放哪些导航？
导航不是越多越好。外贸独立站可以优先考虑以下结构：
- 首页；
- 产品中心；
- 产品分类；
- 关于我们；
- 客户案例或作品集；
- 博客或行业知识；
- 联系我们。
如果网站面向海外客户，菜单名称应短、清楚，并使用目标客户熟悉的表达。移动端更要避免十几个菜单项目全部堆在同一级，否则访客很难快速找到重点。
页眉设计的实用优化建议
1. LOGO不要过大
过大的LOGO会占用大量首屏空间，尤其影响手机端浏览。品牌能够被识别即可，不需要让LOGO成为页面最大的视觉元素。
2. 主导航保留核心入口
把高频访问的产品、案例和联系页面放在明显位置。低频页面可以放进二级菜单或页脚。
3. 电脑和手机分别检查
桌面端布局正常，不代表手机端也正常。每次修改后至少检查常见电脑宽度和手机宽度。
4. 保持全站一致
除非页面有明确的营销目的，否则不建议每个页面使用完全不同的页眉。统一的LOGO、颜色和导航位置更有利于建立品牌识别。
5. 控制页眉中的功能数量
搜索、账户、购物车、语言切换、社交媒体和联系方式都可以放进页眉，但全部堆在一起会显得拥挤。只保留对当前业务真正有用的功能。
6. 保存后清理缓存
如果前台仍显示旧页眉，可以刷新缓存后再测试。也可以使用无痕窗口查看，避免浏览器旧缓存影响判断。
常见问题
1. 带五角星的页眉是什么意思？
它通常表示默认页眉。当某个页面没有指定其他页眉时，会调用这套默认设置。
2. 为什么网站需要多套页眉？
不同页面的展示目的不同。首页可以使用透明或视觉感更强的页眉，产品页则可能更重视搜索、分类和购物车，因此可以分别配置。
3. 修改当前页眉会不会全站生效？
如果多个页面共用同一套页眉，修改后这些页面都会变化；如果页面使用不同页眉，则只会影响调用当前页眉的页面。
4. 为什么电脑端LOGO换了，手机端还是旧LOGO？
因为电脑端和手机端可以独立设置。切换到手机视图后，再检查并更换移动端徽标图片。
5. “徽标”是不是网站LOGO？
是的。部分主题中文翻译会使用“徽标”这个名称，它就是网站LOGO组件。
6. 如何移动LOGO和导航菜单？
在页眉设计器中直接拖动对应组件，把它们放入顶部、主导航或底部区域的目标位置，然后保存即可。
7. 手机端菜单为什么看不到完整导航？
手机端通常会把横向菜单收进抽屉。点击菜单按钮即可展开。如果展开后仍缺少内容，需要检查移动端菜单组件和WordPress菜单分配。
8. 可以关闭手机端的搜索和分类吗？
可以。在移动端菜单设置中关闭“显示搜索表单”或“显示分类菜单”，保存后即可看到精简效果。
9. 翻译按钮遮住保存按钮怎么办？
可以调整鼠标位置点击露出的保存按钮，或者到插件页面临时停用翻译插件。完成设置后再重新启用，不要直接删除插件。
10. 修改后前台没有更新怎么办？
先确认已经保存，再检查是否改错页眉或设备版本，最后清理网站缓存和浏览器缓存后重新访问。
本节小结
使用SHOPAGG主题修改网站页眉，可以按照下面的流程操作：
打开目标页面 → 编辑当前页眉 → 修改电脑端LOGO → 设置手机端LOGO → 拖拽调整菜单位置 → 精简移动端菜单 → 保存并检查前台。
页眉是全站最重要的公共区域之一。设置时不要只看电脑端，也不要看到后台有多套页眉就随便修改。通过前台的“编辑当前页眉”进入对应设置，再分别检查电脑与手机效果，操作会更直观，也更不容易改错。
通过SHOPAGG官网可以一键部署WordPress和WooCommerce独立站，并使用配套主题、成品网站与可视化设计工具修改LOGO、导航和页面布局，让没有编程基础的用户也能更快搭建自己的跨境电商网站。
