WordPress小部件非常有用。它们使您可以在帖子或页面本身之外将各种其他内容添加到您的网站中,以鼓励用户获取信息,跟踪链接或采取行动。

在这篇文章中,我将向您展示有关WordPress小部件所需的所有知识。如何将它们添加到您的网站,如何创建将其放入的窗口小部件区域,如何安装为您提供更多插件的插件,如何编写自己的窗口小部件的代码等等。

首先,让我们首先确定什么是WordPress小部件。

只需移至Kinsta,即可将WordPress网站的速度提高200%。
        
          今天免费迁移
        
      
    
  
什么是WordPress小部件?

在WordPress中,小部件是生活在页面流之外的内容片段或发布内容。

小部件包含与单个帖子或页面分开的信息,导航或媒体。在大多数情况下,每个窗口小部件都会显示在站点的每个页面上,但是您也可以为特定页面(例如主页)注册窗口小部件区域。

要将小部件添加到您的站点,您需要将其添加到小部件区域。窗口小部件区域是由您的主题创建的,因为它们与站点的设计和布局有关,而与功能无关。

大多数WordPress主题在边栏和页脚中都有小部件区域,尽管有些主题在很多地方都具有多个小部件区域,例如在内容的下方或上方或页眉中。

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

我网站上的小部件区域

WordPress附带了许多预加载的小部件,因此您无需安装任何插件或编写任何代码即可使用它们。但是您也可以通过安装插件或编写自己的代码来添加更多小部件。

这些可以涵盖广泛的内容类型,例如媒体,社交媒体供稿,导航,搜索,地图等等。在您的网站上,几乎没有想要找到其小部件的东西。实际上,最大的挑战通常是在所有选项之间进行选择,而不是过度选择。

何时使用WordPress小部件

每当您想向网站中的一个或多个页面添加额外的内容(并且当我说页面时,我包括帖子,档案等)时,都应该使用小部件,但这不属于该页面内容。它们对于要显示在网站每个页面上的内容特别有用,例如最新帖子列表,购物车或号召性用语。

考虑一下需要多少用户访问每个窗口小部件,以及在决定放置它的位置时它的重要性。侧栏中的小部件将比页脚中的小部件突出,有些用户甚至看不到。

因此,在人们有更多机会与之互动的侧边栏中,最好使用最新的帖子小部件或号召性用语小部件,而社交媒体Feed可能位于页脚。

如果您的主题在主页上还具有特殊的窗口小部件区域,则可能需要使用这些区域在站点的部门,相关内容列表或媒体(例如视频)中导航,以欢迎人们访问站点。

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 Map Widget插件,例如WP Google Maps插件。

WP Google Maps插件

另外,如果您不想安装插件,则可以从Google Maps获取嵌入代码,然后将其添加到HTML小部件中。

10.登录小部件

如果您运行的是会员网站,则登录小部件将使人们可以轻松登录而无需进入单独的登录页面。

WordPress随附的Meta小部件包含一个登录链接,但其中还包含您可能不想要的其他内容,因此,我建议为此从插件目录中使用单独的插件。

“使用Ajax登录”小部件为您提供了一个小部件中的登录表单,这意味着人们可以从任何页面登录到您的站点。

使用Ajax小部件插件登录

11.搜索小部件

搜索小部件是一个非常简单但非常有用的小部件,它预装了WordPress。

搜索小部件

将其添加到侧边栏或标题中,可以使人们更轻松地在您的网站上查找内容。

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

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

一旦确定了WordPress网站所需的小部件类型,就可以安装它们了。

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

并且,如果您的主题中有任何其他窗口小部件区域,请确定要在其中放置哪些窗口小部件。确保它们适合您网站的布局和设计。

有三种添加小部件的方法:

  • 使用WordPress随附的小部件。
  • 从plugins目录添加第三方窗口小部件。
  • 购买包含小部件的高级插件。

为您的WordPress网站查找小部件

有大量可用的小部件,因此很难选择要安装的小部件。让我们看一下这些选项,然后研究如何选择最适合自己的选项。

WordPress随附的小部件

如果其中一个预安装的小部件完成了您需要的操作,请使用它。这将节省您的时间,并减少在您的网站上运行的代码。

预装的WordPress小部件

预安装的小部件为:

  • 档案:按月链接到档案,专为博客而设计,但现在已经过时了。

  • 日历:您的帖子的日历,同样适用于博客,特别是在您的博客对时间敏感的情况下(但如今并不常见)。

  • 自定义HTML:最大的灵活性,可通过在HTML中键入或粘贴来添加所需的任何内容(例如Google表单)。如果您不喜欢编码,请避免使用。

  • 图像:显示媒体库中的图像。

  • 导航菜单:显示主导航菜单或您创建的单独菜单。

  • 最近评论:最近评论的列表及其链接。

  • 标签云:云格式的标签列表,带有指向相关档案的链接。

  • 视频:嵌入来自YouTube或任何其他流媒体服务的视频。

  • 音频:嵌入播客,播放器,歌曲或其他音频片段。

  • 类别:您博客中类别的列表,以及指向存档页面的链接。

  • 图库:比图像小部件更高级,显示图像库。

  • 元:元数据,例如登录链接和RSS源。 WordPress初期的宿醉,现在不太有用。

  • 页面:显示网站页面的列表以及链接。

  • 最近的帖子:显示您最近的帖子列表,以鼓励人们阅读。

  • 搜索:一个简单的搜索框。

  • 文字:您要添加的任何文字,例如有关网站的信息。

使用插件添加小部件

WordPress插件目录有数千个免费的小部件插件,这些插件将为您提供更多小部件供您选择。

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

如果插件目录中没有您需要的插件,则可以决定添加高级插件。有时它们会提供更多功能或更直观的界面。但是有时候您会在免费插件中找到相同的功能,因此请在付费插件之前先搜索一下插件目录。

如何为您的网站找到合适的小部件

要为您找到合适的WordPress小部件,请遵循以下提示:

  1. 从小部件中准确确定您的需求。它需要具有什么功能,您希望它看起来如何?是否需要链接到任何第三方API?
  2. 检查内置的小部件,看看是否有满足您需求的小部件。测试任何相关的软件,如果找到合适的软件,那就太好了。如果不…
  3. 检查插件目录,您可以通过“插件”>“添加新文件”访问该目录。尝试搜索多个词以找到适合您的插件,然后搜索带有或不带有“ widget”字样的字词。有时,不专注于小部件的插件会将小部件作为更广泛的功能集的一部分。
  4. 如果您在免费插件中找不到合适的插件,请寻找一个高级插件。向其他WordPress用户询问建议,并在选择评论之前查看评论。

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

如何在WordPress的侧边栏和页脚中添加小部件

现在,您已经选择了小部件,是时候将其添加到您的网站了。

您可以将窗口小部件添加到主题提供的任何活动窗口小部件区域。如果您的主题所在的位置没有小部件区域,请尝试寻找其他主题。

在本文的稍后部分,我将向您展示如何对自己的小部件区域进行编码。

有两种方法可以将小部件添加到您的站点:

  • 通过使用定制器。转到管理菜单中的外观>定制程序>小部件,或者从屏幕顶部的管理栏中转到自定义>小部件。
  • 通过窗口小部件管理屏幕。转到管理菜单中的外观>窗口小部件,或从管理栏中单击自定义>窗口小部件。

定制程序中的小部件

我将在短期内向您展示如何使用这两种方法,但首先让我们看一下小部件区域以及为什么要使用主题进行处理。

小部件不仅仅用于侧边栏

根据您的WordPress主题,您可能会发现您在多个位置都有小部件区域。

大多数主题在边栏和页脚中都有小部件区域。但是有些也将它们放在其他位置,例如内容下方或上方或标题中。

如果您转到WordPress管理员中的“小部件设置”屏幕,则可以查看主题中的所有小部件区域。

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

小部件设定画面,小部件区域

如果要将小部件添加到站点中的其他位置,则有必要查找具有多个小部件区域的主题。最好的方法是使用框架主题。

在主题中某个位置而不是侧边栏或页脚的小部件的一个很好的例子是,像在我的一个网站上一样,在页眉中添加搜索栏。

标头中的搜索栏

小部件区域和主题

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

在这里,您可以看到我在主题函数文件中使用的代码,以添加将在标题中使用的小部件区域。

register_sidebar(数组(
 ‘name’=> __(’Header Widget Area’,’rmccollin’),
 ‘id’=>’header-widget-area’,
 ‘description’=> __(’位于标题右侧,站点标题和描述旁边的小部件区域。’,’rmccollin’),
 ‘before_widget’=>’

‘,
 ‘after_widget’=>’