JetEngine: 建立你的“文章列表”

JetEngine: 建立你的“文章列表”

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on telegram
Telegram
Share on email
Email

文章目錄

把文章寫好後,當然希望展示自己努力的成果!JetEngine的“Listings”功能,可幫助你以列表的方式顯示文章,美觀實用。

簡介:Listings 文章列表

把文章寫好後,當然希望展示自己努力的成果!使用Elementor Pro的話,你可以透過“Posts”插件做到列表效果。但使用該插件也有很多局限,例如說它對顯示的內容沒有多大的自訂空間,這對於使用JetEngine創造“自訂文章類型”的用家尤其不利。

而本教學介紹的JetEngine“Listings”,是一個自訂列表模板的功能,它尤其適合:

  1. 使用Elementor免費版的的用家(缺乏“Posts”插件);
  2. 想自訂列表的內容(這也是最常見的使用原因);
  3. 打算自訂歸檔頁面(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個國家悉數呈現!

Play Video

總結

恭喜你完成第三篇的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,官方即日更新版本修復了問題),用家們趕快更新吧!小弟試用過,真的解決了困擾已久的問題!)

Play Video
Oblivions 站長 | Lau B
各位網友大家好,我是 Lau B!業餘網站設計愛好者,從2016年接觸 WordPress 及 Avada 主題,到現在移情別戀深愛 Elementor,我希望在這裡分享一些華語地區相對缺乏的 Elementor 及其第三方外掛的使用教學予各位有志建站的新手老手。
Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on telegram
Telegram
Share on email
Email

歡迎留言

相關教學

WordPress 建站 新手組合

託管主機

SiteGround

超值、優質,而且最近S家把整個服務搬進了 Google Cloud Platform,整體性能更變態、反應速度更高了。

SiteGround

新手最佳入門網頁寄存主機

查看最新優惠

WordPress 主題

Elementor Pro

我曾經購買過5款知名,在今天,包括這個網站在內的4個經營網站,我全把網站們都轉為了Elementor Pro + Hello Theme。別糾纏在那些“全能”的主題了,

Elementor Pro

它不便宜,卻是新手最值得投資的頁面編輯器。而且它包含了很多示範模板,極速美化你的網站!

查看更多

必備插件

Crocoblock 插件

作為Elementor Pro的最佳功能補充插件,Crocoblock提供價廉物美的插件包,進一步完善你的網頁功能。

Crocoblock 插件

通過本網頁的教學,新手輕鬆掌握Crocoblock插件的各種功能!

馬上購買