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

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

更新日期:2020-11-14

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

安装插件iks menu

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

创建产品分类筛选菜单

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

填写标题并点击下一步

选择taxonomy并点击下一步

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

推荐教程:Elementor教程

点赞
0 / 5 5

Your page rank:

教程

分享知识是一种美德,当我们每一个人都在不断的分享知识给这个社会的时候,我们这个社会将会变得越来越好,所以如果您喜欢这篇文章的内容,希望您可以把它分享到您的朋友圈当中,或者给到您指定的某一个人,您关心谁,就把知识分享给他,谢谢。

发表评论

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

Copyright © LOYSEO.COM
Do NOT follow this link or you will be banned from the site!
微信扫一扫