首页 > 文章专栏 > 正文

如何自定义WordPress网站头部(新手入门指南)

你是否曾访问过一个 WordPress 网站,感觉它看起来……很普通?就像直接从模板里搬出来的,毫无个性或记忆点?

这恰恰就是当你使用默认的 WordPress 头部时给人的印象,它可能会让你的每个访客对你的信任度大打折扣。

你的头部是访客进入网站时看到的第一样东西,因此它必须留下强烈的印象。自定义头部可以让你添加导航链接、社交图标、搜索栏等关键元素。

这些功能不仅让网站更易用,还能帮你树立专业、持久的形象。而且,我们已经看到自定义头部能够同时提升信任度和用户参与度。

在本指南中,无论你是完全的新手,我们都会教你如何自定义 WordPress 头部。你将学会多种无需写代码的方法,从而打造一个既出众又更服务访客的头部。

如何自定义你的 WordPress 头部(新手教程)

WordPress 中的头部是什么?

你的网站头部是 WordPress 网站每个页面的最顶部区域,很可能是访客首先看到的内容。它通常展示你的网站 Logo 和标题、导航菜单,以及你希望用户最先看到的其他重要元素。

例如,这是猫哥在 WPBeginner 上的头部区域,每月有数百万读者看到。

猫哥的自定义头部

通过自定义网站头部,你可以赋予它独特的风格,并使其对访客更有用。你可以链接到最受欢迎的页面,显示社交图标或你的业务电话号码,以及放置转化率更高的行动号召按钮。

在接下来的章节中,我们将展示如何轻松自定义 WordPress 头部。你可以点击以下链接直接跳转到你想阅读的章节:

  • 使用 WordPress 主题自定义器自定义头部
  • 使用 WordPress 全站编辑器自定义头部
  • 使用 SeedProd 创建自定义头部和页面布局
  • 为每个分类添加自定义头部
  • 在 WordPress 头部添加小工具区域
  • 在 WordPress 博客中添加随机头部图片
  • 向网站头部添加代码(高级)
  • 奖励技巧:测试不同头部样式(A/B 分割测试)
  • 常见问题:自定义你的 WordPress 头部
  • 更多资源:更多 WordPress 设计与导航技巧

准备好了吗?我们开始吧。

使用 WordPress 主题自定义器自定义头部

流行的 WordPress 主题允许你使用 WordPress 主题自定义器对网站头部区域进行修改。这个功能有时被称为自定义头部,但请注意不是所有主题都支持它。

你应先在 WordPress 后台导航到 外观 » 自定义

注意:如果你在 WordPress 后台菜单中看不到“外观 » 自定义”,只看到“外观 » 编辑器”,那么说明你的主题启用了全站编辑。在这种情况下,请跳到下一节。

你的主题可能在自定义器中包含“头部”部分,或者在“颜色”部分下提供头部选项。但这会因主题而不同。以下是一些例子。

有些主题(如 Twenty Twenty-One)根本不提供头部自定义选项。在这种情况下,我们建议使用像 SeedProd 这样的拖放式主题构建插件,我们将在下面介绍。

Twenty Sixteen 主题允许你向头部添加背景图片,甚至添加随机头部图片。

Twenty Sixteen 主题允许你添加随机头部图片

一些免费和高级 WordPress 主题甚至提供更多主题自定义选项。

例如,你可以更改头部的字体样式、布局、颜色等等。但不同主题之间仍然会有差异,你只能做主题开发者允许你做的事情。

例如,Sydney 主题在其左侧自定义面板中有一个专门的“头部构建器”选项。

Sydney 的头部构建器

在这里,你会找到不同的设置来编辑头部的外观和样式。你可以像在 WordPress 内容编辑器中编辑博客文章或页面一样,通过添加块来构建自定义头部。

首先,只需将鼠标悬停在头部的空白区域,点击“+”图标添加一个头部块——无论是在顶部、中间还是底部行。

点击加号图标

接下来,你可以选择任何你想要添加到自定义头部的块。例如,你可以添加小工具块、账户块、搜索块等等。

头部构建器还允许你拖放块,将它们放置在头部的上方或下方。

在主题自定义器中添加头部块

注意:Sydney 的免费版本允许你向头部添加最多 5 个组件。要解锁完整库,包括登录功能和自定义 HTML 等高级元素,你需要升级到 Sydney Pro。

要了解更多关于该主题的信息,请查阅我们的详细 Sydney 评测。

然后,你可以进一步自定义添加到头部的每个块。

例如,选择“站点标题和 Logo”块会给你提供上传站点标题和 Logo、更改 Logo 宽度、显示站点标语等选项。

自定义每个头部块

除此之外,你还可以更改头部的背景颜色或添加背景图片。

完成自定义头部编辑后,只需点击“发布”按钮即可。

更多详情,请查看我们的终极指南:如何使用 WordPress 主题自定义器。

使用 WordPress 全站编辑器自定义头部

WordPress 在 5.9 版本中加入了全站编辑功能。如果你的主题支持这个新功能,那么它会替代主题自定义器。不过,目前只有少数主题能与全站编辑器配合使用。

当你使用兼容主题时,可以通过导航到 外观 » 编辑器 来自定义头部。这将启动全站编辑器,它类似于你撰写 WordPress 文章和页面时使用的块编辑器。

当你点击头部时,你会注意到页面顶部的模板名称变为“页面头部”。

将全站编辑器模板更改为'页面头部'

现在,当你点击工具栏上的“设置”图标时,你会看到自定义头部的布局、颜色、边框和尺寸的选项。

例如,我们要更改头部的背景颜色。首先,你需要展开“颜色”部分,然后点击“背景”选项。

更改头部的背景颜色

在出现的弹出窗口中,首先选择纯色或渐变。

然后,你可以从预设颜色中选择。当你点击一个颜色时,头部的背景会立即改变。

你可以通过点击页面右上角的“样式”图标找到更多自定义选项。这将允许你更改头部的字体、颜色和布局。

点击“样式”图标可找到更多自定义选项

要了解更多关于全站编辑器的工作原理,请查看我们的新手教程:如何自定义你的 WordPress 主题。

使用 SeedProd 创建自定义头部和页面布局

想要完全控制你的头部、页脚和侧边栏,为你的网站赋予独特设计吗?那么我们推荐使用 SeedProd,这是最好的 WordPress 主题构建插件。

SeedProd 允许你在不编写任何代码的情况下轻松创建自定义 WordPress 主题。这包括创建头部、页脚以及吸引人的 WordPress 主题所需的一切。

你甚至可以为网站的不同页面和部分创建多个自定义头部样式。

我们的一些合作伙伴品牌使用 SeedProd 构建网站,效果非常好。要了解更多,请查看我们的完整 SeedProd 评测。

SeedProd 提供易于使用的主题构建器

注意:你可以使用 SeedProd 的免费版本来创建自定义着陆页,包括自定义头部。但你需要 Pro 版本才能创建完全自定义的主题,包括全站头部布局。

首先,我们建议按照我们的指南:如何在不编写任何代码的情况下轻松创建自定义 WordPress 主题。完成此操作后,你就可以在 SeedProd 编辑器中开始自定义头部。

要访问编辑器,你只需点击头部下方的“编辑设计”链接。

SeedProd 主题构建器允许你编辑头部的设计

这将在 SeedProd 的拖放编辑器中打开头部。

从那里,你可以通过添加新块轻松自定义头部。

SeedProd 主题构建器

有用于模板标签(如站点 Logo 或任何 WordPress 小工具)的块,以及高级块,例如倒计时器、导航菜单或社交分享按钮。

最棒的是,你可以使用主题构建器进一步自定义每个块。例如,你可以更改 Logo 的大小和对齐方式,或者选择在导航菜单中显示哪些页面。它甚至还允许你在头部添加图片。

使用 SeedProd,你还可以向主题的头部模板添加完整部分。

部分是可以用于网站不同区域的块组。这些包括头部、页脚、功能、推荐、行动号召等。

要使用头部部分,你需要切换到“设计”面板中的“部分”选项卡。

切换到部分面板

之后,选择你想要用于网站的头部部分。SeedProd 提供多个部分模板供你使用。

开始自定义头部部分。

自定义你的头部部分

一旦你对自定义头部满意,确保点击“保存”按钮来存储更改。

现在,你已经准备好发布自定义头部了。

只需从 WordPress 仪表盘进入 SeedProd » 主题构建器,然后将“启用 SeedProd 主题”选项旁边的开关切换到“是”。

启用 SeedProd 主题

启用选项后,SeedProd 将用新的自定义主题和头部替换你的默认 WordPress 主题。

你现在可以访问网站查看新的自定义头部效果。

自定义头部预览

为每个页面创建不同的自定义头部

此外,SeedProd 让你可以轻松地为网站上的特定页面设计自定义头部。

主题构建器允许你为 WordPress 网站上的每个页面添加自定义头部。这样,你可以为不同的分类、标签、文章类型、页面类型等显示自定义头部。

首先,你需要从 WordPress 仪表盘进入 SeedProd » 主题构建器,然后点击“添加新主题模板”按钮。

添加新主题模板

将出现一个新的弹出窗口,你需要在其中输入主题模板详细信息。

为你的主题模板输入一个名称。之后,从下拉菜单中选择“头部”作为模板类型。“优先级”字段可以留空。

接下来,你需要输入自定义头部的显示条件。例如,我们使用了条件:在所有属于教程分类的文章和页面中显示。

输入新主题模板详细信息

完成后不要忘记点击“保存”按钮。

之后,使用 SeedProd 拖放式主题构建器编辑自定义头部。

按页面自定义你的自定义头部

编辑完自定义头部后,只需点击顶部的“保存”按钮。

你可以在我们的新手教程中看到更多关于如何使用 SeedProd 主题构建器自定义头部的想法:如何轻松创建自定义 WordPress 主题。

为每个分类添加自定义头部

大多数网站在所有文章、页面、分类和归档页面上显示相同的头部。但是,你可以为每个 WordPress 分类显示不同的头部。

这可以通过向主题文件添加代码来实现,但使用主题构建器会有更多控制权。

我们之前向你展示了如何使用 SeedProd 主题构建插件自定义头部。现在,SeedProd 还允许你创建多个自定义头部,并使用条件逻辑为不同分类显示它们。

要创建新头部,你需要导航到 SeedProd » 主题构建器,点击橙色“添加新主题模板”按钮。或者,你也可以复制当前头部作为起点。

添加新的 SeedProd 主题模板

将出现一个弹出窗口,你可以在其中为主题模板命名,并从“类型”下拉菜单中选择“头部”。

你还需要输入优先级。因此,如果某个页面有多个头部满足条件,则优先级最高的头部将被显示。

默认头部的优先级为 0,因此请确保输入 1 或更高。

使自定义头部仅对某些分类可见

之后,你需要设置一个或多个条件。这可以让 SeedProd 知道何时显示某个头部。你只需从下拉菜单中选择条件。

在前两个菜单中,选择“包含”和“具有分类”。在最后一个字段中,输入你希望显示该头部的分类名称。

你可以通过点击“添加条件”按钮并包含另一个分类,轻松地为多个分类显示相同的头部。完成后,确保点击“保存”按钮保存新头部。

现在,你可以使用 SeedProd 的拖放编辑器,像我们之前展示的那样自定义每个新头部的设计。

要了解更多,包括如何使用代码实现,请查看我们的指南:如何为每个分类添加自定义头部、页脚或侧边栏。

在 WordPress 头部添加小工具区域

如果你从头开始使用代码构建自定义主题,你可能想向头部添加 WordPress 小工具来吸引访客的注意力。

小工具允许你轻松地将内容块添加到主题的特定区域,但请注意并非每个主题都包含头部小工具区域。

我们之前提到过使用 SeedProd 主题构建器向头部添加小工具是多么简单。但如果你想在普通 WordPress 主题的头部添加小工具呢?

有些主题(如 Sydney 主题)允许你使用 WordPress 主题自定义器来实现。Sydney 添加了一个名为“头部构建器”的选项,用于完全自定义头部,包括添加小工具。

如果你的 WordPress 主题当前没有头部小工具区域,你需要手动添加。

虽然一般方法是向 functions.php 文件添加代码片段,但更简单、更安全的方法是使用 WPCode。它是在不破坏网站的情况下添加代码片段的最佳插件。

我们的一些合作伙伴品牌使用 WPCode 来添加和管理自定义代码片段。我们听到了很多关于该插件的好评,你也可以阅读我们的详细 WPCode 评测来了解更多。

WPCode 的主页

首先,确保你已在 WordPress 网站上安装并激活了 WPCode 代码片段插件。如果需要帮助,请参阅我们的指南:如何安装 WordPress 插件。

注意:你可以使用 WPCode 插件的免费版本跟随本教程。但升级到 WPCode Pro 可以获得更多功能,如定时片段、完整修订历史记录以及访问整个开发者批准的代码片段库。

激活后,导航到 代码片段 » + 添加片段

现在,你需要做的第一件事是创建片段标题。例如,我们将其命名为“向头部区域添加 WordPress 小工具”。第二步是展开代码类型下拉菜单,选择“PHP 片段”。

完成后,只需复制以下代码并粘贴到“代码预览”部分。

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

这段代码将注册一个新的头部或小工具就绪区域供你的主题使用。

在 WPCode 编辑器中看起来是这样的:

使用 WPCode 添加 PHP 代码片段以向头部区域添加 WP 小工具

要激活片段,你可以将蓝色“保存片段”按钮旁边的开关切换到“活动”。然后,不要忘记点击“保存片段”按钮来存储更改。

一旦你切换开关并保存更改,编辑器应该看起来像这样:

WPCode 中保存的设置

现在,如果你进入 外观 » 小工具,你会看到一个新的小工具区域,标签为“自定义头部小工具区域”。

在这里你可以添加小工具。如果需要帮助,请查看我们的指南:如何在 WordPress 中添加和使用小工具。

自定义头部小工具区域

根据你的主题,你可能还需要向 WordPress 添加 CSS 来控制小工具区域的显示方式。

有关详细说明,请查看我们的指南:如何向网站头部添加 WordPress 小工具。

在 WordPress 博客中添加随机头部图片

让 WordPress 头部更具吸引力的另一种方法是向头部区域添加随机图片。

显示随机变化的图片有助于吸引访客的注意力,让你的内容更具吸引力。

要向 WordPress 博客添加随机头部图片,你可以使用主题自定义器并将图片上传到头部区域。这个选项可能因你使用的 WordPress 主题而异。

接下来,选择“随机化上传的头部”选项。

随机化上传的头部图片

如果你希望在头部区域显示随机图片时拥有更多控制权和灵活性,你也可以使用 WordPress 插件。

更多详情,请查看我们的指南:如何向 WordPress 博客添加随机头部图片。

向网站头部添加代码(高级)

最后,如果你想向网站头部区域添加自定义代码,你可以从 WordPress 仪表盘轻松完成。此方法推荐给高级用户,可能不适合初学者,因为它涉及编辑代码并需要技术知识。

你可以通过进入 外观 » 主题文件编辑器 从 WordPress 后台找到主题的头部文件。在 style.css 主题文件中,你可以滚动到站点头部区域并添加或删除代码。

向主题文件添加自定义代码

注意:我们不建议直接编辑主题文件,因为最细微的错误都可能破坏你的网站并搞乱 WordPress 设计。

一种更简单的添加自定义代码以编辑网站头部的方法是使用 WPCode,这是市场上最好的代码片段插件。

首先,安装并激活免费的 WPCode 插件。更多详情,请参阅我们的指南:如何安装 WordPress 插件。

激活后,你可以从 WordPress 仪表盘进入 代码片段 » 头部和页脚。接下来,只需在“头部”部分输入自定义代码。

在 WPCode 的头部框中粘贴代码

(注意:原文中最后一张图片的链接被截断,我们假设为有效链接,但根据上下文,这里可能是示例图片,我们保留原样。但为了安全,如果图片链接无效,则使用默认封面。由于无法验证,我们保留该图片链接,但实际输出时可能需要调整。这里我们假设有效。)

通过这种方式,你可以轻松添加 Google Analytics 跟踪代码、Facebook Pixel 等,而无需修改主题文件。

奖励技巧:测试不同头部样式(使用 A/B 分割测试)

一旦你创建了自定义头部,你可能想知道哪个版本效果最好。你可以使用 A/B 分割测试来比较不同头部设计,找出最能提升参与度和转化率的版本。

我们推荐使用 Google OptimizeNelio A/B Testing 等插件来进行实验。但请注意,这需要更高级的配置。

更多信息,请查看我们的指南:如何在 WordPress 中进行 A/B 分割测试。

常见问题:自定义你的 WordPress 头部

问:我可以在不写代码的情况下自定义头部吗?
答:可以。大多数现代 WordPress 主题都提供内置的自定义选项,或者你可以使用像 SeedProd 这样的拖放式主题构建器。

问:我的主题没有头部自定义选项怎么办?
答:你可以使用插件(如 SeedProd 或 Elementor)来创建自定义头部,或者手动添加代码(但需要技术知识)。

问:如何为不同页面设置不同头部?
答:使用 SeedProd 这样的主题构建器,你可以通过条件逻辑为特定页面、分类或文章类型设置不同的头部模板。

问:自定义头部会影响网站速度吗?
答:如果优化得当,不会。添加太多元素或图片可能会增加加载时间,但使用缓存和优化图片可以缓解。

更多资源:更多 WordPress 设计与导航技巧

  • 如何创建自定义 WordPress 导航菜单
  • 如何优化 WordPress 网站速度
  • 如何选择最好的 WordPress 主题
  • 如何添加社交分享按钮到 WordPress 头部

希望本指南能帮助你轻松自定义 WordPress 头部。如果你有任何问题,请在下方评论区留言。

文章标签:#SeedProd#WordPress#主题自定义器#小工具区域#随机图片

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/如何自定义wordpress网站头部(新手入门指南)