簡介:Listings 文章列表
把文章寫好後,當然希望展示自己努力的成果!使用Elementor Pro的話,你可以透過“Posts”插件做到列表效果。但使用該插件也有很多局限,例如說它對顯示的內容沒有多大的自訂空間,這對於使用JetEngine創造“自訂文章類型”的用家尤其不利。
而本教學介紹的JetEngine“Listings”,是一個自訂列表模板的功能,它尤其適合:
- 使用Elementor免費版的的用家(缺乏“Posts”插件);
- 想自訂列表的內容(這也是最常見的使用原因);
- 打算自訂歸檔頁面(Archive Pages)。
前期準備:創造“自訂文章類型”
為了展示“Listings”功能,我特意創造了用於教學示範的文章類型 – “國家介紹”。
*若你本身已建立有文章類型,可跳過本部分。

“國家介紹”用於展示一些國家的基本資訊。首先我為文章添加一些必要模組,例如標題、文字輸入區、摘錄、代表圖片。

然後在客製化欄目 (Meta Fields)加入一些欄目,用以補充資料。由於展示關係,我特意設了不同的欄目類別,包括文字、日期、多選和數字。
*本教學使用了freepik.com的免費圖片,因此添加了“Photo Credit”欄位用以合法使用。

最後,我利用“JetEngine Taxonomies”為國際添加了“國家類型”用以分類這些地方的特色,比如說風景類、玩樂類等。

設置完畢!現在可以輸入不同國家的資料。

總共創造了6個國家。

建立新的列表
文章準備好,是時候向世界展示你的佳作了!現在正式開始教大家建立列表。
我們在WordPress控制面板找到 JetEngine,選取 “Listings”,並按“Add New”新增列表。

這時彈出設置方塊。方塊一共4個選項:

- Listing Source – 選擇列表來源的種類。由於“國家介紹”屬於“Posts”文章類別,這裡不用設置。(關於其它的選項,日後會再講解)。
- From Post Type – 選擇列表模板需要套用到哪個文章類型。這裡我選擇“國家介紹”。你可根據你的需要,找出你需要設置的文章類型。
- Listing Item Name – 為這個列表模板改個名稱。我命名為“國家介紹列表”。
- Listing View:你打算使用什麼方式編輯?我是Elementor愛好者,當然使用默認設置~
完成設置後,可按下“Create Listing Item”。
關於動態內容的說明
現在你已進入了建造模式。這是一個什麼都沒有的版面,所有內容都是自己組裝的。
在正式開始前,我先介紹一個重要概念:列表的建造,是基於動態內容的。例如現在我創造了6個國家,它們的標題分別是:南非、俄羅斯、阿根廷、泰國、日本、瑞典。只要我們建立列表時,選取“標題”這個欄目,它便會自動抽取所有所有國家名稱,自動生成6個結果。也就是說,我們只需建立一個列表模板,那麼所有結果便會根據這個模板的結構呈現所有結果!不知道我在說什麼的沒關係,我們一步步把它完成~
建立列表的動態內容有2個方法。對於Elementor Pro的用家,可以隨意使用任意插件並運用“Dynamic Tags”抽取包括標題、圖片甚至自訂化欄目的數據。

選取“Custom Field”後,在“Field”欄位可找到我們建立的自訂化欄目。

而對於非Elementor Pro用家,我們可以使用JetEngine的“Listing Elements”插件,它們可100%做到同樣效果。由於這是JetEngine教學,往後我將一致使用這堆插件。這裡我們使用3個插件,包括:
- Dynamic Field – 這個插件幾乎能抽取所有文章的內容及自訂化欄目。
- Dynamic Image – 用於顯示圖片,例如文章的代表圖片。
- Dynamic Terms – 用於顯示文章所屬的分類。

組合列表內容
說了那麼多,終於進入實際組合階段,把每個國家的不同資訊放到列表。現在增加一個1/1的結構,並把它的寬度調整為600px,用於模擬2欄的列表。

現在我們試試把“國家”的名稱添加進去。選取“Dynamic Field”插件放到結構當中。
*由於顯示關係,我把結構的背景調整為白色。

結果馬上出來了。大家不用擔心為何只出現“南非”一個結果,這只是編輯狀態,當完成後,列表將顯示所有6個國家的結果。
熱身完畢後,我們根據這個插件的不同“Source”和“Object Field”,分別把文章的不同東西加到列表。

不錯吧,資料大部分都顯示出來了。
不過,有些問題出現了。首先,自訂部分欠缺了前綴部分,例如瀏覽日期只有“2018-01-08”,讀者並不知道代表的是什麼東西。為此,我們可在左邊的編輯區往下拉並找到“Field Format”。欄目的動態數據被設定為“%s”,因此在保留這部分的情況下,我們可以在任意位置添加文字。下圖中,我為洲份添加了“洲份: ”。

然後是“前往方法”。大家發現這個動態數據灰掉了,顯示不出結果,原因是我們需要更變輸出結果。由於它在“客製化欄目”中被設為多選性質,因此我們在編輯區設置開啟“Filter Field Output”,然後在“Callback”選取“Checkbox Field Value”。這時動態內容應該會出現了。最後,可根據自己需要修改間隔方法“Delimiter”。當然,前綴也可以添加的,這裡我添加為“前往方法: ”。

“Filter Field Output”也有相當多多玩法,例如它可格式化數字(即在Callback選取“Format Number”,然後就能像Excel般設置數字的表達了!

最後我把背景設為代表圖片(Elementor Pro專享…😅),再把各部位稍作美化,列表便完成了。

在頁面顯示文章列表
現在,你可在你的頁面顯示剛才完成的列表。我開一個名為“國家介紹”的新頁面並使用Elementor進行編輯。把“Listing Grid”拉到頁面。

在編輯區的“Listing”位置選取我們製作的“國家介紹列表”。

這裡我介紹一些本編輯區常用的設置:
- Columns Number – 設置每頁列表顯示多少欄。這裡我設置為“2”。注意,請在設計列表前決定欄的數量,否則所有位置將可能會慘不忍睹!
- Use as Archive Template – 若你是為歸檔頁面添加列表,請開啟。
- Status – 可選取不同狀態的文章,甚至連“待審查”的文章也能顯示。
- Use Random Posts Number -可設置最多和最少的隨機文章數量。(不知道這設置的用意何在…)。
- Posts Number – 顯示的文章數量。若打算顯示所有文章,請把它空掉。
- Is Masonry Grid – 設置為瀑布式佈局。這樣列表結果將像磚塊一樣整齊填滿而忽略高度不一的問題。(開啟本選項,將不會出現“Equal Columns Height”)
- Equal Columns Height – 把每個列表結果的高度統一化。這樣看上去會更整齊。本教學中設為開啟。
- Load More – 這個功能日後我將聯同Pagination的教學再深入講解。
- Post Types – 除了剛開始設置列表時選擇的文章類型外,我們也可“環保地”把列表模板套用到其它文章類型!
- Inject Alternative Listing Items – 這個工功能可為列表注入另外的列表模板從而同時顯示2款列表的外觀。有興趣的話可自行研究。
- Slider – 可將列表設置為滑動顯示。
至於其它“Query”類別設置,將於日後的教學詳細講解。
最後為頁面稍加美化,完成!6個國家悉數呈現!
總結
恭喜你完成第三篇的Crocoblock JetEngine教學!雖然頗為臃長,但本文集合了三個JetEngine的最核心功能:“創造文章類型”、“建立分類”以及主角“文章列表”,尤其這次初次介紹了“Dynamic Contents 動態內容”以及實際應用,對於初學者來說,應該是既複雜又新奇的東西。只要多加練習,不久的將來各位對於動態內容將會更得心應手!想把自己的簡單網頁變成進階高端的美妙作品,繼續留意日後的教學吧😆!
功能更新
2.4.8 (July 21, 2020)
新增行內編輯 (Inline Editing) 列表的內容。
以往要編輯列表(Listings),我們必須先回到管理後台,再選擇 “JetEngine>Listings>你的列表” 才能進行。這種非實時的操作的確有違Elementor的初衷!現在,只要更新至2.4.8,“inline editing the listing items”將容許你實時編輯列表。
(確切來說是2.4.7,由於發現重大bugs,官方即日更新版本修復了問題),用家們趕快更新吧!小弟試用過,真的解決了困擾已久的問題!)