[WordPress][教學][架站] 外掛#03. ACF 超好用客製化欄位工具

Advanced Custom Fields 是一個讓你可以進階的利用PHP客製化樣式的超級工具

作者: 進度條編輯群更新日期: 2019/04/21

此文章也有影片介紹，可以搭配影片一起學習！

01. ACF 超好用客製化欄位工具 (所屬課程)

以下正式開始文章

Advanced Custom Fields 是一個讓你可以進階的利用PHP客製化樣式的超級工具。

如果你嘗試在「樣式 theme」中加入本來沒有的功能，比方說加入第二個內文區塊，或是在頁面內容以外的區塊加入多張圖片，這都會需要動到版型。像這樣的功能其實WordPress本來就有，叫做自訂欄位(Custom Fields)，但是使用起來比較陽春。很多的不方便。

例如像「進度條課程銷售頁」這樣的頁面，如果你沒有什麼概念，應該是完全無法自己把「前台」與「後台」改出來。

首先，這個頁面應該會是一個文章(Post)，而非「頁面」(Page)。因為我們有很多的課程，而且不斷的更新。但是如果你真的要用「頁面」做也不是不行，因為實際上也不會每天都出新課程。因此變動率不高。但是如果你想用類別(Category)自動生成頁面的話，還是必須要用文章才行。

當然，想要的話也可以自訂文章類別，不過這並不在我們這篇要講的範圍。

再來麻煩的到了，先不論UI的縮放功能。就直接看到的關聯性來說，每個課程，有很多章節，章節必須要可以排序與新增刪除，然後每個章節裡面有影片，影片也要可以排序與新增刪除。然後這些功能的「使用者管理」必須做在該文章(Post)裡面管理頁面裡面！！

先不論關聯性到底連不連得起來，光是後台使用者介面上面就非常讓人頭痛。真的自己刻的話，工期應該是以週來算的。但是如果你使用ACF，大概一天就可以搞定基本的，至於實際上的要花幾天，就還要看你的UI設計的多複雜了。

不過上面說的功能是ACF Pro 付費版的 The Repeater Field 功能才有可能可以實現。當然，我相信還有很多外掛可以做到這樣的事情。但是WordPress外掛最好不要使用太多，因為外掛的作者彼此在設計的時候是不會考慮到其他外掛的。因為愈多的外掛，相衝突的機率越高，後台的廣告也會越多。過度雜亂的後台大概只有開發的那個人看得懂吧！

ACF 除了 The Repeater Field 功能外還有很多好用的功能，算是一個常用功能大集合，而且相當穩定，又因為套件名聲響亮，所以其它套件多半不會想跟他相衝突，甚至基於ACF去再開發外掛。不過我們這堂課主要還是免費版本的介紹，所以就抓幾個簡單的功能示範給大家看。

(需要會一點點PHP的概念，ACF 好像沒有聯盟行銷，所以推廣他我們也沒有錢賺。)

ACF(Advanced Custom Fields)外掛

使用ACF要先開啟文章自訂欄位(Custom Fields)的功能，首先到新增文章頁面-> 右上方有一個顯示選項 -> 自訂欄位打勾。

自訂欄位的功能是除了在Wordpress既有的文章顯示內容，還可以另外增加區域讓你可以自行增加欄位，例如圖片、影片等等...，預設是沒有開起來的。

其實ACF算是「自訂欄位」的UI優化版本，所以進行接下來的ACF安裝後，「自訂欄位」的UI會被隱藏起來喔！

Step.1 安裝並啟用外掛

首先到Wordpress後台->外掛->安裝外掛->搜尋 Advanced Custom Fields，安裝完成後並啟用該外掛

Step.2 開始應用

當啟用外掛之後，左方的控制台會多出一個ACF外掛控制台，顯示為(Custom Fields)，並點選「Add New」。

Add New Field Group的概念是說，會把很多客製化的欄位放到一個群組，然後再把這個群組掛到文章或是頁面底下。我們先把欄位填上。

Field Type

這個選項是看你要做甚麼功能用而定，裡面有很多Html的語法可以做選擇。

Required

該欄位如果選擇YES則是控制如果今天設定的是上傳圖片，如果沒有選填圖片，那就無法儲存，反之NO的話，就可以直接儲存。

Return Value

該欄位是選擇回傳的值。可以選擇Obiect/URL/ID，在這邊選擇URL作範例。

Preview Size

範例選擇Full。

Library

是否要開啟所有的函式庫，選填All。

Conditional Logic

該此項目是給Field Type 為 select、checkbox、true/false、radio fields，才會有選項。

注意:下方有一個Close Field，按下去上方欄位會收起來，在按Edit會打開，不過Close Field並不會儲存設定哦，必須按發表才會儲存設定。

Location

在這邊選擇Post Type is equal to post ，意思是說在文章中都會多出這個欄位。

下一步我們直接到新增文章來看，看看ACF在文章中產生了甚麼樣的欄位。

新增圖片並發表之後，到文章前台觀看，會發現沒有圖片顯示出現，這就是我們接下來要做的事情，就是到程式碼裡面來做修改!
「twentyseventeen -> template parts -> post -> content.php」

要顯示圖片呢，要在程式碼裡面加上一個函式 get_field ，我們可以到ACF的網站並搜尋get_field的用法。

ACF裡面的API是PHP的，所以要用PHP的語法來撰寫，先在裡面打上程式碼。

這時候要來查詢一下要放甚麼field呢!還記得在ACF的控制台裡面有填寫一欄「Field Name 」(忘記可以往上看圖片)，這一欄寫的是"圖片"。

之後再寫入img 的來源。

這時候回到文章的前台，就可以看見剛才所上傳的那一張圖片顯現出來了。(get_field這一段程式碼可以調整位子，並不一定要放在範例位置)

下一步要來新增"文字"，回到AFC的控制台，進入Edit Field Group的地方，點選add field。

新增的文字為:圖片標題，所以把欄位填好。

其他下面所填的內容就跟圖片不太一樣了。這些設定就先打上去，之後我們再來看會產生甚麼效果。以下設定好之後點選更新。
Default Value:預設值
Placeholder Text:示意
Prepend:input前面
Formatting:HTML語法的顯示
Character Limit:文字的最大數

回到文章編輯裡面，就可以看到剛剛新增圖片的地方還在，下方還多了一塊Field，可以填寫圖片標題的地方。

再回到文章前台，會遇到跟圖片有一樣的情況，就是沒有出現圖片標題的欄位，所以下一步我們要來顯示圖片標題的欄位。
回到Brackets「twentyseventeen -> template parts -> post -> content.php」。一樣是使用get_field，只是顯示的語法不一樣了!