縮圖救星！2026 WordPress x DALL-E 3 API：用 Hook 自動生成「讀懂文章」的精準首圖

嗨，我是浪花科技的 Eric。如果你跟我一樣，寫程式碼可以寫一整天，但要幫部落格文章找一張「不那麼尷尬」的配圖卻要花上一小時，那你來對地方了。到了 2026 年，如果你的 WordPress 網站還在用那些「兩個穿西裝的人握手」的無聊圖庫照片，真的會被使用者（還有 Google 的演算法）嫌棄。

今天這篇文章不講虛的，我們要直接動手寫 Code。我要教你如何利用 WordPress 的 Hooks 機制，結合 OpenAI DALL-E 3 API 和 GPT 模型，在文章發布的那一瞬間，自動分析你的文章內容，生成專屬的 Prompt（提示詞），然後產出一張獨一無二的精選圖片（Featured Image）並自動掛載。這不只是自動化，這是「智慧化」。

為什麼 2026 年你需要「程式化」的圖片生成？

在 2026 年的今天，生成式 AI 已經不是新鮮事，但「整合」依然是大多數開發者的痛點。我們常常看到這種半吊子的流程：去 ChatGPT 產圖 -> 下載 -> 改檔名 -> 上傳 WordPress -> 設定精選圖片。這個流程太斷裂了。

身為資深工程師，我們的目標是 「Zero-Click Creation」。自動生成首圖有以下幾個技術優勢：

• SEO 獨特性： Google 痛恨重複內容，圖片也不例外。AI 生成的圖片擁有獨特的指紋，有助於圖片搜尋優化。
• 內容相關性 (Context Awareness)： 透過先讓 AI「讀懂」文章再繪圖，圖片內容會精準呼應標題，而不是文不對題。
• 節省頻寬與時間： 自動壓縮並轉換為 WebP 或 AVIF (2026 主流格式)，無需人工處理。

架構設計：雙重 AI 呼叫 (Two-Step AI Chain)

要做到「精準」，我們不能直接把文章標題丟給 DALL-E 3，因為標題通常太短或太抽象。我們需要一個「中間人」。我的架構邏輯如下：

1. 監聽 Hook： 當文章狀態轉變為 publish 時觸發。
2. 萃取與摘要： 抓取文章前 1000 字，丟給 LLM (如 GPT-4o 或更輕量的模型) 進行摘要，並要求它回傳一段「專門給 DALL-E 用的英文提示詞」。
3. 繪圖生成： 將這段提示詞丟給 DALL-E 3 API。
4. 媒體庫掛載： 透過 WordPress 內建的 media_handle_sideload 將圖片存入媒體庫並設為精選圖片。

實戰程式碼：functions.php 實作

既然你是看這篇文章的工程師，我知道你想要什麼。以下是可以直接用於經典編輯器（Classic Editor）或區塊編輯器環境的 PHP 程式碼。請將其放入你的佈景主題 functions.php 或自製的外掛中。

注意：請務必將 YOUR_OPENAI_API_KEY 替換為你的真實金鑰，並建議將金鑰存放在 wp-config.php 常數中以策安全。

<?php
// 定義 API Key，建議放在 wp-config.php
if ( ! defined( 'OPENAI_API_KEY' ) ) {
    define( 'OPENAI_API_KEY', 'sk-xxxxxxxxxxxxxxxxxxxxxxxx' );
}

/**
 * 主函式：當文章發布時自動生成圖片
 */
function eric_auto_generate_featured_image( $post_id, $post, $update ) {
    // 1. 基本檢查：如果是自動存檔、修訂版本或非文章類型，則跳過
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if ( wp_is_post_revision( $post_id ) ) return;
    if ( 'post' !== $post->post_type ) return;
    if ( 'publish' !== $post->post_status ) return;

    // 2. 避免無限迴圈 (因為我們後面會更新文章)
    remove_action( 'save_post', 'eric_auto_generate_featured_image', 10 );

    // 3. 檢查是否已經有精選圖片 (如果有，就不覆蓋，節省 API 成本)
    if ( has_post_thumbnail( $post_id ) ) {
        add_action( 'save_post', 'eric_auto_generate_featured_image', 10, 3 );
        return;
    }

    // 4. 步驟一：呼叫 LLM 產生 Prompt
    $content_snippet = wp_trim_words( $post->post_content, 500 );
    $image_prompt = eric_get_dalle_prompt_from_text( $post->post_title, $content_snippet );

    if ( ! $image_prompt ) {
        // 錯誤處理：可以在此寫入 Log
        error_log( 'OpenAI Prompt Generation Failed for Post ID: ' . $post_id );
        add_action( 'save_post', 'eric_auto_generate_featured_image', 10, 3 );
        return;
    }

    // 5. 步驟二：呼叫 DALL-E 3 生成圖片
    $image_url = eric_generate_image_from_dalle( $image_prompt );

    if ( $image_url ) {
        // 6. 步驟三：下載並掛載圖片
        $attach_id = eric_sideload_image( $image_url, $post_id, $image_prompt );
        if ( $attach_id ) {
            set_post_thumbnail( $post_id, $attach_id );
        }
    }

    // 加回 Hook
    add_action( 'save_post', 'eric_auto_generate_featured_image', 10, 3 );
}
add_action( 'save_post', 'eric_auto_generate_featured_image', 10, 3 );

/**
 * 輔助函式：用 GPT-4o 模型將文章轉為繪圖指令
 */
function eric_get_dalle_prompt_from_text( $title, $content ) {
    $url = 'https://api.openai.com/v1/chat/completions';
    
    $system_msg = "You are an expert AI art prompter. Create a detailed, artistic English prompt for DALL-E 3 based on the user's article title and content. style: modern minimalist tech illustration, isometric, high quality. Response ONLY the prompt text, no other words.";
    
    $user_msg = "Title: $title\nContent Snippet: $content";

    $body = [
        'model' => 'gpt-4o',
        'messages' => [
            ['role' => 'system', 'content' => $system_msg],
            ['role' => 'user', 'content' => $user_msg],
        ],
        'temperature' => 0.7,
    ];

    $response = wp_remote_post( $url, [
        'headers' => [
            'Authorization' => 'Bearer ' . OPENAI_API_KEY,
            'Content-Type'  => 'application/json',
        ],
        'body'    => json_encode( $body ),
        'timeout' => 30,
    ] );

    if ( is_wp_error( $response ) ) return false;

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

/**
 * 輔助函式：呼叫 DALL-E 3 API
 */
function eric_generate_image_from_dalle( $prompt ) {
    $url = 'https://api.openai.com/v1/images/generations';

    $body = [
        'model'  => 'dall-e-3',
        'prompt' => substr( $prompt, 0, 1000 ), // DALL-E 限制
        'n'      => 1,
        'size'   => '1024x1024',
    ];

    $response = wp_remote_post( $url, [
        'headers' => [
            'Authorization' => 'Bearer ' . OPENAI_API_KEY,
            'Content-Type'  => 'application/json',
        ],
        'body'    => json_encode( $body ),
        'timeout' => 60, // 產圖比較久，Timeout 設長一點
    ] );

    if ( is_wp_error( $response ) ) return false;

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

/**
 * 輔助函式：將遠端 URL 存入 WordPress 媒體庫
 */
function eric_sideload_image( $url, $post_id, $desc ) {
    require_once( ABSPATH . 'wp-admin/includes/media.php' );
    require_once( ABSPATH . 'wp-admin/includes/file.php' );
    require_once( ABSPATH . 'wp-admin/includes/image.php' );

    $tmp = download_url( $url );

    if ( is_wp_error( $tmp ) ) return false;

    $file_array = [
        'name'     => 'ai-generated-' . $post_id . '.png',
        'tmp_name' => $tmp,
    ];

    $id = media_handle_sideload( $file_array, $post_id, $desc );

    if ( is_wp_error( $id ) ) {
        @unlink( $file_array['tmp_name'] );
        return false;
    }

    return $id;
}
?>

程式碼解析與潛在坑點

這段程式碼看起來很美好，但在實際的 2026 商業環境中，身為工程師的我有幾個「囉嗦」的提醒：

1. Timeout 風險

眼尖的你可能發現了，我在 wp_remote_post 把 Timeout 設成了 60 秒。DALL-E 3 產圖有時候非常慢，如果你的伺服器 PHP 執行時間限制（max_execution_time）太短，這個 Process 會直接掛掉。最佳實踐建議： 在生產環境中，不要在 save_post 這種同步流程做這件事，應該改用 WordPress 的 Action Scheduler 將產圖任務丟到背景佇列執行。

2. 成本控制

雖然 2026 年 API 降價了，但 DALL-E 3 每張圖還是要錢的。我的程式碼中有加入 has_post_thumbnail 的檢查，這很重要。如果你只是進去改個錯字重新存檔，絕對不希望 AI 又幫你重新畫一張圖扣你的錢。

3. Prompt Engineering (提示詞工程)

我在程式碼中寫死了 modern minimalist tech illustration（現代極簡科技插畫）風格。這是為了保持部落格風格的一致性。如果你不限制風格，AI 可能今天給你畫浮世繪，明天畫像素風，你的部落格首頁會看起來像個災難現場。

結語：從「操作」進化到「策略」

這套系統上線後，我們的編輯團隊只要專注於文字內容，按下發布，精美的首圖就自動到位。這不僅省下了每篇文章 20-30 分鐘找圖的時間，更重要的是，它讓我們的網站展現出一種「Tech-Savvy」的氣質。

技術本身不是目的，解決問題才是。如果你對這種自動化工作流感興趣，或者想把更複雜的 AI Agent 整合進你的 WordPress 系統，隨時歡迎來找我聊聊。

延伸閱讀

• 131. 圖片還在手動找？資深工程師教你用 OpenAI DALL-E 3 API 打造 WordPress 自動配圖流水線
• 105. 拒絕 AI 廢文！用 n8n + Gemini 1.5 Pro 打造「虛擬編輯團隊」自動化內容流水線 (2025 實戰)
• 198. API 狂 Call 被鎖？別再暴力重試！資深工程師教你 WordPress『指數退讓』優雅自救術