2020-07-06

客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

WordPress網站的外觀一般承載自所選用的主題;然而,有時主題的文章版面不一定符合使用者介面及使用者體驗(UI/UX)的需求,又或者呈現的內容有固定格式,網站管理者希望透過填寫欄位的方式,將內容直接以相同版面呈現,進而減少每次更新內容重新排版的時間。在這些情況,就可以利用Elementor Pro、Advanced Custom Field PRO(ACF PRO)及Custom Post Type UI(CPTUI)來達到客製化文章版面的目的。在本文中,FirstHatch一起孵將介紹相關外掛及適合客製化文章版面的情境,最後實作出一個客製化文章版面。

相關外掛

在本文中,會使用到的外掛共有三個,分別為Elementor pro、Advanced Custom Field PRO(ACF PRO)及Custom Post Type UI(CPTUI),以下將分別介紹其基本功能及特色。

Elementor Pro

Elementor是免費的WordPress的頁面編輯器,以視覺化的方式,讓使用者直觀地使用段(section)、欄(column)及Elementor元素(Elementor element)規劃網頁內容。一般會利用段和欄來完成頁面框架,再利用Elementor元素完成頁面內容。下圖中,橘色實現為段,虛線為欄,其餘則為Elementor元素。

elementor section and column | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

Elementor同時也製作了付費版本Elementor Pro,提供使用者更多進階的功能,讓使用者能將網站從頭到腳完全客製化成自己喜歡的樣式,其最重要的特色便是主題建構器(theme builder)、WooCommerce建構器(WooCommerce builder)及更多的動態內容元素(dynamic content element)等,讓使用者能夠客製化網站頂部、文章列表頁、商品頁,甚至抓取網站自訂欄位內容,達到客製化頁面的目的。

Advanced Custom Field PRO(ACF PRO)

Advanced Custom Fields是免費外掛,提供了30幾種欄位類型,讓使用者依據需求新增欄位至任意位置,並於透過編輯主題的方式於前台顯示。另外,開發商同時也製作了付費版本Advanced Custom Fields PRO,提供更多進階欄位類型,例如:重複欄位(repeater field)以及圖集欄位(gallery field)等。

ACF field type min 1 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

Custom Post Type UI(CPT UI)

Custom Post Type UI是免費外掛,能夠建立不同文章類型,供使用者有效管理網站內容。以FirstHatch一起孵為例,下圖橘色實現即為部落格文章及專案文章等兩種不同的文章類型。

CPTUI 1 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

適合情境

根據FirstHatch一起孵的經驗,目前碰過適合客製化文章版面的情境,主要有以下幾個特徵。

  • 多於一種文章類型,例如:部落格、作品、產品等等。
  • 內容會持續更新,且希望以不同版面呈現不同分類的內容,例如:活動紀錄、最新消息等等。
  • 內容格式固定,例如:作品、產品等等。

實作教學

以下將以FirstHatch一起孵的專案頁為例,結合Elementor Pro、Advanced Custom Field PRO及Custom Post Type UI等三個外掛,打造客製化文章版面。

第一步:繪製線框圖

FirstHatch一起孵規劃專案要涵蓋專案描述、特色及成果照片,以此為基礎,繪製以下線框圖,作為後續步驟的參考。

wireframe 1 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

第二步:用Custom Post Type UI新增文章類型及分類表

由於要將專案與一般文章分開管理,故需要先透過Custom Post Type UI新增文章類型及對應的分類表。

在後台側欄的「CPT UI」選單中點選「Add/Edit Post Types」,進入新增文章類型的設定的頁面。這個頁面共可分成三個區塊,由上而下分別為「Basic settings」、「Additional labels」、「Settings」。其中,「Additional labels」的部分,如果沒有特殊需求,可以直接略過,故在此不多加贅述。

在「Basic settings」的區塊,所有內容均為必填欄位,說明如下。

  • Post Type Slug:這個欄位最為重要,會作為新文章類型的文章網址的一部分於前台顯示,只能填寫英文或數字。
  • Plural Label:後台側欄的顯示名稱,中文、英文、數字皆可。
  • Singular Label:與Plural Label相同內容即可。

CPTUI 2 min | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

在最下方的「Settings」區塊中,大部分的欄位維持預設值即可,以下僅說明較為重要的欄位。

  • Has Archive:這個欄位決定是否需要文章列表頁。
  • Exclude From Search:如果網站有提供使用者搜尋的功能,透過這個欄位可以決定是否要將這個文章類型排除於搜尋之外。
  • Hierarchical:這個欄位決定這個文章類型是否能有上下階層關係。
  • Query Var:保持True即可。
  • Supports:這個欄位決定這個文章類型的文章編輯頁的控制選項。
  • Built-in Taxonomies:這個欄位可以選擇這個文章類型要使用的分類。可以選擇與預設文章類型使用相同的「分類(WP Core)」、「標籤(WP Core)」。也可以依照需求,自行新增的自訂分類及標籤,使這個新的文章類型與預設文章類型完全分開管理。

CPTUI 3 min | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

完成新增文章類型之後,可接著透過後台側欄的選單進入「Add/Edit Taxonomies」的頁面。這個頁面同樣可以分成「Basic settings」、「Additional labels」、「Settings」等三個區塊,但僅需注意「Basic settings」,其餘內容可以維持預設。以下為「Basic settings」的欄位說明。

  • Taxonomy Slug:作為分類表的網址的一部分,只能填寫英文或數字。
  • Plural Label:後台顯示的名稱,中文、英文、數字皆可。
  • Singular Label:與Plural Label相同內容即可。
  • Attach to Post Type:選擇分類表要對應的文章類型。

CPTUI 4 min | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

到此為止,即完成了新文章類型及分類的新增,可於左側選單找到新增的文章類型的按鈕。

CPTUI 4 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

第三步:用Advanced Custom Field PRO新增自訂欄位

由線框圖來看,除了Project title和Project description之外,還需要設置Project feature image 1&2、Project feature description 1&2以及Project gallery等欄位。其中,Project title和Project description可以使用原本的文章欄位,故不需要另外設置。其餘則需要透過Advanced Custom Field PRO來新增自訂欄位。

在後台側欄的「自訂欄位」選單中點選「新建」,進入新增自訂欄位的頁面。這個頁面共可分成三個區塊,由上而下的區塊名稱分別為「新增欄位」、「位置」及「設定」。本次教學需要操作到的僅有前兩個區塊而已。

本次需要新增的欄位類型及數量分別為兩個「圖片」欄位、兩個「文字區域」欄位及一個「圖庫」欄位。點擊「新增欄位」後,分別輸入「欄位標籤」及「欄位名稱」,再選擇「欄位類型」後,即可得到如下圖的欄位清單。另外,一般來說,在設置欄位類型時,其餘選項保持預設即可。

acf 3 1 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

接著,在「位置」區塊將自訂欄位的顯示條件設定為「文章類型」、「等於」、「新文章類型的名稱」。

ACF 4 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

按下右側的「更新」後,即完成了新增自訂欄位的步驟。此時,可以進入新文章類型的文章編輯區,檢視新增的自訂欄位。下圖將線框圖和新文章類型的文章編輯區放在一起對照參考。

acf | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

第四步:用Elementor Pro製作文章版面

在後台側欄的「Templates」選單中點選「主題建構器」,再點選「新增」來建立新版型。由於本次的目的是要客製化文章版面,故在「選擇您想要處理的版型類型」處選擇「單頁」,「選擇文章型別」處則選擇第二步中新增的文章類型。接著,點擊「建立版型」進入Elementor編輯區。

elementor 2 1 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

根據線框圖,文章版面共可以分成上、中、下三個區塊。在上面的區塊中,共有Project title、Project description、Project tag等三個欄位。製作時,先新增一個「段」並選擇「兩欄」的架構,如此便可以將內容集中在左半邊。再分別拉入「單頁」元素中的「文章標題」、「文章內容」及「文章資訊」。

elementor 2 min 1 1 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

在中間的區塊,共有Project feature image 1&2和Project feature description 1&2等四個欄位。在製作時,先新增一個「段」並選擇「三欄」的架構,調整左右兩側的欄寬後,再於中間欄拉入「基本」元素中的「Inner Section」,共拉入兩個,即可再中間欄製作出四個欄位。

elementor 3 min 1 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

接著,拉入「基本」元素中的「圖片」及「文字編輯區」,依序利用「Dynamic Tags」帶入第三步中新增的自訂欄位。

elementor 4 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

elementor 5 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

下面的區塊的製作方法與中間區塊相似,新增一個「段」後選擇「一欄」的架構,再拉入「專業版」元素的「藝廊」,利用「Dynamic Tags」帶入第三步中新增的自訂欄位Project gallery。

elementor 7 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

最後,依照自己的設計調整顏色、邊距等方式,即完成客製化版面的製作。下圖為線框圖和Elementor編輯區的對照參考。

elementor 6 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

第五步:更新文案並檢視成果

將文案依照欄位輸入並發佈後,即可於前台檢視製作成果。下圖為線框圖和前台頁面的對照。

elementor 8 | 客製化文章版面:結合CPT UI及ACF PRO的Elementor Pro教學

相關文章
Dynamic Content for Elementor外掛介紹及動態內容案例
5個好用的Elementor第三方延伸外掛