~/blog/wordpress-openai-api-integration-smart-website-guide.md
API 串接與系統整合 · 2025 / 09 / 15 · 5 views

OpenAI API x WordPress 整合實戰:打造會思考的智慧網站

Eric — 浪花科技創辦人 / AI 架構師
Eric
浪花科技創辦人 · AI 架構師
OpenAI API x WordPress 整合實戰:打造會思考的智慧網站
目錄 table-of-contents.md

市面上號稱「AI 驅動」的 WordPress 外掛,九成只是把同一支 OpenAI API 包上糖衣再向你收月費。與其付錢買黑盒子,不如自己串接:成本更低、彈性更大,還能客製出真正懂你網站內容的智慧功能。這篇就從申請金鑰到寫進外掛,完整走一遍整合實戰。

很多外掛只是包了一層皮,底層做的就是簡單的 API 串接,但卻跟你收高額的月費,而且功能限制一大堆,想客製化?門都沒有。今天,我就要帶你掀開這層神秘面紗,不當冤大頭,手把手教你如何直接在 WordPress 中串接 OpenAI API,讓你的網站真正擁有一個「會思考」的智慧大腦。

為什麼要自己動手?揭開 AI 外掛的真相

我知道,我知道,點幾下滑鼠安裝外掛多輕鬆啊,何必自己寫程式碼搞得這麼累?這就是典型的「方便」陷阱。讓我這個資深工程師跟你囉嗦幾句,告訴你為什麼「自己來」才是王道:

  • 彈性與控制權: 外掛給你的功能就是死的,你只能在他畫好的框框裡玩。但自己串接 API,就等於拿到 AI 模型的鑰匙,你想讓它做什麼、怎麼做,完全由你決定。想做個能理解上下文的產品推薦系統?沒問題。想打造一個能分析客戶留言情緒的後台儀表板?小菜一碟。
  • 成本效益: 許多 AI 外掛採用訂閱制或依用量計價,但中間都抽了一手。直接使用 OpenAI API,你付的錢就是純粹的 API call 費用,沒有中間商賺差價,長期下來可以省下非常可觀的費用。省下來的錢拿去升級伺服器不是更香嗎?
  • 數據隱私: 你真的確定你的網站資料傳給第三方外掛是安全的嗎?他們的隱私政策你看過了嗎?自己串接,數據流向單純(你的網站 <=> OpenAI),你能更有效地掌控與保護使用者數據。
  • 學習與成長: 身為一個技術人,還有什麼比親手實現一個酷東西更有成就感的?這個過程不僅能讓你更深入了解 AI 技術,也能大幅提升你的 WordPress 開發功力。

說到底,依賴外掛就像是租房子,方便但處處受限;自己串接 API 才是蓋自己的房子,雖然辛苦,但每個角落都能照你的意思來設計。

打好地基:在 WordPress 中安全地串接 OpenAI API

好了,理論講完了,我們來點硬核的。要讓 WordPress 跟 OpenAI 對話,我們需要透過 API (應用程式介面)。你可以把它想像成一個「點餐窗口」,你的 WordPress 網站是客人,OpenAI 是廚房,API 就是那個窗口和菜單,你照著菜單點餐(下指令),廚房就會把做好的菜(AI 生成的結果)從窗口遞給你。

第一步:取得你的 API 金鑰

首先,你得先去 OpenAI Platform 註冊一個帳號,然後在後台找到 API Keys 的管理介面,產生一把新的密鑰(Secret Key)。

工程師的小囉嗦: 這把 Key 非常重要,跟你的銀行卡密碼一樣重要!絕對、絕對、絕對不要直接寫在你的主題 `functions.php` 或外掛的程式碼裡!一旦你的程式碼被洩漏(例如主題被下載),你的 API Key 就等於裸奔,別人就可以盜用你的額度,帳單會讓你欲哭無淚。

最安全的做法是把它定義在 `wp-config.php` 檔案中,這個檔案通常不會被公開存取。打開你的 `wp-config.php`,在 `/* That's all, stop editing! Happy publishing. */` 這行註解的上方,加入以下這行:

define('MY_OPENAI_API_KEY', 'sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxx');

記得把 `sk-xxxxxxxx...` 換成你自己的金鑰。

第二步:撰寫 API 呼叫函式

接下來,我們要在 WordPress 中寫一個函式來負責跟 OpenAI API 溝通。你可以把這段程式碼放在你的自訂外掛或子佈景主題的 `functions.php` 檔案中。這裡我們使用 WordPress 內建的 `wp_remote_post()` 函式,它是一個安全又可靠的 HTTP請求工具。

這是一個基本的範例,用來向 OpenAI 的 Chat Completions API 發送請求:


function call_openai_api($prompt) {
    // 檢查 API Key 是否有設定
    if (!defined('MY_OPENAI_API_KEY')) {
        return new WP_Error('api_key_missing', 'OpenAI API Key 未設定。');
    }

    $api_key = MY_OPENAI_API_KEY;
    $api_url = 'https://api.openai.com/v1/chat/completions';

    $headers = [
        'Authorization' => 'Bearer ' . $api_key,
        'Content-Type'  => 'application/json',
    ];

    $body = [
        'model' => 'gpt-3.5-turbo',
        'messages' => [
            ['role' => 'user', 'content' => $prompt]
        ],
        'max_tokens' => 150,
        'temperature' => 0.7,
    ];

    $args = [
        'body'    => json_encode($body),
        'headers' => $headers,
        'timeout' => 60, // 增加超時時間,因為 AI 回應可能需要時間
    ];

    $response = wp_remote_post($api_url, $args);

    if (is_wp_error($response)) {
        // 如果請求本身就出錯(例如網路問題)
        return $response;
    }

    $response_code = wp_remote_retrieve_response_code($response);
    $response_body = wp_remote_retrieve_body($response);
    $data = json_decode($response_body, true);

    if ($response_code !== 200) {
        // 如果 API 回傳錯誤訊息
        $error_message = isset($data['error']['message']) ? $data['error']['message'] : '未知 API 錯誤';
        return new WP_Error('api_error', 'OpenAI API 錯誤: ' . $error_message);
    }

    // 成功!回傳 AI 生成的內容
    return $data['choices'][0]['message']['content'];
}

這段程式碼做了幾件事:

  • 從 `wp-config.php` 安全地讀取 API Key。
  • 設定好請求的 URL、標頭 (Headers) 和內容主體 (Body)。`model` 指定了要使用的模型,`messages` 則是我們想問 AI 的問題。
  • 使用 `wp_remote_post()` 發送請求。
  • 做了完整的錯誤處理,無論是 WordPress 本身的網路錯誤還是 OpenAI API 回傳的錯誤,都能優雅地應對。
  • 如果一切順利,就解析回傳的 JSON 資料,並把 AI 生成的文字內容回傳出來。

實戰應用:打造兩個超實用的 AI 功能

有了上面的基礎函式,我們就可以開始在 WordPress 裡大展身手了。下面我舉兩個實用的例子。

應用一:AI 文章摘要產生器

每次寫完文章還要自己想摘要或 Meta 描述很煩嗎?讓 AI 幫你!我們可以建立一個簡單的 shortcode,只要在文章編輯器裡輸入 `[ai_summary]`,它就會自動抓取當前文章的內容,送給 AI 生成一段摘要。


add_shortcode('ai_summary', 'generate_post_summary_shortcode');

function generate_post_summary_shortcode() {
    // 確保這是在單一文章頁面
    if (!is_single()) {
        return '';
    }

    $post_id = get_the_ID();
    $post_content = get_the_content($post_id);

    // 清理一下 HTML 標籤和多餘空白
    $plain_text_content = wp_strip_all_tags($post_content);
    $plain_text_content = preg_replace('/\s+/', ' ', $plain_text_content);

    // 避免內容太長,截取前 2000 字元
    $content_to_summarize = mb_substr($plain_text_content, 0, 2000);

    // 使用快取,避免每次瀏覽都重新生成,省錢又加速!
    $cache_key = 'ai_summary_' . $post_id;
    $summary = get_transient($cache_key);

    if (false === $summary) {
        $prompt = '請幫我將以下文章內容濃縮成一段約 150 字的精彩摘要,風格要吸引人點擊:\n\n' . $content_to_summarize;
        $summary_result = call_openai_api($prompt);

        if (is_wp_error($summary_result)) {
            $summary = '';
        } else {
            $summary = wpautop($summary_result); // 用 p 標籤包起來
            // 將結果存入快取,有效期為 1 天 (86400 秒)
            set_transient($cache_key, $summary, 86400);
        }
    }
    
    return $summary;
}

看到沒?我還特別加上了 WordPress 的 Transients API 做快取。摘要生成一次後,會在資料庫裡暫存一天,這期間內所有訪客看到的都是快取版本,不會重複呼叫 API。這就是工程師的堅持,效能和成本都要顧到!

應用二:AI 智慧問答機器人

你可以用同樣的邏輯,打造一個基於你網站內容的問答機器人。例如,建立一個 Ajax 端點,接收前端訪客提出的問題,然後將問題連同相關頁面的內容一起餵給 AI,讓 AI 根據你的網站資料來回答,而不是胡亂瞎掰。

這部分的程式碼會更複雜,需要結合 JavaScript 和 WordPress 的 Ajax Hook,但核心思想不變:

  1. 前端: 使用者在輸入框提問,透過 JS 發送 Ajax 請求到後端。
  2. 後端 (WordPress): 接收到問題後,先用 WordPress 內建搜尋功能找到幾篇最相關的文章內容,當作「知識庫」。
  3. 呼叫 AI: 將使用者的問題和找到的「知識庫」內容一起組成一個更完整的 Prompt,送給 `call_openai_api()` 函式。例如:`「請根據以下資料:[文章內容...],回答這個問題:[使用者問題]」`。
  4. 回傳結果: 將 AI 的回答透過 Ajax 回傳給前端顯示。

透過這種方式,你就得到了一個真正了解你網站內容的專屬客服,而不是一個只會講幹話的通用聊天機器人。

結論:AI 是工具,不是魔術

直接串接 AI API,就像是給了你的 WordPress 網站一個超級大腦和一雙萬能的手。從自動化內容生成、智慧搜尋、個人化推薦到數據分析,你能實現的可能性遠遠超過市面上任何一個外掛。這條路需要你多動點手、多動點腦,但相信我,當你看到自己的網站變得如此「聰明」,那份成就感絕對是無可取代的。

別再被那些華而不實的 AI 外掛行銷話術迷惑了。捲起袖子,擁抱 API,開始打造一個真正屬於你的、獨一無二的智慧官網吧!

如果你對於如何將 AI 深度整合到你的 WordPress 專案,或是需要更複雜的客製化解決方案,感到頭痛或不知從何下手,別擔心,這正是浪花科技的專業所在。我們專注於高難度的 WordPress 客製化開發與 API 串接。歡迎點擊這裡,填寫表單與我們聯繫,讓我們的專業工程師團隊,協助你將腦中的 AI 藍圖變成現實!

延伸閱讀

// FAQ

常見問題

為什麼建議自己串接 OpenAI API,而不是直接用 AI 外掛?
自己串接 API 能取得完整的彈性與控制權,想讓 AI 做什麼都由你決定,不受外掛框架限制。成本上直接付的是純粹的 API 呼叫費用,沒有中間商抽成;數據流向也更單純(你的網站直接對 OpenAI),更容易掌控與保護使用者資料。
OpenAI 的 API 金鑰應該放在哪裡才安全?
絕對不要把 API Key 直接寫在主題的 functions.php 或外掛程式碼裡,一旦程式碼洩漏金鑰就等於裸奔。最安全的做法是把它定義在 wp-config.php 中,例如在「That's all, stop editing」註解上方加入 define('MY_OPENAI_API_KEY', 'sk-...'),這個檔案通常不會被公開存取。
在 WordPress 中要用什麼函式呼叫 OpenAI API?
建議使用 WordPress 內建的 wp_remote_post() 函式,它是安全可靠的 HTTP 請求工具。呼叫時設定好包含 Authorization Bearer 金鑰與 Content-Type 的標頭、指定 model 與 messages 的請求主體,並適度加大 timeout(因為 AI 回應需要時間)。回應要做完整錯誤處理:先用 is_wp_error() 檢查網路錯誤,再檢查回應狀態碼是否為 200,最後解析 JSON 取出生成內容。
如何用 OpenAI API 做一個 WordPress 文章摘要產生器?
可以註冊一個 shortcode(例如 [ai_summary]),在文章頁觸發時抓取當前文章內容,先用 wp_strip_all_tags() 清除 HTML 標籤、整理多餘空白,並截取前段內容(例如前 2000 字元)避免過長,再送給 AI 生成摘要。建議搭配快取機制,避免每次瀏覽都重新呼叫 API,既省錢又加速。
~/roamer-tech/newsletter // FREE
// newsletter

訂閱免費電子報

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

$
// final.exec()

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