如何将小部件区域添加到 WordPress（块和经典主题）

已发表: 2023-06-16

小部件是向 WordPress 网站的不同位置添加额外功能、特性和信息的一种流行方式。它们允许您放置任何内容，从日历上的联系表格到您网页上的最新博客文章列表。

然而，为了做到这一点，您首先需要小部件区域——至少在经典的 WordPress 主题中是这样。这些是 WordPress 主题的特殊指定部分，如果您在后端向它们添加小部件，它们也会显示在前端。

另一方面，使用 WordPress 站点编辑器阻止主题不再有小部件区域。在这里，添加小部件的工作方式与以前截然不同，这足以涵盖整个主题。

在下文中，我们来看看将小部件添加到您的 WordPress 主题的不同方法。我们讨论了如何使用小部件化区域并在经典主题中创建新区域，以及如何使小部件显示在您的块主题中。

什么是小部件以及如何使用它们？

在讨论更多技术性内容之前，让我们首先真正快速地了解一下我们在使用与 WordPress 相关的术语“小部件”时所谈论的内容。如果您使用的是像二十二十一这样的非块主题，您可以在外观 > 小部件下找到它们的设置。

这显示了当前主题中可用的所有小部件区域（此处，它只是页脚）及其包含的小部件。此处可见的所有内容也对应于您网站的前端。

通常，小工具区域位于页脚、侧边栏或页眉中。但是，您也可以将它们放在几乎任何您想要的地方（您很快就会看到）。

如何在您的站点上显示小部件

小部件菜单曾经有一个不同的用户界面，但现在它已经被转换为像 WordPress 的其他部分一样与块编辑器一起工作。因此，您可以像使用 WordPress Gutenberg 编辑器的任何其他实例一样使用它。

通过块插入器（左上角的蓝色加号按钮）或其在小部件区域中的较小版本添加块。您还可以按照通常的方式删除块，并在右侧边栏中更改它们的外观和行为。

您可以使用的块涵盖常用选项。段落、标题、表格、图片——一切皆有可能。

通常，小部件区域用于信息自行更新的更动态的部分。您仍然可以在块插入器的“小部件”类别下找到它们。

如您所见，它们包括显示档案和类别、页面列表或最新帖子和评论、RSS 提要或搜索栏等内容。不要忘记单击右上角的更新，这样您在此处所做的任何更改都会永久生效。

或者，您也可以在 WordPress 自定义程序（外观 > 自定义）和小部件选项卡中找到所有这些设置。

此处的优点是您可以直接在编辑器中预览页面上的所有内容。

在经典 WordPress 主题中创建新的小部件区域

好的，到目前为止一切顺利。我们已经确定了什么是小部件以及您可以在经典主题的哪一部分中管理它们。

但是，如果您对可用的小部件区域的选择不满意怎么办？如果您希望能够在主题的其他位置添加小部件怎么办？

在那种情况下，您必须自己创建它们，这就是我们现在要经历的。

1.注册您的小工具区

在 WordPress 主题中创建小部件区域是一个两步过程。第一步是注册它们。

您可以使用functions.php中的register_sidebar()函数来做到这一点。它看起来像这样：

 function ns_register_top_banner_widget() { register_sidebar( array( 'name' => 'Top Bar', 'id' => 'top-bar-widgets', 'description' => 'Widgets in this area will appear in a bar at the top of the site.', 'before_widget' => '<div class="widget top-bar-widget">', 'after_widget' => '</div>', 'before_sidebar'=> '<div>', 'after_sidebar'=> '</div>', ) ); } add_action( 'widgets_init', 'ns_register_top_banner_widget' );

注意：与许多主题更改一样，建议您以子主题的形式实现它。

对代码片段的不同部分及其含义的一些解释：

name — 这是将出现在 WordPress 后端的小部件区域的名称。
id — 您需要为小部件区域提供一个 id，以便稍后显示它。
description ——这曾经显示在小部件菜单中。例如，您可以使用它向其他用户解释侧边栏的位置。但是，它只会出现在不使用小部件块编辑器的 WordPress 版本中，因此您也可以忽略它。
before_sidebar和after_sidebar — 这两个参数允许您在小部件区域之前和之后添加 HTML 标记。这样，例如，您可以将其包装在<div>容器中。
before_widget和after_widget — 与上面相同，但适用于出现在该区域中的任何小部件。

还有其他参数可以与register_sidebar()一起使用。您可以在文档中了解有关它们的更多信息。然而，对于我们的目的来说，以上就足够了。

一旦出现在functions.php中并保存文件，小部件区域将已经显示在 WordPress 后端中。

2. 在您的 WordPress 主题中输出小部件区域

虽然您已经可以在仪表板中看到小部件区域，但目前在其中放置任何块或小部件都不会产生任何效果。那是因为还没有任何标记告诉主题输出您添加到它的任何内容。

这是通过dynamic_sidebar()函数发生的。例如，要在主题的任意位置输出您在上面创建的小部件区域，您可以使用此功能：

 <?php dynamic_sidebar( 'top-bar-widgets' ); ?>

请注意代码如何包含与之前创建的小部件区域相同的 id，以便显示它。

虽然上面的方法有效，但使用稍微复杂的代码片段通常是有意义的：

 <?php if ( is_active_sidebar( 'top-bar-widgets' ) ) : ?> <?php dynamic_sidebar( 'top-bar-widgets' ); ?> <?php endif; ?>

上面的代码首先检查有问题的小部件区域中是否有任何小部件，只有在这种情况下才将其添加到页面。它还包含更多标记，如 HTML 类和 id，以便更容易通过 CSS 自定义输出。

这只剩下问题，你把这个标记放在哪里？

答案：主题文件中您希望小部件区域出现的任何位置。通常是在页面模板文件内部，如page.php或single.php 。但是，您也可以将它添加到header.php或footer.php之类的文件中。要做出决定，了解模板层次结构并了解主题的工作原理会有所帮助。

在本例中，对于二十一主题，我们将其放在页面打开后的header.php中。

有了代码，当我们现在将一个小部件放入新创建的区域时，它将显示在网站上的预期位置。

备选方案：使用 WordPress Hooks 显示小部件区域

除了将代码片段直接添加到您的页面模板和主题文件中，您还可以使用 WordPress Hooks 实现相同的输出。

这些是放置在上述文件中战略位置的小代码片段，您可以使用它们告诉 WordPress 在该位置执行功能，而无需将代码实际放置在那里。相反，您可以将有问题的函数放在functions.php中。这样做的好处是可以从一个地方管理所有的小部件区域。

这对我们的案例来说会是什么样子？

以下是使用 WordPress 挂钩放置小部件区域的方法：

 function ns_output_top_banner_widget() { if ( is_active_sidebar( 'top-bar-widgets' ) ) : dynamic_sidebar( 'top-bar-widgets' ); endif; } add_action( 'wp_body_open', 'ns_output_top_banner_widget' );

二十二十一主题在其头文件中有一个名为wp_body_open()的钩子。通过挂钩它，我们可以在不修改文件本身的情况下在同一个地方显示小部件区域。

如前所述，代码片段位于您的（子）主题的functions.php中。此方法特别适用于包含大量 hook 的主题，例如 Genesis Framework。

如何在块主题中添加小部件

到目前为止，我们只讨论了如何在经典主题中创建小部件区域。然而，块主题又如何呢？毕竟，它可能会成为 WordPress 主题的实际标准。

在这里，因为站点编辑器的工作方式非常不同，所以您实际上没有小部件区域。您还会注意到Appearance > Widgets菜单不存在。

但是，您仍然可以使用与上述类似的原则向您的主题添加小部件、内容和其他元素。

输入页面模板和模板部件

这里首先要注意的是，您在使用块编辑器放置小部件时受到的限制要少得多。由于您不限于预配置的小部件区域，您可以将任何页面元素放置在您想要的任何位置。

但是，您仍然可以通过使用页面模板和模板部件在经典主题中使用像小部件这样的块。通过左侧站点编辑器中的菜单在您的区块中访问它们（单击左上角的 WordPress 徽标将其打开）。

这会为您提供站点上可用页面模板的列表。它们的范围通常从归档模板翻页到 404 页面。

如果您查看经典主题中的主题文件，它类似于您会发现的内容。

另一方面，在Template Part下，您可以找到网站各部分的模板，例如页眉、页脚或评论部分。

单击其中任何一个以在编辑器中打开。或者，您也可以通过模板编辑器更改模板和模板部件。这是站点编辑器的略微简化版本，您可以通过普通页面编辑器打开它。只需打开您想要的页面，单击Template下的模板名称，然后单击Edit template 。

您还可以从下拉编辑器中选择另一个模板。

添加新元素/小部件

如果您知道页面模板的工作原理，您可能会明白，您在此处所做的任何更改不仅会影响单个页面，还会影响您网站上使用页面模板或模板部分的每一个内容。因此，您添加到其中的任何页面元素都会出现在您网站上所有这些元素处于活动状态的地方。

例如，您可以将最新的帖子小部件添加到页脚模板部分。

如果你这样做并保存，它也会出现在网站的前端，对于这个模板部分存在的每个页面。

如果您考虑一下，这与经典小部件区域的工作方式并没有太大不同。它们也是一种添加页面元素和内容的简单方式，以便它们可以在整个网站的同一位置复制。

这里唯一的区别是不需要编辑文件。相反，您可以在可视化编辑器中完成所有操作，WordPress 会为您创建和修改文件。

在 WordPress 块主题中创建新的“小部件区域”

那么，如何在块主题中创建新的小部件区域？

答案是：你真的不知道。然而，最接近它的是创建新的页面模板和模板部件。这样做可以让您添加仅在您网站的有限部分显示的内容。

让我们看一个例子，让事情更清楚。假设你想做我们在顶部手动做的同样的事情。在过去，您必须注册一个小部件区域，然后添加代码才能将其输出。使用站点编辑器，您可以实现相同的目的。只是在这种情况下，就容易多了。

一种可能性是创建一个新的模板部件。为此，在编辑器的模板部件菜单下，单击顶部的加号图标。

在出现的菜单中，为其命名（例如，“带顶栏的页眉”）并选择类型（在本例中，当然是页眉），然后开始编辑。用您需要或想要的任何页面元素、小部件和内容填充它。

完成后，您仍然需要将其分配给您希望它出现的页面模板。

为此，转到该模板（在本例中为Home ）并找到现有标题。单击它，然后单击三个点以打开其菜单，然后选择Replace header 。

这将打开一个菜单，其中包含您网站上可用的模板部件和模式。

选择刚刚创建的模板进行输入，然后保存页面模板。如果您现在返回您网站的前端，您会在页面上看到新创建的页眉（并且仅在那里）。

如何添加新的小部件/块

在讨论如何在块主题中创建小部件和小部件区域时，剩下的最后一个问题是如何添加更多小部件选择。毕竟，默认情况下，您只限于少数几个选项。幸运的是，有不同的方法可以添加更多。

其一，您可以安装 Gutenberg 块插件，其中许多包含不同的小部件块，例如表单、地图或轮播。

此外，您还可以安装具有小部件功能的单个块。为此，首先单击 WordPress 站点编辑器中的块插入器。

打开后，在顶部的字段中输入您要查找的块类型的搜索词。除了您网站上已有的任何选项外，编辑器还将搜索 WordPress 块目录并显示合适的选项。

如果某些内容听起来像您正在寻找的内容，只需单击相关块即可将其安装到您的站点并将其插入页面的当前位置。将其放置在您希望它出现并保存的页面模板或模板部分中。然后，在您网站的前端欣赏它。

顺便说一句，您可以随时删除在插件菜单中安装的单个块，以防您不再需要它们。

Widgetizing WordPress 主题并不难

在 WordPress 中添加小部件和小部件区域是在您的站点上显示各种功能和信息的一项重要技能。它们有助于使您的站点更具交互性、信息量和可用性。

在经典主题中，创建小部件区域的方法更具技术性。您需要对 WordPress 文件架构有基本的了解，并且熟悉代码编辑器并对 PHP 代码进行调整。另一方面，在块主题中，您可以只用鼠标光标来做同样的事情。

重要的是要牢记原则是相同的，只是实现方式不同。现在您知道它是如何完成的，请使用这些知识来改进您的网站！