如何在无需插件下即可编辑WordPress网站页眉

俗话说，留下良好的第一印象很重要。当访客访问您的网站时，第一印象从顶部–页眉开始。

WordPress 主题的开发者并不要求包含页眉模板，但没有页眉模板的网站是很少见的。自网络诞生以来，”header(页眉)” 一直是一个常用术语，指的是在页面顶部封装访客希望找到的基本元素的 HTML 区块。这通常包括

• 品牌：这可能包括网站名称，通常还包括徽标。在页眉中使用颜色、图片或视频可以强化品牌。
• 主导航：如果网站有多个页面，访客可能会在每个页面的顶部附近寻找网站导航菜单。
• 二级导航：二级导航可以是独立于用户当前在主菜单层级中所处位置的任何链接。例如 “登录” 按钮和链接到社交媒体账户或购物车的图标。
• 搜索：如果您的网站支持搜索，搜索输入框不一定要放在页眉处，但访问者肯定不会在页脚处寻找它。

WordPress 内容管理系统可以将主题模板中的标记与数据库中的内容（如徽标链接和菜单条目）相结合，动态生成页眉等组件，并将其注入每个页面。

WordPress 主题生态系统为几乎所有网站提供了丰富的设计选择。各种市场上有数以万计的主题可供选择，挑选最适合自己的主题可能会让人望而生畏。

但是，当你最终选择并安装了一个主题后，你至少需要定制一些组件（如页眉），以便在网站上印上你的品牌，使其成为你自己的网站。

让我们来看看如何做到这一点。

区块与经典：两个主题的故事

如何自定义 WordPress 网站的页眉取决于其主题的构建方式（有时还取决于您想做多少自定义）。有三种方法可以修改 WordPress 原生的网站页眉：

• 使用网站编辑器：WordPress 5.0 为网站内容引入了一个称为 Gutenberg 的块编辑器。随着 WordPress 5.9 的发布，区块的概念扩展到了主题，并成为全站编辑的强大选项。网站编辑器以及使用基于 HTML 的组件构建网站主题各个部分的功能，为 WordPress 原生定制带来了前所未有的灵活性。
• 使用 WordPress 定制器：我们并不是想让您觉得自己老了，但那些只能通过使用曾经开创性的 “定制器 “和相关部件来调整的主题被称为 “经典” 主题。尽管名字听起来有些复古，但新的经典风格主题仍在不断推出，使市场上已有的数千款主题更加丰富。与网站编辑器和区块主题相比，自定义器和经典主题提供的标题自定义选项较少。
• 直接编辑主题文件：您（或您寻求帮助的人）需要具备一些基本的 PHP 知识，才能编辑 WordPress 经典主题文件中的代码，但当自定义器无法满足您对网站页眉的需求时，这也是一种解决方案。

我们在此不涉及第三方 WordPress 页面构建工具（如Divi）中的页眉自定义功能，也不涉及任何专门用于处理网站页眉（和页脚）的插件。如果你的唯一选择是直接编辑主题文件，并且想避免使用 PHP 编程，那么这些插件值得一试。

如何编辑区块主题页眉

如果你使用过 Gutenberg 来创建内容，你就会知道 WordPress 提供了大量的区块，你可以将它们放在页面上，组成从标题、段落和列表到媒体、导航和表单的任何内容。有一类区块可以像经典主题中的小部件一样执行任务，包括生成最新文章和评论的链接、显示标签云或插入日历。

多个区块可以进行组合、样式化并保存为模式。您还可以将这些组件添加到 WordPress 主题中有助于定义页面布局的部分，包括页眉。

与单个区块一样，模板部分也可以在 HTML 文件中定义。区块主题易于定制，因为描述这些修改的信息会保存在 WordPress 数据库中，并在生成页面时应用到各个组件中。

因此，当我们谈论在块主题中 “编辑” 页眉时，我们很少谈论编辑存储在 WordPress 主题目录中的文件。

区块主题页眉

检查页眉等模板部分背后的 HTML 代码有助于解释在自定义主题时发生了什么。

我们在本教程中使用 Seedlet 主题，因为它有 Seedlet (Blocks) 和旧版 Seedlet (Classic)  两种版本。Seedlet (Blocks) 以 Blockbase 主题为父主题，这就是 Seedlet 主题目录中 header.html 文件的全部内容：

<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

WordPress 区块背后的大部分神奇功能都发生在 HTML 注释中。注释可以在页面构建过程中传递样式信息和其他指令。上面的 HTML 代码为我们的默认页眉添加了一些垂直间距，但主要作用是请求在 Blockbase 主题中加入一个模式（一旦添加了 .html），该模式可以在 header-centered.html 文件中找到。

Blockbase 主题中的模板部分目录包括这些与页眉相关的文件：

header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.html

例如，header-rounded-logo.html 文件包含一个 HTML 注释，其中添加了一个 CSS 类，用于对徽标图像进行圆形剪切。如果我们热衷于这种方法，我们可以编辑 Seedlet header.html 文件，使其包含 header-rounded-logo.html，而不是 header-centered.html。但我们不必这样做，因为我们可以在 WordPress 网站编辑器中应用该模板部分，而不去碰硬盘上的主题文件。

使用网站编辑器自定义页眉

网站上的区块主题激活后，我们可以在 WordPress 管理面板中选择外观>编辑器，访问站点编辑器：

从 WordPress 管理面板访问网站编辑器。

网站编辑器的初始视图是一个全页面布局，其中包括页眉、页脚和主题开发人员已添加的任何其他模板部分。我们可以点击页眉区域，立即开始编辑。

下面，我们的页眉包括一个徽标占位符，并已显示网站名称和主导航（现在只有 “关于我们” 和 “示例页面”）。如果我们在网站基本信息中添加标语，标语也会出现在这里。

这些网站标识元素已经出现在我们的页眉中，因为上面提到的 header-centered.html 模板部分包含了这些注释：

<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->

主导航由该注释生成：

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->

添加 Logo：

1. 选择 Logo 占位符。
2. 点击添加媒体按钮。
3. 在 WordPress 媒体库中选择 Logo，或从磁盘上传。

在页眉模板部分添加 Logo。

通过添加 Logo 自定义网站页眉是一项非常普通的任务，即使是大多数经典的 WordPress 主题也会在自定义器中简化这项工作。因此，让我们添加一个模板中尚未预料到的区块：页面顶部附近的二级菜单，其中包含一个条目：Shop。

首先，点击网站编辑器左上角的切换图标，切换区块插入器的显示：

切换区块插入器。

区块插入器激活后：

1. 找到导航区块（可以搜索）。
2. 将导航区块拖动到页眉的上边缘。

将导航区块拖入页眉区域。

现在，我们通过创建一个自定义链接（与主导航分离）来编辑导航块，该链接将显示文本Shop，并包含电子商务子域的 URL：

为新导航区块创建页面链接。

默认情况下，该页眉模板部分的所有内容都位于页面中央。我们希望Shop链接向右浮动。要做到这一点

1. 点击新导航块。
2. 单击工具栏中的 Change items justification 图标。
3. 选择项目右对齐。

更改页眉区块的水平定位。

下面是完成后的页眉：

带有包含 Shop 链接的二级菜单的区块主题页眉。

如何使用自定义工具修改经典主题页眉

2012 年，随着 WordPress 3.4 一起发布了第一个版本的主题定制器，这是帮助管理员在无需编码的情况下修改网站外观和感觉方面的一次飞跃。

自此以后，定制器的功能得到了显著增强，但有一点始终不变：主题的开发者决定了哪些内容可以使用该工具进行定制，哪些不可以。这与网站所有者可以使用基于块的网站编辑器自由发挥形成了鲜明对比。

使用 WordPress 主题定制器

当支持自定义工具的经典主题在网站上激活时，可在 WordPress 管理面板中选择外观>自定义来访问它。

从 WordPress 管理面板访问主题定制器。

在自定义器主菜单中选择 “网站标识” ，即可访问标题中的自定义组件：

在经典主题定制器中选择 “网站标识” 选项。

在该主题的 “网站标识” 部分，我们可以添加或更改徽标，编辑网站标题和任何标语。(网站标题和标语最初由管理面板 “常规设置” 页面的条目填充）。

该主题还将网站的主导航放在页眉处。此外，页脚也有一个导航位置和一个社交媒体链接菜单。自定义器允许你选择为每个位置分配哪一个菜单（如果有的话），但位置本身基本上是固定的。

在自定义器中为经典 WordPress 主题添加 Logo。

点击上面突出显示的 “选择 Logo” 按钮后，我们可以从 WordPress 媒体库中选择一个 Logo，或者从磁盘上传一个新的 Logo。

下图中的徽标已经就位，自定义器允许我们移除图片或用其他图片替换：

使用 WordPress 定制器添加页眉 Logo。

主题定制器可以自定义什么？

那么，定制器如何确定我们是否可以上传 Logo，以及上传后 Logo 应放在哪里呢？

这要从主题的 functions.php 脚本中的这个条目说起：

/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
'custom-logo',
array(
'height' => 240,
'width'           => 240,
'flex-width'  => false,
'flex-height' => false,
)
);

该代码块可启用自定义器 “网站标识” 选项卡中的 “选择徽标” 按钮及其媒体库功能链接。

然后，在用于创建网站页眉的 PHP 代码中，在徽标应出现的位置添加这个简短的代码段：

<div class="site-logo"><?php the_custom_logo(); ?></div>

最终效果：

在主题定制器中更新 Logo 后的网站页眉。

通过编辑主题文件更改 WordPress 页眉

在上文中，当我们使用网站编辑器自定义块主题的页眉时，我们添加了一个带有 Shop 链接的二级菜单。我们可以自由地将该导航块放置在标题中任何我们想要的位置。我们的经典版主题没有为这样的菜单预留位置，因此我们需要编辑与页眉相关的 PHP 代码来进行更改。

我们可以简单地打开相应的主题文件，然后手动为二级菜单添加 HTML，但这样做未免太短视了。稍后，我们可能要更新购物链接的文本（立即购物？）、更改其 URL 或在该菜单中添加其他项目（登录？）

我们希望在标题中添加新的导航，并在自定义器中注册，这样就可以在 WordPress 菜单编辑器中更改二级菜单的内容，而无需返回主题代码。

开始之前请备份

深入 WordPress 经典主题的 PHP 代码来定制网站的页眉通常被描述为编辑header.php文件。许多主题都是如此，但其他主题可能会将多个文件组合在一起创建一个页眉。

在更改主题文件之前，请先进行备份。以下是备份和恢复备份的方法。

即使有备份，当第三方主题的更新覆盖了你的修改时，你也会遇到麻烦。您的修改可能会从网站上消失，直到您能从备份中恢复已更改的主题文件。因此，我们强烈建议为您更改的文件创建一个子主题，并在一个暂存的 WordPress 网站上测试更新。

在经典主题中编辑 WordPress 标题

我们的经典主题示例在页眉中为主导航预留了一个位置。在自定义器中，我们可以选择分配到该位置的 WordPress 菜单。在我们的例子中，该菜单被方便地命名为 “主菜单”。

主题中还有用于页脚和社交链接导航的位置，但你可以在下面看到这些位置目前尚未启用：

在经典主题的自定义编辑器中编辑菜单。

如果我们查看一下主题的 functions.php 脚本，就会发现这些菜单位置首先被引用：

// This theme uses wp_nav_menu() 
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'footer'  => __( 'Footer Navigation', 'seedlet' ),
'social'  => __( 'Social Links Navigation', 'seedlet' ),
)
);

下面，我们将添加到该区块，为新的 “二级导航” 菜单注册一个条目：

// This theme uses wp_nav_menu() 
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'secondary' => __( 'Secondary Navigation', 'seedlet' ),
'footer'  => __( 'Footer Navigation', 'seedlet' ),
'social'  => __( 'Social Links Navigation', 'seedlet' ),
)
);

When we return to the Customizer, the new Secondary Navigation option shows up in the Menu Locations area:

在主题定制器中注册了二级导航选项。

我们可以为菜单命名（二级菜单）并开始添加链接。就像在基于区块的主题中使用网站编辑器一样，我们将为 “Shop” 创建一个条目。

在标题的主题文件中，我们添加了一些代码，以确认二级导航菜单的存在，并在链接列表中至少有一个条目。然后，我们解析菜单内容并显示它们：

<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations         = get_nav_menu_locations();
$menu_id           = $locations[ $location_name ];
$menu_obj          = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
array(
'theme_location'  => 'secondary',
'menu_class'          => 'menu-wrapper',
'container_class' => 'secondary-menu-container',
'items_wrap'          => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>        
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<button id="secondary-open-menu" class="button open">
<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
</button>
<?php endif; ?>
</div>

现在，我们的页眉在二级导航的首选位置包含了我们的 “Shop” 链接（下图红色突出显示）。

经典主题中带有 Shop 链接的 WordPress 更新版页眉。

使用这种方法，我们只需在 WordPress 管理仪表板中编辑二级导航菜单，就可以更改用于商店链接的锚文本，甚至在二级导航中添加其他菜单项。

小结

如果您想修改 WordPress 网站的页眉，而又不想借助第三方插件或页面生成器，那么基于区块的主题与站点编辑器相结合，几乎可以提供无限的灵活性。网站编辑器允许你在页面布局的任意位置放置各种区块。您对区块定义和样式的修改都存储在 WordPress 数据库中，因此无需修改磁盘上的主题文件。

十多年来，我们一直使用定制器来管理经典主题，它允许对主题开发者已确定并注册为 “可定制” 的元素进行修改。如果您想进行超出该范围的更改，可能需要编辑主题文件，而且几乎肯定需要对 PHP 脚本语言有基本的了解。