wordpress建站教程：產品詳情頁模板制作思路分享

最近wordpress建站課程剛錄完，又有個中文企業官網要做，剛剛整體框架完工了，等客戶提供內容替換就 OK。這個wordpress建站項目沒使用woocommerce，就用自帶文章來放產品，但要給產品詳情和普通的文 章詳情頁做個區分，所以悅然給客戶做了一個圖中的這種簡易產品詳情頁模板。接一來給大家分享一下圖中這種產品詳情頁樣式的實現思路吧。

頁面拆分

首先我們可以拆分頁面，比如它其實可以分上下兩個部分，上半部分又分成 了左右兩份部分，下半部分也是左右兩個部分。

頁面拆分好接下來就可以開始制作，下面悅然wordpress建站會給大家分享Elementor和古騰堡現種制作思路。

Elementor制作

1. 用Elemntor的theme builder功能新建一個single post 模板。
2. 制作上半部分。添加一個容器，設置兩欄結構，可以等分，容器整體設置背景圖，背景圖像使用動態標簽功能，設置Featured lmage，樣式設置覆蓋。容器左邊加POST標題模塊+面包悄導航（這個功能由主題或seo插件提供，比如rank math seo、slim seo等），再加兩個按扭。微信按扭還可以設置一個popup彈窗，讓它點擊彈出二維碼。容器右邊添加一個Featured Image模塊 。
3. 制作下半部分。添加容器，同樣分兩欄，左邊設置75%左右。左邊拖入Post Content模塊調用文章內容，下面還可以添加一些翻頁、分享等模塊，自由發揮。右邊插入搜索模塊、標題，POST調用最近的文章或產品。

以上制作好后直接發布模板，應用到全部文章，或者指定應用到需要的分類就可以了。之所以制作成模板，是因為模板中都是動態調用的內容，當我們設置不同的產品（文章）標題、特色圖片、詳情描述之后，產品的內容會自動變華，格式固定統一，使用起來更方便。

最好別用elementor直接寫文章，插入的Post Content模塊就是調用正常的文章內容的，以后我們可 以直接在wordpress后臺用古騰堡編輯器寫內容就好了。

??注意事項

古騰堡制作

現在古騰堡編輯器的功能也越來越完善了，如果再配合擴展插件，它的功能也會非常強大，并不輸給Elementor。接下來悅然wordpress建站給大家分享兩種思路。

思路1：簡單

這種方法就跟我們平時寫文章一樣，不需要制作固定的模板，也不需要插件或主題有模板定制功能。

1. 安裝古騰堡增強插 件，kadence block或greenshift等都行。
2. 制作上半部分。新建文章，古騰堡編輯器中添加ROW模塊，分兩欄，其實和Elementor差不多。左邊分別添加標題、面包屑、按扭模塊。彈窗按扭可用greenshift的popup模塊制作。右邊插入wordpress自帶的封面模塊，設置特色圖片。
3. 下半部分。添加一個ROW模塊，要注意一下，先看你的主題有沒有側邊的功能和模塊，如果有，那下半部分的內容就不用手挫側邊欄了，直接寫產品內容就OK了。
4. 安裝一個復制插件，比如yoast post就可以，添加新產品時，在文章列表中，【產品模板】旁邊點clone或快速草稿即可，接下來把修改里面的文字圖片就OK了。

這各方法比較簡單，看著似乎有點繁瑣，但其實配合yoast post插件的快速復制功能是非常方便的，我自己也經常使用。

思路2：高級

這種方法需要使用到主題的HOOKS功能，目前的astra pro、kadence pro、blocksy pro等都支持（免費的不行）。使用主題的HOOKS功能就基本和Elementor操作一樣了。

1. 新建一個Hooks模板，指定應用到需要的文章分類。
2. 制作上半部分。新建一個ROW，分兩欄，左邊添加標題、面包屑導航、按扭；右邊添加封面模塊設置為特色圖片，
3. 制作下半部分。同樣可以直接插入Post Content文章內容模塊，這個是wordpress自帶的。然后側邊欄也是持情況，主題已經有了就不用制作了，如果沒有就和Elementor一樣的做法，分兩欄，右邊作為側邊欄就OK。

這個方法也是悅然wordpress建站使用比較頻繁的，比如我的另外一個網站：https://www.yrtheme.cn/ 就是這樣制作的，不過會更復雜一些。

總結

以上就是今天分享的內容，基本是文字，分享的主思路，具體的操作還得大家自己嘗試哦。

wordpress建站學習咨詢服務