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 专业教程 24 - Facebook Embed小工具的设置和使用方法 - 特色图片
Elementor 专业教程 24 - Facebook Embed小工具...
Wordpress插件与设计 - WP教程 23 - 使用媒体区块,创建出色的多媒体页面!以提高网站的互动性 - 特色图片
WP教程 23 - 使用媒体区块,创建出色的多媒体页...
Wordpress插件与设计 - WP教程 32 - 一文搞定WP设置功能!让设置不再是你的难题 - 特色图片
WP教程 32 - 一文搞定WP设置功能!让设置不再是...
Wordpress插件与设计 - WP教程 28 - 如何有效使用WP评论功能,提高博客的互动性! - 特色图片
WP教程 28 - 如何有效使用WP评论功能,提高博客...
Wordpress插件与设计 - Elementor 专业教程 33 - Query的设置和使用方法 - 特色图片
Elementor 专业教程 33 - Query的设置和使用方...
Wordpress插件与设计 - WP教程 2 - 别再傻傻分不清了!一文读懂WordPress.com和WordPress.org的区别 - 特色图片
WP教程 2 - 别再傻傻分不清了!一文读懂WordPre...
Wordpress插件与设计 - WP教程 12 - 如何使用分类和标签,帮助读者轻松找到他们感兴趣的内容 - 特色图片
WP教程 12 - 如何使用分类和标签,帮助读者轻松...
Wordpress插件与设计 - Elementor 通用教程 5 - 如何拷贝和粘贴不同网站的设计元素 - 特色图片
Elementor 通用教程 5 - 如何拷贝和粘贴不同网...
Wordpress插件与设计 - WP教程 20 - 三分钟搞定!快速学会WordPress主题更换与自定义 - 特色图片
WP教程 20 - 三分钟搞定!快速学会WordPress主...
Wordpress插件与设计 - Elementor 基础教程 2 - 内部区段 小工具的使用方法 - 特色图片
Elementor 基础教程 2 - 内部区段 小工具的使用...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

从关键词到内容优化,提升博客流量的SE...

WP教程 与设计
Wordpress插件与设计 - Elementor 基础教程 19 - 证明小工具的设置和使用方法 - 特色图片

Elementor 基础教程 19 - 证明小工具的...

Wordpress插件与设计 - Elementor 基础教程 15 - 基本图库小工具的设置使用方法 - 特色图片

Elementor 基础教程 15 - 基本图库小工...

Wordpress插件与设计 - WP教程 20 - 三分钟搞定!快速学会WordPress主题更换与自定义 - 特色图片

WP教程 20 - 三分钟搞定!快速学会Word...

Wordpress插件与设计 - Elementor 专业教程 26 - Template小工具的设置和使用方法 - 特色图片

Elementor 专业教程 26 - Template小工...

Wordpress插件与设计 - Elementor 基础教程 14 - 图像幻灯器小工具的设置和使用方法 - 特色图片

Elementor 基础教程 14 - 图像幻灯器小...

Wordpress插件与设计 - WP教程 29 - 掌握WP用户权限设置,轻松打造安全的多人协作平台! - 特色图片

WP教程 29 - 掌握WP用户权限设置,轻松...

AI工具 与服务
AI工具与服务推荐 - 美图设计室 - AI智能设计平台 - 特色图片

x-design - 美图秀秀AI设计平台,海量...

AI工具与服务推荐 - Illustroke - AI矢量插画设计工具 - 特色图片

Illustroke - AI插画设计师,文本秒变...

AI工具与服务推荐 - Inworld - 游戏AI引擎 - 特色图片

Inworld AI - 为游戏开发者提供AI驱动...

YYP-2024-06-29-07-57-16

M1-Project - 为小微企业保驾护航的AI...

YYP-2024-07-04-12-43-47

Agentic - AI游戏开发助手,无需PhD轻...

YYP-2024-07-04-12-31-45

WOXO - AI + 创意 = 视频爆款,社媒频...

Canva教程 与技巧
Canva使用教程 - Canva 新手指南 7 - 掌握Canva Mockup功能!轻松打造完美合成图像 - 特色图片

Canva新手指南7 - 掌握Canva Mockup功...

Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片

Canva 相关教程 3 - 设计初体验!用Can...

Canva使用教程 - Canva 新手指南 3 - 无需编程!用Canva创建专业一页式网站的指南 - 特色图片

Canva新手指南3 - 无需编程!用Canva创...

Canva使用教程 - Canva 新手指南 8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级 - 特色图片

Canva新手指南8 - 提升设计效率!使用...

Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片

Canva新手指南5 - 掌握Docs的功能和技...

Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片

Canva 使用教程 9 - 如何巧妙地利用建...

社媒运营 与营销
社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片

一文读懂YouTube Premium会员权益!让...

社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片

YouTube Shorts!解析短视频创作和收益...

社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片

一文带你解析海外版小红书Lemon8!Z世...

社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片

YouTube运营全攻略:从零到一打造你的油...

社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片

从零到一!创建YouTube频道并上传视频...

社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片

将爱好转为事业!通过YouTube频道赚钱...

AI工具 分类筛选
AI Main Category checkbox