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主，白小菌-外贸跨境