如何自定义 WordPress 网站页眉？

在 WordPress 网站上设计一个精美的横幅（Banner）是展示网站文化的绝佳方式。它能让导航更轻松，从设计角度提升网站的美观度。

许多主题都自带预设计的页眉，也可以自定义它们，例如：

• 添加社交媒体链接
• 增加下拉菜单
• 添加搜索选项

通过 WordPress 的完整站点编辑功能，可以使用区块编辑器创建专业的页眉，不用编写自定义代码或依赖插件。

在本指南中，会展示 3 种不同方式 来自定义 WordPress 页眉，同时分享一些高级页眉自定义技巧，以及如何创建多个页眉模板。

什么是 WordPress 页眉？

页眉是网站的最顶部部分，通常会出现在网站每个页面的顶部。一般情况下，页眉会包含以下内容：

• 网站 Logo
• 搜索功能
• 基本导航菜单（如博客、关于我们、联系我们等）

可以自定义网站的页眉，让其对访客更有用，例如添加：

• 促销横幅
• 号召性按钮（CTA）
• 社交媒体链接
• 热门页面链接

接下来，看看如何自定义 WordPress 网站的页眉。

自定义 WordPress 页眉的方法

方法 一：用 WordPress 主题定制器

许多 WordPress 主题仍然支持 WordPress 主题定制器（Theme Customizer），可以用它来自定义网站的外观和风格。例如，我正在使用 Twenty Twenty | WordPress Theme 主题，该主题支持主题定制器，因为它是在 WordPress 5.9 引入完整站点编辑功能之前发布的。

注意：这种方法适用于较旧的主题，因为较新的主题正在转向基于区块的架构。在下一部分中，我们会了解如何用完整站点编辑功能自定义页眉，继续往下看。

要访问 WordPress 主题定制器，前往 外观 > 自定义。如果没有看到此选项，说明该站点支持完整站点编辑功能。

在Twenty Twenty 主题中，没有太多选项可以编辑标题。事实上，没有专门用于编辑标题的部分。要自定义标题，可以转到“颜色”部分更改标题颜色。

还可以通过前往主题选项在标题中添加搜索选项。

如果想在页眉中添加网站的Logo和网站标题，可以转到“网站标识”选项。

就是这样。在 Twenty Twenty 主题中，无法添加或删除导航菜单，也无法进行进一步的页眉自定义。

如果用的是提供专门页眉自定义选项的主题，例如 Astra，就可以对网站的页眉进行更多更改。

在 Astra 主题中，可以前往 Header Builder（页眉构建器）来自定义网站的页眉。

现在，可以对网站的页眉进行大量更改。例如，我们可以从更新导航菜单开始。要进行这步操作，转到“主菜单”（Primary Menu）选项。

现在想自定义现有的导航菜单。

我会点击“从这里配置菜单”（Configure Menu from Here）>“主菜单”（Primary Menu）>“+ 创建新菜单”（+ Create New Menu）。

给新菜单命名，然后点击“下一步”（Next），添加想要在导航菜单中链接的页面。

现在，如果注意到，现有的导航菜单会被移除。

要添加新菜单，点击“+ 添加项目”（+ Add Items）按钮。

现在，我将把主页（Home）、定价页（Pricing）和登录页（Login）添加到页眉中，然后点击“发布”（Publish）按钮。

现在，会看到新的导航菜单已添加到网站的页眉中。

为了进行进一步的自定义，还可以在页眉中添加社交媒体链接。在自定义页面的底部，会看到一个添加小工具的选项，如下所示：

社交小工具已添加到网站导航菜单中。

现在，要给社交小工具添加链接，点击刚刚添加的社交小工具。

现在，在左侧会出现一个单独的菜单，用于添加链接。可以通过此菜单添加链接，还可以根据需要更改图标。

接下来，我们对页眉进行一些设计更改。需要进入 设计（DESIGN） 菜单。

我会给导航菜单添加下划线效果。

还会更改导航菜单的文本颜色。更改后，文本颜色将为黑色，点击时变为红色，悬停时变为蓝色。

可以根据需要进行更多自定义，但为了教程不那么复杂，我就到这里为止了。如果我们现在预览网站，页眉看起来是这样的：

它不是很漂亮，但确实是自定义过的。可以根据自己的喜好来进行自定义。

方法二：用全站编辑功能自定义

现在我们用 WordPress 的全站编辑功能来自定义页眉。会切换到 Twenty Twenty-Four 主题。更改支持基于区块的架构的主题后，会发现之前的“自定义”选项被移除了，取代的是“编辑器”（Editor）选项。点击它开始操作。

进入编辑器后，有无限的自定义选项。首先，会像之前一样自定义导航菜单，因为它对我来说太混乱了。

编辑导航菜单的方法

• 点击导航菜单，然后点击“编辑”（Edit）。

• 我只想在页眉中保留“主页”（Home）、“关于”（About）和“登录”（Login）页面。

• 调整满意后，点击“保存”（Save）。

这是新菜单：

接下来，为页眉添加背景颜色。

• 选择包含站点标题、Logo和导航菜单的行区块（Row block）。

• 转到该区块的设置，在“颜色”（Color）下找到“背景”（Background）选项。

我为页眉添加了渐变背景颜色。预览时应会看到如下效果：

嗯，导航菜单看起来太小了，而且挤在角落里。我们将文字稍微调大一些，并增加一些间距。

• 选择导航区块（Navigation block），进入“样式”（Styles）选项，将文字大小更改为中等，并在菜单项之间添加间距。

现在预览后，页眉看起来应该好多了：

接下来，我们为导航菜单添加一个子菜单，显示不同的语言选项。

• 添加“子菜单”（Submenu）区块，并将其命名为“语言”（Languages）。
• 然后，添加子菜单项，如下所示：

预览效果如下：

你可以尝试用全站编辑器，给 WordPress 网站创建完全独特的导航页眉吧！

创建多个页眉模板

WordPress 网站编辑器的一大优势是可以为不同的模板创建不同的页眉。

通过网站编辑器，可以使用区块模式中的预设页眉，让更改页眉的外观和样式变得简单。

例如，我想为某个单独页面创建一个独特的页眉，而不是整个网站的页眉。
我会选择要创建单独页眉的模板，然后按照以下步骤操作：

1. 删除现有页眉

当选择了一个模板后，会看到当前显示的页眉是我们之前创建的页眉。

重要提示： 不要直接在此模板或其他模板上编辑现有页眉，因为这会影响整个网站的页眉。
因此，我们需要删除这个页眉，并为当前模板创建一个新的页眉。

• 打开列表视图（List View）。
• 选择“Header”（页眉），点击省略号图标（Ellipses Icon）>“删除”（Delete）。
• 这将删除现有的页眉。

页眉删除后的效果如下：

2. 添加新的页眉

现在，我们可以给模板添加一个新的页眉。可以选择：

• 从头开始创建一个新的页眉，或者
• 用预设的页眉模式（Premade Pattern Header）。

文中选择用预设的页眉模式，步骤如下：

• 进入 Patterns（模式） > Headers（页眉）。

• 选择一个符合需求的页眉模式，该页眉只会出现在使用此自定义模板的单个页面或文章中，而不会影响整个网站。

下面是我的模板用预设页眉后的效果：

现在，可以根据需要进一步调整自定义页眉的样式和内容！

方法三：使用页面构建器创建自定义页眉

另一种自定义页眉的方法是用页面构建器。不过，如果网站用的是具有严格布局规则的自定义主题，并且不允许使用页面构建器覆盖其页眉，那么此方法可能不太适合。

但如果是从零开始构建网站，那么页面构建器会是一个不错的选择。

在这里，我用 Elementor 的免费版本（自定义选项有限）。

步骤：用 Elementor 自定义页眉

1. 进入外观设置
点击 外观（Appearance）> 自定义（Customize）。

2. 选择页眉和页脚选项
点击 页眉和页脚（Header & Footer） 选项。

3. 开始设计
点击 开始设计（Start Designing） 选项，使用 Elementor 编辑页眉。

4. 选择页眉主题
点击 页眉主题页眉（Header Theme Header） 选项。

5. 进行简单自定义
由于免费版本的自定义选项有限，这里我们只能通过更改颜色选项来示范如何简单调整不同的选项，自定义网站页眉。

下面是我自定义颜色后的页眉效果：

结论

上面就是我们关于自定义 WordPress 页眉的指南。我们介绍了三种不同的方法：用 WordPress 主题自定义工具，通过 全站编辑功能，以及使用像 Elementor 这样的页面构建器。