如何使用 SlickNav 为移动用户优化 WordPress 菜单

菜单是一种导航工具,可帮助访问者及时找到所需内容。 虽然现在大多数网站都是自然响应的,但有时您可能需要更进一步来帮助移动用户。 SlickNav 插件非常适合这项工作。

有了它,您可以在几分钟内构建高度可定制的移动友好菜单。 这些不仅有助于确保您的网站易于浏览,而且还有助于它看起来不错。 甚至可以选择将您的徽标添加到菜单中以改善品牌形象。

今天,我将演示如何在 WordPress 中创建时尚的 SlickNav 菜单。

为什么移动导航菜单很重要

截至 2021 年 5 月,移动流量占 55.31% 的互联网流量 并且每年都在继续增长。 因此,确保您的网站为移动访问者做好准备至关重要。

移动用户在网站上面临的最大问题之一是菜单。 让我们面对现实吧,有时它们的尺寸不适合移动设备,这使得浏览网站变得困难。 为移动用户定制菜单是改善体验的好方法。

而且由于几乎所有用户都与菜单进行交互,因此这是一个很好的营销领域。

新网站开发人员犯的最大错误之一就是没有为他们的内容打上品牌。 品牌的力量在于大公司如何保持主导地位,将您的标志添加到菜单中是一种方法。 它有助于建立品牌认知度,并可以一举展示您的创意一面。

自定义菜单是实现移动友好型 WordPress 网站的第一步。

如何使用 SlickNav 自定义 WordPress 菜单

第 1 步:安装 SlickNav

SlickNav 移动菜单 插件是一个非常简单的 WordPress 菜单自定义工具。 有了它,您可以完全自定义菜单的外观、创建子菜单,甚至添加搜索字段。 最重要的是,它易于使用。

在短短几分钟内,您将拥有一个功能齐全的 WordPress 菜单,可以给访问者留下深刻印象。

让我们首先单击插件并选择左侧管理面板上的添加新选项。

添新

在可用的搜索框中搜索 SlickNav 移动菜单。 这将提取您可能会发现有用的其他插件。

SlickNav 移动菜单

向下滚动直到找到 SlickNav 移动菜单插件,然后单击“立即安装”按钮并激活插件以供使用。

现在安装

第 2 步:找到菜单 CSS 类或菜单 ID

在开始实际的自定义过程之前,您需要一条特定的信息来告诉 SlickNav 您要编辑哪个菜单。 该插件允许您使用菜单 CSS 类或菜单 ID。

最容易获得的是菜单 ID,我现在将对其进行概述。

单击外观并选择菜单选项。

菜单

在顶部,使用下拉菜单选择要编辑的菜单。 单击“选择”按钮。

选择

查看页面上的 URL,最后一个数字是菜单 ID。 复制它以进行下一步。

菜单编号

如果要编辑多个菜单,请重复此过程以获取必要的菜单 ID。

在继续之前,重要的是要了解插件自定义页面只会更改菜单的外观。 要实际添加新项目,您需要使用 WordPress 的菜单区域。

第 3 步:自定义菜单

准备好菜单 ID 后,您现在可以开始自定义。 该过程非常简单,但不幸的是,该插件缺少预览选项。 因此,实际查看它的唯一方法是在单击“更新”按钮之后。

唯一的问题是它将在您的实时网站上,因此不建议一次更改一个。 相反,我建议通过设置然后查看成品的外观。 之后,您可以返回并进行编辑。

如果您的网站很忙,我建议您在非工作时间这样做。

首先,单击设置并选择 SlickNav 菜单选项。

SlickNav 菜单

首先,将菜单 ID 粘贴到第一个文本框中。 如果您有多个菜单,可以用逗号分隔它们,但请记住它们看起来都一样。 不过,这是使您的网站上的所有内容保持一致的好方法。

粘贴 ID

设置列表非常全面,因此我将介绍主要功能。 也就是说,我强烈建议您根据需要编辑每个设置以获得最佳结果。

使用图片徽标选项上传您网站徽标的图片。 该插件建议图像深度为 45 像素,宽度最大为 200 像素。

在此下方,您将找到徽标替代文本的选项,因此请务必填写。

菜单标志

您可以使用“搜索标签名称”选项自定义搜索字段的内容。

搜索字段

选择要使用的动画库。 jquery 或速度。 如果您不熟悉这些,jquery 非常常见,并且几乎可以在每个站点上完美运行。 Velocity 使用相同的 jquery API,但速度要快得多。

动画库

完成所有设置并完全满意后,单击“更新”按钮。

更新

这些更改现在将应用于您网站上的菜单,您现在可以查看这些菜单。 如果对外观不满意,可以返回设置页面进行调整。

恭喜您使用 SlickNav 制作适合移动设备的菜单。

使您的整个网站对移动设备友好

在 WordPress 中创建移动导航菜单只是运行适合移动设备的网站的一个方面。

例如,你有没有想过一些按钮有多靠近? 可能不是,但你应该。 对于手指较大的移动用户来说,这可能是一场噩梦。

最终结果是他们不小心点击了错误的按钮,这是让他们离开的可靠方法。

即使您的按钮是响应式的,但将它们靠得很近也无法达到目的。

要考虑的另一件事是您的侧边栏是否应该在移动设备上可见。 屏幕很小,因此,强迫访问者有一个侧边栏会占用屏幕空间。 它甚至会导致一些看起来很尴尬的页面和帖子。

底线是仅仅依靠响应式设计是不够的。 您必须考虑一些较小的细节以及它们如何融入整体移动体验。

帮助访客找到您的内容

让访问者访问您的帖子和页面已经够难的了。 充分利用这些访问将成功的网站与失败的网站区分开来。

菜单在第一印象中起着重要作用。

客户希望在几秒钟内找到他们正在寻找的东西,这就是导航菜单的设计目的。 因此,他们需要成为创建易于导航的网站的优先事项。 这是新网站最大的问题之一,许多开发人员经常忘记移动用户。

使用响应式工具很棒,但有时它们还不够。 相反,您需要手动编辑和自定义某些元素以获得最佳体验。

您认为默认的 WordPress 导航菜单在移动设备上看起来不错吗? 您是否发现自定义选项易于使用?

  如何在 WordPress 中为站点通知添加 Hashbar

类似文章