如何编辑 WordPress 页眉(5 种简单方法)

安装 WordPress 主题后,您会得到一个内置的页眉,显示在网站顶部。然而,这个页眉设计通常比较简单,可能不包含您想要的元素。因此,您可能想知道如何编辑 WordPress 页眉。

幸运的是,有几种简单的方法可以帮助您实现自定义 WordPress 页眉。这样,您可以调整布局和设计元素。此外,您还可以添加重要链接、社交图标、网站搜索或您的企业标志。

how to edit a WordPress header

在本文中,我们将仔细研究为什么您可能想要编辑 WordPress 页眉。然后,我们将向您展示实现这一目标的方法。让我们开始吧!

为什么需要编辑 WordPress 页眉

页眉位于网页的顶部。因此,它通常是访问者看到的网站第一部分。这就是为什么在这里包含最重要的元素是个好主意。

默认情况下,您会有一个由活动主题决定的内置页眉。它通常包含您的导航菜单、网站标题,有时还包括您的企业标志。

但是,您可能想知道如何编辑 WordPress 页眉以创建更独特的布局。您不仅可以修改设计的各个方面,还可以将某些元素展示给受众。

例如,您可能需要添加指向最受欢迎页面的链接。此外,添加您的联系方式也很有用,这样访问者就不需要在您的网站上搜索查找。

更重要的是,在页眉中添加社交图标是个好主意。这样,您可以将自然流量引到您的社交账户。同时,您可能想要插入搜索栏来改善用户体验 (UX)。

如何编辑 WordPress 页眉

既然您知道为什么可能想要编辑 WordPress 页眉,以下是实现这一目标的几种简单方法。

  1. 使用 WordPress 自定义器
  2. 访问完整网站编辑器 (FSE)
  3. 安装页面构建器
  4. 使用插件创建自定义页眉

1. 使用 WordPress 自定义器 🎨

Neve

如果您想知道如何使用经典主题编辑 WordPress 页眉,最简单的方法是使用 WordPress 自定义器。但是,您可以通过自定义器实现的定制程度完全取决于您的主题。例如,某些主题根本不允许您编辑页眉。

要打开自定义器,请转到 外观自定义。如果您的主题允许您编辑页眉,您应该在左侧的选项卡中看到一个 页眉 选项:

edit header customizer scaled 1

使用 Neve,您可以上传标志、调整尺寸并应用新颜色。但是,您还可以访问完整的页眉构建器,在其中可以将不同的组件添加到布局中:

neve header builder

例如,您可以添加一个行动号召按钮、插入购物车图标或包含搜索表单。更好的是,您可以使用简单的拖放编辑器对元素进行重新排列。

或者,点击构建器中的 + 图标来选择要添加的元素:

add neve header

如果您点击已添加到页眉的元素,也可以更改该功能的外观。例如,您可以更改颜色、文本或内边距。更好的是,使用 Neve,您可以访问页眉预设,在其中可以将预设计的页眉布局应用到您的网站。

然后,在前端查看您的网站,确保您对编辑结果满意:

view neve header

现在,点击 发布

2. 访问完整网站编辑器 (FSE) ⚙️

如果您想知道如何使用块主题编辑 WordPress 页眉,最好的方法是使用完整网站编辑器 (FSE)。您可以通过转到 外观编辑器 来访问。然后,点击 模式页眉

如果您使用 Neve FSE 这样的主题,可能能够从多个页眉布局中进行选择以开始使用。那么,请进行选择,然后点击 铅笔 图标打开编辑器:

neve fse header scaled 1

现在,使用工具栏可以更改菜单项和网站标题的对齐方式。但是,如果点击 + 图标,您可以在页眉内插入一系列块。

例如,您可能想要添加网站标志。如果是这种情况,请插入相关的块。然后,点击占位符标志从媒体库上传设计:

neve add logo

此外,您可能想要显示最新的文章。只需选择 最新文章 块并打开块设置来配置块的外观:

add latest posts header

例如,您可以更改文章项目数量、更改文章顺序以及显示特色图片。

同时,如果选择 社交图标 块,您可以点击 + 图标添加 Instagram、Twitter 和 Facebook 等不同平台:

header social icons

您需要选择相关的图标来添加您的社交媒体网址。然后,使用工具栏中的箭头调整块在页眉中的位置。在块设置中,您可以垂直或水平堆叠图标,并修改图标的形状和颜色。

3. 安装页面构建器 🖱️

如果您已经使用页面构建器插件来编辑内容页面,您可能也更愿意使用它来编辑 WordPress 页眉。并非所有页面构建器都支持此功能。但是,一些页面构建器(如 Elementor)提供了构建页眉和页脚等主题布局的选项。

但是,要使用 Elementor 头部构建器,您需要激活 Hello Elementor 主题 并安装 Elementor 页面构建器插件。然后,在仪表盘中转到 外观自定义

点击 头部和页脚

elementor header scaled 1

现在,选择 从此开始。这将在 Elementor 界面中打开您的头部。从这里,点击 头部

您可以在 站点设置中禁用站点 Logo、标语和菜单。此外,您可以更改对齐方式、宽度和背景颜色:

edit header elementor

站点 Logo 选项卡下,您可以更改字体以设置站点标题并调整间距。同时,展开 菜单 选项卡为您的主题布局选择新的导航菜单。

在这里,您还可以决定菜单是显示为水平菜单还是下拉菜单。同样,您可以更改菜单项的文字颜色、切换颜色和字体:

change menu header

现在,点击 更新 以保存您的更改。免费版的 Elementor 会限制您的设计选项。但是,如果您安装 Elementor Pro,您可以访问功能更全面的头部构建器,其中包含更多高级小部件。

👉 如果您想详细了解这个工具如何帮助您构建网站,请查看我们的 Elementor 评测

4. 使用插件创建自定义头部 🔌

现在,如果您不想使用上述任何方法,可以使用 Elementor Header & Footer Builder 插件创建自定义头部。这样,您可以使用 Elementor 小部件构建布局。然后,您可以在网站的任何位置显示它。

首先,您需要在 WordPress 仪表盘中安装并激活该插件。您还需要安装 Elementor 页面构建器插件

然后,转到 外观Elementor Header & Footer Builder 并点击 添加新。为您的模板命名,然后从 模板类型 下拉菜单中选择 头部

header with plugin

然后,您可以配置显示规则或选择 整个网站,以便您的头部在所有网页上可见。点击 发布。然后,选择 使用 Elementor 编辑

这将打开 Elementor 编辑器,您可以在其中构建您的自定义头部:

custom header

不利的一面是,您需要 Elementor Pro 才能使用菜单和表单等高级小部件。但是,您可以使用免费版构建包含按钮、图片和图标的简单头部。

5. 添加自定义代码片段 👨‍💻

您可能想知道如何以高级用户身份编辑 WordPress 头部。在这种情况下,您可以将自定义代码片段添加到您的网站。但是,这需要您编辑站点文件,而这可能有风险,因为一个错误的操作可能会破坏整个站点

因此,最好使用 Head, Footer and Post Injections 这样的代码插件。成功激活后,导航到 设置头部和页脚

现在,将自定义代码片段添加到其中一个头部区域。该插件甚至允许您为主页和标准页面设置自定义代码片段。

custom head and footer code

点击保存。就这样,您的代码片段将被打印在您网站的<head>区域中。

回到顶部

结论 🧐

虽然您选择的主题会为您的网站提供默认头部,但您可能想要编辑WordPress头部以实现更独特的设计。此外,您还可以向布局中添加大量有用的元素,如社交图标、标志和文章。

📌 总结一下,以下是编辑WordPress头部的方法:

  1. 🎨 使用WordPress自定义器。
  2. ⚙️ 访问完整网站编辑器(FSE)。
  3. 🖱️ 安装页面构建器。
  4. 🔌 使用插件创建自定义头部。

您对如何编辑WordPress头部有任何疑问吗?请在下方评论中告诉我们!

别忘了参加我们的WordPress网站加速速成课程。了解更多:

如何加速您的WordPress网站

通过一些简单的修复,您可以将加载时间减少50-80% 🚀

通讯表单 – 侧边栏

名字 *

您的邮箱 *

立即订阅!

如果你是人类,请留空此字段。

Δ

输入您的邮箱即表示您订阅了我们的每周通讯。您可以随时更改主意。我们尊重您的收件箱和隐私。

分享你的喜爱

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注