~/blog/wordpress-api-practical-integration-line-hubspot-n8n.md
API 串接與系統整合 · 2025 / 09 / 15

「別再複製貼上了!」WordPress API 串接實戰:串接 LINE / HubSpot / n8n,打造你的全自動工作流

Eric — 浪花科技創辦人 / AI 架構師
Eric
浪花科技創辦人 · AI 架構師
「別再複製貼上了!」WordPress API 串接實戰:串接 LINE / HubSpot / n8n,打造你的全自動工作流
目錄 table-of-contents.md

每一筆被手動複製到 CRM 的表單資料,本質上都是一個沒被寫出來的 API 呼叫。WordPress 早就備好了 REST API,LINE、HubSpot、n8n 也都開好了接口,缺的只是把它們串起來的那條線。這篇實戰就是要把線接上,讓資料自己流動,把省下的時間還給更有價值的事。

很多時候,你的 WordPress 網站就像一座資訊孤島,明明裝滿了寶貴的客戶資料和商業活動,卻無法與外界的服務順暢溝通。這篇文章,就是要來打破這座孤島的圍牆。我會帶你一步步實作,將 WordPress 與三個當今最強大的第三方服務進行 WordPress 第三方 API 串接實作:即時通訊的霸主 LINE、CRM 界的翹楚 HubSpot,以及自動化流程的神器 n8n。別擔心,我不會只丟給你一堆看不懂的程式碼,我會從觀念講起,讓你不但知道「怎麼做」,更知道「為什麼要這麼做」。準備好了嗎?讓我們開始把你的網站從孤島,改造成一個全自動化的指揮中心吧!

API 串接前的暖身:打好你的 WordPress 地基

嘿,我知道你很急,但身為一個囉嗦的工程師,我得先提醒你:地基沒打好,蓋再高的樓都會倒。在我們開始大搞串接之前,有幾個 WordPress 核心觀念你必須先弄懂,這會讓你在接下來的實作中事半功倍,而且未來除錯時才不會像無頭蒼蠅一樣亂竄。

選擇正確的時機:搞懂 WordPress Hooks (動作與過濾器)

WordPress 的核心精神就是 Hooks (鉤點),它允許我們在特定的時間點「掛上」我們自己的程式碼。這就像在捷運車廂裝上一個掛鉤,當捷運(WordPress 核心)到站時(特定事件發生),你就可以把你的東西(你的函式)掛上去。Hooks 主要分為兩種:

  • Action Hooks (動作鉤點): 當某件事發生時「執行」某個動作。例如:user_register (使用者註冊時)、publish_post (文章發佈時)。我們主要會用這個來觸發 API 呼叫。
  • Filter Hooks (過濾器鉤點): 在資料被處理或顯示前「修改」它。例如:the_content (修改文章內容)。

搞不清楚兩者的差異?沒關係,可以先看看我們另一篇更深入的教學:Action 還是 Filter?WordPress Hooks 終極二選一難題

資料的守門員:Webhook 與 REST API

你可能會一直聽到這兩個詞,簡單來說:

  • REST API: 像是一套「你問我答」的規則。你的網站(客戶端)主動發送一個請求 (Request) 給第三方服務(伺服器),對方再回傳一個回應 (Response)。我們待會串接 HubSpot 就是用這種方式。
  • Webhook: 則是一種「事件發生時,我主動通知你」的機制。你先在第三方服務設定好一個接收通知的網址(就是你的 Webhook URL),當特定事件發生時,對方就會自動把資料「推送」(Push) 到這個網址。n8n 的運作就高度依賴這個機制。

無論是哪一種,安全都是首要之務。確保你的 API 金鑰不外洩,並且對接收到的 Webhook 進行驗證,是防止網站大門洞開的關鍵。想深入了解可以參考這篇:你的 WordPress 正在大開後門嗎?資深工程師的 Webhook 設計與安全驗證終極指南

必備工具:wp_remote_post() 與 wp_remote_get()

WordPress 內建了兩個超好用的函式,讓我們可以跟外部 API 溝通,你完全不需要自己去搞懂 cURL 那些複雜的東西。

  • wp_remote_get(): 用來「取得」資料。
  • wp_remote_post(): 用來「傳送」資料,通常用於新增或更新。

我們接下來的實作,幾乎都會圍繞著 wp_remote_post() 這個函式打轉。

實戰演練一:LINE Notify — 讓你的 WordPress 主動回報!

第一個場景,也是最實用的:當網站有新使用者註冊時,馬上發送一則 LINE 通知到你的個人或群組,讓你即時掌握狀況。

Step 1: 取得 LINE Notify 權杖 (Token)

這一步非常簡單,直接到 LINE Notify 官網,登入你的 LINE 帳號,點選「發行權杖」,選擇你要通知的聊天室(可以是你自己,或是任何你加入的群組),然後把產生的那串長長的權杖複製下來。注意:這串權杖只會顯示一次,請務必馬上存好!

Step 2: 撰寫 WordPress Hook 函式

我們要使用的是 user_register這個 Action Hook。把以下程式碼加到你的佈景主題的 functions.php 檔案或是自訂外掛中。


// 當有新使用者註冊時,觸發我們的通知函式
add_action('user_register', 'send_new_user_line_notification', 10, 1);

function send_new_user_line_notification($user_id) {
    // 這裡會放我們的 API 呼叫邏輯
}

Step 3: 串接 LINE Notify API

現在,我們來把函式補完。我們會取得新註冊使用者的資料,並透過 wp_remote_post() 發送出去。


function send_new_user_line_notification($user_id) {
    // 1. 取得使用者資訊
    $user_info = get_userdata($user_id);
    $username = $user_info->user_login;
    $email = $user_info->user_email;

    // 2. 設定 LINE Notify API 的資訊
    $token = '換成你自己的LINE_NOTIFY_權杖';
    $url = 'https://notify-api.line.me/api/notify';
    $message = "\n🎉 網站有新成員加入!\n帳號:{$username}\nEmail:{$email}";

    // 3. 設定請求的 Header 和 Body
    $headers = array(
        'Authorization' => 'Bearer ' . $token,
    );
    $body = array(
        'message' => $message,
    );

    // 4. 發送 POST 請求
    $response = wp_remote_post($url, array(
        'headers' => $headers,
        'body' => $body,
    ));

    // (選用) 檢查是否有錯誤,方便除錯
    if (is_wp_error($response)) {
        $error_message = $response->get_error_message();
        error_log("LINE Notify failed: {$error_message}");
    }
}

把上面的 $token 換成你自己的,存檔後去註冊一個新帳號試試看,你的 LINE 是不是馬上就叮咚響了?是不是超有成就感!

實戰演練二:HubSpot — 將 WordPress 表單潛在客戶自動同步至 CRM

手動複製貼上客戶資料到 CRM 是工程師最不能忍受的事情之一。讓我們來把這件事自動化。假設我們使用 Contact Form 7 這個外掛,當使用者提交表單後,自動在 HubSpot 建立一筆聯絡人資料。

Step 1: 取得 HubSpot API 金鑰

登入你的 HubSpot 帳戶,到「設定」 > 「整合」 > 「API 金鑰」去建立並複製你的 API Key。HubSpot 正在推廣使用 Private Apps,但對這種簡單的內部串接,傳統的 API Key 還是很方便。

Step 2: 掛鉤 (Hook) 到表單提交事件

Contact Form 7 提供一個方便的 Hook 叫做 wpcf7_mail_sent,它會在郵件成功寄出後觸發。


add_action('wpcf7_mail_sent', 'sync_contact_to_hubspot');

function sync_contact_to_hubspot($contact_form) {
    // 我們的同步邏輯會放在這裡
}

Step 3: 組織 API 資料並發送

這一步稍微複雜,因為我們需要從表單物件中取得使用者填寫的資料,並把它們組合成 HubSpot API 看得懂的格式。


function sync_contact_to_hubspot($contact_form) {
    // 取得表單提交的資料
    $submission = WPCF7_Submission::get_instance();
    if ($submission) {
        $posted_data = $submission->get_posted_data();

        // 假設你的表單欄位名稱是 your-name, your-email, your-phone
        $email = isset($posted_data['your-email']) ? $posted_data['your-email'] : '';
        $firstname = isset($posted_data['your-name']) ? $posted_data['your-name'] : '';
        $phone = isset($posted_data['your-phone']) ? $posted_data['your-phone'] : '';

        if (empty($email)) {
            return; // 沒有 email 不處理
        }

        // 設定 HubSpot API 資訊
        $api_key = '換成你自己的HUBSPOT_API_KEY';
        $url = 'https://api.hubapi.com/crm/v3/objects/contacts?hapikey=' . $api_key;

        // 組織要傳送的資料 (HubSpot API v3 格式)
        $properties = array(
            'properties' => array(
                'email'     => $email,
                'firstname' => $firstname,
                'phone'     => $phone,
                // 你可以加入任何 HubSpot 聯絡人屬性
            )
        );

        // 發送 POST 請求
        $response = wp_remote_post($url, array(
            'headers' => array('Content-Type' => 'application/json'),
            'body'    => json_encode($properties),
            'method'  => 'POST',
        ));

        // (選用) 偵錯
        if (is_wp_error($response)) {
            error_log('HubSpot Sync Error: ' . $response->get_error_message());
        }
    }
}

瞧!現在你的網站表單變成了一個 24 小時不打烊的自動化業務助理,再也不用擔心漏掉任何一個潛在客戶了。

實戰演練三:n8n — 打造無極限的自動化工作流中樞

如果說前兩個是點對點的串接,那 n8n 就是一個強大的中央處理器。你可以把 WordPress 的任何事件,透過 n8n 串接到數百種不同的服務。例如:發佈新文章時,自動發布到社群媒體、存到 Notion、並通知 Slack 團隊。

Step 1: 在 n8n 建立 Webhook 節點

在你的 n8n 流程中,第一個節點選擇「Webhook」。n8n 會給你一個專屬的 Webhook URL,把它複製下來。

Step 2: 在 WordPress 中觸發 Webhook

我們用 `publish_post` 這個 Hook 來示範。當有新文章(或任何 Post Type)被發佈時,我們就把文章的標題、網址、內容等資訊,透過 Webhook 傳給 n8n。


add_action('publish_post', 'trigger_n8n_new_post_workflow', 10, 2);

function trigger_n8n_new_post_workflow($post_ID, $post) {
    // 這裡放我們的 Webhook 觸發邏輯
}

Step 3: 程式碼範例與 n8n 工作流概念

現在,我們來把資料打包送出去。


function trigger_n8n_new_post_workflow($post_ID, $post) {
    // 確保這不是文章修訂版本
    if (wp_is_post_revision($post_ID)) {
        return;
    }

    // 你的 n8n Webhook URL
    $webhook_url = '貼上你從n8n複製的WEBHOOK_URL';

    // 準備要傳送的資料
    $data_to_send = array(
        'title'   => $post->post_title,
        'url'     => get_permalink($post_ID),
        'excerpt' => get_the_excerpt($post_ID),
        'author'  => get_the_author_meta('display_name', $post->post_author),
    );

    // 發送 POST 請求
    wp_remote_post($webhook_url, array(
        'headers' => array('Content-Type' => 'application/json; charset=utf-8'),
        'body'    => json_encode($data_to_send),
        'method'  => 'POST',
    ));
}

一旦 WordPress 這邊設定好,接下來的魔法就在 n8n 裡發生了。你可以在 n8n 的 Webhook 節點後面,串接 Twitter、Discord、Google Sheets... 你能想到的任何服務。WordPress 只需要負責把資料送出去,剩下的複雜流程就交給專業的 n8n 處理,這就是關注點分離 (Separation of Concerns) 的優雅之處。

串接的藝術:錯誤處理與非同步任務

身為資深工程師,我必須囉嗦最後幾句。上面給的範例都是「快樂路徑」(Happy Path),但真實世界中,API 可能會超時、對方伺服器可能掛掉、網路可能不穩。因此,完整的程式碼必須包含錯誤處理。

使用 is_wp_error() 來檢查 wp_remote_post() 的回傳值是基本功。此外,如果 API 呼叫需要很長時間,它會拖慢使用者在前端的操作體驗(例如送出表單後轉圈圈轉很久)。對於這種情況,我們會把 API 呼叫放到背景的排程任務中去執行(例如使用 Action Scheduler 函式庫),讓使用者可以立即得到回應,而真正的 API 呼叫在背景默默完成。這雖然超出了本文的範圍,但卻是從「能用」到「好用」的關鍵一步。

結論:你的 WordPress 不是孤島,而是數位生態系的核心

今天我們從零到一,實作了 WordPress 與 LINE、HubSpot、n8n 的 API 串接。你會發現,一旦打通了這條數據的動脈,WordPress 的可能性將會無限延伸。它不再只是一個內容發布系統,而是一個能與各種現代化服務協同作戰的強大中樞。

這趟 WordPress 第三方 API 串接實作 之旅只是個開始。你可以舉一反三,用同樣的觀念和工具去串接任何你想得到的服務。記住,自動化省下的每一分鐘,都是讓你專注於核心業務的寶貴資產。

延伸閱讀

如果你覺得這些 API 串接聽起來很棒,但自己動手還是有點怕怕的,或者你有更複雜的企業級自動化需求,別客氣,浪花科技的團隊就是來幫你解決這些問題的。我們專精於打造高效、穩定且安全的 WordPress 系統整合方案。

立即點擊這裡,填寫表單與我們的專家聊聊,讓我們一起把你的網站打造成一個真正的自動化商業引擎!

// FAQ

常見問題

WordPress 串接外部 API 該用哪些內建函式?
WordPress 內建 wp_remote_get() 與 wp_remote_post() 兩個函式可與外部 API 溝通,不需自己處理複雜的 cURL。wp_remote_get() 用來向 API 取得資料,wp_remote_post() 用來傳送資料、通常用於新增或更新。串接 LINE Notify、HubSpot 等服務時大多圍繞 wp_remote_post() 進行。
REST API 與 Webhook 有什麼不同?
REST API 是「你問我答」的模式,由你的網站主動發送請求給第三方服務,對方再回傳回應,例如串接 HubSpot 建立聯絡人。Webhook 則是「事件發生時主動通知你」的機制,你先設定好接收網址,當特定事件發生時對方會自動把資料推送過來,n8n 的運作高度依賴此機制。兩種方式都務必驗證來源並妥善保管 API 金鑰。
如何在 WordPress 有新使用者註冊時發送 LINE 通知?
先到 LINE Notify 官網登入並發行權杖(Token),選擇要通知的聊天室並妥善保存(權杖只顯示一次)。接著在 functions.php 或自訂外掛中掛上 user_register 這個 Action Hook,在觸發函式內用 get_userdata() 取得新使用者資訊,再透過 wp_remote_post() 帶上 Authorization 標頭,將訊息送到 LINE Notify 的 API 端點。
如何把 Contact Form 7 表單的潛在客戶自動同步到 HubSpot?
Contact Form 7 提供 wpcf7_mail_sent 這個 Hook,會在郵件成功寄出後觸發。可掛上該 Hook,於函式內透過 WPCF7_Submission::get_instance() 取得使用者填寫的表單資料(如姓名、Email),再組成 HubSpot API 所需格式,用 wp_remote_post() 送出以自動建立聯絡人。HubSpot 雖在推廣 Private Apps,但簡單的內部串接也可使用傳統 API Key。
~/roamer-tech/newsletter // FREE
// newsletter

訂閱免費電子報

把 AI 自動化、企業系統設計與 WordPress / Laravel 開發的真實案例和可直接照做的技巧,整理成電子報寄給你。只寄精選內容、不灌垃圾信,一鍵就能退訂。

$
// final.exec()

準備好讓你的網站開始為你工作了嗎?