[WordPress]客製化後台功能表單教學 Advanced Custom Fields

Advanced Custom Fields

很多 WordPress 的作者會需要它的後台客製化,可以增加一些功能表單欄位去控制前台的設計,在這裡介紹一個外掛叫做 Advanced Custom Fields (WordPress ACF),這個外掛用得好,幾乎可以滿足所有開發者的需求,ACF 可以實現強大的後台功能,並在加入統一樣式方便管理前台,還能夠加入不同的欄位(title, body, links, content…),甚至是程式(CSS, JavaScript…) 到每篇文章裡,實現完美客製化後台的需求。

Advanced Custom Fields 使用教學 (以文章下方表單為例)

*本文含些程式基礎,新手使用前請務必先備份您的WordPress網站

首先先下載 Advanced Custom Fields 這個外掛,然後進入它的設定頁面。
Add new field
↑這裡我們選擇 Add New 加入一個新的表單

post type↑接著打上名稱,在Rules地方選擇 Post Type = post,代表在每一個文章裡面設定每一個表單

position and styles
↑在 Position 那裏選擇 Normal (after content),然後在 Style那裡選擇 Standard (WP metabox),最後按下 發表 來儲存。

show field
↑此時如果你隨意進入一篇文章裡面,你應該會看到我們剛剛建立的表單出現在文章內容的下方,不過此時還沒有表單欄位,所以我們必須回去再做設定。

add field
↑回去ACF設定介面,選擇 Add Field

↑這裡如下設定,這裡要特別注意的是 Field Name,到時讀資料時需要放上一樣的名字

↑選擇Convert HTML into tags,然後按下更新儲存。

 

最後我們要找到POST文章的php檔案,一般來說在 wp-content/themes/你的佈景主題名字/content.php裡面,想加入css或js也可以打開hearder.php或footer.php,在你想要的位置加上以下code就完成囉!

<?php the_field(‘review_title’); ?>
// 括弧裡面與Field Name名稱相同

進階使用案例:

$review = get_field_object(‘review_title’);
// 宣告欄位object
if(!empty($review[‘value’])){
//如果欄位value(也就是field值)不等於零的話
echo $review[‘label’];
//輸出標籤欄位
echo $review[‘value’];
//輸出欄位的值
}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

2,693 瀏覽人次