无需插件即可构建 WordPress 页眉
页眉是每位访客都会看到的网站部分，而主题通常将其隐藏在一个包含九个选项的设置页面之后。在 Canvas 中，页眉是您在编辑器中用区块搭建的记录，因此本指南重在动手搭建，而非逐项介绍复选框。
第 1 步：Canvas 中的页眉是什么
页眉是一条记录，和页面一样列在 WordPress 后台中，并在同一个区块编辑器中编辑。正是这一决定，让您的网站无需再依赖页眉插件。
其他主题将页眉构建在别处。Blocksy 和 Astra 都将页眉构建器放在自定义器中，那是一个位于站点旁边的设置面板，与您编写页面所用的编辑器相分离。我们的 Blocksy 对比将两种方式并排呈现。
嵌套结构
一条页眉记录包含一个 Header Root。Root 下包含一个 Header Container，它决定页眉是盒式还是全宽，或者在某一断点处采用一种布局、其他情况下采用另一种布局。Container 包含 Header Zones，每个 Header Zone 都是页眉行中的一个单元格。Logo 放在其中一个 Header Zone 中，导航放在下一个 Header Zone 中，搜索图标和购物车则放在最后一个 Header Zone 中。
页眉相关区块共有 22 个，典型站点通常只会用到其中四五个。其余区块则是为您需要商店搜索、语言链接或角落营业时间区块的那一天准备的。
这并非独立的编辑器。若您在 WordPress 中编辑页面，同样可以编辑页眉，撤销、区块设置和键盘快捷键的使用方式也完全相同。
第 2 步：创建页眉记录
打开 Canvas 菜单中的“页眉”列表，并新增一条记录。您有两种务实的起点。
从区块模式开始
插入页眉图案后，您会得到普通区块，它们已为您排列好，可以随意重新排列、重命名或删除。在本产品的全部 183 个图案中，页眉是数量最多的图案类别，因此通常能找到与您想要的样式相近的内容。这是最快的方式，也是首次搭建时应当采用的方法。
从演示站点开始
如果您在 88 个演示网站中导入了某一个，其页眉已作为一条记录存在于您的站点中。您可以直接打开修改，也可以复制一份后在副本上尝试。相比从空白画布开始，编辑一个可用的页眉能让您更快地理解其结构。
为记录取一个能说明用途的名称，例如“主页眉”或“落地页页眉”。一个月内您将创建三个这样的记录，名称是区分它们的唯一依据。
步骤 3：规划区域布局
由区域负责布局，因此您几乎无需再与对齐类打交道。
- 将一个区域推到边缘。左侧区域放置logo，中间区域放置菜单，右侧区域放置操作按钮，这是大多数网站最终采用的布局。
- 将相关元素归为一组。搜索图标、购物车和按钮位于同一区域时，会保持为一个整体，并以一组的间距排列。
- 按断点调整顺序。在桌面端排第三的区域，在手机端可以排第一，无需第二条页眉记录。
- 将区域限定到某个设备层级。告诉某个区域跳过没有空间容纳它的设备，这样就无需事后用 CSS 隐藏任何内容。
- 为区域添加自定义类名，以便从您自己的样式表中调用。
先搭建桌面端的布局，并在各部分内容到位之前保持不变。一旦真实内容放入行中，布局决策会容易得多。
第 4 步：添加组件
现在来填充各个区域。每个区域都是一个区块，并且每个区块都有一个设置面板，其中包含该区块支持的选项。
- 页眉 Logo。您的 Logo 可分别提供吸顶状态和深色状态的文件，因此在深色照片上使用透明页眉时无需额外变通处理。
- Header Navigation. 主菜单，包含下拉菜单和超级菜单面板。它会渲染 WordPress 菜单，因此菜单本身仍在您预期的位置管理。
- 页眉搜索。 一个点击后展开的输入框图标，或一个始终展开的输入框，可根据设计需要选择。
- Header Button。 行动号召按钮，附带常见的尺寸、样式和链接设置。一个有说服力，三个就是干扰。
- Header Cart。 带有商品数量和下拉摘要的 WooCommerce 购物车，适用于商店。
- Header Icon Link、Header Social 和 Header Info。电话号码、一排社交资料、一小段联系方式、地址或营业时间。
超级菜单：列表不够用时
超级菜单是一条独立的记录，由区块构成，并由超级菜单区块渲染，因此菜单项可打开一个全宽面板，其中包含多列、图片和按钮。Mega Menu Column 将面板保持在网格中。仅当某个分类确实具有结构时才使用它，而不是为了让小型网站显得内容繁杂。
第 5 步：吸顶、透明与布局预设
行为由预设决定，预设是一组布局设置，您可以一键应用，然后再进行调整。选择所需的行为，之后可随意更改任何设置。
- 透明。无背景，因此页眉后方的内容会透出。请将其与深色或浅色标志版本搭配使用，确保文字标志清晰可辨。
- 半透明。半透明背景能让背后的图片保持可见，同时确保文字易于阅读。与纷乱的照片相比，通常是更稳妥的选择。
- 浮动，以及半透明浮动或小型浮动，页眉位于页面内，四周留有间距，与窗口边缘保持距离。
- 全宽吸顶。横跨整个视口，并在页面滚动时保持固定。
- 向上滚动时吸顶。访客向下滚动时离开顶部，向上滚动时重新出现，从而为长页面重新腾出空间。
支撑这些效果的全站设置
页眉选项是主题选项中最大的部分，在 533 个字段中占 94 个，负责那些不应由单一记录掌控的内容：默认页眉、粘性行为、高度、间距以及移动端断点。演示导入会自动填入所有选项，您只需修改关心的部分。
步骤 6：手机页眉
大部分流量来自手机，因此请先检查这一点。好消息是，它仍是同一份记录。
- 调整顺序，无需重建。将徽标移至中间，切换按钮放在左侧，电话按钮放在右侧，全部通过区域排序完成。
- 去掉放不下的内容。将联系方式或社交图标行限定在较大屏幕上显示。硬塞进手机屏幕，对谁都没有好处。
- 保持触控目标足够大。 菜单开关和电话图标是人们在行走时最常点击的两个元素。
- 请谨慎设置断点。菜单折叠时的宽度是一项设置，因此菜单较长时，可能比菜单较短时更早折叠。
- 移动端菜单可考虑使用侧边面板。侧边面板是一种从屏幕边缘滑入的记录，可容纳完整的菜单、搜索框和按钮。
发布前请在编辑器中检查。Canvas 使用与访客端相同的代码在编辑画布中渲染页眉，因此在构建时即可查看手机端的布局效果。
第 7 步：为其指定应用位置，可全站生效，也可按页面设置
记录在被指定之前不会生效。它分为两个层级，两者对每个页面框架部件的作用方式都相同。
全站默认设置
在主题选项中设置默认页眉，所有页面都会使用它。顶栏、页面标题设计和页脚也可以同样设置。正是这项设置，让新页面一经发布便呈现正确的外观。
逐页覆盖设置
任何单个页面都可以在其自身设置中覆盖上述任一选项。例如，营销活动落地页可采用透明页眉且不显示顶部栏，而联系页面则保留标准设置。实现这一点无需复制任何内容，之后也无需记住任何设置，因为覆盖设置保存在受其影响的页面上。
顶部栏
顶部栏是一条独立的记录，拥有自己的区块：电话号码、营业时间、语言切换器和公告。Header Topbar 区块会将其放置在页眉行上方。由于它相互独立，节假日信息可在整个站点中更改，无需打开页眉。
来源
凡本指南涉及 Canvas 本身之外的内容，以下为相关的官方文档页面。
- 外观菜单页面wordpress.org · 在此创建 WordPress 菜单，并将其分配到主题提供的位置
- 理解成功标准 2.5.8：目标尺寸（最小）w3.org · 为何触控目标需要至少 24 × 24 CSS 像素
接下来可以做什么
两篇指南分别讲解页眉为何会影响整体设计，以及页眉构建器本身。
移动端需要单独的页眉吗？
通常不需要，因为单个 Canvas 页眉记录会自行适配手机屏幕。区域会按断点重新排序，每个区域还可以限定为某一设备层级，因此一条记录就能在手机上将 Logo 居中、隐藏联系方式，并将菜单收入切换按钮之后。只有在确实需要不同设计时才应创建第二条记录，而不是用来修复布局。
同一个页面能否使用不同的页眉？
是的，任何 Canvas 页面都可以设置自己的页眉。页眉、顶栏、页面标题和页脚均有全站默认设置和单页覆盖选项，因此营销活动落地页可以在照片上方使用透明页眉，而其他页面保留标准页眉。
这是小工具区域还是菜单？
Canvas 页眉两者都不是：它是一条你可以像编辑页面一样，在区块编辑器中编辑的记录，其中的徽标、导航、搜索、购物车和按钮都是各自带有设置面板的区块。你的 WordPress 菜单仍然是 WordPress 菜单；Header Navigation 区块会将其渲染出来。
许可证过期后，我的页眉会怎样？
您的网站将保持与现在完全相同的渲染效果。暂停的是服务：更新、演示导入、CanvasAI Engine 功能以及高级区块的编辑，都会在您续订之前停止；如果许可证检查无法连接我们的服务器，还有 14 天的宽限期。
使用 Canvas 构建您的下一个网站
无论是新手、自由职业者还是代理机构，获得的区块与演示站点都完全相同。可以从一个网站开始，并在同一许可证下按需搭建任意数量的网站。