Advanced Custom Fields系列一:在文章中新增自訂欄位

WordPress預設的文章編輯區中,只有一個欄位能夠輸入內容,所有的內容都只能自己手動排版。如果遇到教案、作品集或是商品等具備重複文案特徵(e.g. 時間、地點、分類、圖片)的內容,則需要重複排版,費時費力。因此,若能夠在後台新增自訂欄位,並於自訂欄位中輸入特定內容,再控制這些欄位顯示於前台固定的位置,則可以大幅減少重複排版的所需的時間。在本文中,FirstHatch將介紹Advanced Custom Fields,並透過這個外掛在文章中新增自訂欄位。

Advanced Custom Fields介紹

Advanced Custom Fields是免費外掛,能夠透過WordPress後台直接安裝,具備三大特色:依據需求新增欄位、將欄位新增至任何位置、在任何位置顯示自訂欄位,使用方式簡單直覺,截至目前為止已累積百萬以上的使用者,免費版共提供了30種以上的欄位類型。

另外,這個外掛也有出了專業付費版Advanced Custom Fields PRO,除了具備Advanced Custom Fields的欄位類型外,還多了6大特色;其中,重複欄位(The Repeater Field)以及圖集欄位(The Gallery Field)是較常用到的功能。

Advanced Custom Fields的使用方法

Advanced Custom Fields的使用方法可以分成兩部分:新增自訂欄位前台顯示自訂欄位,本篇會著重於新增自訂欄位的介紹。

Advanced Custom Fields可以新增很多個群(Group),每個群裡可以設置多個顯示條件相同的自訂欄位,而新增自訂欄位的區塊則可以分成三個部分,由上而下依次為新增(+ Add Field)位置(location)以及設定(setting)

Advanced Custom Fields系列一:在文章中新增自訂欄位 1

在新增的部分,按下+ Add Field,即可新增多個自訂欄位。以下為較重要的設定選項:

  • 欄位標籤(Field Label):後台編輯區顯示的名稱。
  • 欄位類型(Field Type):共有Basic、Content、Choice、Relational、JQuery、Layout等六大類的欄位類型。
  • 必須(Required):開啟即可設為必填欄位。
  • 條件(Conditional Logic):可以設定條件,控制特定欄位的顯示或隱藏。

Advanced Custom Fields系列一:在文章中新增自訂欄位 2

在位置的部分,可以控制自訂欄位的顯示條件,使欄位出現在特定的編輯區。舉裡來說,本篇的目的是要在文章中新增欄位,供重複的文案特徵使用,以減少重複的排版需求。因此,依照下圖設定為若文章類型為文章時,則將自訂欄位顯示於文章編輯區。

Advanced Custom Fields系列一:在文章中新增自訂欄位 3

最後,在設定的部分,則可以設定欄位是否啟用、樣式、位置等等,一般來說,沿用預設值即可,不需要改動。

Advanced Custom Fields系列一:在文章中新增自訂欄位 4

完成新增自訂欄位後,如何將欄位顯示於前台才是最有挑戰的地方,請見Advanced Custom Fields系列二:透過Elementor於前台顯示自訂欄位

分享至:

發佈留言