如何使用免费的WordPress插件创建大型菜单

为什么要使用超级菜单?

网站导航是网站开发过程中需要解决的重要方面之一。 根据您网站的类型,有很多不同的选项供您选择。 导航可能从简单的流线型菜单到多列下拉菜单,菜单本身可能包含很多信息。 今天,我们将讨论一种这样的菜单类型,它是当今非常流行的选项:大型菜单。 我们将在WordPress中讨论它。

作为站点所有者或经验丰富的WordPress开发人员,您已经知道WordPress为几乎每个人可能想到的功能都提供了许多插件,并且很难选择要使用的插件。 在创建导航菜单时,您会在WordPress插件目录中找到很多插件。 其中,我选择了这一类别中最好的之一: WP Mega Menu 。

WP Mega Menu插件使您可以创建丰富的导航菜单,其中可以包含从简单链接到图像,视频和小部件的所有内容。 在本教程的整个过程中,我们将介绍该插件的各个方面。

在本文中,我使用了WordPress 5.1。 要安装WP Mega Menu插件,您需要遵循WordPress中的标准插件安装过程 。

在接下来的部分中,我们将探讨WP Mega Menu插件的基本设置以及设置过程。 我们将为演示目的构建一个真实示例。 同时,我们还将介绍该插件的一些重要设置,使您可以创建不同类型的菜单。

什么是WP Mega Menu插件?

免费的WP Mega Menu插件可让您在WordPress网站中创建内容丰富的导航菜单。 这是一个非常易于使用的插件,它在后端提供了拖放界面,可以快速创建导航菜单。

此外,它提供了许多自定义选项来以不同的方式设置菜单样式,因此,您可以从后端本身自定义菜单的外观。 不,您不需要成为CSS专家!

让我们快速看一下它提供的功能:

  • 拖放菜单构建器面板
  • 小部件支持
  • 支持不同的主题和皮肤
  • 响应式且支持移动设备的菜单支持
  • 支持社交图标,Dashicons和Font Awesome
  • 主题导出和导入
  • 和更多

如您所见,WP Mega Menu插件提供了许多有用的功能,您可以使用这些功能在WordPress网站上构建漂亮且有吸引力的多列导航菜单。 借助内置的小部件支持,它可以让您在下拉菜单本身中包含您可能想到的任何内容。 如果您要构建门户网站并希望构建内容丰富的下拉导航菜单,那么这是一个必备插件!

在下一节中,我们将讨论此插件的一些基本设置,这些基本设置对于理解是否要有效使用此插件很重要。

探索插件设置

安装WP Mega Menu插件后,您应该在左侧栏中看到与插件相关的链接。 在本节中,我们将简要介绍每个部分。

全局设置

在本部分中,您可以配置适用于使用此插件创建的所有菜单的全局设置。 在不同的设置中,它允许您配置某些JavaScript行为和全局CSS设置。

菜单主题

本部分允许您配置特定于主题的设置。 默认主题是内置的,您已经可以使用它了,因为它已经带有有用的设置。 除此之外,您可以创建自己的主题或复制现有主题。 如果要创建多个主题,可以将不同的样式应用于网站上的不同菜单。

通过每个新主题,您可以控制菜单的不同方面,例如背景颜色,字体设置,间距,菜单效果等。 实际上,这是配置菜单时最常使用的部分。

此外,您还可以导出在您的站点中创建的主题,并将其导入到其他站点。 这真的很有用,因为这意味着如果您要从其他站点复制主题,则不必再次创建主题。

在下一节中,我们将构建一个真实的大型菜单示例。

为您的WordPress网站构建大型菜单

在本节中,我们将构建一个真实示例,以演示如何使用此插件在WordPress网站上创建大型菜单。 在我们的示例中,我们将创建一个三列的下拉超级菜单,每列将包含不同类型的内容。

在继续之前,如果您想继续,请确保已在WordPress站点中安装了此插件。

创建菜单和菜单项

首先,我们必须创建一个常规菜单并向其中添加菜单项。 只有在那之后,我们才能继续设置大型菜单。 访问管理侧边栏中的外观>菜单链接以创建新菜单。 按照标准过程创建一个新菜单,并向该菜单添加几个项目。

就我而言,我将其命名为Demo Mega Menu 我还添加了几个自定义链接,如以下屏幕截图所示。 同样,重要的是必须将这个新创建的菜单分配给显示菜单的显示位置 让我们在“ 显示位置”字段中选择“ 顶部菜单 ”。 它应该看起来像这样。

如何使用免费的WordPress插件创建大型菜单_第1张图片

重要的是要注意,如上面的屏幕截图所示,左侧已经有一个Mega Menu Settings块。 您可以在此面板中选择要使用的主题,然后单击“ 保存”按钮将其保存。 在我的案例中,我选择了经典的蓝色主题。

配置菜单链接

现在,该配置菜单链接的大型菜单设置了。 在本例中,我们将为“ 主页”链接创建一个大型菜单,但是,当然,您可以继续并重复相同的过程为其余链接创建大型菜单。

如果将鼠标悬停在“ 主页”链接上,则应该能够看到WP Mega Menu链接,如以下屏幕截图所示。

如何使用免费的WordPress插件创建大型菜单_第2张图片

单击该链接,它将打开一个弹出窗口,可让您配置“ 主页”链接的大型菜单设置。

如何使用免费的WordPress插件创建大型菜单_第3张图片

启用超级菜单选项,这将为您提供许多配置选项。 当您单击“ 添加行”按钮时,它使您可以选择用于构建大型菜单的布局,如以下屏幕截图所示。

如何使用免费的WordPress插件创建大型菜单_第4张图片

就我而言,我选择了三列布局,如上面的屏幕截图所示。 这将为您提供以下UI,我们将使用它来添加不同类型的内容。

如何使用免费的WordPress插件创建大型菜单_第5张图片

在左侧,您可以看到有一个小部件部分,其中列出了可供您使用的不同类型的小部件。 您可以将要使用的小部件拖放到我们创建的列中。

我在大型菜单中使用了三个小部件( 类别存档文本)

如何使用免费的WordPress插件创建大型菜单_第6张图片

当然,您可以根据需要选择不同的小部件。 选择小部件之后,根据需要配置每个小部件,并在完成设置后保存所有内容。

现在,让我们访问前端以查看外观。

如何使用免费的WordPress插件创建大型菜单_第7张图片

如您所见,WP Mega Menu插件已将一个简单菜单转换为一个下拉的Mega菜单。 它显示了我们从后端配置的所有内容。

这样,您可以为菜单的每个菜单链接启用超级菜单设置。 有了小部件支持,您几乎可以在下拉菜单本身中显示任何类型的内容。 继续尝试不同的选择,如果您有任何疑问,请告诉我。

这样便可以使用此免费插件为您的网站创建精美的大型菜单。

下一步:更高级的Mega菜单

我们今天讨论的是WP Mega Menu的免费版本。 尽管我同意免费版本已经提供了许多有用的功能,但是如果您真的喜欢到目前为止所看到的内容,我建议您查看其付费版本: WP Mega Menu Pro 。 它带有许多内置的专业主题,可让您立即进入。 花一小笔费用,确实值得一试。

结论

今天,我们讨论了如何使用WordPress中的WP Mega Menu插件创建惊人的大型菜单。 如果您想分享您在网站上使用过的其他菜单插件的经验,我希望能收到您的来信。

欢迎使用下面的供稿来分享您的想法和反馈!

翻译自: https://code.tutsplus.com/tutorials/how-to-create-a-mega-menu-with-a-free-wordpress-plugin--cms-33273

你可能感兴趣的:(如何使用免费的WordPress插件创建大型菜单)