LINE Chatbot 建置實戰：讓 WordPress 傳送 Flex Message 互動訊息，別再只會回純文字！

傳產客戶對 LINE Chatbot 的期待早就進化了：以前輸入「營業時間」會回一段純文字就算厲害，現在拿不出一張能點按鈕、直接導購或查訂單的卡片，使用者就嫌你的系統停留在撥接時代。這也是為什麼 Flex Message 成了 LINE Messaging API 建置實戰裡繞不開的一關——而 WordPress 完全有能力自己送出這些互動訊息。

雖然市面上有很多 No-Code 工具，但身為工程師，我們都知道：要把資料留在自己家（WordPress 資料庫），並且實現高度客製化的邏輯（例如檢查 WooCommerce 訂單狀態），手刻 API 串接才是王道。

今天這篇文章，我不談基礎的開通帳號（那太簡單了），我們要來點硬核的：如何在 WordPress 中接收 Webhook，驗證簽章（這很重要，別裸奔！），並回傳一份漂亮的 Flex Message。

為什麼你需要 Flex Message？而不只是文字回覆

在進行 LINE Messaging API Chatbot 建置時，最常被忽略的就是「使用者體驗」。純文字的互動是線性的，容易讓使用者失去耐心。Flex Message 允許我們使用 JSON 格式定義複雜的排版，包含圖片、按鈕、不同大小的文字，甚至可以做到類似 App 的介面體驗。

這對於 WordPress 電商網站來說至關重要，你可以直接在對話框裡顯示「推薦商品卡片」，使用者點擊「購買」就直接帶入結帳連結，轉換率絕對比丟一串藍色網址高得多。

第一步：建立安全的 Webhook 接收端

很多新手在寫 LINE Bot 時，最常犯的錯誤就是忽略資安驗證（Signature Validation）。如果你的 Webhook URL 被惡意人士知道，他們可以偽造請求，讓你的機器人亂說話，甚至塞爆你的伺服器。

在 WordPress 中，我習慣使用 REST API Endpoint 來作為 Webhook 入口。以下是支援經典編輯器的程式碼範例，請放在你的佈景主題 `functions.php` 或自製外掛中：

add_action('rest_api_init', function () {
    register_rest_route('eric/v1', '/line-webhook', array(
        'methods' => 'POST',
        'callback' => 'handle_line_webhook',
        'permission_callback' => '__return_true', // 我們會在 callback 中手動驗證簽章
    ));
});

function handle_line_webhook($request) {
    $channel_secret = '你的_CHANNEL_SECRET'; // 請改用環境變數或選項存儲，不要寫死在 Code 裡
    $http_request_body = $request->get_body();
    $hash = hash_hmac('sha256', $http_request_body, $channel_secret, true);
    $signature = base64_encode($hash);
    $header_signature = $request->get_header('x-line-signature');

    // 驗證簽章：這是資安的底線，拜託別拿掉
    if ($signature !== $header_signature) {
        return new WP_Error('invalid_signature', 'Invalid Signature', array('status' => 403));
    }

    $events = json_decode($http_request_body, true)['events'];

    foreach ($events as $event) {
        if ($event['type'] === 'message' && $event['message']['type'] === 'text') {
            $reply_token = $event['replyToken'];
            $user_message = $event['message']['text'];
            
            // 這裡可以加入你的商業邏輯，例如查詢 WooCommerce 訂單
            reply_flex_message($reply_token, $user_message);
        }
    }

    return new WP_REST_Response('OK', 200);
}

第二步：建構 Flex Message 函式

接下來是重頭戲。我們要用 WordPress 內建的 `wp_remote_post` 來發送請求給 LINE Platform。為了讓程式碼乾淨點（別寫成義大利麵 Code），我把發送功能封裝成一個函式。

這裡要注意的是 JSON 的結構。Flex Message 的 JSON 有點像俄羅斯套娃，一層包一層，剛開始寫很容易括號對不上。我建議先用 LINE Flex Simulator 設計好外觀，再複製 JSON 過來。

function reply_flex_message($reply_token, $user_message) {
    $access_token = '你的_CHANNEL_ACCESS_TOKEN';
    
    // 這是一個簡單的 Flex Message 範例結構
    $flex_payload = array(
        'type' => 'bubble',
        'hero' => array(
            'type' => 'image',
            'url' => 'https://你的網站/wp-content/uploads/welcome-banner.jpg',
            'size' => 'full',
            'aspectRatio' => '20:13',
            'aspectMode' => 'cover',
        ),
        'body' => array(
            'type' => 'box',
            'layout' => 'vertical',
            'contents' => array(
                array(
                    'type' => 'text',
                    'text' => '你好！我是 Eric',
                    'weight' => 'bold',
                    'size' => 'xl'
                ),
                array(
                    'type' => 'text',
                    'text' => '你剛剛說了：' . $user_message,
                    'margin' => 'md',
                    'color' => '#666666'
                )
            )
        ),
        'footer' => array(
            'type' => 'box',
            'layout' => 'vertical',
            'spacing' => 'sm',
            'contents' => array(
                array(
                    'type' => 'button',
                    'style' => 'primary',
                    'height' => 'sm',
                    'action' => array(
                        'type' => 'uri',
                        'label' => '聯絡浪花科技',
                        'uri' => 'https://roamer-tech.com/contact/'
                    )
                )
            )
        )
    );

    $data = array(
        'replyToken' => $reply_token,
        'messages' => array(
            array(
                'type' => 'flex',
                'altText' => '這是一則互動訊息，請在手機上查看', // 當使用者的裝置不支援 Flex 時顯示的文字
                'contents' => $flex_payload
            )
        )
    );

    $response = wp_remote_post('https://api.line.me/v2/bot/message/reply', array(
        'headers' => array(
            'Content-Type' => 'application/json',
            'Authorization' => 'Bearer ' . $access_token,
        ),
        'body' => json_encode($data),
    ));

    if (is_wp_error($response)) {
        error_log('LINE API Error: ' . $response->get_error_message());
    }
}

工程師的小囉嗦：關於 Rate Limit 與除錯

在實作 LINE Messaging API Chatbot 建置時，有兩個坑我一定要提醒你：

• Log 是你的好朋友：LINE 的 Webhook 是「射後不理」的。如果你的程式碼出錯（例如 PHP Fatal Error），LINE 伺服器只會收到 500 錯誤，然後它就不會理你了。務必開啟 WordPress 的 `WP_DEBUG_LOG`，把錯誤寫進 `debug.log`，不然你會除錯除到懷疑人生。
• Reply Token 只能用一次：這是新手最常崩潰的地方。`replyToken` 的時效很短（大約 30 秒），而且一旦你回覆了一次（呼叫了 API），那個 Token 就失效了。如果你想連續傳送多則訊息，請在同一個 API Request 的 `messages` 陣列中放入多個物件（最多 5 個），而不是呼叫 5 次 API。

從自動化到個人化

今天的教學只是「LINE Messaging API Chatbot 建置」的冰山一角。當你掌握了 Webhook 與 Flex Message，你就可以結合 WordPress 的 User ID，做到「帳號綁定」。想像一下，客戶在 LINE 裡點一下「我的訂單」，機器人就能去 WooCommerce 資料庫撈出他最近的包裹狀態並回傳一張精美的卡片，這才是真正的數位轉型。

延伸閱讀

如果你對 LINE 整合與 API 自動化有興趣，這幾篇我之前寫的文章一定要看看：

• LINE Bot 不再只會單向通知！N8N 視覺化工作流實戰，打造你的 AI 智慧客服大腦
• 業務救星！LINE OA 深度整合實戰：如何將粉絲對話紀錄自動同步至 CRM 客戶資料卡
• WordPress 不再是孤島！資深工程師帶你串接 LINE / HubSpot / n8n，打造企業級自動化帝國

若你在建置 LINE Chatbot 或串接 WordPress 資料庫的過程中遇到瓶頸，或者你的企業需要更客製化、高併發的系統架構規劃，歡迎隨時找我們聊聊。我們擅長處理那些「套件做不到」的技術難題。