代码观察者

如何在 WordPress 的标题中添加小部件

Muneeb WordPress Tutorials Feb 21, 2022

并非所有主题都允许您将 WordPress 小部件添加到标题区域。 但是，您可能希望使用小部件在 WordPress 标头中包含内容块，以获得更好的外观。

如何在 WordPress 的标题中添加小部件

您可以使用两种方法在标题区域中使用 WordPress 小部件。 在本教程中，我们将了解如何在标题区域使用 WordPress 小部件。

为什么要在网站标题中添加 WordPress 小部件

当有人访问您的 WordPress 网站时，他们会注意到标题是第一件事。 您可以通过在标题中添加 WordPress 小部件来改进此部分以帮助吸引读者的注意力。

独特的徽标和导航菜单通常包含在网站标题中，以帮助访问者浏览您的网站。 您还可以使用标题小部件在此部分上方或下方显示有用的内容、横幅广告、限时特价、单行表格等。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

如何使用 WordPress 主题选项将 WordPress 小部件添加到标题

标题小部件部分包含在许多顶级 WordPress 主题中，您可以根据自己的喜好对其进行编辑。 首先，检查您现有的 WordPress 主题是否包含标题中的小部件部分。

要检查此选项，请转到外观，然后自定义，看看它是否允许您编辑标题。

它将带您到可以编辑标题和添加 WordPress 小部件的字段。 您可以更改屏幕底部的标题及其上方和下方的空格。 将鼠标悬停在其中一个空白区域上时，只需单击加号即可。

您可以从出现的弹出菜单中选择Widget 1 。 还有更多可用的可能性，但您需要选择一个小部件选项以使标题小部件就绪。

单击标题定制器部分中的小部件 1框，将小部件区域添加到您的标题中，以便能够在下一步中添加小部件。

接下来，您需要将块添加到该字段并选择您要选择的小部件。

使用相同的方法，您可以选择添加任意数量的小部件。 完成所有设置后，请确保发布并保存所有更改。

如何使用编码将 WordPress 小部件添加到您的网站标题

如果您的 WordPress 主题不支持将 WordPress 小部件添加到您网站的标题中，这不是问题，因为您可以通过一些编码来完成相同的任务。

要使用代码片段，有三个选项。 它可以放在您的 functions.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' );

此代码为您的主题创建一个新的侧边栏或小部件就绪空间。 您可以从 Appearance 转到 Widgets 选项，在那里，您将看到Custom Header Widget Area 。

现在，您可以在该区域添加小部件并继续在您的网站上实时显示更改。

您需要更新主题中的 header.php 文件才能执行此操作。 然后，将以下代码粘贴到您希望小部件出现的任何位置。

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
 
<?php endif; ?>

此代码会将您之前构建的小部件区域放置在您网站的标题区域中。

您可能还需要将 CSS 添加到 WordPress 以自定义标题小部件区域，并根据您的主题显示其中的每个小部件。 如果你不懂 CSS，你可以使用CSS Hero之类的插件。

前往从外观自定义，其中将找到附加 CSS 选项。

这使您可以立即向主题添加新的 CSS 并实时查看结果。 您可以使用以下代码作为示例开始。

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
        padding: 20px;
}
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

要保存更改，请在完成添加 CSS 后单击“发布”按钮。

您可以按照这两种方法将 WordPress 小部件添加到您的网站标题中。 这就是本教程的全部内容。 请务必在我们的Facebook和Twitter上加入我们，以随时了解我们的帖子。

Divi WordPress Theme