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