告別圖庫訂閱費！2026 WordPress 自動化 AI 繪圖串接實戰

嗨，我是 Eric，浪花科技的那個總是坐在角落碎碎念的資深工程師。如果你跟我一樣，在這個行業打滾了十幾年，那你一定經歷過那個「找圖地獄」的年代。行銷部門在週五下午 4:55 丟來一篇文章，標題是《2026 企業數位轉型的五個關鍵》，然後跟你說：「Eric，幫我配一張『有科技感、但不要太冷漠、要有人性光輝、最好還有點台灣味』的圖片，現在就要。」

那時候我們只能翻遍 Shutterstock 或 Unsplash，找那種看了一百遍的握手圖或鍵盤圖。但現在是 2026 年了，如果你還在手動找圖，甚至還在付費訂閱昂貴的圖庫，那我只能說，你的 WordPress 網站真的該進廠維修了。

今天這篇文章，我不談虛無縹緲的 AI 趨勢，我們要來點「硬核」的。我們要直接用 PHP 寫一段程式碼，串接 AI 繪圖 API（以 OpenAI DALL-E 3 或 Midjourney API 2026 版為例），實作一個「當文章發布時，自動根據標題生成特色圖片（Featured Image）並掛載」的自動化功能。這才是真正的 AI 生成圖片整合 WordPress 實作。

為什麼不用外掛就好？工程師的堅持

我知道市面上已經有一堆 AI 繪圖外掛。但身為工程師，我們心裡都清楚那些外掛的毛病：

• 臃腫： 為了滿足所有人，塞了一堆你不需要的 UI 和設定，拖慢後台速度。
• 依賴性： 外掛開發者棄坑怎麼辦？2024 年那一波外掛倒閉潮你們忘了嗎？
• 客製化受限： 你想要在圖片生成前，先用 GPT-5 優化 Prompt？外掛通常做不到這麼細。
• 成本控制： 手刻 API 串接，你可以精準控制每一次請求的 Token 和圖片尺寸，避免行銷人員亂按燒乾你的信用卡。

2026 AI 繪圖串接架構思維

在寫 Code 之前，我們先把邏輯理清楚。這不是單純的「呼叫 API」，這涉及到 WordPress 的媒體庫機制。很多新手死在「圖生出來了，但不知道怎麼變成本地端的 Featured Image」。

我們的流程如下：

1. 觸發點 (Hook)： 監聽 `save_post` 或 `publish_post` 動作。
2. 防呆檢查： 檢查該文章是否已有特色圖片？是否正在自動儲存 (Autosave)？避免無限迴圈。
3. Prompt 工程： 這是關鍵。直接把文章標題丟給繪圖 AI 通常會得到垃圾。我們需要中間加一層 LLM (如 GPT-4o-mini) 來將標題轉譯成「繪圖專用的英文 Prompt」。
4. 請求生成： 發送 Request 給繪圖 API。
5. Sideloading (側載)： 這是 WordPress 獨有的術語。將遠端 URL 下載 -> 存入 `wp-content/uploads` -> 寫入資料庫 (`wp_posts` 和 `wp_postmeta`) -> 取得 Attachment ID。
6. 掛載： 使用 `set_post_thumbnail()` 將 ID 綁定到文章。

實戰程式碼：讓 WordPress 自己畫圖

打開你的 `functions.php` 或是你專屬的客製化外掛檔案（推薦用 Code Snippets 或自製外掛，別直接改佈景主題檔案，更新就沒了）。

第一步：生成優化過的繪圖 Prompt

我們先寫一個輔助函式，用來把中文標題轉成高品質的英文繪圖指令。這裡假設你已經把 API Key 存在 `wp-config.php` 的常數 `OPENAI_API_KEY` 裡了（資安基本常識，別直接寫在 Code 裡！）。

function eric_generate_image_prompt($title) {
    $api_url = 'https://api.openai.com/v1/chat/completions';
    $headers = [
        'Content-Type' => 'application/json',
        'Authorization' => 'Bearer ' . OPENAI_API_KEY
    ];

    // 2026年了，這裡記得用當時性價比最高的模型
    $body = json_encode([
        'model' => 'gpt-4o-mini',
        'messages' => [
            ['role' => 'system', 'content' => 'You are an expert prompt engineer for DALL-E 3. Translate the given article title into a detailed, artistic English image generation prompt. Keep it under 50 words. Focus on visual style: cyberpunk, minimal, or photographic.'],
            ['role' => 'user', 'content' => 'Article Title: ' . $title]
        ],
        'temperature' => 0.7
    ]);

    $response = wp_remote_post($api_url, [
        'headers' => $headers,
        'body' => $body,
        'timeout' => 15
    ]);

    if (is_wp_error($response)) return false;

    $body = json_decode(wp_remote_retrieve_body($response), true);
    return $body['choices'][0]['message']['content'] ?? false;
}

第二步：呼叫繪圖 API 並側載圖片

這段是最容易踩雷的地方。WordPress 的 `media_handle_sideload` 需要特定的檔案引入才能在前端運作，但在後台環境通常沒問題。為了保險起見，我們還是要手動 require 必要的檔案。

function eric_fetch_and_attach_ai_image($post_id, $prompt) {
    // 呼叫繪圖 API (以 DALL-E 3 為例)
    $img_api_url = 'https://api.openai.com/v1/images/generations';
    $headers = [
        'Content-Type' => 'application/json',
        'Authorization' => 'Bearer ' . OPENAI_API_KEY
    ];
    
    $body = json_encode([
        'model' => 'dall-e-3',
        'prompt' => $prompt,
        'n' => 1,
        'size' => '1024x1024', // 2026 標準尺寸
        'quality' => 'standard',
        'response_format' => 'url'
    ]);

    $response = wp_remote_post($img_api_url, [
        'headers' => $headers,
        'body' => $body,
        'timeout' => 60 // 繪圖比較慢，Timeout 設長一點
    ]);

    if (is_wp_error($response)) return;

    $data = json_decode(wp_remote_retrieve_body($response), true);
    $image_url = $data['data'][0]['url'] ?? false;

    if (!$image_url) return;

    // 開始側載 (Sideloading)
    require_once(ABSPATH . 'wp-admin/includes/media.php');
    require_once(ABSPATH . 'wp-admin/includes/file.php');
    require_once(ABSPATH . 'wp-admin/includes/image.php');

    // 建立臨時檔案描述
    $file_array = [];
    $file_array['name'] = 'ai-gen-' . $post_id . '.png';
    $file_array['tmp_name'] = download_url($image_url);

    if (is_wp_error($file_array['tmp_name'])) {
        @unlink($file_array['tmp_name']); // 清理垃圾
        return;
    }

    // 將圖片存入媒體庫
    $desc = "AI generated image for post " . $post_id;
    $attachment_id = media_handle_sideload($file_array, $post_id, $desc);

    // 檢查是否有錯，沒錯就設為特色圖片
    if (!is_wp_error($attachment_id)) {
        set_post_thumbnail($post_id, $attachment_id);
        
        // 順便補上 Alt Text (SEO 加分關鍵)
        update_post_meta($attachment_id, '_wp_attachment_image_alt', $prompt);
    } else {
        @unlink($file_array['tmp_name']);
    }
}

第三步：掛載到 Hook 上

最後，我們要把它串起來。這裡我會加一個檢查機制：只有在文章狀態轉為 `publish` 且原本沒有特色圖片時才執行。這樣可以避免你在編輯草稿時，它一直瘋狂畫圖燒錢。

add_action('transition_post_status', 'eric_auto_generate_thumbnail', 10, 3);

function eric_auto_generate_thumbnail($new_status, $old_status, $post) {
    // 只在發布時執行，且排除自動儲存
    if ($new_status !== 'publish' || $new_status === $old_status) return;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    
    // 排除非文章類型 (例如頁面或產品)
    if ($post->post_type !== 'post') return;

    // 如果已經有特色圖片，就不動作
    if (has_post_thumbnail($post->ID)) return;

    // 執行生成邏輯
    $prompt = eric_generate_image_prompt($post->post_title);
    if ($prompt) {
        eric_fetch_and_attach_ai_image($post->ID, $prompt);
    }
}

進階優化：SEO 與效能的考量

程式碼跑得動是一回事，跑得好又是另一回事。在 2026 年的網站架構標準下，我們還要注意以下幾點：

1. 圖片格式轉換 (WebP/AVIF)

API 回傳的通常是 PNG 或 JPG。直接用 PNG 當特色圖片，你的 PageSpeed Insights 分數會比吃了瀉藥還慘。務必確保你的伺服器端有安裝 ImageMagick 並且 WordPress 已經開啟了自動轉檔 WebP 的功能，或者搭配像是 Cloudflare 的 Polish 功能在邊緣節點進行轉換。

2. Alt Text 的自動化

我在上面的程式碼中，偷懶直接把 Prompt 塞進 Alt Text。但在實務上，Prompt 裡的「cyberpunk style, 8k resolution」這些詞對 SEO 沒幫助，甚至可能被 Google 視為關鍵字堆砌。更好的做法是，再 call 一次 Vision API，請它描述這張圖的內容，並用中文填寫 Alt。

3. 非同步處理 (Async)

上面的程式碼是在 `save_post` 過程中同步執行的。這意味著，當你按下「發布」按鈕，你會看著瀏覽器轉圈圈轉個 10 秒（因為 DALL-E 畫圖很慢）。如果 timeout，文章可能發布失敗。

專業解法： 使用 Queue (佇列) 機制。在 WordPress 裡，就是使用 `WP-Cron` 或 Action Scheduler。把「畫圖」這件事丟到背景執行，讓編輯人員可以秒速發布文章，圖片等畫好了再悄悄補上去。

總結：人機協作的新常態

透過這套流程，我們不再是 AI 的奴隸（整天在那邊想 Prompt），而是 AI 的指揮官。這套 AI 生成圖片整合 WordPress 實作 方案，不僅省下了圖庫費用，更重要的是釋放了時間。當然，這段 Code 只是基礎，你還可以結合 n8n 做更瘋狂的自動化，例如根據文章分類決定畫風，或是自動發布到 Instagram。

技術是在不斷演進的，別讓你的網站停留在 2020 年。動手改寫你的 `functions.php` 吧！

延伸閱讀

• 圖片載入慢到讓人想砸電腦？WordPress 圖片終極優化聖經：從 Lazy Load 到 WebP 全攻略
• 資料孤島終結者！n8n Webhook + API 串接實戰：讓你的 WordPress 與外部系統「秒速」通靈
• Google 看不懂你的網站？工程師教你用 Schema 結構化資料「說人話」，打造霸榜 SEO 的底層邏輯