Wordpress插件与设计 - WP教程 16 - 一步步教你如何创建诱人的导航菜单 - 特色图片

WP教程 16 - 一步步教你如何创建诱人的导航菜单

WordPress的导航菜单是网站的重要组成部分,它通常以有序链接的形式出现在页面顶部或侧边栏。这些菜单为访问者提供了一个明确的导航路径,使他们能够迅速找到所需的页面或信息。对于任何网站而言,导航菜单的设计都至关重要,因为它直接关系到用户体验和网站的可用性。

精心设计的导航菜单具有多重优势:

  • 能够帮助用户迅速定位所需信息,提高浏览效率。
  • 通过直观的导航结构,使访问者更容易浏览和理解网站内容。
  • 现代化的专业设计能增强网站的吸引力,提升品牌形象。


在构建WordPress网站时,合理设置导航菜单不仅能提升网站的整体布局,还能通过减少跳出率、增加页面浏览量来优化搜索引擎优化(SEO)效果。因此,无论是为了提升用户体验,还是为了提高网站在搜索引擎中的排名,一个精心设计的导航菜单都是不可或缺的。

本篇教程将详细讲解如何创建和设置WordPress导航菜单。

1. 进入导航菜单设置界面的两种方式

在WordPress中设置网站导航菜单时,可以选择以下两种主要方式。

第一种方式:点击仪表盘左侧菜单中的“外观”下的“菜单”,即可进入导航菜单的设置页面。在这里,可以轻松管理网站的所有菜单,包括添加、编辑和删除菜单等操作。

第二种方式:点击“外观”下的“自定义”,即可进入实时预览模式。在这个模式下,可以在左侧面板中找到“菜单”标签,并在设置菜单的同时,实时看到菜单在网站各个位置的实际显示效果。

这两种方法各有千秋,可以根据自己的习惯,选择最适合的方式来进行即可。

2. 创建新菜单并指定显示位置

当你首次进入菜单设置页面时,如果尚未创建任何菜单,系统会贴心地提示你创建第一个菜单。

点击“创建新菜单”按钮后,首先要做的就是为这个新菜单起个名字。为了日后方便管理,建议名字能够直观体现菜单的功能或位置。(教程中命名为Header Menu)

命名完毕后,接下来需要为菜单选择一个显示位置。WordPress主题通常会提供多个预设的菜单位置,如顶部水平菜单、侧边栏菜单、移动设备菜单、页脚菜单等。

根据你的菜单预添加菜单项内容来选择适当的位置。比如菜单项中包含“主页”,“产品”,“服务”等菜单项时可设置在顶部水平菜单。完成这些设置后,只需点击“创建菜单”,即可开始添加具体的菜单项了。

需要注意的是,菜单的位置选项会根据所使用的主题的不同而有所不同。(本教程使用的是Astra主题)

3. 向创建菜单中添加项目

创建空白菜单后,接下来就可以向新创建的菜单中添加菜单项,构建网站的内容导航体系了。

要添加菜单项,可在左侧“添加菜单项”中进行选择。在添加菜单项中,你会看到多种类型的内容类型选项。 如页面,文章,自定义链接,分类目录等。

对于网站的核心内容,如“首页”和“关于我们”,建议优先将其放入主导航菜单中。

同时,你也可以添加自定义链接,以指向站外资源。选中要添加的菜单项后,菜单项会出现在菜单编辑区。你可以通过简单的上下拖动来调整菜单项的显示顺序。

要实现下拉菜单效果,只需稍微向右缩进子菜单项,并将其放在相应的父菜单项下方即可。如上面视图

当你选择自定义模式下创建菜单并且添加菜单项时,右侧的实时预览区将帮助你查看菜单的实际显示效果。这是一个非常实用的功能,它允许你在编辑过程中随时进行调整,直到你对菜单的样式和布局感到满意为止。

还有,添加菜单项时,菜单项一览中如果没有要添加的菜单项, 可点击顶部的“显示选项”,在下拉菜设置页面中,可勾选显示或隐藏菜单项的元素。 例如,如果希望添加标签菜单项的话,只需在设置页面中的界面元素一览里勾选“标签”,就可以在“添加菜单项”中看到标签类型菜单项。

4. 菜单项目的编辑和移除

当我们在菜单编辑区进行操作时,每一个菜单项都可以单独进行编辑。

将鼠标移动到任意一个想要编辑的菜单项,并点击该菜单项右侧的下拉三角按钮,就会下拉出一个小型的设置面板。通过该设置面板,我们可以自由的修改菜单项在前端页面中显示的链接文字,移除菜单项或取消变更。

需要注意的是,无论你选择何种方式来设置导航菜单,最后都要记住保存你编辑过的导航菜单。

5.根据设备添加专用菜单

在如今的多屏时代,用户越来越多地通过移动设备浏览网站。因此,为小屏设备提供优化的导航菜单变得尤为重要。值得庆幸的是,绝大多数主题已经为此提供了多媒体自动切换显示。

在菜单设置界面,通常可以找到一个名为“Off-canvas”的选项。只需将您的菜单指定显示在这个位置,就能为移动端用户提供最佳的菜单体验。(根据使用的主题不同,名称有不同)

此外,一些主题还支持社交媒体类菜单。(Astra没有提供此类菜单功能)

这是一种特殊的导航方式。这种菜单的项通常以社交网站图标的形式显示在网页页脚,使用户能够快速访问您的社交主页。

如果你的主题支持社交媒体位置显示的话,其设置方法也比较简单。只需创建一个专门面向社交媒体的导航菜单即可。

创建导航菜单时,每一个菜单项都要用自定义链接创建,并将链接地址设置为该社交网站主页的URL,然后将菜单设置中(如果有该选项的话)选择社交菜单位置即可。

6. 要点总结

创建和管理导航菜单是构建成功WordPress网站的关键步骤之一。此过程要求我们明确网站的定位,优化菜单结构,保证菜单项清晰易懂,并定期检查菜单的有效性。

在创建和设置菜单时,有以下几点建议:

  • 将最重要的内容放在显眼的位置
  • 使菜单项的文字表述简洁明了,避免过长
  • 控制菜单层级在3级以内
  • 定期检查菜单链接的有效性,避免出现断链
  • 适度使用分隔符、下拉菜单等功能,使菜单结构更清晰、有层次

WordPress的导航菜单功能为我们提供了强大的可定制性。通过不断实践和总结经验,相信你也可以设计出既美观又实用的网站菜单,为用户带来更加流畅、愉悦的浏览体验。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

相关 文章
Wordpress插件与设计 - Elementor 基础教程 10 - 图标小工具的设置使用方法 - 特色图片
Elementor 基础教程 10 - 图标小工具的设置使用方法
Wordpress插件与设计 - Elementor 基础教程 13 - 星级小工具的设置和使用方法 - 特色图片
Elementor 基础教程 13 - 星级小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 4 - 图像小工具的设置和使用方法 - 特色图片
Elementor 基础教程 4 - 图像小工具的设置和使用方法
Wordpress插件与设计 - WP教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家 - 特色图片
WP教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家
Wordpress插件与设计 - WP教程 11 - 想让文章更出彩?特色图片是关键! - 特色图片
WP教程 11 - 想让文章更出彩?特色图片是关键!
Wordpress插件与设计 - Elementor 专业教程 2 - Post小工具的设置和使用方法 样式标签篇 - 特色图片
Elementor 专业教程 2 - Post小工具的设置和使用方法 样式标签篇
Wordpress插件与设计 - WP教程 3 - 一文解析WordPress帖子与页面,轻松掌控网站展示方式 - 特色图片
WP教程 3 - 一文解析WordPress帖子与页面,轻松掌控网站展示方式
Wordpress插件与设计 - Elementor 基础教程 24 - 警告小工具的设置和使用方法 - 特色图片
Elementor 基础教程 24 - 警告小工具的设置和使用方法
Wordpress插件与设计 - WP教程 20 - 三分钟搞定!快速学会WordPress主题更换与自定义 - 特色图片
WP教程 20 - 三分钟搞定!快速学会WordPress主题更换与自定义
Wordpress插件与设计 - Elementor 专业教程 10 - HotsPost小工具的设置和使用方法 - 特色图片
Elementor 专业教程 10 - HotsPost小工具的设置和使用方法
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - PR-image.webp

Elementor

建站必备插件推荐
Elementor是一款WordPress平台上的可视化页面构建器插件,无需编程即可设计网页

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Astra Theme

建站主题推荐
Astra Theme是一个快速、轻量级且高度可定制的WordPress主题,适合各种网站

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Crocoblock

建站功能插件推荐
Crocoblock是一系列高功能的Elementor附加插件,用于创建动态内容和专业级网站

访问官网
副业时代 站内使用 elementor 免费教程 横板图像 - image-2.webp

Elementor Free Widget

Elementor 免费版小工具
是设计网页时所需的基础类工具。
大约包含30多个小工具

访问课程页
副业时代 站内使用 elementor 专业教程 横板图像 - image-2.webp

Elementor Pro Widget

Elementor 专业版小工具
是面向专业熟练用户的高级设计套件。
大约包含30多个小工具

访问课程页
已阅读 文章
您还没有阅读任何文章
AI Tools Post
AI工具与服务推荐 - 搭画快写 - AI智能写作平台 - 特色图片
搭画快写 - ChatGPT驱动的智能写作平台,提供内容全流程解决方案
AI工具与服务推荐 - Upscale.media - 在线AI图像增强工具 - 特色图片
Upscale.media - AI释放照片潜力,创造奇迹
AI工具与服务推荐 - Peppertype.ai - AI内容创作服务 - 特色图片
Peppertype.ai - AI驱动内容创作,支持多语言,提升营销效果,实现内容创作新突破
AI工具与服务推荐 - Glarity - AI浏览器扩展 - 特色图片
Glarity - AI浏览器助手,聊天摘要、问答、翻译等功能样样精通
AI工具与服务推荐 - Otter - 智能英语语音转文字应用 - 特色图片
Otter - AI语音转文字助手,高效记录,助力语言学习
AI工具与服务推荐 - Chat D-ID - AI虚拟人物对话平台 - 特色图片
MyHeritage - 创新AI聊天技术,让虚拟人物栩栩如生,交流自然流畅
Canva Post
Canva使用教程 - Canva 新手指南 7 - 掌握Canva Mockup功能!轻松打造完美合成图像 - 特色图片
Canva新手指南7 - 掌握Canva Mockup功能!轻松打造完美合成图像
Canva使用教程 - Canva 新手指南 1 - 全面解析Canva文本框的基本功能! - 特色图片
Canva新手指南1 - 全面解析Canva文本框的基本功能!
Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片
Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品
Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片
Canva新手指南4 – 告别平庸!用Canva打造与众不同PPT演示文稿
Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片
Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘!
Smm Post
社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片
新手必看!解锁YouTube视频广告投放优化技巧,提升转化率
社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片
YouTube运营全攻略:从零到一打造你的油管频道
社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片
一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地!
社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片
一文读懂YouTube Premium会员权益!让你不再犹豫
社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片
YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里!
社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片
缩略图设计终极指南,打造吸睛的视频门面!
AI工具 分类筛选
AI Main Category checkbox