WordPress 自定义标题：它是什么以及如何创建一个

已发表: 2022-06-25

WordPress 引入的最灵活和最有用的功能之一是自定义标题。这是一项功能，可让您自定义 WordPress 网站的顶部，让您能够使用自定义标题模板根据需要对其进行个性化设置。而且，与大多数 WordPress 功能一样，有多种方法可以自定义标题，通过使用主题功能、自定义代码或 WordPress 插件。

在本文中，我们将引导您完成这些路线并给出一些示例。但首先，让我们谈谈 WordPress 标头以及您为什么要费心定制它们。

为什么使用自定义 WordPress 标头？

标题是网站最重要的图形方面之一，因为它是访问者首先会注意到的。因此，值得研究更改网站标题是否可以改善用户体验。例如，您可以增强标题的美感和设计，以便您的业务信息更有效地传达给访问者。

此外，结构良好的标题可以帮助访问者更轻松地探索您的内容，并且可以用来轻轻地将他们推向您希望他们关注的产品或服务。

你实际上可以改变什么

从技术上讲，几乎所有内容都可以更改网站标题，包括字体大小、图像、配色方案等。您可以添加小部件区域、为特定页面应用不同的样式、随意放置徽标、应用 CTA（号召性用语）按钮、修改导航菜单等等！

如果此时您确信您需要自定义标题模板，以下是 WordPress 为开发人员和非编码人员提供的选项。

如何在 WordPress 中自定义标题

让我们看看一些最流行的自定义标题的方法。

使用主题的定制器

要使用内置的 WordPress 定制器来编辑您的标题，您首先需要确定您的主题是否支持这一点。您可以在官方主题库中查找您的主题并使用过滤器来确定您当前的主题是否具有自定义标题的内置功能。

如果您安装此功能附带的主题之一，您会注意到激活后，“外观”菜单下会出现一些额外的菜单项。例如，如果您安装并激活 Blog Forever，您将获得以下菜单：

单击“标题”菜单项后，您将转到标题选项。

在定制器菜单中，您还可以找到帮助您定制标题的其他选项。

这里有很多选择。您可以更改颜色、在标题中添加小部件（如社交媒体或联系信息）、更改标语等。

但是，如果您的主题不是“标题可编辑”主题之一怎么办？

如何为您的主题添加自定义标题支持

我们以 GeneratePress 主题作为不支持此功能的主题的示例。如果您安装并激活此主题，您将不会在主题定制器中看到任何更改标题图像的选项。

如果您具备一些编码技能并使用 WordPress 核心版本 3.4 或更高版本，则可以非常轻松地启用自定义标题功能。您可以使用add_theme_support()内置函数轻松添加它。

在您的主题文件夹下，找到 functions.php 文件并使用您喜欢的编辑器打开它。然后添加以下行：

 add_theme_support( 'custom-header' );

就是这样，现在您将能够在定制器页面和外观菜单下看到标题图像选项。您可以使用它并为您的标题上传图片。

您还可以传递参数来设置任何可用选项。这是一个如何通过在functions.php中添加代码来设置图像大小的示例：

 function mytheme_custom_header_setup() { $args = array( 'width' => 1000, 'height' => 250, ); add_theme_support( 'custom-header', $args ); } add_action( 'after_setup_theme', 'mytheme_custom_header_setup' );

after_setup_theme 用于在主题初始化后立即注册我们的功能。

但是，您可能会注意到，标题上没有图像，这是正常的，因为我们没有做任何显示它。

如何显示标题图像

为了显示标题图像，您必须使用get_header_image() WordPress 函数，如下所示：

 <?php if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; ?>

根据您的要求和编码技能，您可以从这里到任何地方。您可以使用它们的钩子添加标签或辅助头部标题或任何主题的小部件，当然还可以添加您自己的 CSS 来润色它。

您应该将这段自定义代码插入 WordPress 安装的标头模板文件中。此文件对于所有主题都不相同。如果您不知道它是哪一个，您可以查阅模板层次结构，或者忘记什么文件并使用 wp_head() 函数通过 functions.php 将代码添加到标题中。

 function my_custom_function(){ if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; }; add_action('wp_head', 'my_custom_function');

同样重要的是要指出，此类自定义应应用于子主题，以便在主题更新时更改不会丢失。

当然，如果您使用像二十二十二这样支持完整站点编辑器的WordPress 块主题，事情会变得更容易。我们将在以后的文章中对此进行详细介绍。