今天來分享一個客製化文章欄位的方法

為什麼需要客製化文章欄位?

wordpress是一個製做網頁很厲害的工具

它擁有許多套件、外掛、佈景主題

所以能夠做出各式各樣的樣式

但是那終究是別人做好的

不會是獨一無二的東西

因此可以透過自己客製化wordpress主題來擁有獨一無二的網站

而另一個好處就是如果是用別人的佈景主題

一定會有用不到的東西

它會造成網站變得比較肥大

這時自己製作wordpress佈景主題就是個不錯的選擇

什麼時候會用到Advanced Custom Fields?

自製自己的佈景主題時

會需要手刻一個自己的網站樣式(html css js)

然後串接到wordpress的後端

當我們自己製作了幾個頁面

會想要通過Wordpress的文章來修改網頁內容

而非直接去修改程式碼的時候

例如網站比較常見的最新消息或是banner圖片

這種會隨著時間常常修改的東西就會需要一個能夠方便修改的方法

這時候我們就可以使用Advanced Custom Fields

如何使用Advanced Custom Fields?

這邊以一家當舖網站為例子

這個是他首頁的最新消息區塊

而在單獨最新消息的頁面就有所有最新消息

在這種情況我們當然不希望這兩個地方是分開寫的

因為他們的內容明明是一樣的

所以我們會希望能從同一個地方拿到最新消息的資料

再放到我想要呈現的地方

 

WordPress是以部落格為基礎架構的系統

因此我們想要新增最新消息時

他給我們的欄位就只有這樣很陽春的標題和內文

 

如果我們想要加上放圖片的欄位

我們先下載好外掛開啟

啟用後左邊會看到自訂欄位的選項

點選自訂欄位->新建 就會進入下圖

這邊我先將欄位命名”最新消息”

新增欄位

這邊比較重要的就是

欄位標籤 命名欄位

欄位名稱 程式碼會需要用到的名稱

欄位類型 這邊我們選圖片

回傳格式 我們會將回傳的值放在img的src所以選擇圖片網址

如下圖

在下面這也是比較重要的選項

選擇我們要使用的區塊 這邊選文章來做最新消息的區塊

這時我們到文章就會看到出現新的一個可以載入圖片的欄位

程式碼的部分

我們使用get_field這個函式

第一個參數就是我們上面設定的欄位名稱

$post_img 這時就是一個圖片的網址

這樣我們就可以透過文章使用我們的載入圖片到我們寫的img tag裡面了