如何在 WordPress 中创建自定义标题小部件

已发表: 2021-11-16

您是否正在寻找在您的网站上创建标题小部件的方法？你来对地方了。我们将向您展示如何在 WordPress 中轻松创建自定义标题小部件。

拥有吸引人的标题是给访问者留下印象的关键。此外，它可能是展示限时优惠或特殊机会的理想场所。如果您的主题不支持此小部件区域，您可以手动创建一个。在本指南中，我们将向您展示如何在 WordPress 中创建自定义标题小部件。

在我们了解如何做之前，让我们更好地了解自定义标题小部件的好处。

为什么要在 WordPress 中创建自定义标题小部件？

标题是访问者登陆您的网站时首先看到的内容。这是用户比较关注的事情之一，因此大多数网站都会在标题上显示他们最重要的内容，例如特价和菜单。

四层标题

如果那是用户关注的地方，那么在那里添加大量内容是很诱人的。但是，您应该避免在主菜单（标题）上有太多链接。不建议在标题菜单中包含太多内容，因为这可能会使用户感到困惑并使您的网站看起来很糟糕。这就是标题小部件可以提供帮助的地方。您可以在主导航栏下方添加自定义标题小部件，并向该空间添加额外小部件，而不会占用主菜单。

创建自定义标题小部件可让您毫无问题地显示任何内容，无论是广告、时事通讯小部件、横幅、文本内容、WooCommerce 优惠和自定义小部件。这样，您可以将内容添加到标题中，同时保持其井井有条。

现在我们更好地理解了自定义标题小部件的重要性，让我们学习如何以最少的努力创建一个。

如何在 WordPress 中创建自定义标题小部件

我们之前已经看到了自定义 WordPress 标头的不同方法。但是，在本节中，我们将学习如何通过创建自定义标题小部件来编辑标题。为此，我们将使用 PHP 和 CSS 片段。

注意：在继续之前，我们将编辑一些核心文件，我们建议您生成网站的完整备份并安装子主题。要创建子主题，您可以按照本教程或使用这些专用插件中的任何一个。

完成后，请继续下一部分。

1) 创建自定义小部件

首先，您需要创建一个新的小部件区域。为此，在您的WordPress 仪表板上，转到外观 > 小部件。

在 WordPress 中创建自定义标题小部件 - 所有小部件

在那里，您将看到活动主题中可用的所有小部件区域。这可能会根据您的主题而改变，但在大多数情况下，您会在此处看到几个区域。对于这个演示，我们使用的是 GeneratePress，它带有许多已经注册和样式化的小部件区域。

在 WordPress 中创建自定义标题小部件 - 所有小部件区域

您需要创建一个新的小部件区域，我们将在其中添加自定义标题小部件。为此，您需要调整子主题的functions.php文件。为此，您可以直接使用该文件，也可以使用 Code Snippets 之类的插件。

对于此演示，我们将使用代码片段，因此我们转到插件 > 添加新并搜索代码片段插件。然后，我们安装并激活它，如下所示。

安装代码片段插件

激活后，您将在左侧看到插件的设置。转到所有片段并按添加新以创建新片段。

在 WordPress 中创建自定义标题小部件 - 创建一个新片段

为代码段命名，然后将以下代码段粘贴到代码部分：

 函数 quadlayers_widgets_init() {
 register_sidebar（数组（
 'name' => 'QuadLayers 标题小部件',
 'id' => 'quadlayers-header-widget',
 'before_widget' => '<div class="ql-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="ql-title">',
 'after_title' => '</h2>',
 ));
 }
 add_action('widgets_init', 'quadlayers_widgets_init');

此片段在您的 WordPress 站点中创建一个名为 Quadlayers Header Widget 的新小部件。

在 WordPress 中创建自定义标题小部件 - 创建自定义小部件

然后保存更改，激活后，您将在 WordPress 小部件部分下看到一个全新的小部件区域。

四层标题小部件

这样，您可以注册一个新的小部件。在此之后，您必须将小部件添加到您网站的标题中。让我们看看如何做到这一点。

2）将小部件添加到标题

您已成功在您的网站上创建了一个新小部件，但您尚未指定位置。在本节中，我们将向您展示如何将这个新的自定义小部件添加到 WordPress 标题中。

为此，您需要编辑header.php文件。您可以通过转到外观>主题编辑器> 主题标题 (header.php)在主题目录中找到此文件。在编辑文件之前，请确保您使用的是子主题。如果您的子主题没有header.php文件，请打开父主题的文件夹，从那里下载header.php文件，然后将其上传到子主题文件夹。

之后，将以下代码粘贴到header.php文件中：

 <?php

 如果（is_active_sidebar（'quadlayers-header-widget'））：？>
 <div class="ql-widget-area widget-area" role="complementary">
 <?php dynamic_sidebar('quadlayers-header-widget'); ?>
 </div>

 <?php endif; ?>

粘贴代码后，更新文件。

在文件中粘贴标题小部件

如果您不确定在哪里添加代码，您可以测试不同的位置或联系您的主题支持团队，并根据您的需要向他们询问最佳位置。添加代码后，通过向其添加小部件来测试小部件区域。在这个例子中，我们添加了一个带有一些虚拟内容的段落块。

示例文本块

在网站的前端，您将看到如下所示的标题。

示例标题小部件

这意味着小部件和代码正在工作。伟大的！

这是您可以在 WordPress 中添加自定义标题小部件的方法。您可以使用该区域显示横幅、广告、限时优惠或任何您想要的东西。

但这还不是全部。该小部件功能正常，但您仍然可以改进它。让我们看看我们如何使用一些 CSS 来设置小部件的样式以匹配您网站的外观。

3) 使用 CSS 自定义小部件

将小部件添加到头文件后，是时候使用一些 CSS 让它看起来更好了。您可以将 CSS 代码输入主题的style.css文件或使用 WordPress 定制器。这两种方法都运行良好，但我们建议您使用管理仪表板上的Additional CSS部分添加 CSS 代码。这样，您将立即在实时预览向导中看到更改。然而，

现在让我们看一个示例脚本，以便您可以自定义在上一节中创建的自定义标题小部件。复制以下代码，转到Appearance > Theme Editor > Additional CSS并粘贴它。

 div#quadlayers-header-widget {
 宽度：100%；
 背景颜色：#f5f5f5；
 边框底部：1px 实心#eeeeee；
 文本对齐：居中；
 }

 .ql 小部件 {
 宽度：100%；
 背景颜色：#f5f5f5；
 文本对齐：居中；
 }

 h2.ql-标题{
 边距顶部：0px；
 文本对齐：左；
 文本转换：大写；
 字体大小：小；
 背景颜色：#feffce；
 宽度：130px；
 填充：5px；
 }

CSS 脚本

更新 CSS 后，它将如下所示：

标题小部件 css

这只是一个示例代码。您可以将其作为基础并对其进行自定义以使其适应您网站的样式和要求。

而已！这就是您可以使用一些代码在 WordPress 中创建自定义标题小部件的方法。没那么难，不是吗？

结论

总之，标题是任何网站最突出的部分之一，您应该在其中包含希望访问者看到的重要内容。这就是为什么添加标题小部件是吸引用户注意力并显示限时优惠、网站最重要部分等的绝佳选择。

在这篇文章中，我们向您展示了如何创建自定义标题小部件并使用一些代码对其进行自定义。即使您没有编程技能，您也可以按照教程将小部件添加到您的站点。但是，要更改其样式，您可能需要一些 CSS 的基本知识。根据您的主题，编辑header.php文件可能会很棘手，因此如果您遇到任何问题，可以联系您的主题作者。

您是否创建了标题小部件？你的经历如何？在下面的评论部分让我们知道。

有关自定义标题的更多方法，请查看以下指南：

3 在WordPress中自定义标题的方法
如何使 Divi 标头具有粘性