Block Binding：讓內容與資料來源解耦

2026 iThome 鐵人賽

DAY 21

Vibe Coding

從一句話到一個網站：用 Vibe Coding 開發 WordPress Block Theme 的 30 天系列第 21 篇

18th鐵人賽 wordpress block binding

Oberon Lai

2026-08-24 10:01:54

100 瀏覽

分享至

上一篇介紹的動態區塊資料存在區塊自己的屬性裡，但有時候你要的資料不在區塊身上，它可能在文章的自訂欄位、在網站的全域設定甚至是要透過某個 API 才能取得。這一篇介紹 WordPress 6.5 之後的解法：Block Bindings（區塊綁定），讓核心區塊的內容去綁一個外部資料來源。

讓內容跟來源分離

假設每篇文章都有一個自訂欄位「作者職稱」你想把它顯示在頁面上。傳統動態區塊思路是：做一個 staff-title 區塊，render.php 裡 get_post_meta() 撈出來輸出，要顯示「公司電話」再做一個、「活動日期」再做一個，每個資料來源都養一個區塊，內容和它的來源耦合在一起。

Block Bindings 換了個角度：不做新區塊，而是讓現成的核心區塊（段落、圖片、按鈕）去綁一個資料來源。 段落的文字不再是寫死的，而是「來自這篇文章的某個 meta」。

註冊來源與綁上區塊

第一步：註冊一個綁定來源。 在 functions.php 用 register_block_bindings_source()，給它一個名字和一個「怎麼取值」的 callback：

add_action( 'init', function () {
  register_block_bindings_source(
    'block-theme/staff-meta',
    array(
      'label'              => __( '員工資料', 'block-theme' ),
      'uses_context'       => array( 'postId' ),
      'get_value_callback' => function ( $source_args, $block_instance ) {
        $post_id = $block_instance->context['postId'];
        if ( isset( $source_args['key'] ) ) {
          return get_post_meta( $post_id, $source_args['key'], true );
        }
      },
    )
  );
} );

這段等於告訴 WordPress：「有一個叫 block-theme/staff-meta 的來源，誰綁它、給一個 key，我就從當前文章的那個 meta 撈值回去。」

第二步：把區塊綁上去。 在範本或文章的區塊標記裡用 metadata.bindings 指定某個屬性的來源：

<!-- wp:paragraph {
  "metadata": {
    "bindings": {
      "content": {
        "source": "block-theme/staff-meta",
        "args": { "key": "staff_title" // post_meta 的 key }
      }
    }
  }
} -->
<p>職稱佔位文字</p>
<!-- /wp:paragraph -->

前台渲染時這個段落的 content 會被 staff_title 這個 meta 的值取代，你用的是核心的段落區塊，沒有做任何新區塊卻讓它顯示了動態資料。

這帶來什麼改變

Block Bindings 的威力，在於它把「資料」和「呈現」拆開了：

少做一堆一次性區塊 - 要顯示新的 post meta 綁一個核心段落就好，不用開新區塊。
設計一致性自 - ****綁定的是核心段落，它照樣吃 theme.json 的字體、顏色。不會因為你自製區塊而樣式不一致。
內容編輯者的心智更單純 - 他看到的還是熟悉的段落、圖片，只是值來自別處。

核心自己就內建了幾個來源：core/post-meta（文章 meta）、core/post-title、core/post-author-name 等，很多情況你連 callback 都不用寫，直接綁核心來源即可。要接自訂邏輯（外部 API、複雜計算）時才自己 register_block_bindings_source()。

所以上面的例子也可以改成這樣子寫：

add_action( 'init', function () {
    register_post_meta( 'staff', 'staff_title', array(
        'show_in_rest'  => true,
        'single'        => true,
        'type'          => 'string',
        'label'         => __( '職稱', 'block-theme' ),
        'auth_callback' => function () {
            return current_user_can( 'edit_posts' );
        },
    ) );
} );

然後把 source 換成 core/post-meta:

<!-- wp:paragraph {
  "metadata": {
    "bindings": {
      "content": {
        "source": "core/post-meta",
        "args": { "key": "staff_title" }
      }
    }
  }
} -->
<p>職稱佔位文字</p>
<!-- /wp:paragraph -->

跟 AI 怎麼配

這種較新的 API 正是 AI 幫得上最多忙的地方，你未必記得 get_value_callback 的參數順序、uses_context 要帶什麼，我的做法是直接描述意圖：「幫我註冊一個綁定來源，讓段落能顯示當前文章的 staff_title 自訂欄位」。

Claude Code 會把註冊碼和區塊標記一起生出來，但我還是建議你讀懂上面兩步驟的骨架，因為 review AI 生的綁定對不對（context 有沒有帶 postId、有沒有 escape）還是你的責任。

到這裡我們的區塊能顯示屬性以及綁定外部資料了，但還有一種最常見的動態內容沒碰：「列出最新 N 篇文章」這種列表。這不用自己撈，核心有現成的 Query Loop。下一篇我們用 AI 把 Query Loop 組成文章列表。

文章目錄：[https://oberonlai.blog/category/2026-ithome/](https://oberonlai.blog/category/2026-ithome

Hi, 我是 Oberon Lai，十多年前我從一個不懂程式的平面設計師，一頭栽進 WordPress 的世界。從佈景主題到外掛開發，從接案到自研產品，這段旅程讓我深刻理解：好的技術不只是寫出能跑的程式碼，而是真正解決人的問題。

我積極投入參與社群，公開演講紀錄如下：

我專精 WordPress 開發，從企業形象網站的設計與開發、佈景主題客製化，到既有網站的改版升級，提供完整的 WordPress 建置服務。開發面涵蓋外掛開發與維護、區塊編輯器（Gutenberg）客製區塊、ACF 與 Custom Post Type 的資料架構設計，以及 REST API 整合與 Multisite 多站架構建置。同時也協助網站效能改善與 SEO 調校、安全性檢測與強化，並導入自動化部署與版本控制流程，搭配長期的技術顧問與維運支援，讓網站上線後也能穩定運作。

亦提供 WooCommerce 商店的建置與設定，並串接綠界、LINE Pay、藍新等台灣主流金流。可依需求進行結帳頁面客製化、訂單狀態自動化流程設計，以及商品管理與庫存系統的客製開發；也支援 WooCommerce Subscription 定期定額、REST API 應用開發、報表與數據匯出等進階需求。此外，透過購物流程 UX 改善、電商網站效能調校與 HPOS 高效能訂單儲存相容開發，全面提升營運效率，並提供電商營運技術顧問服務。

AI 浪潮席捲而來，我選擇擁抱而非恐懼，我把 AI 融入開發工作流以及客戶的產品中，也持續累積「AI 看不見的部分」：真實踩坑經驗、最新漏洞情報那些只有第一線工程師才看得見的細節，如果你有任何 WordPress 的客製化需求或是 AI 開發相關的問題非常歡迎加入 LINE 官方帳號與我聯繫：

https://page.line.me/vrf7844t?oat_content=url&openQrModal=true

如果想要獲取 AI 開發實戰經驗也能訂閱我的電子報，每週五上午準時出刊：

https://oberonlai.blog/wordpress-newsletter/