什么是WordPress中的小部件？

wordpress 小部件是向您的网站添加额外内容、片段和交互性的好方法。

它们使您的网站不仅仅是一个博客，而且它们使您可以灵活地识别要在网站的每个页面上显示的内容，并确保人们不会错过它。

在本文中，您将了解有关 WordPress 小部件的所有信息。您将了解如何将它们添加到您的站点、它们的去向以及如何充分利用它们。我还将介绍小部件的一些技术性更强的方面，并帮助您创建自己的小部件区域以显示小部件。我什至会让你开始创建自己的小部件插件。

什么是 WordPress 小部件？

让我们首先确定确切的小部件是什么。

在 WordPress 中，小部件是位于页面流或发布内容之外的内容片段。

WordPress 小部件包含独立于实际帖子或页面的导航、信息或媒体。在大多数情况下，每个小部件都会显示在站点的每个页面上，但您也可以为特定页面（例如主页）注册小部件区域。

要将小部件添加到您的站点，请将其添加到小部件区域。小部件区域由您的主题创建，因为它们是您网站设计和布局的一部分。

大多数主题在侧边栏和页脚都有小部件区域，尽管有些主题会在很多地方有多个小部件区域，例如内容下方或上方或标题中。或者他们可能在侧边栏和/或页脚中有多个小部件区域，这为您提供了更大的灵活性。

下面的屏幕截图是我自己的网站之一，在侧边栏和页脚中显示了小部件。

什么是WordPress中的小部件？第1张

如何使用小部件

您可以使用小部件做很多事情；实际上，选项仅受您的想象力限制。

但这里有一些小部件的常见用途，您可能希望为自己的网站考虑这些小部件：

使用预装的导航菜单小部件添加额外的导航菜单 - 在页脚中很有用，这样人们在到达帖子末尾时可以去某个地方。
添加带有文本小部件或自定义html小部件的号召性用语按钮，非常适合鼓励人们做特定的事情。
通过安装链接到您的社交媒体帐户的插件来添加社交媒体供稿。通常将这些放在页脚中。
添加购物车——大多数电子商务插件都带有购物车小部件。
使用图像小部件添加您最喜欢的图像。
使用“最近的帖子”小部件添加您最近发布的列表 - 对于有博客的网站来说，这是最受欢迎的小部件之一。

还有很多选择。如果您通过在您的站点中转至插件 > 添加新项进入 WordPress 插件目录，然后搜索widget，您会发现数百个插件为您提供额外的小部件，您可以将它们添加到您的侧边栏、页脚或其他小部件区域。

什么是WordPress中的小部件？第2张

如何将小部件添加到您的网站

WordPress 预装了一组小部件，因此您无需安装任何插件或编写任何代码即可使用它们。但是您也可以通过安装插件或编写自己的代码来添加更多小部件。这些可以涵盖广泛的内容类型，例如媒体、社交媒体提要、导航、搜索、地图等等。您可能希望在您的网站上找到的小部件很少。事实上，最大的挑战往往是在所有选项之间做出选择，而不是过火。

让我们先看看如何将预安装的小部件添加到您的站点。

将预加载的小部件添加到您的站点

WordPress 已经安装了一些很棒的小部件：

什么是WordPress中的小部件？第3张

档案：按月链接到档案，专为博客设计，但现在已经过时了。
音频：嵌入播客、歌曲或其他音频。
日历：您的帖子日历，同样适用于博客，特别是如果您的博客对时间敏感（但现在不那么常见）。
类别：您博客中的类别列表，带有指向存档页面的链接。
自定义 HTML：极致的灵活性——通过在 HTML 中键入（或粘贴）添加您想要的任何内容。如果您对编码不满意，请避免使用这个！
图库：比图像小部件更高级，可让您显示图像库。
图片：显示媒体库中的图片。
meta：元数据，例如登录链接和rss提要。WordPress 早期的宿醉，现在不是很有用。
导航菜单：显示主导航菜单或您专门创建的单独菜单。
页面：显示您网站的页面列表以及链接。
最近评论：最近评论的列表以及指向它们的链接。
最近的帖子：显示您最近的帖子列表，以鼓励人们阅读它们。
搜索：一个简单的搜索框。
标签云：云格式的标签列表，带有相关档案的链接。
文本：您要添加的任何文本，例如有关站点的信息。
视频：嵌入来自 YouTube 或 Vimeo 等流媒体服务的视频。

您可以从以下两个位置之一将小部件添加到您的站点：定制器和小部件屏幕。

定制器可让您在保存更改之前预览更改，这意味着您可以尝试并查看它们的外观。
小部件屏幕添加了额外的功能，例如保存您可能已配置并希望保存以供以后使用的未使用小部件的能力。它还可以更轻松地在小部件区域之间移动小部件，并具有无需鼠标即可使用的可访问性模式。

要访问定制器中的小部件，请转到外观 > 自定义 > 小部件。选择您要使用的小部件区域。

什么是WordPress中的小部件？第4张然后单击添加小部件按钮并选择要添加的小部件。它将在右侧显示为预览，您可以对设置进行调整或尝试不同的小部件，直到您满意为止。完成后，单击顶部的发布按钮以保存更改。

注意：如果您在未单击Publish的情况下离开定制器，则不会保存您的任何更改。不要忘记！

要访问小部件屏幕，请转到外观 > 小部件。在这里，您将在左侧看到可用小部件的列表，在右侧看到小部件区域。请记住，小部件区域是由您的主题创建的，因此如果您需要更多，您可能需要切换主题。（或者您可以使用代码添加新的小部件区域，我将在下面解释。）

什么是WordPress中的小部件？第5张然后，您需要做的就是将所需的小部件拖到所需的小部件区域中。然后，您可以在小部件区域调整设置（如果小部件有设置），并用鼠标移动小部件。

小部件屏幕还具有可访问性模式。要访问它，请单击屏幕右上角的启用辅助功能模式链接。

什么是WordPress中的小部件？第6张要退出辅助功能模式，请再次单击该链接——它会让您退出辅助功能模式。

安装和激活小部件插件

要将免费的小部件插件添加到您的站点，请转到插件 > 添加新的并搜索widget. 或者，如果您想要一个可以执行特定任务的小部件，请搜索该任务。有很多插件包含小部件，但不仅仅是小部件插件，例如带有购物车小部件的电子商务插件。

找到所需的插件后，单击“安装”按钮。片刻之后，这将变为激活按钮。单击以激活插件。

现在，当您转到定制器或小部件屏幕时，您将能够将插件提供的小部件添加到主题中的小部件区域。

如果您从外部提供商处购买了小部件插件，则需要将该插件上传到您的站点。您可以直接从管理屏幕执行此操作。

转到插件 > 添加新的。点击上传插件按钮。

什么是WordPress中的小部件？第7张上传插件的 zip 文件（不要上传未压缩的文件，只有 zip 文件可以使用）。

单击立即安装按钮，然后激活插件。当您转到定制器或小部件屏幕时，小部件将可用。

如何为您的主题添加额外的小部件区域

如果您的主题没有您想要的小部件区域，最简单的解决方案是找到一个主题。但是，如果您对主题的设计感到满意，但只想添加一个或多个额外的小部件区域怎么办？

register_sidebar()WordPress 允许您使用该功能创建自己的小部件区域。这样做包括两个步骤：

使用函数中的函数注册小部件区域。.php文件。
将小部件区域添加到主题中的相关位置。

如果您正在使用第三方主题（例如，您从主题目录下载或在其它地方购买的主题），那么您不能直接编辑您的主题。相反，创建一个子主题并将您的新代码添加到其中。

注册小部件区域

要注册小部件区域，您可以在functions.php文件中编写这样的函数。

function tutsplus_register_widgets() {
register_sidebar( array(
            'name' => __( 'After Content Widget Area', 'tutsplus' ),
        	'id' => 'after-content-widget-area',
        	'description' => __( 'Widget area after the content', 'tutsplus' ),
        	'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
        	'after_widget' => '</div>',
        	'before_title' => '<h3 class="widget-title">',
        	'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'tutsplus_register_widgets' );

保存文件，您会发现小部件区域出现在小部件屏幕和定制器中。但它不会向该站点输出任何内容。

在您的网站上显示小部件区域

要让小部件区域显示在您的网站上，您需要将代码添加到主题中的相关模板文件中。对于侧边栏，这将是sidebar.php，对于页脚，它将是footer.php。但是如果你想在不同的地方添加一个额外的小部件区域，你需要确定正确的模板文件。

要在内容上方或下方添加小部件区域，请将其添加到您的single.php文件、page.php文件或任何其他输出单个帖子或页面的文件中。
要将小部件区域添加到特定文件（例如主页），请创建一个名为 front -page.php的文件，将index.php或page.php文件的内容复制到该文件中，然后添加小部件区域的代码.
要将小部件区域添加到特定帖子类型的帖子，请将代码添加到single- posttype.php，其中posttype是帖子类型的名称。

还有更多选择——确定要使用哪个文件的最佳资源是WordPress 模板层次结构。

对于我在上面注册的后内容小部件区域，我将在模板文件中的内容之后添加此代码：

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>
            <aside class="after-content widget-area full-width" role="complementary">
                    	<?php dynamic_sidebar( 'after-content-widget-area' ); ?>
        	</aside>
<?php }

添加后，您添加到该小部件区域的任何小部件都将显示在站点中的正确位置。