本文介绍如何使用Elementor制作面包屑,通常SEO插件比如Rankmath会帮助我生成面包屑,我直接用就可以了,本文介绍在不使用SEO插件和其他插件的前提下如何使用Elementor制作面包屑,包含了2个制作方法,基于我的方法你也可以进行扩展出其他方法。
我使用Elementor制作了2个面包屑,如下:
1:使用Icon List元素制作的面包屑
2:使用icon Box元素制作的面包屑
这里是做的产品页面的面包屑,如果是其他页面可参照教程制作对应的面包屑。
下文内容中设计Elementor动态数据相关的知识,如果你不熟悉,请阅读文章《Elementor动态内容是什么?如何使用?》
使用Elementor制作面包屑:Icon List元素
1、拖拽一个Icon List元素到页面
在Elementor页面编辑器左侧元素库中找到Icon List元素。将元素拖拽到对应的位置。
2、设置Icon List元素的Layout(布局)
Icon List默认的布局是纵向的,需要修改成横向的效果。
3、添加Items到列表中
添加你对应页面的面包屑的结构到Icon List的Items中,我这里添加了Home、Products、产品分类、产品名称。
设置首页的链接和图标,图标直接在图标库中选择即可,链接使用/即代表网站首页链接地址。
设置Products的链接和图标,Products如果是一个页面,我通常会使用Elementor的动态数据来设置,通过选择动态数据中的Internal URL(内部链接),然后点开Internal URL设置Type为Content,搜索和选择Products页面即可。
在链接中选择动态数据的Internal URL
你也可以使用相对路径来添加页面链接,打开对应页面浏览并复制地址栏中的URL,删除域名及之前的内容保留域名后/开始的内容即为相对路径。
设置产品分类的链接和图标,这里我使用的也是动态数据的Post Term(因为我的产品是用Post内容类型做的,如果你是用Woocommerce做的产品,那么Elementor会基于Woocommerce提供可以直接用的面包屑元素),点开Post Term,设置Taxonomy为产品分类,并删除分隔符,开启链接。
说明:这里Taxonomy选择产品分类,是因为我使用CPTUI插件自定义的分类,如果你是使用的文章默认的分类,直接选择Category即可。
这里有一点需要说明,如果你的产品选择了多个分类,按照如上设置会全部显示出来。
我通过一段CSS代码来显示第一个分类,其他的分类则不显示。
div > ul > li:nth-child(3) > span.elementor-icon-list-text>a:nth-child(n+2) {
display: none;
}
li:nth-child(3):代表Icon list里面的第三个itme,你设置的产品分类在第几个item,就将3改成对应数值。
设置产品名称,产品名称直接用动态内容Post Title展示,不需要添加链接。
使用Elementor制作面包屑:IconBox元素
这个方法 需要多个IconBox元素组合使用,比使用Icon List 元素在风格设置上更加灵活一些,我推荐使用这个方法来制作。
1、拖拽一个Icon Box元素到页面
2、设置面包屑结构中的首页
修改样式
在这里你可以单独修改首页的文字颜色
设置Icon Box元素的宽度。默认的元素宽度是撑满布局的,我们需要所有的icon Box都排列在一行,就需要将整个元素的宽度设置为【Inline(Auto)】,就是自动的意思,元素内容多款,元素就多宽。
3、设置面包屑结构中的Products
复制一个首页Icon Box元素
复制之后直接修改复制元素的内容即可。
4、设置面包屑结构中的产品分类
复制Products的Icon box元素进行修改。
将标题修改成动态数据Post Term,并在Post Term下选择产品分类,删除分隔符,开启链接。
同时,删除Icon Box的链接。
这里和Icon List一样,如果产品属于多个分类则会显示多个分类的名称。
通过CSS代码来实现只显示第一个分类。
span.elementor-icon-box-title>span>a:nth-child(n+2){
display: none;
}
添加代码之后的效果
5、设置面包屑结构中的产品名称
产品名称的设置和Icon List一样,使用动态数据的Post title 即可,不需要添加链接。
使用Elementor制作面包屑总结
使用Elementor制作面包屑,不是一个自动的过程,你需要通过使用元素获取动态数据来实现,每个页面都需要单独设置,当然你可以复制来实现。
Elementor其他元素或许也能实现制作面包屑,你可以参照我写的方法进行扩展测试。