初学者的WordPress开发:小部件和菜单

小部件和菜单通常是您在为WordPress站点进行自定义时的第一个呼叫端口.它们不仅允许您在网站上的任何地方(即小部件的位置)放置和显示内容，当然是在小部件的情况下)，但它们也有任何潜在用户的潜在用户的关注.

在向主题添加小部件和菜单时最终涉及一些编码专业知识，所需的实际PHP是直接实施的.一旦你围绕着逻辑，你可以把你的CSS技能放在使用时侧栏和菜单的外观.

这是我们五部分系列为初学者的第四篇文章，教授WordPress开发的根本概念，以便您可以从Tinkerer到开发人员那里跳跃.在系列结束时，您将能够创建自己的基本主题和插件，并用自己的功能攻击它们.

在本教程中，您将学习如何代码和自定义自己的侧栏和菜单.我们还将浏览编码自定义查询以获取更复杂的功能.

注意:对于本系列，重要的是您已经对HTML和CSS进行了全面了解，因为使用WordPress时，这两种语言都是基本构建块.
错过了我们Wordpress开发的教程，为初学者系列?您可以在这里赶上所有五个帖子:

• 初学者的Wordpress开发:入门
• 初学者的WordPress开发:学习PHP
• 初学者的WordPress开发:构建主题
• 初学者的WordPress开发:小部件和菜单
• 初学者的WordPress开发:建筑插件

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

• 使用小型绑定区域
• 小部件:我们学到了什么
• 使用菜单
• 进一步阅读和研究

使用小核化区域

许多人称之为侧巴实际上是小部件化的区域.有时它们确实在侧边栏区域显示，但这并不一定是这种情况.

窗口小部件区域可以在您的网站上的任何地方显示，并且完全正确地达到您作为主题开发人员.您可能希望在页脚中显示一个小部件，另一个帖子下方，一个隐藏在菜单后面，等等.

您还需要告诉WordPress您计划创建小型绑定区域.这称为注册侧栏，并使用户界面显示在admin中.

在本系列的第三部分中，Wordpress开发初学者:主题开发的介绍，我们创建了一个functions.php文件.让我们为主题进行主题，我们一直在进行一点较窄，并为侧边栏添加第二列.我们将首先注册侧栏，因此将以下内容添加到functions.php文件:

如果你不明白add_action() bit别担心，我们还没有覆盖它！ (我们将在本系列的下一个帖子中查看它，初学者的WordPress开发:建筑插件.

此事的肉在mat_widget_areas()功能中.我们使用register_sidebar()函数来告诉WordPress我们的小型绑定区域的所有细节.

名称和描述参数将显示在Admin用户界面中，因此使它们描述性！每个窗口小部件都将以前后窗口小部件参数提供的代码中包装.使用%1$s作为id的占位符，并且对于任何类和wordpress将自动生成这些符号.

一旦您保存了此代码，您应该在外观菜单中看到新的小部件子部分显示，并且我们的小部件区域应显示给定的详细信息.

<fige5aption class = wordpress 中的窗口小部件区域

到目前为止这么好.您现在可以根据您的通常添加小部件到此小型绑定区域，但它不会显示任何地方，因为我们尚未将其添加到我们的主题代码中.

创建sidebar.php文件并将以下内容添加到其中:<div id="site-sidebar">This is my sidebar</div>

我们需要修改我们的标题和页脚文件以容纳侧边栏.我们将要查找的结构如下:

加载GIST 3DAF60076C594AFA6BB8
要实现这一点，我们需要在页眉中打开#site-container div并在页脚中关闭它.我们还需要在页脚中包含我们的侧栏.它包含#site-sidebar元素.

这是页眉和页脚文件的最终形式，用于参考:

如您所见，可以使用get_sidebar()功能拉动侧栏文件.此时，您应该看到"这是我的侧栏"，但通过添加一些样式，我们可以将侧边栏放在我们的内容旁边.

以下是我所做的修改以及代码形式的新增添加和修改:

• i修改了#site-content以将最大宽度降低到525px并添加左浮动

我添加了#site-sidebar给它一个220px宽度，22px边框，边框半径和白色背景，就像内容一样，我将它漂浮到右边

• 我添加了#site-container，使其变宽为内容和侧边栏的累积宽度，并将其居中.
• 我向页脚添加了一个明确的规则，以强制它在浮动元素下方.

最后一块拼图是告诉WordPress以显示分配给我们侧栏的所有窗口小部件.这可以使用dynamic_sidebar()功能来完成，将我们的侧栏的ID添加为第一个参数.

这是sidebar.php文件在末尾看起来像什么:

测试主题现在应该显示一个较窄的内容区域和右侧的小小部件区域，显示所选择的小部件.这是丑陋的，但没有一个小的css后来无法修复！

我们的主题侧栏.

小部件:我们学到了什么

如果这是第一次实现侧边栏，那么它可能有点压倒了，所以让我们回顾.

将侧边栏添加到WordPress中，您需要添加以下步骤:

使用register_sidebar()

寄存侧栏


• 在sidebar.php中使用dynamic_sidebar()以拉入您的小部件
• 使用get_sidebar()在适当的地方包括侧边栏
• 使用CSS对您的工作进行样式

使用菜单

菜单在他们的逻辑与小型绑定区域中类似.您首先需要注册它们，以便它们在WordPress管理员中显示，然后使用函数将它们添加到主题.

让我们首先在functions.php文件中注册一个新菜单:

此功能允许您通过向数组添加成员添加多个菜单.数组键是主题位置的名称，值是菜单本身的名称.

完成此操作后，您可以开始组装菜单.确保添加一些项目，然后将菜单分配给我们的令人敬畏的头部菜单"位置，如下图所示.

将我们的菜单放在一起.

无论您想要输出菜单，Simplu都使用wp_nav_menu()功能.我将在#site-header元素下向标题文件添加它，如:

wp_nav_menu()函数需要一堆参数，您可以使用来控制输出.但主题位置是我们对我们来说真正重要的.看看WordPress Codex中的函数文档，以获得更深入的解释.

最后，我将添加一些基本的样式来使事物半播放.原谅丑陋-它都可以用一些精心制作的CSS来照顾(尽管这不是本文的主要重点).

进一步阅读和研究

有许多要求，主题必须达到才能被认为包含在WordPress主题目录中.我们只刚刚划伤了表面，您现在应该有足够的知识开始在为您的主题添加更多功能时开始挑选.我建议安装主题检查插件，这将分析您的主题，并向您展示需要做些什么来满足WordPress主题审查团队的要求.

您应该添加的一些事情包括404页，也许是搜索结果，分页和许多其他元素的专用视图，每天网站一直在使用，如关于页面和联系页面.一旦您输入了所有要求，您可能希望使用主题自定义程序允许您的任何未来主题的用户选择自己的颜色和其他选项.

我们已经涵盖了主题发展的基础知识，还有更多的学习，但只要你练习你应该做得很好.这就是我学到的方式:逐点.

在下周检查本系列中的最终帖子，Wordpress开发为初学者开发:建筑插件.

与此同时，你应该:

• 审查上周帖子在本系列中，初学者的Wordpress开发:建立主题
• 继续刷新您的PHP -查看初学者的WordPress开发:学习PHP并查看我们最近的学习PHP，深入了解:8个资源WordPress开发人员，用于更多PHP资源
• 继续构建你的主题.你会被困住，你会受到沮丧，你会犯错误需要年龄的错误，但这完全正常.通过它-这是学习过程的一部分.