在WordPress中添加自定义小组件到任何页面，帖子或模板

小部件使WordPress非常灵活.通过将窗口小部件区域添加到主题，让用户插入自己的自定义内容，而无需编写一行代码.

它们在侧栏和页脚中最常见，在那里他们经常用于持有窗口小部件，例如搜索窗口小部件，最新帖子窗口小部件，或者可能是自定义菜单.但如果将它们添加到您的页面和邮寄模板，则会使其更强大.

您可以将窗口小部件区域添加到您所喜欢的任何模板文件中.我喜欢在主要导航之前和之后的标题等地，以及内容之前和之后的地方添加大量的主题.您可以将它们添加到站点中每个页面使用的模板部分(例如标题)，也可以更具体地将它们添加到给定内容类型的模板文件中.

在这篇文章中，我会向你展示如何做到这一点.我将创建一个默认的二十十七主题的子主题，然后在那个孩子主题中，我将创建一些新的模板文件:自定义页面模板文件，一个类别存档文件和单个帖子模板文件.

在这些中，我将添加特定于该内容类型的小部件区域，因此在使用页面模板，类别归档或单个帖子中查看页面时，用户只会看到它.

注意:我已将此帖子的代码添加到github中，如果您与本教程一起工作，您可以检查它.

继续读取，或使用以下链接跳转:

• 设置子主题
• 注册小部件区域

设置子主题

我将使用二十七个主题的孩子:如果您使用自己的主题，可以直接编辑，而不是创建子主题.但是，如果您使用的是第三方主题，则必须创建一个子主题.这是因为当您更新主题时，您对其进行的任何更改都将丢失.

所以，在 WP-Content/Themes 文件夹中，创建一个带有主题名称的新文件夹.我正在呼叫我的 wpmu-template-widgets .在此之内，添加一个 style.css 文件并将其添加到其中:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

记住，如果您使用自己的主题，可以跳过此步骤.如果您使用的是使用不同的父主题，您必须编辑样式表以反映.如果您不确定，请查看我们的帖子创建儿童主题.

注册窗口小部件区域

在我们可以将窗口小部件区域添加到我们的模板文件之前，我们需要在主题的函数文件中注册它们.打开函数文件如果您的主题已经有一个，或者它是一个新的子主题，请创建一个名为函数的文件.php .

让我们首先添加空函数来注册小部件，并将其挂钩到widgets_init钩子.将其添加到您的函数文件:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

在该函数中，我们将注册四个小部件区域:单个帖子和类别归档模板中的每一个，以及两个用于自定义页面模板.

首先注册第一个小部件:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

这使用register_sidebar()函数，参数阵列如下:

• 窗口小部件区域的名称，将出现在窗口小部件管理屏幕和自定义程序中.我已经使这个可翻译.
• 窗口小部件区域的唯一ID.
• 在小部件之前的标记，它使用占位符进行国际化.
• 标记在小部件后.
• 标记在窗口小部件标题之前和之后，它被包围在h3元素中.

所以这是第一个.现在，仍然在您的功能内，添加其他三:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

所以我们现在有四个小部件:

• 单个帖子内容之一.
• 在类别存档的内容之前.
• 之前和一个在我们的小型绑定页面模板上的内容之后.

如果要移动窗口小部件区域(例如，在内容之前将类别存档1归档)，则应适当地重命名它们.这是为了让您在将来编辑代码时，您知道正在发生的事情，并且您的用户知道在通过窗口小部件管理屏幕向其中添加小部件时将输出小部件区域的位置.请记住，如果您更改此操作，您需要将代码放在下一步中的模板文件中的正确位置中的小部件，这可能与我放置的位置不同.

现在，如果您打开窗口小部件管理页面，您将看到您的小部件区域，为小部件准备好:

窗口小部件管理屏幕中的新注册的小部件区域.

但如果您将小部件添加到您的新小部件区域，则不会在您的网站的前端显示.它们仍然需要编码到模板文件中.

将窗口小部件区域添加到模板文件

现在我们添加了输出窗口小部件区域的代码.如果您正在使用自己的主题，您可能只需要编辑现有的主题模板文件.如果您正在使用子主题(或您的主题尚未拥有相关的模板文件)，您需要创建新文件.

让我们从小饰品的页面模板文件开始，因为你的主题无论是那么的方式.

在主题文件夹中，创建一个新文件.我正在打电话给我的 page_widgetized.php .打开该文件并将其添加到其中:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

这告诉WordPress是它是一个自定义页面模板.如果您想了解更多关于它们，请查看我们的详细指南.

注意:不要使用页面小核化作为您的文件名.这是因为页面- 是wordpress 中的保留后缀.如果您愿意，请使用下划线而不是破折号，或者只是避免在开始时使用页面.

现在注明了文本，从主题(或父主题)复制所有内容 page.php 文件.另一种方法是制作文件的副本并添加注释的文本，这取决于您.

您现在可以在站点中编辑页面时选择此模板:

WordPress页面编辑屏幕上的页面模板选择器.

为您的一个页面选择它，以便您可以尝试小部件.这是我的页面:

页面，没有小部件显示.

现在看起来并不看起来非常令人兴奋，因为我没有将窗口小部件区域添加到模板文件.让我们这样做.

在模板文件中，在页面内容上方的内容上方添加此代码，用于上述内容小部件区域:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

此检查是否已使用在函数文件中注册时为小部件区域创建的唯一ID填充了窗口小部件区域.如果已填充，它会输出小部件区域的内容.

现在在内容以下添加小部件区域.您的内容(以及在任何封闭元素中)，添加以下内容:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

保存页面模板文件.

这是我的页面模板文件的完整代码，因此您可以在循环之前和之后看到窗口小部件的位置:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

现在要测试它.我已为每个新小部件区域添加了一个小部件:

带有窗口小部件的小部件admin屏幕添加到两个新的小部件区域.

以及它们在我的页面上看起来如何:

内容之前和之后的小部件的页面.

所以这是定制页面模板设置.现在，您需要编辑其他两个页面模板文件(或必要时创建它们).按照下列步骤操作:

• 如果您正在使用子主题，请创建一个名为 category.php 的文件.复制来自父主题(如果有一个)或 archive.php 文件(或 index.php </ex 如果没有那个).
• 如果您不使用子主题，但您的主题没有类别.php文件，通过复制 archive.php 文件来制作一个(或者如果您没有其中一个，则 index.php 文件).
• 在County incount之前，请在County归档文件中的内容上方添加窗口小部件区域.

这是窗口小部件区域的代码:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

现在为单个模板重复此操作:

• 如果您的主题没有一个(或您使用的子主题)，则创建一个单帖子3.php 文件.将内容从父主题的 single-post.php 文件复制到其中，或者从模板层次结构中的下一个模板文件( single.php ，奇异.php 或 index.php ).
• 再次，添加小部件区域-内容后的这次.

这是代码:

加载GIST CFD5884884FF55AE99B25A30C5C5768E.

现在，如果您添加小部件，他们会在您的网站上显示.这是我在单个帖子之后的最近帖子的列表:

将窗口小部件区域添加到模板，为您提供灵活性

窗口小部件区域使您的主题用户可以添加额外内容，而无需编写代码.但他们不仅仅是侧边栏.将额外的窗口小部件区域添加到模板文件中为您提供了您的网站中的目标区域，可以将小部件添加到，并在它们显示的位置进行精细控制.

如果您喜欢，可以进一步访问这些示例，将窗口小部件区域添加到所有文件，甚至使用不同内容类型的不同版本的 Sidebar.php 文件.世界是你的牡蛎！