如何在WordPress中创建多级/分层菜单

2024-07-11 10:25| 来源: 网络整理| 查看: 265

在WordPress中，您可以通过WordPress菜单系统（WordPress admin-> Appearance-> Menu）和主题定制器（WordPress admin-> Appearance-> Customize）创建一个多级/分层菜单。

在本文档中，我们将研究创建多级/分层菜单的步骤。我们将首先查看WordPress菜单系统。

WordPress菜单系统

您可以通过登录WordPress仪表板访问WordPress菜单系统，然后导航至Appearance-> Menu。

设置屏幕选项

在屏幕右上角，您可以找到屏幕选项标签。

单击它以下拉并显示所有可用的类型和属性。选中除“描述”复选框外的所有可用复选框。 Customizr和Customizr Pro主题，不支持菜单描述。因此，您应保持未选中“描述”复选框。

file-A8oGS7vnlZ

创建菜单单击创建新菜单链接。输入新的菜单名称。在本文档中，我们将其命名为Sample Menu。单击创建菜单按钮。

file-pnpCUjMefi

分配菜单位置

接下来，我们需要将菜单分配给它的位置。

通过选中复选框将样本菜单分配给主菜单（主题位置）。单击保存菜单按钮。

file-wTBcHi1XgV

可用菜单项的类型

在Customizr和Customizr Pro主题中，有6种类型的菜单项可用。

页面-它们是您创建的页面。帖子-它们是您创建的博客帖子。自定义链接-您可以使用它创建一个链接到任何URL的菜单项。类别-它们是您可用的类别。标签-它们是您可用的标签。格式-它们是您可用的帖子格式。

file-knhr3LHGAp

创建菜单项（父菜单项）在此示例中，我们将为菜单分配一个名为“示例页面”的页面作为父菜单项。选中“样本页面”复选框，然后单击“添加到菜单”按钮。 file-3IsvzZkL3i

您将看到它作为菜单项自动添加到右侧面板。 file-BWnOr5NMTk

注意：这是可选的。通常，您不需要使用这些步骤。您可以通过单击右侧的小下拉箭头来编辑“样本页面”菜单项的属性。它将展开并显示一些文本输入。您可以输入标题属性，当您将鼠标指针移到菜单项上并停留在此位置时，该属性仅在前端可见。在新窗口/选项卡复选框中打开链接。如果要在新标签页或窗口中打开页面，则可以选中此复选框。您可以输入CSS类以使用自定义CSS启用此菜单项的特殊样式。链接关系（XFN）用于将rel属性添加到菜单链接。您可以参考本文档（使用XFN定义关系）以获取有关使用XFN的更多信息。

file-brFk0eSTch

单击保存菜单按钮以保存所有编辑。重复步骤1到3，将页面，帖子…等分配给菜单作为父菜单项。重要笔记：菜单要尽量简短。从个人经验上讲-尝试保存很大的菜单时，有时菜单项会丢失。发生这种情况是因为您发布的数据太多，服务器无法处理。简短而有条理的菜单可在移动设备上轻松访问。长菜单很难在移动设备中访问，因为它需要滚动并且不友好。通常，我们仅将页面分配给菜单，因为除非将页面标记到菜单上，否则无法访问它们。我们不将帖子分配给菜单，因为可以通过“主页”或“帖子”页面进行访问。到目前为止，您应该有一些父菜单项。 file-RUxqRMrDC6

创建子菜单项

现在我们可以继续创建子菜单项。查看上一个屏幕截图，您可以看到有一个名为Level 1的页面。我们将向其中添加一些子菜单项。

选择要用作子菜单项的页面并将其添加到菜单区域。在此示例中，我们将添加2a，2b级和3a，3b级页面。选中其复选框，然后单击添加到菜单按钮。

file-Zr3z70oN0O

您会看到它们已添加到右侧的菜单结构中。 file-NSktDzPr1t

WordPress菜单系统支持拖放。因此，您可以单击并按住菜单项，将其拖动到新位置，然后松开鼠标按钮以将其放到适当的位置。您可以开始将子级别页面拖到其位置。拖动2a级并将其放在1级下方并稍微向右移动，这将表明它是1级的子菜单项。将级别2b拖到级别2a的正下方，这将表明它是级别1的子菜单项，但与级别2a处于同一级别。现在，我们可以通过拖动级别3a并将其放置在级别2b下并稍微向右移动来创建第三个级别，这将表明它是级别2b的子菜单项。将3b拖动到3a的正下方，这将表明它是2b的子菜单项，但与3a处于同一级别。请看以下屏幕截图以更好地理解。

file-ji6QdzEOKY