Advanced Custom Fields系列二:透過Elementor於前台顯示自訂欄位

在前一篇文章Advanced Custom Fields系列一:在文章中新增自訂欄位中,FirstHatch談到透過Advanced Custom Fields新增自訂欄位,並指定到特定的文章類型,供使用者填入固定資訊。接著,還需要讓新增欄位顯示在前台的特定位置才能算是大功告成。本篇將著重介紹Advanced Custom Fields自訂欄位在前台文章的顯示方法。

在前台顯示自訂欄位的方法

在前台顯示Advanced Custom Fields自訂欄位的方法常見兩種,以下將分別介紹:

  1. 透過Elementor顯示自訂欄位

    Elementor的部分元素可以取用網站的動態資料,例如:文章/頁面標題、自訂欄位等等。因此,可以透過這個功能抓取透過Advanced Custom Fields新增自訂欄位中輸入的值,並將其顯示於前台。本文將著重於這個方法的介紹與說明。

    Advanced Custom Fields系列二:透過Elementor於前台顯示自訂欄位 1

  2. 透過編輯single.php等相關文件

    根據Advanced Custom Fields的操作說明文件,可以透過透過編輯single.php等相關文件來插入自訂欄位並調整其樣式。然而,這個方法對於一般使用者來說是比較複雜的,必需了解WordPress的運作原理以及PHP、CSS、HTML等編寫方式才能讓自訂欄位顯示在正確的位置。

透過Elementor於前台顯示自訂欄位

根據Elementor的官方文件,Elementor能夠與Advanced Custom Fields整合,在透過Elementor元素輸入文字(text)、連結(URL)及圖片(image)時,都能夠取用網站的動態資料,也可以顯示Advanced Custom Fields的自訂欄位值。其中,文字、連結及圖片所對應到的Advanced Custom Fields自訂欄位如下:

Advanced Custom Fields系列二:透過Elementor於前台顯示自訂欄位 2

舉例來說,FirstHatch專案頁的專案圖庫,即是利用Advanced Custom Fields PRO新增圖庫欄位(Gallery)到指定文章類型,再利用Elementor中的基本圖庫元素(basic gallery)來顯示自訂圖庫欄位的資料。

Advanced Custom Fields系列二:透過Elementor於前台顯示自訂欄位 3

分享至:

發佈留言