小部件使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归档),则应适当地重命名它们.这是为了让您在将来编辑代码时,您知道正在发生的事情,并且您的用户知道在通过窗口小部件管理屏幕向其中添加小部件时将输出小部件区域的位置.请记住,如果您更改此操作,您需要将代码放在下一步中的模板文件中的正确位置中的小部件,这可能与我放置的位置不同.
现在,如果您打开窗口小部件管理页面,您将看到您的小部件区域,为小部件准备好: