我先问你一个问题:一个访客进了你的网站,最常做的第一件事是什么?
不是看你写了什么,是找导航。他会在顶部那一排菜单里,扫一眼你网站都有哪些栏目,然后决定”要不要点进去、点哪个”。
这一排菜单,就是导航。它决定了访客对你网站的第一印象,也决定了他能不能顺利找到想要的内容。
我早期那个站,导航是真的一言难尽。顶部菜单塞了十几个栏目,每个名字还特长,挤在一起密密麻麻。访客进来看一眼,估计跟我当时的内心一样——”这都是啥?”
后来我花了个周末,把整个导航菜单从头重做了一遍。做完之后,网站跳出率降了,用户在站内的停留时间也长了。这篇文章,我就把这个过程完整写下来,手把手带你设置好自己的 WordPress 导航菜单。
第一步:先想清楚,导航里到底该放什么
别急着一头扎进后台。设置导航的第一件事,是在后台之外——想清楚你要在导航里放什么。
一个健康的导航,通常分这几类内容:
主导航(顶部那一排): 放最重要的栏目,一般是你的核心分类,或者几个关键页面。比如我的就是”首页、建站教程、SEO教程、网络安全、工具推荐、关于我”,六个,不多不少。
次导航 / 页脚导航: 放次要的、辅助性的链接,比如”关于我们、联系我、隐私政策、友情链接”这类。这些不需要挤在顶部,放页脚就挺好。
别什么都往顶部塞。 我早期犯的错:把”友链申请””留言板””某个具体文章”都塞进了顶部主导航。结果顶部菜单长得要命,重点反而被淹没了。
一个原则:主导航控制在 5 到 7 个项以内。 再多了,阅读负担重,用户也记不住。如果你有几十个分类,别全放导航,挑最重要的几个,剩下的靠分类页和文章页去组织。
第二步:在后台创建菜单并添加项目
想清楚了,就可以动手了。
WordPress 的菜单系统在:后台 → 外观 → 菜单。
如果你的主题是新版,用的可能是”自定义器”里的菜单,或者”区块编辑器的导航”,但绝大多数经典主题,还是走”外观 → 菜单”这条路。下面是通用流程。
先创建一个空菜单。 在菜单页面,找到”创建新菜单”,给它起个名字,比如”主导航”,然后点”创建菜单”。
再往菜单里加项目。 左侧有一列是”页面”、”文章”、”自定义链接”、”分类目录”这些可添加的项目。勾选你要的,点”添加到菜单”,它们就会出现在右侧的菜单结构里。
以我的站举例,我的主导航就是这么搭出来的:
| 菜单项 | 来源类型 | 对应内容 |
|---|---|---|
| 首页 | 自定义链接 | 网站首页 URL |
| 建站教程 | 分类目录 | 分类”建站教程” |
| SEO教程 | 分类目录 | 分类”SEO教程” |
| 网络安全 | 分类目录 | 分类”网络安全” |
| 工具推荐 | 分类目录 | 分类”工具推荐” |
| 关于我 | 页面 | “关于我”页面 |
这里有个小技巧:“首页”这个项,很多人用”自定义链接”填网站地址。这样最稳,不会因为改了首页设置就失效。
第三步:拖拽调整顺序,设置下拉子菜单
项目加进来之后,默认顺序是按你添加的顺序来的,通常是乱的。
调整顺序很简单——直接拖拽。 在右侧的菜单结构里,鼠标按住一个项目上下拖动,就能改变它在导航里的先后顺序。把最重要的放前面,次要的往后排。
想做下拉子菜单,也不难。 比如你想让”建站教程”这个大类下面,悬停时弹出”域名、服务器、宝塔”这些子项,就把子项目向右拖动一小段,缩进到父项目下方。它的层级会从平级变成”父子”关系。
我自己的做法是:主导航保持纯粹,不搞太多层级。因为下拉菜单在手机上体验很差,很多人根本触发不了二级菜单,藏得深的内容等于白放。如果你有子栏目,一层的下拉就够,别套两层、三层。
第四步:把菜单分配到”菜单位置”,这一步最容易被漏
这是新手最容易卡住、也是最容易被漏掉的一步。
你在”外观→菜单”里辛辛苦苦建好了菜单、排好了顺序,结果网站的顶部导航一点变化都没有。为什么?因为你没把这个菜单”分配”给它应该在的位置。
一个主题通常会定义几个”菜单位置”,比如”主菜单(顶部)”、”页脚菜单”、”社交菜单”等。你的网站顶部显示哪个菜单,取决于你把哪个菜单分配到了”主菜单”这个位置上。
操作方法: 在菜单页面底部,有一块”菜单位置”(或叫”显示位置”,有的版本在”管理位置”标签里)。勾选你想让这个菜单出现的位置——比如把”主导航”菜单勾到”主菜单”位置。保存之后,刷新网站首页,你就会看到它生效了。
我当年就卡在这:菜单建了、项目加了,折腾半天网站导航纹丝不动,还以为是主题坏了,最后才发现是没分配位置。记住,建菜单 ≠ 分配位置,两步都要做。
如果你用的主题支持”自定义器”,也可以去”外观→自定义→菜单”里,一边看实时预览一边分配位置,更直观。
第五步:设置完之后,做这几个检查
菜单设好了,别急着收工。花几分钟验证一下,能避免很多低级的尴尬。
检查一:在电脑浏览器里刷新首页,看导航顺序和内容对不对。 有没有链接打不开、有没有指向错误页面的?
检查二:在手机上看一眼。 手机上的导航通常是折叠成”汉堡菜单”(那三条杠图标)的,点开才能看到。你要确认:点开之后菜单能正常展开、项目不重叠、下拉项还能不能用。
检查三:点一遍所有链接。 每个菜单项都实际点一下,确认跳转正常。特别是”自定义链接”填的 URL,最容易填错或漏填。
检查四:确认”当前位置高亮”正常。 好的主题会在你浏览某个栏目时,自动高亮导航里对应的菜单项。这也是给访客的定位提示,让你知道”我点到了哪”。
导航菜单这东西,看着简单,但它是一个网站”信息架构”的最直观体现。放什么、怎么排序、怎么分组,背后都是”你希望访客先看什么、后看什么”的思考。
我重做完导航之后最大的感受是:网站还是那个网站,内容还是那些内容,但”好找”了,整个体验就上了一个档次。 访客进来三秒钟就能明白你是干什么的、该去哪看他想要的,这比任何花哨的设计都管用。
如果你现在的导航还跟当年的我一样乱,别拖了,跟着上面五步,一个下午就能理清楚。理完之后,你会回来谢我的。
来自 wujianzhan.com。