专注于外贸建站,分享WordPress建站和Elementor教程

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

更新日期:2020-11-14

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

product categories accordion - WordPress如何制作产品分类伸缩菜单

安装插件iks menu

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

image 24 - WordPress如何制作产品分类伸缩菜单

创建产品分类筛选菜单

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

image 25 - WordPress如何制作产品分类伸缩菜单

填写标题并点击下一步

image 26 - WordPress如何制作产品分类伸缩菜单

选择taxonomy并点击下一步

image 27 - WordPress如何制作产品分类伸缩菜单

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

image 28 - WordPress如何制作产品分类伸缩菜单

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

image 29 - WordPress如何制作产品分类伸缩菜单

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

image 32 - WordPress如何制作产品分类伸缩菜单

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

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

image 30 - WordPress如何制作产品分类伸缩菜单

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

image 33 - WordPress如何制作产品分类伸缩菜单

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

image 34 - WordPress如何制作产品分类伸缩菜单

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

image 31 - WordPress如何制作产品分类伸缩菜单

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

image 35 - WordPress如何制作产品分类伸缩菜单

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

image 36 - WordPress如何制作产品分类伸缩菜单

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

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

image 37 - WordPress如何制作产品分类伸缩菜单

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

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

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

image 39 - WordPress如何制作产品分类伸缩菜单

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

image 40 - WordPress如何制作产品分类伸缩菜单

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

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

image 38 - WordPress如何制作产品分类伸缩菜单

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

image 20 11 11 11 16 14 - WordPress如何制作产品分类伸缩菜单

相关教程:使用Elementor Pro的B2B外贸建站教程

推荐教程:Elementor教程

点赞
0 / 5 5

Your page rank:

教程 分类

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关 教程

我自用的 建站资源

当你点击本站的链接购买它们,我会得到一些佣金,谢谢你们对我这位自由职业娃妈的支持,比心( •̀ ω •́ )y

Namesilo

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

siteground logo
SiteGround

购买外贸建站主机,它是80%读者的选择
了解详情→

Astra

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

elementor logo gradient 01 1
Elementor

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

Hi~当你点击本站中的主机、主题、插件的链接前往购买后,我将获取一些佣金,这是我撰写建站教程的主要收入~希望也能得到你的支持,比心( •̀ ω •́ )y

Copyright © LOYSEO.COM — 专注提供外贸网站建设 · 外贸建站 · 外贸网站制作 与 外贸建站教程

LOYSEO

反馈

如果你有喜欢的外贸网站、页面、功能或期望的教程,可以在下方提交给我,我会筛选制作并公开

微信扫一扫