wordpress自学笔记 第三节 独立站产品和类目的三种展示方式
wordpress自学笔记
摘自
超详细WordPress搭建独立站商城教程-第三节 独立站产品和类目的三种展示方式，2025 WordPress搭建独立站教程#WordPress建站教程
https://www.bilibili.com/video/BV1rwcteuETZ?spm_id_from=333.788.videopod.sections&vd_source=a0af3bbc6b6da748faaab91bd4d5688e
第三节 独立站产品和类目的三种展示方式
产品类目的三种展示方式
图片排列
首先创建一个排列的列元素，这里我们使用四列
在引入图片之后，再设置一些宽度、高度、添加按钮等操作实现如此效果
之后，我们再给四个图片之间加一些间距，在选中最大的列后，在布局里面找到柱间隙就可以调整了
图片错落
首先创建一个列，这里的列数可以根据自己的需求决定，这里我们就先用2列
我们还是先对左边的列进行一些设置，如背景图与大小
对于右边来说呢，就是在右边的这个内列中点击左上角的加号，之后找到图像，通过拖动的方法，将两个图像拖动进去，形成错位
之后就是对其进行一些基本的调整，也可以加一些按钮等
滑轨展示
添加一个列，这里选择一列即可
我们点击加号，搜索“水平滚动条”，加入进去即可
在左侧选中水平滚动条后，在右侧可以选择一些基本的设置，如列，这里可以加入或减少图片的数量
之后添加一些类目图片，并且添加一些链接与按钮即可
在风格这里也可以对样式进行一些设置
产品的展示
产品展示
在创建一列的列后，左上角加号搜索"product"找到产品"Hand-Picjed Products"并拖入尽列中
拖动进来后没有展示，在右边找到“精选“，下面就是你店铺产品的名称了，目前这些产品都是模板自带的，后面我们创建产品之后，就可以加入我们自己的产品了
在我们选择了四个之后，就看到如上效果，我们也可以在右边设置堆叠以及网格的布局样式
目前没有占满，我们可以在右边调整一下列数等等操作
之后我们就可以对其中的标题、价格等进行个性化修改
按类目展示
之后我们要做到对商品进行过滤，我们在右边找到过滤器，通过点开三个点之后，对产品的一些属性进行过滤性的展示
选上之后，下面就出现了一个产品类别，我们可以输入你想要放置的类目
从后台看到，这个模板是有三个类目的
进行筛选了之后，就可以看到商品类别的变化了
单品展示
接下来就是单品的展示，在右侧搜索之后，选择单个产品并拖拽过来
可以从下面找到你要选择展示的单品
这样的话就展示到里面了
之后就是在选项卡中找到对应的元素进行自定义更改
之后也不要忘了移动端的展示方式
特别鸣谢：bilibili平台UP主，白小菌-外贸跨境