首页 » 博文 » wpbeginner » 最佳插件 » 如何在 WordPress 中创建可折叠侧边栏菜单(简单方法)

如何在 WordPress 中创建可折叠侧边栏菜单(简单方法)

您想在 WordPress 中创建可折叠的侧边栏菜单吗?

可折叠的菜单可以让您的网站访问者轻松访问大量链接,而不会弄乱侧边栏。它非常适合大型网站、电子商务商店或任何具有更复杂布局的网站。 

在本文中,我们将向您展示如何在 WordPress 中轻松创建可折叠侧边栏菜单。

如何在 WordPress 中创建可折叠侧边栏菜单(简单方法)

什么是可折叠侧边栏菜单?(以及何时使用)

用户友好的菜单可以轻松访问访问者所需的所有链接。然而,对于具有大量页面或更复杂布局的 WordPress 网站来说,这可能会很棘手。

想象一下拥有大量产品类别和子类别的 大型电子商务商店,例如亚马逊。

在标准菜单中显示每个产品类别并不是一个好主意。购物者可能需要滚动菜单才能找到他们感兴趣的类别。 

这就是可折叠菜单的用武之地。这些菜单以父子关系组织其内容。如果访问者单击可折叠菜单中的父项,它将展开以显示该父项的所有子内容。 

卫报新闻媒体在其移动网站上使用可折叠菜单。

可折叠菜单的示例。

可折叠侧边栏菜单有时也称为可展开菜单。这是因为当访问者点击它们时,它们的不同部分会展开。 

默认情况下,可折叠菜单向访问者隐藏了大量内容和复杂性。这比在WordPress 博客上滚动浏览一长串类别和子类别要方便得多。

也就是说,让我们看看如何在 WordPress 网站上轻松创建可折叠侧边栏菜单。

视频教程

https://www.youtube.com/embed/9gKWdm30GQc?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent订阅 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您更喜欢书面说明,请继续阅读。

如何在 WordPress 中创建可折叠侧边栏菜单

您可以使用 Bellows Accordion Menu 插件在 WordPress 中创建可折叠侧边栏菜单。

Bellows Accordion Menu 提供了一个方便的短代码,可将可折叠菜单放置在任何页面、帖子或小部件区域(包括侧边栏)上。

WordPress 中的可折叠侧边栏菜单。

首先,您需要安装并激活Bellows Accordion Menu插件。如果您需要帮助,请参阅我们关于如何安装 WordPress 插件的初学者指南。 

激活后,访问WordPress 仪表板中的 外观 » 菜单页面。

在 WordPress 仪表板中创建菜单。

首先,在“菜单名称”字段中输入菜单名称。您的网站访问者不会看到该名称,因为它仅供您自己参考。

然后您可以单击“创建菜单”按钮。 

接下来,选择要添加到可折叠侧边栏菜单的页面。默认情况下,WordPress 仅显示您最近的页面。

如果您想查看网站所有页面的列表,请单击“查看全部”选项卡。 

将页面添加到 WordPress 菜单。

或者,您可以单击“全选”。这会将所有页面添加到可折叠菜单中。

一旦您对选择感到满意,请单击“添加到菜单”按钮。您还可以选择帖子、博客类别或添加自定义链接。有关更多详细信息,请参阅我们有关如何在 WordPress 中添加导航菜单的指南。

将所有不同的网页添加到菜单后,您可以通过拖放来移动它们。这将更改这些页面在可折叠菜单中的显示顺序。 

可折叠菜单都是关于父子关系的。

当访问者单击可折叠菜单中的父项时,它将展开以显示所有子内容。

要创建这种关系,只需使用拖放功能将所有子页面排列在其父页面下方即可。

接下来,抓住每个孩子并将其稍微向右拖动。然后您就可以释放该页面。这将缩进该项目并将其变成子页面。 

将帖子添加到 WordPress 菜单。

完成后,不要忘记单击“保存更改”按钮。

现在我们想将这个可折叠菜单添加到 WordPress 侧边栏。为此,我们将使用 Bellows Accordion 自动创建的一些短代码。 

要获取短代码,请从 WordPress 仪表板转到外观 » 波纹管菜单页面。如果尚未选择,请确保选择“显示全部”选项卡。

WordPress 仪表板中的可折叠菜单简码。

现在,您可以单击“简码”框,该框应突出显示所有代码。现在,使用 Command + c 或 Ctrl + c 键盘快捷键复制此代码。 

下一步是将此短代码粘贴到小部件中,因此从管理区域转到“外观”»“小部件”页面。

这将显示当前主题内的所有小部件区域。您看到的选项可能会有所不同,但大多数现代 WordPress 主题都具有侧边栏。

配置可折叠侧边栏菜单。

找到侧边栏区域后,单击它。现在将扩展此部分。

要添加块,请单击 + 图标并开始输入简码。当它出现时,选择简码块。 

如何将小部件添加到 WordPress 侧边栏。

现在,只需将可折叠菜单短代码粘贴到此块中即可。要发布菜单,您需要单击屏幕顶部的“更新”按钮。 

现在,当您访问网站时,您应该会看到一个新的可折叠侧边栏菜单。 

工作可折叠菜单的示例

Bellows Accordion 插件还使自定义此默认菜单变得非常容易。例如,您可以更改其配色方案以更好地反映您网站的品牌。 

如果您想调整默认菜单,只需转到WordPress 仪表板中的 外观 » 波纹管 菜单页面即可。

此菜单包含自定义可折叠菜单所需的所有设置。有很多设置可供探索。但是,您可能需要首先转到主配置»基本配置

配置 WordPress 可折叠侧边栏菜单的外观和风格。

在这里,您可以在几种不同的菜单颜色之间切换。您还可以选择访问者是否可以使用手风琴折叠设置一次展开多个子菜单。 

要更改菜单的对齐方式和宽度,请单击“布局和位置”选项卡。

将可折叠菜单放置在 WordPress 网站上。

如果您希望实时预览更改,则可以在 WordPress 定制器中编辑可折叠侧边栏菜单。

为此,请从管理区域转到外观»自定义页面,然后从左栏中选择“波纹管”选项卡。

在 WordPress 定制器中配置可折叠菜单。

在这里,您会发现侧边栏有许多不同的设置。其中包括更改可折叠侧边栏菜单的宽度、对齐方式和颜色。 

我们希望本文能帮助您了解如何在 WordPress 中创建可折叠的侧边栏菜单。您还可以阅读我们的指南,了解如何跟踪网站访问者以及增加流量的 最佳推送通知软件。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top