資料孤島終結者！n8n Webhook + API 串接實戰：讓你的 WordPress 與外部系統「秒速」通靈

嗨，我是 Eric，浪花科技的資深工程師。如果說工程師的職業生涯中有什麼事情最讓我「過敏」，那絕對是看到客戶（或是我的老闆）打開兩個瀏覽器視窗，左邊是 WordPress 後台，右邊是 CRM 或 Excel，然後開始手動 Ctrl+C、Ctrl+V。

這不僅是浪費生命，更是對我們這些寫 Code 的人的一種羞辱（笑）。

在 2025 年的今天，自動化已經不是什麼高科技魔法，而是企業生存的基本配備。雖然身為開發者，我們可以手刻 PHP cURL 來串接各種 API，但面對變動極快的業務需求，硬刻程式碼往往意味著高昂的維護成本。這時候，n8n 這個以工作流為核心的自動化工具，搭配 Webhook 與 API 的整合，就成了我手中的瑞士刀。

今天這篇文章，我不談虛的理論，直接帶你實戰：如何利用 n8n 的 Webhook 節點接收 WordPress 的資料，並透過 API 轉發到其他系統。我們會深入探討 JSON 結構、HTTP Method 以及除錯技巧。

為什麼選擇 n8n？不只是因為它開源

市面上有 Zapier、Make (Integromat)，為什麼我獨推 n8n？除了它可以 Self-host（這對重視資料隱私的企業來說是關鍵）之外，對於工程師來說，n8n 的邏輯更接近「程式開發」。

• 視覺化的 JavaScript： 你可以在節點中直接寫 JS 處理複雜的資料轉換，這對習慣寫 Code 的我們來說非常親切。
• 強大的 HTTP Request 節點： 它幾乎就是一個視覺化的 Postman，讓你隨意設定 Header、Auth 和 Body。
• Webhook 優先： n8n 對 Webhook 的支援非常完整，無論是觸發 (Trigger) 還是回應 (Response) 都非常靈活。

核心觀念：Webhook vs. Polling (輪詢)

在開始實作前，我還是要囉嗦一下觀念。很多新手會問：「Eric，為什麼不用輪詢就好？」

想像你在等快遞。Polling (輪詢) 就像是你每隔 5 分鐘打電話給快遞員問：「到了沒？」。這會消耗雙方的精力（伺服器資源）。

而 Webhook 則是「快遞到了會按門鈴通知你」。當 WordPress 發生特定事件（例如：新訂單、新註冊、表單送出）時，主動發送一個 HTTP POST 請求給 n8n。這才是即時、高效的資料整合方式。

實戰演練：WordPress 表單資料傳送至 n8n

為了演示，我們設定一個場景：當使用者在 WordPress 填寫聯絡表單後，我們希望將資料傳送到 n8n，經過清洗後，再傳送到外部的 CRM 系統。

第一步：在 n8n 建立 Webhook 節點

打開你的 n8n 編輯器，新增一個 Webhook 節點。

• Authentication: 為了演示方便先選 None，但在正式環境強烈建議使用 Header Auth。
• HTTP Method: POST。
• Path: 設定一個識別用的路徑，例如 contact-form-submit。

你會得到兩組 URL：Test URL 和 Production URL。開發階段請使用 Test URL，並點擊「Listen for Test Event」。

第二步：WordPress 端發送請求 (PHP 實作)

雖然你可以用 WPForms 或 Gravity Forms 的 Webhook Add-on，但身為工程師，我們直接用 Hook 來寫，這樣最靈活，也不用為了這點功能多裝一個外掛。

在你的佈景主題 functions.php 或自製外掛中加入以下程式碼：

// 假設我們監聽 Contact Form 7 的送出事件
add_action( 'wpcf7_mail_sent', 'eric_send_data_to_n8n', 10, 1 );

function eric_send_data_to_n8n( $contact_form ) {
    // 取得表單提交的資料
    $submission = WPCF7_Submission::get_instance();
    
    if ( $submission ) {
        $posted_data = $submission->get_posted_data();
        
        // 準備要傳送給 n8n 的 payload
        $body = array(
            'name'      => isset($posted_data['your-name']) ? $posted_data['your-name'] : '',
            'email'     => isset($posted_data['your-email']) ? $posted_data['your-email'] : '',
            'message'   => isset($posted_data['your-message']) ? $posted_data['your-message'] : '',
            'source'    => 'wordpress_site_a',
            'timestamp' => current_time('mysql')
        );

        // n8n 的 Webhook URL (記得切換 Test/Production)
        $n8n_url = 'https://n8n.your-domain.com/webhook-test/contact-form-submit';

        // 使用 WordPress 內建的 HTTP API 發送請求
        $response = wp_remote_post( $n8n_url, array(
            'method'      => 'POST',
            'data_format' => 'body',
            'timeout'     => 45,
            'headers'     => array(
                'Content-Type' => 'application/json',
                // 'X-API-KEY' => '你的密鑰' // 安全性考量建議加上
            ),
            'body'        => json_encode( $body ),
            'blocking'    => false, // 設定為非阻塞，以免拖慢使用者體驗
        ) );

        // 簡單的錯誤紀錄 (建議依實際需求調整)
        if ( is_wp_error( $response ) ) {
            error_log( 'n8n Webhook Error: ' . $response->get_error_message() );
        }
    }
}

這段程式碼的關鍵在於 json_encode($body) 和 header 設定 Content-Type: application/json，確保 n8n 能正確解析 JSON 格式。

第三步：在 n8n 處理資料並轉發

當你在 WordPress 送出表單後，n8n 的 Webhook 節點應該會顯示綠色的「Data received」。這時候你就會看到詳細的 JSON 結構。

接下來，你可以串接 HTTP Request 節點，將這些資料打到任何你想去的地方，比如 Slack 通知、HubSpot API 或是自家的 ERP。

在 HTTP Request 節點中，你可以使用 Expression（表達式）來動態填入資料，例如：

{
  "text": "收到新訊息！來自：{{ $json.body.name }} ({{ $json.body.email }})"
}

安全性考量：別讓你的 API 裸奔

這是 Eric 最常嘮叨的部分。Webhook URL 其實就是一個公開的 API 端點，如果沒有保護，任何人都可以偽造請求塞垃圾資料給你。

1. 驗證 Header： 在 WordPress 發送時加入一個自定義 Header (如 X-Auth-Token)，並在 n8n 的 Webhook 節點設定 Authentication，檢查這個 Token 是否匹配。
2. 來源 IP 限制： 如果你的 WordPress 和 n8n 在同一台主機或固定 IP，可以在 Nginx 層級限制只允許特定 IP 存取 Webhook 路徑。
3. 資料驗證 (Validation)： 不要在 n8n 裡無條件信任傳進來的資料。使用 n8n 的 If 節點或 Code 節點檢查 email 格式是否正確，欄位是否缺漏。

除錯與監控：當自動化不動的時候

自動化最怕的就是「默默失敗」。在 WordPress 端，務必檢查 debug.log。在 n8n 端，建議開啟「Save Execution Data」在錯誤發生時，這樣你才能回放 (Retry) 失敗的工作流。

另外，我建議在 n8n 流程的最後加入一個 Error Trigger 節點，當流程中間任何環節出錯時，主動發送通知到你的 Email 或通訊軟體，別等客戶抱怨了才發現系統掛了。

結論：用技術釋放你的時間

透過 n8n Webhook 與 WordPress API 的整合，我們打通了資料的任督二脈。這不僅僅是省下複製貼上的時間，更重要的是，它讓資料的流動變得即時且可追蹤。這才是數位轉型的第一步。

如果你覺得這篇文章太硬，或者你們公司的資料架構複雜到讓你頭痛，沒關係，這就是我們存在的意義。

👉 還是搞不定？聯繫浪花科技，幫你打造自動化帝國

延伸閱讀

• 你的 WordPress 正在大開後門嗎？資深工程師的 Webhook 設計與安全驗證終極指南
• Google Sheets 改價格，WooCommerce 就同步？別再手動點到手軟！n8n 打造你的『雲端價格儀表板』
• API 回傳一坨垃圾？資深工程師教你用 JSON Schema 打造 WordPress 滴水不漏的數據防火牆