~/blog/n8n-automation-workflow-design-tutorial.md
API 串接與系統整合 · 2025 / 07 / 22

n8n 自動化流程設計教學:讓 WordPress 把重複工作自己做完

Eric — 浪花科技創辦人 / AI 架構師
Eric
浪花科技創辦人 · AI 架構師
n8n 自動化流程設計教學:讓 WordPress 把重複工作自己做完
目錄 table-of-contents.md

手動把新文章貼到社群、把訂單一筆筆複製進 Google Sheets、再把會員資料同步到 CRM——這些事我在客戶的 WordPress 與 WooCommerce 專案裡看過無數次,每一件都在偷走營運團隊的時間。其實只要設計好一套 n8n 自動化流程,這些重複任務就能讓網站自己完成。這篇教學會從觀念到實作,帶你把第一條工作流跑起來。

身為一個有點「懶」的工程師,我的人生哲學就是「能讓電腦做的事,絕不自己動手」。今天,我就要來跟大家分享我的秘密武器:n8n。這篇文章將會是一篇完整的 n8n 自動化流程設計教學,帶你從零開始,一步步打造屬於你自己的自動化工作流,徹底解放你的生產力,讓你的 WordPress 真正「活」起來!

什麼是 n8n?為什麼它會是 WordPress 的神隊友?

你可能聽過 Zapier 或 Make (前身是 Integromat),n8n 的概念跟它們很像,都是所謂的「自動化工作流程」工具。但 n8n 有幾個殺手級的優勢,讓我們這些工程師愛不釋手:

  • 開源且可自架 (Self-hosted): 這點超重要!對於注重資料隱私和成本控管的企業來說,可以把 n8n 架在自己的伺服器上,代表所有資料都在自己掌握中,而且不用像其他 SaaS 服務一樣,根據執行次數付費,成本效益極高。
  • 視覺化流程設計: 你不需要是個多厲害的程式高手。n8n 採用節點 (Node) 和連接線 (Connection) 的方式來設計流程,就像在畫流程圖一樣直觀。當然,如果你懂一點 JavaScript,更能發揮它強大的潛力。
  • 高度彈性與擴充性: n8n 內建了數百種應用程式的節點,從 WordPress、WooCommerce、Google Sheets、Discord 到各種你想得到的雲端服務。如果內建的節點不夠用,你甚至可以自己寫程式碼來建立 HTTP Request 節點,直接串接任何有 API 的服務。

簡單來說,n8n 就像是你網站的中央神經系統,而 WordPress 就是其中最重要的一個器官。透過 n8n,你可以讓 WordPress 與其他應用服務進行深度對話與協作,完成各種複雜的自動化任務。

n8n 核心概念解析:搞懂這四樣東西,你就入門了!

在我們開始實作之前,先花個幾分鐘搞懂 n8n 的四個核心元件。相信我,磨刀不誤砍柴工,理解這些基本概念會讓你後面的學習曲線平滑很多。

1. 節點 (Nodes)

節點是 n8n 工作流程中的最小執行單位。每個節點都代表一個特定的動作。例如,「WordPress」節點可以幫你發表文章、取得使用者資料;「Google Sheets」節點可以幫你讀取或寫入表格;「IF」節點可以讓你做條件判斷。

2. 連接 (Connections)

連接線就是把不同節點串起來的橋樑。它定義了資料的流向,上一個節點的輸出 (Output) 會成為下一個節點的輸入 (Input)。你可以透過拖拉的方式,輕鬆地把節點連接起來。

3. 工作流程 (Workflows)

由多個節點和連接所組成的完整流程,就叫做一個工作流程。例如,「當 WordPress 有新文章發佈時,自動將文章標題和連結發佈到 Discord 的指定頻道」,這就是一個完整的工作流程。

4. 觸發器 (Triggers)

每個工作流程都需要一個起點,這就是觸發器。觸發器節點會是整個流程的第一個節點,它負責監聽某個事件的發生。例如,「每小時執行一次」、「當收到一個 Webhook 請求時」、「當 WordPress 有新使用者註冊時」,這些都是觸發器。

實戰教學一:當 WordPress 發佈新文章,自動通知到 Discord 頻道

說了這麼多理論,我們來點實際的吧!這個範例非常適合內容網站或部落格的經營者。讓我們動手打造第一個自動化流程。

步驟一:設定 Webhook 觸發器

雖然 n8n 有 WordPress 節點,但為了展示更通用的作法,我們使用 Webhook。Webhook 就像是一個專屬的網址,當有資料送到這個網址時,n8n 的流程就會被觸發。

  1. 在 n8n 畫布上,新增一個「Webhook」節點。
  2. 你會看到一個測試用的 URL。先點擊「Listen For Test Event」,讓 n8n 進入等待接收資料的狀態。
  3. 現在,我們需要讓 WordPress 在發佈文章時,送資料到這個 Webhook URL。你可以使用像 WP Webhooks 這樣的外掛,或者,身為工程師,我們當然是自己動手寫 code!
  4. 將以下程式碼加入到你的佈景主題的 `functions.php` 檔案中。囉嗦一下,直接改 `functions.php` 不是最佳實踐,出錯會讓整個網站掛掉。最好的方式是透過子佈景主題或自訂外掛來管理程式碼。

function roamer_post_published_webhook($post_id, $post, $update) {
    // 確保這是一個新發佈的文章,而不是更新舊文章
    if ($update || wp_is_post_revision($post_id)) {
        return;
    }

    // 替換成你在 n8n Webhook 節點上看到的 URL
    $webhook_url = 'YOUR_N8N_WEBHOOK_URL'; 

    $post_data = array(
        'title' => $post->post_title,
        'url'   => get_permalink($post_id),
        'author' => get_the_author_meta('display_name', $post->post_author)
    );

    $args = array(
        'body'        => json_encode($post_data),
        'headers'     => array('Content-Type' => 'application/json'),
        'timeout'     => 60,
        'redirection' => 5,
        'blocking'    => false, // 使用非阻塞方式,避免影響發文效能
        'sslverify'   => true,
    );

    wp_remote_post($webhook_url, $args);
}
add_action('publish_post', 'roamer_post_published_webhook', 10, 3);

記得把 `YOUR_N8N_WEBHOOK_URL` 換成你自己的 Webhook 網址。現在,去 WordPress 後台發佈一篇測試文章。如果一切順利,你會看到 n8n 的 Webhook 節點顯示已成功接收到資料!

步驟二:設定 Discord 節點

  1. 在 Webhook 節點後方,新增一個「Discord」節點。
  2. 你需要先建立一個 Discord 的 Webhook。到你的 Discord 伺服器設定 > 整合 > Webhooks > New Webhook,然後複製那串 Webhook URL。
  3. 回到 n8n,在 Discord 節點中,選擇「Webhook」作為認證方式,並貼上你剛剛複製的 URL。
  4. 在「Content」欄位,我們要開始組合訊息。這裡就是 n8n 的魔法所在!你可以點擊旁邊的小圖示,從上一個節點(Webhook)的輸出中,動態地抓取資料。
  5. 我們可以這樣寫:`新文章發佈! **標題:** {{$json.body.title}} **連結:** {{$json.body.url}}`

步驟三:連接、測試與啟用

將 Webhook 節點的輸出端點拉到 Discord 節點的輸入端點,這樣資料流就建立起來了。點擊「Execute Workflow」進行最後測試。你會看到你的 Discord 頻道立刻收到了格式化後的訊息。確認無誤後,別忘了點擊右上角的「Active」開關,讓你的工作流程正式上線!

實戰教學二:同步 WooCommerce 新客戶資料到 Google Sheets

這個範例對於電商經營者來說極其實用,可以輕鬆建立一個簡易的客戶關係管理 (CRM) 系統。

步驟一:設定 WooCommerce 觸發器

  1. 在 n8n 中,新增一個「WooCommerce」節點作為觸發器。
  2. 在「Credentials」部分,你需要授權 n8n 存取你的 WooCommerce API。跟著 n8n 的指示,到你的 WordPress 後台 > WooCommerce > 設定 > 進階 > REST API,產生一組新的 API 金鑰,並將 Consumer Key 和 Consumer Secret 填入 n8n。
  3. 在「Resource」選擇「Customer」,「Event」選擇「Created」。
  4. 同樣,點擊「Listen For Test Event」,然後到你的網站上註冊一個新的測試帳號。n8n 應該很快就能抓到這個新客戶的資料。

步驟二:設定 Google Sheets 節點

  1. 在 WooCommerce 節點後方,新增一個「Google Sheets」節點。
  2. 第一次使用需要授權 n8n 存取你的 Google 帳戶,跟著畫面指示完成 OAuth 2.0 認證即可。這部分 n8n 做得非常好,基本上就是一直按下一步。
  3. 在「Resource」選擇「Row」,「Operation」選擇「Append or Update」。
  4. 在「Sheet ID」欄位,填入你的 Google Sheets 文件的 ID。ID 就是網址中 `/d/` 和 `/edit` 之間的那一長串亂碼。
  5. 在「Columns」欄位,把你 Google Sheets 中的欄位名稱(例如:`註冊時間`, `姓名`, `電子郵件`)填入。
  6. 接著,對應欄位的值。點擊旁邊的表達式圖示,從 WooCommerce 節點的輸出中,把對應的資料拖拉過來。例如:`{{$json.date_created}}`, `{{$json.first_name}} {{$json.last_name}}`, `{{$json.email}}`。

完成後,一樣進行測試並啟用。從此以後,每一位新註冊的客戶資料都會即時、自動地新增到你的 Google Sheets 中,再也不用手動匯出匯入了!是不是超方便?

結論:自動化不是選項,而是必需品

今天我們透過兩個實際的 n8n 自動化流程設計教學,看到了它如何與 WordPress 完美結合,將繁瑣的例行公事轉變為全自動化的流程。n8n 的可能性遠不止於此,你可以用它來做資料備份、監控網站狀態、建立複雜的行銷自動化流程等等。

身為一個工程師,我真的得囉嗦一句:在數位時代,時間就是最寶貴的資產。投資一點時間學習像 n8n 這樣的自動化工具,長期來看,它能為你和你的團隊省下數百甚至數千個小時。別再讓你的聰明才智浪費在無止盡的複製貼上了,把這些工作交給 n8n,讓你專注在更有價值、更有創造力的事情上吧!

當然,如果你在設定過程中遇到困難,或是想打造更複雜、更客製化的企業級自動化流程,這正是我們浪花科技的專業所在。我們有豐富的 API 串接與系統整合經驗,能協助你打通各個系統間的資訊孤島。

延伸閱讀

準備好讓你的 WordPress 網站學會自己工作了嗎?立即聯繫浪花科技,我們的專業團隊將為您提供最適合的自動化解決方案,讓您的事業效率更上一層樓!

// FAQ

常見問題

n8n 是什麼?跟 Zapier、Make 有什麼不同?
n8n 是一套視覺化的自動化工作流程工具,概念類似 Zapier 或 Make,用節點與連接線設計流程。它的最大差異在於開源且可自架(Self-hosted),資料可完全留在自己的伺服器、不需依執行次數付費;同時內建數百種應用節點,並可用 HTTP Request 節點串接任何有 API 的服務,彈性與擴充性很高。
入門 n8n 需要先理解哪些核心概念?
有四個核心元件:節點(Nodes)是最小執行單位,每個代表一個特定動作;連接(Connections)是串接節點的橋樑,上一個節點的輸出會成為下一個節點的輸入;工作流程(Workflows)是由多個節點與連接組成的完整流程;觸發器(Triggers)是流程的起點,負責監聽某個事件發生,例如定時執行、收到 Webhook 或有新使用者註冊。
如何讓 WordPress 發佈新文章時自動觸發 n8n 流程?
可在 n8n 新增一個 Webhook 節點取得專屬網址,再讓 WordPress 在發文時把資料送到該網址。除了使用 WP Webhooks 這類外掛,也可自行掛載 publish_post 動作,在文章發佈(而非更新或修訂版本)時,用 wp_remote_post 以非阻塞方式(blocking 設為 false)將標題、網址、作者等資料以 JSON 送往 Webhook URL,避免影響發文效能。
在 n8n 的節點中如何引用前一個節點傳來的資料?
可在欄位中用表達式語法引用上一個節點的輸出,例如在 Discord 節點的 Content 欄位寫入 {{$json.body.title}} 與 {{$json.body.url}},動態抓取 Webhook 傳來的文章標題與連結並組成訊息。流程設計完成後,記得點右上角的 Active 開關讓工作流程正式上線。
如何用 n8n 把 WooCommerce 新客戶自動同步到 Google Sheets?
先新增 WooCommerce 節點作為觸發器,依 n8n 指示到 WordPress 後台的 WooCommerce > 設定 > 進階 > REST API 產生金鑰,將 Consumer Key 與 Consumer Secret 填入;Resource 選「Customer」、Event 選「Created」。接著新增 Google Sheets 節點,首次使用完成 OAuth 2.0 授權後,即可把抓到的新客戶資料寫入表格。
~/roamer-tech/newsletter // FREE
// newsletter

訂閱免費電子報

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

$
// final.exec()

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