WordPress小工具完整指南：如何使用、添加和实施它们来自定义您的网站

WordPress小工具非常有用。它们允许您在文章正文或页面本身之外向您的网站添加各种额外内容，从而鼓励用户获取信息、关注链接或采取行动。

在这篇文章中，我将向您展示您需要了解的有关WordPress小工具的所有信息。如何将它们添加到您的站点，如何创建小工具区域以放置它们，如何安装为您提供更多它们的插件，如何编写自己的小工具，等等。

1. 什么是WordPress小工具？
2. 何时使用WordPress小工具
3. WordPress中的11个小工具示例
4. 如何将小工具添加到您的WordPress网站
5. 如何为您的主题添加新的小工具区域
6. 如何使用小工具API编写小工具

首先，让我们从识别什么是WordPress小工具开始。

什么是WordPress小工具？

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

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

要将小工具添加到您的站点，您需要将其添加到小工具区域。小工具区域是由您的主题创建的，因为它们与您网站的设计和布局有关，而不是与功能有关。

大多数WordPress主题在侧边栏和页脚中都有小工具区域，尽管有些主题会在很多地方有多个小工具区域，例如内容下方或上方或标题中。

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

我网站中的小工具区域

WordPress预装了一堆小工具，因此您无需安装任何插件或编写任何代码即可使用它们。但是您也可以通过安装插件或编写自己的代码来添加更多小工具。

这些可以涵盖广泛的内容类型，例如媒体、社交媒体提要、导航、搜索、地图等等。您可能希望在您的网站上找到的小工具很少。事实上，最大的挑战往往是在所有选项之间做出选择，而不是过火。

何时使用WordPress小工具

每当您想向站点中的一个或多个页面添加额外内容（当我说页面时，我包括文章、档案等）时，您都应该使用小工具，但这不是该页面内容的一部分。它们对于您希望在网站的每个页面上显示的内容特别有用，例如您的最新文章列表、购物车或号召性用语按钮。

想想有多少用户需要访问每个小工具，以及当您决定将其放置在何处时它的重要性。侧边栏中的小工具将比页脚中的小工具更突出，一些用户甚至可能看不到。

因此，最新的文章小工具或号召性用语小工具在人们有更多机会与他们互动的侧边栏中可能会更好，而社交媒体提要可以放在页脚中。

如果您的主题还具有用于主页的特殊小工具区域，您可能希望使用这些小工具区域在您的站点的部门、相关内容列表或媒体（例如欢迎人们访问站点的视频）中导航。

WordPress中的11个小工具示例

了解WordPress小工具提供的可能性的最佳方法是查看它们的一些示例。让我们看一下您经常在WordPress网站上看到的11种类型的小工具。

1. 最近的文章小工具

最近的文章小工具可能是博客中最常用的小工具。

它使您可以在站点上每个页面的侧边栏或页脚中显示最新文章的列表，从而增加人们浏览该站点并阅读大量文章的可能性。

最近的文章小工具预装了WordPress。它使您可以设置要显示的文章数量以及要为小工具提供的标题。

最近的文章小工具

如果您想添加额外的功能，您可以为替代小工具（如WordPress热门文章）安装插件，该小工具会显示最受欢迎的内容。或者，每次用户访问新屏幕时，高级随机文章小工具都会刷新。

2. 最近评论小工具

想要向访问者展示您的网站的活力以及您的受众与您的内容的互动程度？

最近的评论小工具显示您网站上的最新评论，让访问者有机会直接导航到这些评论并加入讨论。

最近的评论小工具

最近的评论小工具随WordPress一起提供。同样，如果您想添加额外的功能，您可以安装第三方评论插件，例如WP Social Comments小工具，它允许人们使用他们的Facebook帐户发表评论：有利于社交媒体参与。

3.号召性用语小工具

小工具的一个很好的用途是鼓励人们采取行动，您可以通过号召性用语小工具来做到这一点。

您的小工具可以是一个简单的按钮，或者您可以使用文本小工具或HTML小工具甚至图像小工具创建更定制的东西，所有这些都预装在WordPress中。

在我自己的一个网站上，我创建了一个号召性用语小工具，鼓励人们注册我的邮件列表。这使用了内置的HTML小工具，我在其中包含了一个图像、一些文本和一个我用HTML编码的按钮。

我网站上的号召性用语小工具

4. 导航小工具

您还可以使用小工具来鼓励人们浏览您的网站。

有几个选项：类别或标签云小工具和导航菜单小工具。

导航菜单小工具可让您在站点中创建自定义导航菜单以及主导航菜单，然后将其添加到小工具区域。

您甚至可以将主导航菜单添加到小工具区域，尽管这仅在您有一个小的导航菜单时才有效。

导航菜单小工具

将导航菜单添加到您网站的页脚将鼓励人们到达文章末尾以浏览您的网站。这对于在到达文章末尾后可能需要进行大量滚动才能返回主导航菜单的移动用户特别有用。

或者，您可以使用内置的类别小工具来显示站点中的类别列表，或者使用标签云小工具来方便人们访问标签档案。

5. 媒体小工具

将媒体添加到您的侧边栏或页脚将使您的网站栩栩如生，并为用户提供一些可以查看或与之交互的内容。

您可以使用内置的图像小工具在侧边栏或页脚中显示任何图像，它也可以让您将该图像转换为链接。

图片小工具

或者，视频小工具可让您将来自YouTube或Vimeo的视频直接流式传输到您网站的小工具区域。如果您的网站在主页上有特殊的小工具区域，这将特别有用，但在页脚中也可以很好地作为在人们到达文章末尾时吸引人们注意力的一种方式。

6. 社交媒体小工具

如果您想与通过社交媒体访问您网站的人互动，将您的社交媒体供稿添加到您网站的侧边栏或页脚将向人们展示您在社交媒体上的活跃度，并鼓励他们喜欢或关注您。

访问最大平台（Facebook、Twitter、Instagram）的社交媒体小工具的一种方法是安装Jetpack插件，其中包括所有这些以及更多。

Jetpack插件

或者，所有社交媒体平台都有自己的插件，可通过插件目录免费获得。或者，您可以找到第三方插件，让您自定义显示社交媒体提要的方式。

7. 购物车小工具

如果您使用WooCommerce之类的插件在您的网站上运行电子商务商店，最好包含一个购物车小工具，以便用户可以轻松导航到他们在商店中的任何地方的购物车。

购物车小工具

您可以将其放在人们可以轻松看到的侧边栏中，或者如果您的主题在那里包含小工具区域，则可以将其放在标题中以增加可见性。

WooCommerce等电子商务插件包括购物车小工具和其他电子商务小工具作为插件的一部分，因此一旦您将电子商务添加到您的网站，您会发现它们已添加到您的小工具屏幕中。

8. 表单小工具

如果您希望人们与您联系、提出问题或注册邮件列表，您可以将表单添加到侧边栏。

WordPress不包含表单小工具，但您可以添加插件来提供它们，例如免费的Contact Form 7或高级但非常强大的Gravity Forms。

9. 地图小工具

如果您的企业位于实际位置，并且您希望人们能够轻松找到您，那么在您的站点中添加地图小工具会有所帮助。

您可以使用许多免费的Google地图小工具插件或其他WordPress地图插件，例如WP Google Maps插件。

WP Google Maps插件

或者，如果您不想安装插件，您可以从Google地图中获取嵌入代码并将其添加到HTML小工具中。

10.登录小工具

如果您正在运行会员站点，登录小工具将使人们可以轻松登录您的站点，而无需转到单独的登录页面。

WordPress附带的Meta小工具包含一个登录链接，但它还包含您可能不想要的其他内容，因此我建议使用插件目录中的单独插件。

Login with Ajax小工具在小工具中为您提供了一个登录表单，这意味着人们可以从任何页面登录您的站点。

使用Ajax小工具插件登录

11. 搜索小工具

一个非常简单但非常有用的小工具是搜索小工具，它预装了WordPress。

搜索小工具

将此添加到您的侧边栏或标题中，您可以让人们更容易在您的网站上找到内容。

如果您想增强搜索小工具的功能，您可以安装免费的WP Google搜索小工具，它使用Google搜索。

如何将小工具添加到您的WordPress网站

一旦你决定了你的WordPress网站需要什么样的小工具，就该安装它们了。

不要试图添加太多。数量越多，用户注意到它们的可能性就越小。相反，专注于侧边栏的两个或三个关键小工具。您可以在页脚中添加更多内容，无论如何它们都不那么重要。

如果您的主题中有任何额外的小工具区域，请决定将哪些小工具放入其中。确保它们符合您网站的布局和设计。

可以通过三种方式添加小工具：

• 使用WordPress自带的小工具。
• 从插件目录添加第三方小工具。
• 购买包含小工具的高级插件。

为您的WordPress网站查找小工具

有大量可用的小工具，因此很难选择安装哪一个。让我们看一下这些选项，然后检查如何选择最适合自己的选项。

WordPress附带的小工具

如果其中一个预安装的小工具可以满足您的需要，请使用它。这将节省您的时间，并意味着在您的网站上运行的代码更少。

预装的WordPress小工具

预装的小工具是：

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

使用插件添加小工具

WordPress插件目录有数以千计的免费小工具插件，可为您提供更多可供选择的小工具。

除此之外，许多其他插件还包括小工具，例如为您提供购物车小工具的电子商务插件等等。

如果插件目录没有您需要的插件，您可能会决定添加一个高级插件。有时这些会提供更多功能或更直观的界面。但有时您会在免费插件中找到相同的功能，因此在为插件付费之前，请仔细搜索插件目录。

如何为您的网站找到合适的小工具

要为您找到合适的WordPress小工具，请遵循以下提示：

1. 从小工具中准确确定您需要什么。它需要具备哪些功能以及您希望它的外观如何？它是否需要链接到任何第三方API？
2. 检查内置小工具，看看是否有满足您需求的小工具。测试任何相关的，如果找到合适的，那就太好了。如果不…
3. 检查插件目录，您可以通过Plugins > Add New访问该目录。尝试搜索多个术语以找到适合您的插件，并搜索有无“小工具”一词。有时，不专注于小工具的插件会将小工具作为更广泛的功能集的一部分。
4. 如果您在免费插件中找不到合适的插件，请寻找高级插件。在选择之前向其他WordPress用户询问建议并查看评论。

无论您选择哪个小工具，您都需要对其进行测试以检查它是否可以正常工作。如果您要购买高级插件，我建议您购买带有退款保证或免费试用期的插件，以防不适合您。

如何在WordPress的侧边栏和页脚中添加小工具

现在您已经选择了您的小工具，是时候将它添加到您的站点了。

您可以将小工具添加到主题提供的任何活动小工具区域。如果您的主题在您想要的地方没有小工具区域，请尝试寻找替代主题。

在这篇文章的后面，我将向您展示如何编写自己的小工具区域。

有两种方法可以将小工具添加到您的站点：

• 通过使用定制器。转到管理菜单中的外观 > 定制器 > 小工具，或从屏幕顶部的管理栏中转到自定义 > 小工具。
• 通过小工具管理屏幕。转到管理菜单中的外观 > 小工具，或从管理栏中单击自定义 > 小工具。

定制器中的小工具

我将很快向您展示如何使用这两种方法，但首先让我们看一下小工具区域以及为什么您会使用您的主题获得这些区域。

小工具不仅仅用于侧边栏

根据您的WordPress主题，您可能会发现在多个地方都有小工具区域。

大多数主题在侧边栏和页脚中都有小工具区域。但有些也有它们在其他地方，如内容下方或上方或标题中。

如果您转到WordPress管理员中的小工具设置屏幕，您将能够看到主题中的所有小工具区域。

我在很多地方使用具有多个小工具区域的主题。您可以在下面的屏幕截图中看到，在内容上方和下方、页眉中、主页脚下方都有小工具区域。

小工具设置屏幕、小工具区域

如果您想将小工具添加到站点中的其他位置，那么找到具有多个小工具区域的主题是有意义的。最好的方法是使用框架主题。

一个很好的小工具示例在您的主题中不是侧边栏或页脚的位置是在标题中添加一个搜索栏，就像我在我的一个网站上所做的那样。

标题中的搜索栏

小工具区域和主题

小工具区域被编码到主题模板文件以及主题功能文件中。

在这里，您可以看到我在主题函数文件中使用的代码，用于添加将进入标题的小工具区域。

register_sidebar( array(
'name' => __( 'In Header Widget Area', 'rmccollin' ),
'id' => 'in-header-widget-area',
'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

这是我的header.php文件中的代码，它将小工具区域添加到主题中的正确位置。