WordPress 越跑越慢？解鎖 Headless 架構：讓 CMS 專注內容，CRM 掌管大數據的完美分工

嗨，我是浪花科技的 Eric。最近又有客戶跑來跟我抱怨：「Eric，我們的官網加上購物車，再裝了幾個行銷追蹤外掛後，後台慢得像樹懶，前台載入也要三秒鐘，是不是該換主機了？」

這是一個經典的工程師與業主的對話場景。很多時候，問題不在主機（雖然升級主機通常能暫時止痛），而是在於架構本身的「肥胖」。我們習慣把 WordPress 當成萬能瑞士刀：要寫文章用它、要賣東西用 WooCommerce、要管會員用 `wp_users`、要發電子報又裝個外掛。結果資料庫裡的 `wp_options` 和 `wp_postmeta` 腫得像麵龜，查詢效能自然直線下降。

在 2025 年的今天，如果你追求極致的效能與數據整合，答案可能不是「優化快取」，而是徹底的架構重組——打造 Headless 商務架構：WordPress + CRM。今天我們就來聊聊，如何把大腦（數據）和臉（內容展示）分開，讓網站飛起來。

什麼是 Headless WordPress？為什麼要加上 CRM？

傳統的 WordPress 是「單體式架构」（Monolithic），後端（PHP/MySQL）和前端（HTML/Theme）是緊緊綁在一起的。你發布一篇文章，WordPress 直接吐出渲染好的 HTML 頁面。

而 Headless WordPress 則是把「頭」（前端展示層）砍掉（別怕，是分離開來），只保留 WordPress 強大的內容管理後台。前端改用 React、Vue 或 Next.js 等現代化框架，透過 REST API 或 GraphQL 來跟 WordPress 要資料。

那 CRM 的角色是什麼？

這就是關鍵所在。在 Headless 商務架構中，我們不再把「會員資料」或「訂單行為」全部塞進 WordPress 的 MySQL 資料庫。相反的，我們讓專門的 CRM（如 Salesforce, HubSpot, 或客製化 CRM）來處理這些高價值的客戶數據。

• WordPress (CMS)： 負責靜態內容、媒體庫、SEO Meta 資料。
• Frontend (Head)： 負責極速渲染、使用者互動體驗。
• CRM (Data Brain)： 負責會員登入驗證、交易紀錄、行銷自動化標籤。

Headless 架構的三大技術優勢

1. 效能與安全性隔離

當你的網站流量暴衝（例如雙 11 活動）時，如果是傳統架構，大量的資料庫寫入（訂單、Log）會卡死讀取（文章頁面）。在 Headless 架構下，前端可以是部署在 Vercel 或 Netlify 上的靜態生成頁面（SSG），讀取速度是毫秒級的 CDN 回應。而後端的 CRM 即使在處理複雜邏輯，也不會拖累官網的瀏覽體驗。

2. 真正的多通路內容分發 (Omnichannel)

你的 WordPress 內容不再只是給網頁看。透過 API，同一份產品介紹可以同時推送到 App、小程序、甚至是店內的 Kiosk 機台。這就是「API First」的思維。

3. 開發者的快樂（與痛苦）

老實說，寫 PHP 的 Blade 模板有時候真的讓人想睡覺。轉向 Headless 後，前端工程師可以用他們最愛的 React component 來開發，體驗更好。但相對的，我們需要處理更多的 API 串接邏輯。

實戰：如何讓 WordPress 變成稱職的 API Server

WordPress 內建的 REST API 已經很強大，但通常我們會需要「客製化」端點，因為預設的 API 吐出的資料常常包含太多垃圾資訊（一堆沒用的渲染標籤），或者缺少我們需要的關鍵欄位（例如 ACF 的資料）。

身為工程師，這裡我分享一段簡單的程式碼，教你如何註冊一個輕量化的 API 端點，專門吐出給前端用的精簡文章資料：

// 在 functions.php 或自製外掛中加入
add_action('rest_api_init', function () {
    register_rest_route('roamer/v1', '/featured-posts', array(
        'methods' => 'GET',
        'callback' => 'roamer_get_featured_posts',
        'permission_callback' => '__return_true', // 公開 API
    ));
});

function roamer_get_featured_posts() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'meta_key' => 'is_featured', // 假設你有用 ACF 設定精選文章
        'meta_value' => '1'
    );

    $query = new WP_Query($args);
    $data = array();

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // 只回傳前端需要的乾淨資料
            $data[] = array(
                'id' => get_the_ID(),
                'title' => get_the_title(),
                'slug' => get_post_field('post_name', get_the_ID()),
                'thumbnail' => get_the_post_thumbnail_url(get_the_ID(), 'medium'),
                'excerpt' => get_the_excerpt(),
                'date' => get_the_date('Y-m-d'),
            );
        }
    }
    wp_reset_postdata();

    return new WP_REST_Response($data, 200);
}

這段程式碼的好處是，前端只要呼叫 /wp-json/roamer/v1/featured-posts，就能拿到乾淨的 JSON，不用在那邊解析一整包複雜的 WordPress 物件。

CRM 整合：會員驗證的轉移

這部分是大多數專案最容易卡關的地方。在 Headless 架構下，請不要再用 WordPress 的登入系統。

為什麼？因為如果你的前端是分離的，維持 WordPress 的 Session Cookie 會非常痛苦（跨網域問題、安全性問題）。最佳實踐是採用 JWT (JSON Web Token) 機制，並且驗證方直接對接 CRM 或 Auth0。

流程如下：

1. 使用者在 React 前端輸入帳號密碼。
2. 前端直接 Call CRM 的 API (或中間層 Middleware)。
3. CRM 驗證成功，回傳 Access Token。
4. 前端將 Token 存在 LocalStorage 或 Secure Cookie。
5. 之後前端要取得「會員訂單」或「個人資料」時，帶著這個 Token 去問 CRM，完全繞過 WordPress。

這樣做的好處是，WordPress 回歸單純的「內容供應商」，它根本不需要知道誰登入了，它只要負責把文章吐出來就好。這大幅降低了 WordPress 被暴力破解登入的風險。

SEO 的挑戰與解決方案

客戶最常問 Eric 的另一個問題：「改用 React 寫前端，Google 爬蟲還看得到我的網站嗎？」

以前這是個大問題，但現在有了 Next.js 或 Nuxt.js 這類支援 SSR (Server-Side Rendering) 的框架，這個問題已經解決了。當爬蟲來訪時，伺服器會先抓取 WordPress API，組合成完整的 HTML 再吐給爬蟲。對 Google 來說，它看到的和你傳統 WordPress 網站沒有兩樣，甚至因為程式碼更乾淨、速度更快，SEO 分數反而會提升。

結論：不要為了跟風而 Headless

雖然我是技術控，但我必須誠實地說：Headless 架構並不適合所有人。如果你的網站只是個單純的部落格，或者小型企業形象網，傳統的 WordPress 搭配良好的快取優化（例如使用 Cloudways + Object Cache）就非常足夠了。

但如果你的企業符合以下特徵，那麼「打造 Headless 商務架構：WordPress + CRM」絕對是值得的投資：

• 你需要極致的前端客製化體驗（例如像 App 一樣的操作感）。
• 你的會員資料庫龐大，且需要與線下 POS 或 ERP 深度整合。
• 你的安全性要求極高，不希望會員個資存在 CMS 系統中。
• 你有專屬的前端開發團隊可以維護。

數位轉型不是堆砌工具，而是找對架構。希望這篇文章能幫你釐清未來的改版方向！

---

💡 延伸閱讀：深入掌握架構與資料整合技巧

如果你對本文提到的技術細節感興趣，強烈建議閱讀以下三篇 Eric 精選的實戰文章，補完你的技術拼圖：

• 拒絕資料孤島！資深工程師教你將 WordPress 會員資料「無縫同步」至企業 CRM 的終極實戰
• 你的電商是『連體嬰』還是『鋼鐵人』？揭秘 WordPress + CRM 無頭式架構，打造可無限升級的商業大腦！
• WordPress 不再是孤島！資深工程師帶你串接 LINE / HubSpot / n8n，打造企業級自動化帝國