別再被版型綁架！ACF 終極指南：用客製化欄位打造 WordPress 夢幻後台

哈囉，我是浪花科技的 Eric。身為一個天天跟 WordPress 打交道的工程師，我敢說，最常聽到的哀嚎之一就是：「我只是想改個標題，怎麼整個版面都跑掉了？」或是「這個區塊的內容好難編輯，客戶根本不會用！」

你是不是也遇過這種情況？花了好幾個禮拜精心刻好一個超美的頁面版型，結果交給客戶或行銷團隊後，他們只是想改個文字、換張圖片，就把你寫好的 HTML 架構弄得亂七八糟，最後還是得回來找你收拾殘局。唉，這種「在我電腦上明明是好的」的惡夢，我們都懂。

今天，我就要來跟你介紹一個解放你我的神兵利器：Advanced Custom Fields (ACF)。這不只是一個外掛，它是一種全新的工作流程，一種能讓你打造出結構化、高彈性、而且讓使用者（對，就是你的客戶）愛不釋手的 WordPress 後台的魔法。準備好了嗎？讓我們一起告別混亂的內容編輯器，打造真正客製化的夢幻後台吧！

ACF 是什麼？為什麼你非學不可？

簡單來說，WordPress 原生的編輯器，不管是傳統編輯器還是古騰堡，核心概念就是一塊大畫布，讓你自由寫文章、放圖片。這對於部落格文章來說很棒，但對於需要「固定結構」的內容，例如：產品介紹頁、團隊成員列表、活動時間表…等等，就顯得力不從心了。

ACF 的作用，就是讓你跳脫這塊大畫布的限制。它允許你在文章、頁面、甚至是使用者或分類項目上，新增各種「自訂欄位」（Custom Fields）。這些欄位可以是文字、數字、圖片、檔案、甚至是 Google Map 定位。你可以預先規劃好頁面需要的資料結構，然後在後台建立對應的欄位讓使用者填寫。

這帶來什麼好處？

• 資料與呈現分離：這是最重要的核心概念。內容編輯者只需要專注在「填寫資料」，像是輸入產品名稱、上傳規格圖、填寫價格。而這些資料要如何「呈現」在網站前台，則完全由我們工程師在佈景主題的程式碼中控制。再也不用擔心使用者手殘刪掉一個 `<div>` 標籤了！
• 絕佳的使用者體驗：你可以為客戶打造一個「所問即所得」的後台。需要填寫活動日期？就給他一個日期選擇器。需要上傳多張產品圖？就給他一個圖片庫欄位。直覺的操作會讓你的客戶覺得你超貼心。
• 高度彈性與可擴充性：網站的需求會變，但有了 ACF，你可以輕鬆地為現有的內容類型增加新欄位，而不需要去修改舊有的內容。

ACF 核心功能大解析：從基礎到 Pro 版神兵利器

ACF 分為免費版和付費的 Pro 版。免費版的功能已經非常強大，但 Pro 版的幾個獨有功能，坦白說，一旦用過就回不去了。我強烈建議，如果你是認真要用 WordPress 開發網站的，直接投資 Pro 版，絕對值回票價。

基礎欄位類型 (免費版就很夠用)

ACF 提供了超過 30 種欄位類型，涵蓋了你可能需要的大部分情境：

• 文字 (Text) / 文字區域 (Text Area): 最基本的單行或多行文字輸入。
• 圖片 (Image) / 檔案 (File): 方便使用者上傳媒體。
• WYSIWYG 編輯器: 一個小型的 WordPress 內容編輯器。
• 選擇 (Select) / 核取方塊 (Checkbox) / 單選按鈕 (Radio Button): 提供預設選項讓使用者選擇。
• 日期選擇器 (Date Picker): 確保使用者輸入標準的日期格式。

必學的 Pro 版三大天王：Repeater, Flexible Content, Gallery

接下來是重頭戲，這三個 Pro 版獨有的欄位，是 ACF 成為神器的關鍵。

1. 中繼器 (Repeater Field)

使用情境：當你需要一組「可重複」的欄位時，例如：一個產品的多個規格（規格名稱、規格值）、一個團隊的多位成員（成員照片、姓名、職稱）。

如果沒有 Repeater，你可能要預設 10 組欄位（成員1姓名、成員1職稱、成員2姓名…），但如果客戶只有 3 位成員，後台就會留下一堆空白欄位，超醜。有了 Repeater，使用者可以自由地「新增一列」來增加成員，要幾個有幾個，乾淨俐落！

2. 彈性內容 (Flexible Content Field)

使用情境：這是 ACF 的終極武器！想像一下，你在做一個 landing page，這個頁面可能由「大圖 Banner」、「關於我們文字區塊」、「三欄式特色介紹」、「客戶見證輪播」等多個不同版型的區塊組成，而且客戶希望可以「自由調整這些區塊的順序」或「新增/刪除某個區塊」。

Flexible Content 就是為此而生。你可以預先定義好數個「版型 (Layout)」，每個版型裡面可以有各自的子欄位。使用者在編輯頁面時，就可以像玩樂高一樣，自由選擇要加入哪個版型，並任意拖曳排序，打造出獨一無二的頁面。

3. 畫廊 (Gallery Field)

雖然 WordPress 內建了媒體庫，但 ACF 的 Gallery 欄位提供了一個更簡單、更直覺的方式來管理一組圖片，並且可以輕鬆地在後端拖曳排序。

實戰演練：如何在佈景主題中呼叫 ACF 欄位資料？

光在後台設定好欄位還不夠，重點是要怎麼把這些資料顯示在網站前台。這部分就需要動到佈景主題的 PHP 檔案了（例如 `page.php` 或 `single.php`）。別擔心，ACF 的語法寫得非常人性化。

假設我們在一個頁面設定了一個叫做 `page_subtitle` 的文字欄位。

基本功：顯示單一欄位

ACF 主要有兩個函式來取得資料：

• `the_field(‘field_name’);`: 直接「印出」欄位的內容。
• `get_field(‘field_name’);`: 「回傳」欄位的內容，讓你可以存到變數裡做後續處理。

在你的 `page.php` 迴圈中，可以這樣寫：

<h1><?php the_title(); ?></h1>
<?php if( get_field('page_subtitle') ): ?>
    <h2><?php the_field('page_subtitle'); ?></h2>
<?php endif; ?>

小囉嗦一下：我習慣用 `if( get_field(‘…’) )` 來判斷欄位是否有值，這樣可以避免在沒有內容時還印出空的 HTML 標籤，這是個好習慣。

進階應用：搞懂 Repeater 迴圈

假設我們有一個 Repeater 欄位叫做 `team_members`，裡面有 `member_photo` 和 `member_name` 兩個子欄位。

<?php if( have_rows('team_members') ): ?>
    <ul class="team-list">
    <?php while( have_rows('team_members') ) : the_row(); ?>
        <?php 
        $photo = get_sub_field('member_photo');
        $name = get_sub_field('member_name');
        ?>
        <li>
            <img src="<?php echo esc_url($photo['url']); ?>" alt="<?php echo esc_attr($photo['alt']); ?>" />
            <p><?php echo esc_html($name); ?></p>
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>

看懂了嗎？`have_rows()` 和 `the_row()` 的組合就像 WordPress 原生的 The Loop，用來遍歷 Repeater 裡的每一列資料。在迴圈裡面，我們則是用 `get_sub_field()` 或 `the_sub_field()` 來取得子欄位的資料。

邁向新世代：用 ACF Blocks 打造你專屬的古騰堡區塊

隨著古騰堡編輯器成為主流，ACF 也與時俱進，推出了超殺的功能：ACF Blocks。它讓你可以用熟悉的 PHP 和 ACF 欄位，來建立自己的古騰堡區塊！

這代表什麼？你不再需要去學 React 來開發區塊了（雖然學了也很棒啦）。你只需要在 `functions.php` 註冊一個區塊，然後建立一個 PHP 檔案來當作區塊的模板，模板裡面的寫法就跟你前面學的 `get_field()` 一模一樣。

在 `functions.php` 中加入：

add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {
    if( function_exists('acf_register_block_type') ) {
        acf_register_block_type(array(
            'name'              => 'testimonial',
            'title'             => __('客戶見證'),
            'description'       => __('一個自訂的客戶見證區塊。'),
            'render_template'   => 'template-parts/blocks/testimonial.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array( 'testimonial', 'quote' ),
        ));
    }
}

然後，你就可以在 `template-parts/blocks/testimonial.php` 這個檔案裡，用 ACF 的函式來呈現你在這個區塊上設定的欄位（例如 `author_name`, `quote_text`）。這讓非工程師使用者也能在古騰堡編輯器中，以視覺化的方式加入你精心設計的、擁有複雜功能的區塊，同時又不用擔心他們會破壞版面。

工程師的私房筆記：ACF 使用的最佳實踐

• 善用 ACF JSON：ACF 可以將你的欄位群組設定儲存成 JSON 檔案在你的佈景主題資料夾中。這對於版本控制（Git）和團隊協作至關重要，確保每個開發者的欄位設定都是同步的。
• 組織你的欄位群組：不要把所有欄位都塞在同一個群組。依照頁面範本、文章類型或功能來分開建立欄位群組，並設定好顯示條件，讓後台保持清爽。
• 別忘了效能：ACF 很強大，但也別濫用。在一個頁面載入上百個欄位，還是會對效能造成影響。思考一下資料結構是否合理，有時候適度合併或簡化是必要的。

ACF 徹底改變了 WordPress 的開發方式，它讓我們能更專注於打造優雅的資料結構與流暢的使用者體驗，而不是整天在幫客戶修復跑版的網頁。從 Repeater 的彈性列表，到 Flexible Content 的客製化頁面產生器，再到 ACF Blocks 的無縫古騰堡整合，掌握了 ACF，就等於掌握了打造任何複雜 WordPress 網站的鑰匙。

當然，ACF 的世界遠不止於此，還有選項頁面 (Options Page)、條件邏輯 (Conditional Logic) 等更多強大功能等著你去探索。希望這篇文章能為你打開一扇新的大門，讓你對 WordPress 開發有全新的想像。

延伸閱讀

• 不只是文章和頁面！解放 WordPress 潛能，用 Custom Post Type 打造獨一無二的網站結構
• 改壞主題就回不去了？資深工程師手把手教你用「子佈景主題」安全客製化 WordPress！
• WordPress 開發的任督二脈：搞懂 Action & Filter Hooks，客製化功力大爆發！

如果你對於如何將 ACF 導入你的專案，或是需要更進階的 WordPress 客製化開發服務，甚至是遇到難解的技術瓶頸，都歡迎與浪花科技的團隊聊聊。我們樂於分享我們的經驗，幫助你的網站提升到新的層次。立即填寫表單，讓我們一起打造更棒的網站！