WordPress菜单教程:10个功能点(2021更新)

更新日期:2021-09-23
Share on facebook
Share on twitter
Share on linkedin

本文讲解: 什么是WordPress菜单、如何添加菜单、如何调整菜单顺序、如何将产品分类加入菜单、如何编辑菜单、如何添加自定义菜单、如何添加锚点菜单、如何制作超级菜单(megamenu)、如何制作产品分类伸缩菜单。

什么是WordPress菜单

菜单通常位于网站的顶部和底部,用于方便用户快速打开关键页面,譬如下方两张图片,依次是顶部菜单和底部菜单。

wordpress-navigation
wordpress-footer-navigation

而B2B外贸网站的菜单的常见构成:

  1. Home(可省略)、Products、About us、Blog、Contact us
  2. 产品目录名(若干个)、Company profice、Blog、Contact us

其他诸如Applications、Service、Catalogs / Brochure、Video、Knowledge Center、Technology等等就按实际情况添加。

如何添加菜单

2021年4月更新视频教程

前提条件:网站中已经有页面或文章等内容,否则添加菜单时无内容可选。

  1. 进入wordpress后台,鼠标悬停于外观菜单
  2. 点击菜单
  3. 输入菜单名称,例如menu
  4. 点击创建菜单
wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 8
  1. 在添加菜单项》页面栏目下,全选或逐个勾选页面
  2. 点击添加到菜单按钮
  3. 将菜单的显示位置设为primary,表示用做网站的主导航,一般显示在网页顶部区域
  4. 点击保存菜单
wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 7

保存后打开网站,我用的是hello elementor主题,下图中红框所示便是刚才添加的主菜单。

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 9

如何调整菜单的顺序和层级

如下图所示,左键点选并长按某个菜单后,上下移动即可调整菜单的排序;左右移动菜单可以调整层级,向左移动是提升层级,向右移动是降低层级。譬如,在下一章节中,可以将产品类别降低层级,以便作为products的子菜单项。

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 6

如何将woocommerce产品分类加入菜单

在woocommerce中创建完产品类别后,按下图中的序号顺序操作,可以将产品、产品类别加入到“添加菜单项”栏目中,否则默认情况下,你在菜单项栏目中是看不到它们的。

  1. 进入外观》菜单
  2. 点击页面右上方的显示选项按钮
  3. 在展开的面板中勾选产品类别
  4. 在展开的面板中勾选产品
  5. 你将会在添加菜单项栏目中看到产品类别和产品供你选择
wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 3

然后,按照上文教过的移动菜单的办法,将产品分类移动到Products下方作为子菜单。

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 2

保存菜单后去查看一下网站,将看到如下效果

wordpress create menu 1

如何删除菜单

  1. 点击需要删除的菜单右侧的?三角按钮
  2. 点击移除/remove按钮即可实现删除菜单
how-to-remove-menuitem

如何编辑菜单项以及注意事项

2021年4月更新视频教程

继续参考上一张图,点击需要编辑的菜单右侧的?三角按钮,即可进入菜单的修改界面。

需要注意的是:如果你的菜单不是自定义链接,而是直接选用的页面或产品分类等,那么,如果在此处修改了它的导航标签(即菜单的名称),会导致菜单名称固化为你在此处修改的内容,而不会自动跟随页面或产品分类名称的修改。

如何添加自定义链接菜单

使用自定义链接菜单,可以为网站添加第三方网站的链接,譬如社交媒体、你的其他网站,操作步骤如下:

  1. 在添加菜单项栏目中点击“自定义链接”
  2. 输入url和链接文本
  3. 点击“添加到菜单”按钮即可
adding-custom-links-to-wordpress-navigation-menus

如何添加页面内的锚点菜单

示例:网站的公司介绍没有单独的页面,若想将公司介绍菜单直接链接到首页中的公司介绍栏目,我们可以通过锚点菜单的形式,将公司介绍菜单锚定到首页的指定位置。

下文以本示例制作教程,此外,示例网页是使用Elementor pro制作的,如果你用的是其他编辑器,也是同理去寻找css id等可以作为锚点的设置项。

  1. 请在elementor编辑页面中,找到锚点需要放置的栏目(section),譬如公司介绍栏目,单击该栏目以便展开左侧的面板
  2. 选择advanced标签页
  3. 选择advanced栏目
  4. 填入css id,建议用栏目的英文名,单词之间用-间隔,譬如about-us,然后update保存页面
add-anchor-links-to-wordpress-navigation-menus

接下来进入菜单页面,添加自定义链接,其中URL部分由以下两部分构成

  1. 锚点内容所在页面的url
  2. # 加上锚点内容的CSS id,即上文中的about-us,组成#about-us
add-anchor-links-to-wordpress-navigation-menus-2

保存菜单后,我们访问网站,点击锚点菜单查看效果

add-anchor-links-to-wordpress-navigation-menus

如何制作WordPress超级菜单(mega menu)

接下来我们介绍:什么是超级菜单、制作超级菜单的热门免费插件、制作超级菜单的步骤教程。

什么是超级菜单(mega menu)

什么是超级菜单呢?相比普通菜单而言,超级菜单的展示形式更加丰富,比如菜单里带有图片、视频、多列子菜单等等,譬如下图就是一个超级菜单,实现它需要借助插件。如果你还不会创建菜单,请先查看如何在WordPress中制作菜单(7个功能点)

mega-menu

最受欢迎且免费的制作mega menu的插件

最受欢迎且免费的mega menu插件是Max Mega Menu,但它不适用于使用Elementor pro制作的header的菜单。

如果你使用的是Astra主题付费版,那么就不需要额外装插件,Astra主题付费版提供了Mega Menu功能。

如果使用Elementor Pro制作header,那么需要用的另一个插件Elements kit Elementor addons,它是Elementor的扩展组件,免费版就能提供mega menu功能。接下来我们用这个插件来讲解mega menu的制作

如何制作超级菜单(mega menu)

安装并启用Elements kit Elementor addons插件,若不会安装插件,请查看这篇安装插件教程

进入菜单页面,如下图所示,

  1. 选中Enable this menu for Megamenu content,
  2. 在需要设计mega menu的菜单上悬停,将浮现mega menu按钮,点击该按钮
mega-menu-tutorial
  1. 点击mega menu按钮后,将显示下图的弹出框,请将megamenu enabled开启
  2. 然后点击edit megamenu content,系统会弹出elementor编辑器,请在编辑器中制作megamenu的内容,就像用elementor制作页面的方法一样
mega-menu-tutorial-2

如下图所示,我随意制作了一个mega menu实例,记得点击update保存,然后点击左上角的x关闭界面回到菜单页面。

mega-menu-tutorial-3

最后依次点击弹出层上的save按钮,点击保存菜单。

mega-menu-tutorial-4

接下来请将Elementor的header模板中的导航元素(nav menu)换成Elements kit Elementor addons提供的导航元素,即下图中带有EKIT标记的Nav menu元素,如果你还没制作过Elementor的Header模板,那么请先制作一个Header,然后将下图中的带有EKIT的nav menu拖入到页面中。

mega-menu-tutorial-5

最后访问网站看一下效果,如下图所示,将鼠标放到products上,下方即刻浮现刚才制作的mega menu。

mega-menu-tutorial-6

需要注意的是,Megamenu不适合手机端,而Elements kit Elementor addons插件必须付费升级到PRO才能控制手机端不显示megamenu,这并不意味着我们要付费。

我们可以通过Elementor编辑header,新增一个setion放移动端的菜单,按下图所示,用可见性开关控制菜单在不同设备上的可见性。譬如将有megamenu的菜单仅仅在桌面端可见;而没有megamenu的菜单仅仅在平板和手机端可见,完美省钱?。

mega-menu-tutorial-7

如何制作产品分类伸缩菜单

在使用WordPress进行外贸建站时,我们常用WooCommerce进行产品的管理,而在产品列表页中,我们会在侧边栏中使用小工具(widget)展示产品分类(product categories)和产品子分类,以方便用户快速筛选目标产品,目前在Astra主题当中,不提供产品分类的伸缩/折叠菜单功能(如下图所示效果),我们可以使用插件Iks Menu – WordPress Category Accordion Menu来实现它。下文我将会逐步介绍如何通过Iks menu制作产品分类伸缩式筛选功能。

备注:我已经采购了iks menu付费版的终生授权,如有需要,可以联系我购买,60元/终生/不限网站。

product categories accordion

安装插件iks menu

你可以直接在WordPress网站后台安装iks menu,并激活它。相关教程:如何安装Wordpress插件(3种方法)

image 24

创建产品分类筛选菜单

接下来在后台找到iks menu菜单并将进入,点击create按钮创建。

image 25

填写标题并点击下一步

image 26

选择taxonomy并点击下一步

image 27

选择product categories并点击Finish,你可以同理制作文章分类、文章标签、产品标签的可折叠菜单

image 28

此时产品分类的伸缩菜单已经创建完成,我们去编辑一下他

image 29

在编辑页面中,你讲看到如下图所示的data标签页,我们可以配置分类中展示的内容、展示的顺序,譬如启用show posts,那在点击产品分类后,会展示分类下的产品。

image 32

继续data的配置,你也可以hide empty terms,这样没有产品的分类就不会展示,反之同理;

此外很重要的是分类的排序,插件提供了多种排序方式,譬如按照分类的名字排序,也可以按照产品数量排序(这是我常用的排序方式),然后我会配置为降序排列(DESC),这样以来,产品数量多的分类就会展示在上方

image 30

下图是我的常用配置,供参考,其他未提及的配置项都是保持默认配置的。

image 33

除了data配置,你还可以依次点击menu、display、manage、skins查看配置功能,如果搞不懂这些,就保持默认,我通常会在display中取配置颜色、间距信息。

image 34

最后,iks menu还提供了几个免费的皮肤供你选择,选完皮肤后,点击右上角的保存按钮,然后会出现publish按钮,点击它。

image 31

然后你将能在弹出层面中得到短代码(shortcode),复制它,使用短代码可以将产品分类筛选放到任一页面上,下文我会以Elementor为示例讲解。

image 35

当然你也可以把它放到侧边栏的小工具中,请进入widget标签页,点击go to widgets

image 36

将产品分类菜单加入到侧边栏中

接下来进入wordpress的appearance》widget页面,找到iks menu后,点击右侧的三角,在展开的选项中,找到woocommerce sidebar或product sidebar。

image 37

如果你想在产品列表页展示分类筛选,就选择woocommerce sidebar,如果你想在产品详情页展示分类筛选,就选择product sidebar,最后点击add widget按钮。

需要注意的是,你必须要将产品列表页或产品详情页配置了侧边栏,相关教程: Astra主题教程:免费建外贸网站–给产品页面添加侧边栏

当你把iks menu加入到woocommerce sidebar或product sidebar中后,将能看到下图所示效果,如果你创建了多个iks menu,记得在id中进行选择,并点击save按钮保存

image 39

然后我们进入产品列表页查看一下,便能看到产品分类筛选了,如下图所示,图上方是astra自带的产品分类筛选功能(不可伸缩),图下方是iks menu制作的可以伸缩的。注意:免费版的iks menu不支持在分类后方统计产品数量。

image 40

把产品分类菜单放入到页面中

以我最爱的Elementor页面编辑器为例,请使用Elementor编辑目标页面,然后在左侧面板中找到shortcode元素,拖拽到右侧画布中你想放的位置

image 38

然后将上文中复制的shortcode黏贴到输入框中,如下图US欧式,你将能看到产品分类菜单已经放入到页面中了。

image 20 11 11 11 16 14
点赞
0 / 5 5

Your page rank:

2 回复

评论被关闭。

相关 教程

我自用的 建站资源

当你点击本站的链接购买主机、主题、插件,我会得到一些佣金用于运营网站,但不会影响你的购买价格,我只推荐自己在用的,感谢有你的支持~比心( •̀ ω •́ )y

Namesilo

注册域名,购买时使用优惠券loyseo可减1美元
前往注册→

Cloudways

速度快、续费不涨价的优质主机
了解详情→

elementor logo gradient 01 1
Elementor

最热门的网页可视化设计编辑器,我的网站就是用它建的
了解详情→

Astra

易用又轻快的WordPress主题,含超多免费模板
了解详情→

Copyright © LOYSEO.COM