本篇教程講解：如何使用Crocoblock的JetEngine和Elementor，為文章或者自定義內容（比如產品、案例）創建動態清單範本（Listing）的，本文以自定義的產品為例進行講解。
開始之前，你需要準備好這些
- Elementor
- 安裝並啟動JetEngine外掛程式
- 如果你要展示的是自定義的產品或案例，那麼確保已經創建了自定義的文章（CPT）
核心步驟與詳細設置
第一步：設置清單範本的基礎資訊
進入 WordPress儀錶盤 > JetEngine > Listings / Components，點擊“Add New Item”按鈕，會彈出一個設置清單項的小視窗，這裡有四個地方需要我們填寫：
- 清單來源：因為我們是要展示產品，所以這裡選擇“Post”選項。
- 來自文章類型：這裡選擇你的內容具體是什麼類型。 可以是預設的“文章”，也可以是你自己用JetEngine創建的“產品”這類自定義類型，我在這裡選Products
- 清單項名稱：給你這個範本起個名字，方便以後管理，比如“博客文章卡片”或者“產品展示塊”。
- 清單檢視：選擇用哪個工具來設計。 既然我們在用Elementor，這裡自然就選“Elementor”。
全部填好后，點擊創建按鈕，我們就進入了Elementor的編輯介面。
第二步：設計和填充清單範本的內容
現在，我們來到了最核心的設計部分，其實就是設計單個“清單卡片”的樣子。
1. 先看看清單項的基礎設置
我習慣先點開左下角的那個齒輪圖示，打開清單項設置。 在這裡的「清單設置」標籤頁下，有幾項需要注意：
- 清單來源（listing source）和來自文章類型（from post type）：確認一下是不是你剛才選的內容。 如果你想改，這裡可以改，但改完后記得保存、刷新一下頁面，這樣後面用動態小工具時，選項才會更新。
- 預覽寬度：這裡可以調整這個卡片在設計時的預覽寬度，比如我常設為400像素，看著比較符合實際。
- 使清單項可點擊：這個開關如果打開，那麼用戶點擊卡片的任何地方，都能跳轉到文章的詳情頁。 這個功能很方便，但要注意，我們後面可能會單獨加「閱讀更多」按鈕，兩者最好不要同時用，不然容易讓使用者困惑。
2. 用動態小工具把內容“放”進去
內容怎麼動態顯示呢？ 在Elementor編輯器左邊面板里，清單元素（Listing Elements）分類下的那些動態小工具（Dynamic xxx）。
我來分享一下我通常的擺放順序：
首先，拖一個動態圖像進來，用來顯示文章的封面圖。 它的來源預設就是「文章縮略圖」，通常不用改。 如果你沒有為自定義文章添加thumbnail（featured image），請在編輯該CPT的advanced settings的support中添加一下。
然後，放一個動態欄位小工具，用來顯示文章標題。 設置里，來源保持「文章/分類/使用者/對象數據」，物件字段選「標題」就行。 我通常會把它的HTML標籤保持DIV，你可以酌情調整字體樣式、排版（譬如居中）。
接著，對於文章，我會加一個動態元數據小工具，它可以同時顯示發佈日期、作者和評論數。 對於產品，就不必要加這個小工具了。
- 刪掉不需要的標籤，比如我很少顯示評論數，就直接刪掉。
- 給每個標籤單獨加圖示、前綴（比如在作者名前加個“By：”）或者後綴，讓顯示更友好。
- 點開“日期設置”、“作者設置”這些子選項，還能調整日期格式等細節。
為了顯示文章摘要，我會再拖一個動態欄位進來。 來源不變，物件欄位這次選「摘要」。 這裡記得打開自動生成摘要的開關，並設置一個自定義長度，比如20個詞，這樣摘要看起來會比較整齊。 注意一點：這個字數限制只在網站前臺生效，後台編輯時看到的是全文。 如果你的自定義文章（CPT）沒有摘要欄位，你可以在編輯該CPT的advanced settings的support中添加一下excerpt。
最後，我會加一個動態連結小工具，作為「閱讀更多」按鈕。 它的來源就設為「固定連結」。 這裡要特別提醒：如果你前面打開了“使列表項可點擊”，這裡就不建議再加這個按鈕連結了，二選一，避免一個卡片上有兩個可點擊區域。
3. 美化一下樣式
內容放好后，就可以像設計普通Elementor頁面一樣，去美化每個小工具了。
- 調整顏色、字型、內邊距、邊框…… 這些都在每個小工具的「樣式」選項卡里。
- 想調整小工具之間的間距，可以去「高級」選項卡里設置內邊距或外邊距。
- 我通常還會給最外層的容器（Container）設置一個背景色或輕微的陰影，讓卡片有區分度。
設計完成後，記得點擊右上角的“更新”保存這個範本。
第三步：把做好的清單放到頁面上
範本做好了，怎麼用呢？ 我們需要一個「容器」來展示它。
去新建或編輯一個頁面，用“使用Elementor編輯”打開。
在Elementor編輯器中，找到清單網格（Listing Grid）這個小工具，把它拖到畫布上。 在這個小工具的設置里，選擇你剛剛創建好的那個清單範本。 我通常會打開等列高這個選項，這樣同一行里的卡片高度就一致了，看起來更整齊。
然後你要設置數據來源，這裡有個小提示：清單網格小工具里有個「文章查詢/Posts Query」的選項，但JetEngine官方更推薦我們用查詢構建器（Query Builder）來創建更靈活的自定義文章查詢，然後在「自定義查詢」標籤頁里調用即可。 對於複雜篩選，我確實覺得查詢構建器更好用。
最後，點擊“發佈/更新”，你的頁面就做好了。
第四步：檢查成果
發佈後，一定要去網站前臺看看效果。
- 打開那個頁面，檢查清單是否正常顯示，圖片、標題、摘要對不對。
- 重點測試一下點擊行為——無論是點擊整個卡片還是「閱讀更多」按鈕，看是否能正確跳轉到對應的文章詳情頁。
總結一下
以上就是我用JetEngine和Elementor創建文章或自定義文章（CPT）的清單範本的完整流程。 簡單來說，就是先創建一個清單範本（Listing）並設計好單張卡片的樣式，然後用清單網格小工具（Listing Grid）把它放到頁面上。 掌握了這個方法，你就能輕鬆地為網站上的各種內容（文章、產品、作品集）創建出風格統一、內容動態更新的展示區了。 希望我的這些經驗對你有説明。
