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

已发表: 2022-04-15

您是否希望在 WordPress 中创建可折叠的侧边栏导航? 本教程将向您展示如何使用免费插件在 WordPress 中创建可折叠菜单。

您的网站访问者将欣赏可折叠导航的易用性。 它不会在您的侧边栏中占用太多空间。 这非常适合电子商务网站、大型网站和任何其他具有复杂布局的网站。

本文将演示如何创建折叠的 WordPress 侧边栏菜单。

好友 X

目录

什么是可折叠侧边栏菜单? 什么时候应该使用一个?

大多数菜单都易于使用,让用户可以快速访问所有必要的链接。 具有许多页面或复杂布局的站点可能会发现很难做到这一点。

想象一个包含许多产品类别和子类别的大型电子商务网站。

在单个菜单上显示每个产品并不是一个好主意。 买家可能需要滚动浏览多个菜单才能找到他们正在寻找的产品。

这些就是折叠餐的优点。 这些菜单根据父子关系排列它们的内容。 单击折叠菜单中的父项将打开它以显示该父项的所有子内容。

另请阅读:专业大学WordPress主题创建在线教育平台

对于它的移动网站,卫报新闻媒体使用了一个简化的菜单。 可展开菜单是可折叠菜单,因为它们的部分会随着访问者点击而展开。

默认情况下,可折叠菜单对访问者隐藏复杂的内容和信息。 这比滚动一长串子类别和类别更容易。

现在让我们看看如何在您的 WordPress 网站上创建折叠侧边栏。

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

使用 Bellows Accordion Menu 插件,您可以在 WordPress 中创建侧边栏菜单。 Bellows Accordion 菜单提供了一个简码,可将您的折叠列表放置在任何页面、帖子或小部件区域。 这包括您的侧边栏。

1. WordPress 中的可折叠侧边栏菜单

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

首先,安装插件,然后激活它。 如需帮助,请参阅我们的 WordPress 插件安装指南。

激活后,从您的WordPress 仪表板导航到外观 >> 菜单页面

2. 在 WordPress 仪表板中创建菜单

在 WordPress 仪表板中创建菜单。

“菜单名称将页面添加到您的 WordPress 菜单”字段中,输入菜单的名称。 该名称将不会对网站访问者可见,因为它仅供您参考。 然后,您可以单击“创建菜单”按钮。

接下来,选择要添加到可折叠导航的页面。 默认情况下,WordPress 仅显示您最近的页面。 单击查看全部选项卡以查看您网站上的完整页面列表。

3. 将页面添加到您的 WordPress 菜单

将页面添加到您的 WordPress 菜单。

您也可以单击全选。 这会将所有页面转换为可折叠列表。

对您的选择感到满意后,单击“添加到菜单”按钮。 您还可以选择帖子或博客类别并添加自定义链接。 您可以在我们的向 WordPress 添加导航菜单的指南中找到更多信息。

拖放是在将网页全部添加到菜单后移动网页的好方法。 这将改变这些页面在折叠菜单上的显示顺序。

折叠菜单专注于父子关系。 单击可折叠菜单中的父项将显示所有子内容。

另请阅读:如何使本地企业从社交影响者营销中受益?

只需拖放即可建立此连接。

接下来,把每个孩子抱在怀里,轻轻地把他们拉到右边。 这将允许您释放页面。 这将插入该项目并使其成为子页面。

4. 将帖子添加到 WordPress 菜单

将帖子添加到 WordPress 菜单。

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

我们现在要添加可折叠的侧边栏菜单。 我们将使用 Bellows Accordion 自动创建的简码来完成此操作。

转到外观>>菜单以获取简码。 如果未选择“显示全部”选项卡,请确保已选中。

单击简码框以突出显示所有代码。 通过按 Command + c 或 Ctrl+ c 键盘快捷键复制此代码。

接下来,将短代码粘贴到小部件中。 转到外观>>小部件。 这将显示当前主题中的所有小部件区域。 尽管选项可能不同,但大多数 WordPress 主题都包含侧边栏。

5.配置可折叠侧边栏菜单

配置可折叠的侧边栏菜单。

单击侧边栏将其展开。 这将扩展该部分。

单击 + 图标以添加块。 开始输入简码。 出现时选择简码块。

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

如何将小部件添加到 WordPress 侧边栏。 将您的最小化菜单的简码粘贴到此块中。 单击屏幕顶部的更新按钮以发布您的菜单。

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

可以使用 Bellows Accordion 插件自定义此默认菜单。 为了更好地反映您的品牌,您可以修改网站上的配色方案。

另请阅读:大学生的 10 大博客技巧

您可以通过转到 WordPress 仪表板中的外观 >> 波纹管菜单来更改默认菜单。

此菜单包含个性化折叠餐点所需的所有设置。 您可以探索许多设置。 您可能会发现从访问 Main Configuration >> Basis Configuration开始会很有帮助。

7. 配置 WordPress 可折叠侧边栏菜单的外观

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

您可以从多种菜单颜色中进行选择。 您还可以决定是否可以使用手风琴折叠设置同时展开多个子菜单。

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

8. 在 WordPress 网站上放置可折叠菜单

您可以通过在 WordPress Customizer 中编辑可折叠的侧边栏导航来立即预览您的更改。 为此,请转到外观>>自定义

在左侧菜单中选择波纹管。

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

结论

斑纹

您会发现许多用于设置可折叠侧边栏的选项。 您可以调整其宽度、对齐方式或颜色。 我们希望您发现这篇文章有助于在 WordPress 中创建一个简单的侧边栏菜单。


有趣的阅​​读:

必须知道基本和成功的博客技巧

什么是支柱页面? 和使用主题的 SEO 策略的好处

前 6 名 WordPress 速度优化服务