# 无需插件即可构建 WordPress 页眉 URL: https://canvaswp.com/zh-hans/guides/build-a-wordpress-header-without-a-plugin/ Updated: 2026-11-03 指南 页眉是每位访客都会看到的网站部分，而主题通常将其隐藏在一个包含九个选项的设置页面之后。在 Canvas 中，页眉是您在编辑器中用区块搭建的记录，因此本指南重在动手搭建，而非逐项介绍复选框。 发布于 2026年9月5日 更新于 2026年11月3日 由 SemiColonWeb 的 Canvas 团队撰写 ## 第 1 步：Canvas 中的页眉是什么 页眉是一条记录，和页面一样列在 WordPress 后台中，并在同一个区块编辑器中编辑。正是这一决定，让您的网站无需再依赖页眉插件。 其他主题将页眉构建在别处。Blocksy 和 Astra 都将页眉构建器放在自定义器中，那是一个位于站点旁边的设置面板，与您编写页面所用的编辑器相分离。[我们的 Blocksy 对比](https://canvaswp.com/zh-hans/compare/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 区块会将其放置在页眉行上方。由于它相互独立，节假日信息可在整个站点中更改，无需打开页眉。 ## 第 8 步：页脚也按同样方法操作 页脚使用的是同一套系统，只是作用于页面的另一端，因此前面七个步骤中的所有内容都同样适用。 ### 两条记录，而不是一条 页脚记录保存各列内容，单独的 Copyrights 记录则保存底部的细条。这样拆分后，版权声明或年份可以在整个站点统一修改，而无需改动上方的设计。 ### 区块 Footer About 用于公司简介，Footer Contacts 用于地址和电话号码，Footer Instagram 用于动态信息流，Footer Widget Area 用于小工具可实现的任何功能，Widget Links 用于整齐的链接列，Copyrights 用于底部栏。页脚图案可为您提供初始布局，页脚还有其自身的全站选项。 ### 页眉中应放入哪些内容 页脚是访客寻找证明和地址的地方。联系方式、营业时间、法律页面、一句关于您的简介，以及那些不足以放在页眉中的链接，都适合放在这里。将页脚全局指定，并在需要更简洁版本的页面上单独覆盖，即可完成该项目的站点框架设置。 [每个构建器区块和选项](https://canvaswp.com/zh-hans/header-builder/) ## 来源 凡本指南涉及 Canvas 本身之外的内容，以下为相关的官方文档页面。 - [外观菜单页面](https://wordpress.org/documentation/article/appearance-menus-screen/) wordpress.org · 在此创建 WordPress 菜单，并将其分配到主题提供的位置 - [理解成功标准 2.5.8：目标尺寸（最小）](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) w3.org · 为何触控目标需要至少 24 × 24 CSS 像素 后续步骤 ## 接下来可以做什么 两篇指南分别讲解页眉为何会影响整体设计，以及页眉构建器本身。 [指南 **区块主题还是页面构建器** 为什么页眉通常是决定整体选择的关键任务。](https://canvaswp.com/zh-hans/guides/block-theme-vs-page-builder/) [指南 **导入 WordPress 演示站点** 从内部查看已完成的区块网站，这是最快的方式。](https://canvaswp.com/zh-hans/guides/import-a-wordpress-demo-website/) [产品 **页眉构建器** 区域、行和每个页面的页眉，以及展示这些内容的界面。](https://canvaswp.com/zh-hans/header-builder/) 常见问题 ## 常见问题 [完整的常见问题](https://canvaswp.com/zh-hans/faq/)可解答其他疑问，[文档](https://docs.canvaswp.com/)详细介绍了每项设置。 **移动端需要单独的页眉吗？** 通常不需要，因为单个 Canvas 页眉记录会自行适配手机屏幕。区域会按断点重新排序，每个区域还可以限定为某一设备层级，因此一条记录就能在手机上将 Logo 居中、隐藏联系方式，并将菜单收入切换按钮之后。只有在确实需要不同设计时才应创建第二条记录，而不是用来修复布局。 **同一个页面能否使用不同的页眉？** 是的，任何 Canvas 页面都可以设置自己的页眉。页眉、顶栏、页面标题和页脚均有全站默认设置和单页覆盖选项，因此营销活动落地页可以在照片上方使用透明页眉，而其他页面保留标准页眉。 **这是小工具区域还是菜单？** Canvas 页眉两者都不是：它是一条你可以像编辑页面一样，在区块编辑器中编辑的记录，其中的徽标、导航、搜索、购物车和按钮都是各自带有设置面板的区块。你的 WordPress 菜单仍然是 WordPress 菜单；Header Navigation 区块会将其渲染出来。 **许可证过期后，我的页眉会怎样？** 您的网站将保持与现在完全相同的渲染效果。暂停的是服务：更新、演示导入、CanvasAI Engine 功能以及高级区块的编辑，都会在您续订之前停止；如果许可证检查无法连接我们的服务器，还有 14 天的宽限期。