Elementor系列之五:結合Custom Post Type UI及Advanced Custom Fields自訂文章類型、欄位並客製化文章版型

情境

在架設企業官網時,有時會需要管理不同的文章類型,舉例來說,FirstHatch官網就有作品頁和一般文章頁兩種文章類型。如果所有文章都放在WordPress預設的文章(Posts)之下的話,可能會造成未來管理不易;此外,有些文章類型,像是作品頁,具有重複的結構特徵,需要以固定格式呈現,如果和其他普通的文章混在一起管理的話,無法為特定文章設計版型並大量套用,就會陷入需要不斷重複排版的窘境。因此,本文將針對此一情境提出解決方案,以FirstHatch的專案頁為例,透過Custom Post Type UI及Advanced Custom Fields自訂文章類型及欄位,並使用Elementor製作特定文章類型的版型。

使用到的外掛

  1. Elementor
  2. Custom Post Type UI
  3. Advanced Custom Fields PRO

解決方法

Step 1. 透過Custom Post Type UI新增文章類型

由於FirstHatch的專案頁具有固定格式,需要將頁面標題、分類、標籤、內容、圖庫、連結等置於特定位置,故有別於一般部落格文章,需要分開管理。因此,透過Custom Post Type UI新增了一個名為Projects的文章類型。此外,由於希望將專案頁的分類和標籤分開管理,故同樣透過Custom Post Type UI這個外掛新增了Project_category和Project_tag兩個分類學,並將其指派給Projects文章類型。

Custom Post Type UI的相關介紹

Elementor系列之五:結合Custom Post Type UI及Advanced Custom Fields自訂文章類型、欄位並客製化文章版型 1 Elementor系列之五:結合Custom Post Type UI及Advanced Custom Fields自訂文章類型、欄位並客製化文章版型 2

Step 2. 透過Advanced Custom Fields在新文章類型加入自訂欄位

新增完Projects文章類型後,可以發現Projects文章編輯區已具有頁面標題、分類、標籤及內容的欄位,但缺少圖庫及連結的欄位。雖然這兩項也可以直接在內容欄位輸入,但由於每個專案都需要置入這些內容,故希望能夠於特定欄位輸入,並於Step 3中用Elementor排版。因此,透過Advanced Custom Fields PRO於Projects文章類型中插入圖庫及連結的欄位。

Advanced Custom Fields的相關介紹

Elementor系列之五:結合Custom Post Type UI及Advanced Custom Fields自訂文章類型、欄位並客製化文章版型 3

Step 3. 透過Elementor為新文章類型設計版型並顯示自訂欄位

在Elementor的主題建構器中,新增單頁版型並指定文章型別為Projects文章類型,即可開始建立Projects文章類型的版型。

Elementor系列之五:結合Custom Post Type UI及Advanced Custom Fields自訂文章類型、欄位並客製化文章版型 4

分別將Elementor單頁元素中的文章標題元素、文章資訊元素及文章內容元素依照自己的需求拉到編輯區中適當的位置,到此即完成插入一般文章預設欄位的步驟。

Elementor系列之五:結合Custom Post Type UI及Advanced Custom Fields自訂文章類型、欄位並客製化文章版型 5

Advanced Custom Fields自訂欄位的部分,則透過Image Gallery元素和按鈕元素中的動態圖示(dynamic icon)選擇取用Advanced Custom Fields自訂欄位值即可。

Elementor系列之五:結合Custom Post Type UI及Advanced Custom Fields自訂文章類型、欄位並客製化文章版型 6

Step 4. 完成專案頁內容

最後,即可進入Projects文章類型新增文章開始撰寫內容。

分享至:

發佈留言