wordpress标题设置_如何将WordPress小部件添加到您的网站标题

wordpress标题设置

Do you want to add a WordPress widget to your website’s header area? Widgets allow you to easily add content blocks into designated sections of your theme. In this article, we will show you how to easily add a WordPress widget to your site’s header.

您想将WordPress小部件添加到网站的标题区域吗？ 小部件使您可以轻松地将内容块添加到主题的指定部分。 在本文中，我们将向您展示如何轻松地将WordPress小部件添加到网站标题中。

Note: This is an intermediate level tutorial. You will need to add code to your WordPress theme files and write CSS.

注意：这是中级教程。 您将需要向WordPress主题文件中添加代码并编写CSS 。

为什么以及何时需要网站上的标题小部件？ (Why and When You Need a Header Widget on Your Site?)

Widgets allow you to easily add content blocks to a designated area in your WordPress theme. These designated areas are called sidebars or widget-ready areas.

小部件使您可以轻松地将内容块添加到WordPress主题中的指定区域。 这些指定的区域称为边栏或窗口小部件就绪区域。

A widget ready area in header or before content can be used to display ads, recent articles, or anything you want.

标头中或内容之前的窗口小部件就绪区域可用于显示广告，最新文章或所需的任何内容。

This particular area is called ‘Below the fold’ and all popular sites use it to show really important stuff.

这个特殊的区域称为“首屏之下”，所有流行的网站都使用它来展示真正重要的内容。

Typically, WordPress themes add sidebars next to the content or in footer area. Not many WordPress themes add widget-ready areas above the content are or in the header.

通常，WordPress主题会在内容旁边或页脚区域中添加侧栏。 很少有WordPress主题会在内容上方或标题中添加可用于窗口小部件的区域。

That’s why in this article, we will cover how to add a widget area to your WordPress website’s header.

因此，在本文中，我们将介绍如何在WordPress网站标题中添加小部件区域。

步骤1.创建标题窗口小部件区域 (Step 1. Creating a Header Widget Area)

First, we need to create a custom widget area. This step will allow you to see your custom widget area on Appearance » Widgets page in your WordPress dashboard.

首先，我们需要创建一个自定义窗口小部件区域。 此步骤将使您可以在WordPress仪表板的外观»小部件页面上查看自定义小部件区域。

You will need to add this code to your theme’s functions.php file.

您将需要将此代码添加到主题的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' );

This code registers a new sidebar or a widget ready area for your theme.

这段代码为您的主题注册了一个新的侧栏或窗口小部件就绪区域。

You can now go to Appearance » Widgets page, and you will see a new widget area labeled ‘Custom Header Widget Area’.

现在，您可以转到外观»小部件页面，您将看到一个标记为“自定义标题小部件区域”的新小部件区域。

Go ahead, and add a text widget to this newly created widget area and save it. See our guide on how to add and use widgets in WordPress for detailed instructions on adding widgets.

继续，然后向此新创建的窗口小部件区域添加文本窗口小部件并保存。 有关添加小部件的详细说明，请参阅我们的有关如何在WordPress中添加和使用小部件的指南。

步骤2：显示您的自定义标题小部件 (Step 2: Display Your Custom Header Widget)

If you visit your website now, you will not be able to see the text widget you just added to your newly created header widget.

如果您现在访问您的网站，将无法看到刚添加到新创建的标题小部件中的文本小部件。

That’s because we haven’t yet told WordPress where to display this widget area.

那是因为我们还没有告诉WordPress在何处显示此小部件区域。

Let’s do that in this step.

让我们在这一步中做到这一点。

You will need to edit the header.php file in your theme and add this code where you want to display your custom 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; ?>

Don’t forget to save your changes.

不要忘记保存您的更改。

You can now visit your website and you will see your header widget area.

现在，您可以访问您的网站，并且会看到标题小部件区域。

You will notice that it looks a bit unpolished. That’s where you will need CSS to make it look better.

您会注意到它看起来有些粗糙。 那是您需要CSS使其外观更好的地方。

步骤3：使用CSS设置标题小部件区域的样式 (Step 3: Style Your Header Widget Area Using CSS)

Depending on your theme, you will need to add CSS to control how the header widget area and each widget inside it is displayed.

根据您的主题，您将需要添加CSS以控制标题小部件区域和其中的每个小部件的显示方式。

The easier way to do this is by using CSS Hero plugin. It allows you to use an intuitive user interface to change CSS of any WordPress theme. For more details see our CSS Hero review.

更简单的方法是使用CSS Hero插件。 它允许您使用直观的用户界面来更改任何WordPress主题CSS。 有关更多详细信息，请参见我们的CSS Hero评论 。

If you don’t want to use a plugin, then you can add custom css to your theme by visiting Appearance » Customize page.

如果您不想使用插件，则可以通过访问外观»定制页面将定制CSS添加到主题中。

This will launch the WordPress theme customizer interface. You will need to click on the ‘Additional CSS’ tab.

这将启动WordPress主题定制器界面。 您需要点击“其他CSS”标签。

The additional CSS tab in theme customizer allows you to add your custom CSS while watching the changes appear in the live preview.

主题定制器中的附加CSS标签可让您添加自定义CSS，同时观看实时预览中出现的更改。

For the sake of this tutorial, we are assuming that you will be only using this area to add a single widget to display banner ads, or a custom menu widget.

就本教程而言，我们假设您将仅使用此区域添加单个小部件来显示横幅广告或自定义菜单小部件。

Here is some sample CSS to help you get started.

这是一些示例CSS，可以帮助您入门。

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

This is how our custom header widget area looked on the default Twenty Seventeen theme.

这就是我们的自定义标题窗口小部件区域在默认的二十十七主题上的外观。

You may need to adjust the CSS to match your theme. Take a look at our guide on how to add custom styles to WordPress widgets.

您可能需要调整CSS以匹配您的主题。 查看有关如何向WordPress小部件添加自定义样式的指南。

We hope this article helped you learn how to add a WordPress widget to your site’s header. You may also want to see our list of 25 most useful WordPress widgets for your site.

我们希望本文能帮助您学习如何将WordPress小部件添加到网站标题中。 您可能还想查看我们的网站上25个最有用的WordPress小部件列表。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-a-wordpress-widget-to-your-website-header/

wordpress标题设置