how to create menu image tumnail

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

2024-05-30
Wordpress 教程
喜欢(0)

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. 要点总结

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

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

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

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

WP POST 相关文章
Elementor pro Portfolio widget
Elementor 专业教程 3 – Portfolio小工具的设置和使用方法
how to add startic home page image tumnail
WP教程18 - 设置自定义静态首页,打造吸引眼球的网站门面!
Elementor pro Video Playlist widget.webp
Elementor 专业教程 29 – Video Playlist小工具的设置和使用方法
Elementor basic 78 quanjuyanse quanjuziti.webp
Elementor 通用教程 1 - 全局颜色和全局字体的设置方法
Elementor-Pro-Query
Elementor 专业教程 33 – Query的设置和使用方法
Elementor pro Post widget content.webp
Elementor 专业教程 1 – Post小工具的设置和使用方法 内容标签篇
Elementor basic 12 tubiaokuang.webp
Elementor 基础教程 12 – 图标框小工具的设置和使用方法
Elementor pro Countdown widget .webp
Elementor 专业教程 19 – Countdown小工具的设置和使用方法
Elementor basic 27 HTML
Elementor 基础教程 27 – HTML小工具的设置和使用方法
add future image futuer
WP教程 11 – 想让文章更出彩?特色图片是关键!
fuyeshidai

做点副业,为生活加点料

快速搜索
站长推荐 建站工具
用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
YYP-2024-05-21-10-02-09
Unbounce - AI驱动登陆页优化,营销自动化更出色
YYP-2024-06-01-12-25-28
100+ AI Tools - 快速、简单、全自动地将图像转换为SVG矢量图
YYP-2024-06-14-07-27-45
Audiobox - 文本驱动声音创作,专属音频信手拈来
YYP-2023-12-20-08-53-10
MeFlow - 智能合同全生命周期管理,提效控险两不误
YYP-2024-06-09-08-11-15
01.AI - 引领AI 2.0浪潮,为每个人带来触手可及的AGI
YYP-2024-06-01-12-34-08
DreamUp - AI图像生成器,几秒钟制作惊艳高质量艺术作品
YYP-2024-06-15-08-12-26
HaiRui - 律师的AI"海伦",法律工作全面智能化!
YYP-2024-06-06-12-37-50
轻云图 - AI赋能文本可视化,3D云图轻松get
how-to-use-canva-mockup-apps-tutorial thumbnail
Canva新手指南7 - 掌握Canva Mockup功能!轻松打造完美合成图像
canva magic studio info
未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘!
how-to-use-canva-builde-one-page-website-tutorial thumbnail
Canva新手指南3 - 无需编程!用Canva创建专业一页式网站的指南
how-to-use-canva-group-tutorial thumbnail
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Complete-Guide-to-Canva-Design tumnail
设计初体验!用Canva打造你的第一个创意作品
how-to-use-canva-make-short-video thumbnail
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
how-to-use-canva-docs-tutorial thumbnail
Canva新手指南5 - 掌握Docs的功能和技巧,使文档创作更简单!
canva-image-editing-tutorial-and-how-to-use thumbnail
Canva新手指南2 – 告别PS!全面解析Canva 图像编辑功能及其使用方法
SN Post tumnail Youtube tisheng dingyueshuliang
【Youtube】从0到10万!12个实用技巧快速提升YouTube频道的订阅量
Guide-to-Increasing-YouTube-Audience-Interaction tumnail-2
【Youtube】解密YouTube用户互动策略!掌握频道人气的秘诀
sn post youtube 20240606
【Youtube】YouTube运营全攻略:从零到一打造你的油管频道
comprehensive-guide-youtube-video-editing tumnail
【Youtube】如何正确选择一款适合自己的视频编辑软件?
sn post youtube premium
【Youtube】一文读懂YouTube Premium会员权益!让你不再犹豫
snpost lemon8 20240608 tumnail
【Lemon8】一文带你解析海外版小红书柠檬8!Z世代的社交新宠,品牌营销新阵地!
Youtube Account and video up tunmail
【Youtube】从零到一!创建YouTube频道并上传视频的全流程
SN Post tumnail Youtube shorts chuangzuo shouyi
【Youtube】YouTube Shorts!解析短视频创作和收益的秘密