~/blog/wordpress-dalle-3-auto-featured-image-api-2026.md
WordPress 開發與技巧 · 2026 / 02 / 22

縮圖救星!2026 WordPress x DALL-E 3 API:用 Hook 自動生成「讀懂文章」的精準首圖 (附完整 PHP 範例)

Eric — 浪花科技創辦人 / AI 架構師
Eric
浪花科技創辦人 · AI 架構師
縮圖救星!2026 WordPress x DALL-E 3 API:用 Hook 自動生成「讀懂文章」的精準首圖 (附完整 PHP 範例)
目錄 table-of-contents.md

寫程式可以寫一整天,幫文章找一張不尷尬的配圖卻要耗掉一小時——最後還常常選到「兩個穿西裝的人握手」那種圖庫照。這篇用 WordPress Hook 串接 DALL-E 3 API,讓系統在發文時讀懂文章內容、自動生成精準首圖,附完整 PHP 範例直接抄回去用。

今天這篇文章不講虛的,我們要直接動手寫 Code。我要教你如何利用 WordPress 的 Hooks 機制,結合 OpenAI DALL-E 3 APIGPT 模型,在文章發布的那一瞬間,自動分析你的文章內容,生成專屬的 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 系統,隨時歡迎來找我聊聊。

延伸閱讀

想為企業導入 AI 自動化工作流?

別讓重複性工作消耗你的創造力。立即聯繫浪花科技,讓我們為你打造專屬的自動化解決方案。

填寫表單聯繫我們
// FAQ

常見問題

如何在 WordPress 文章發布時自動生成特色圖片?
監聽 save_post Hook,當文章狀態轉為 publish 時觸發;先抓取文章標題與內容片段丟給 LLM 產生英文繪圖 Prompt,再把 Prompt 送給 DALL-E 3 生成圖片,最後透過 media_handle_sideload 把圖片存入媒體庫並用 set_post_thumbnail() 綁定為特色圖片。
自動生成首圖的 Hook 為什麼會造成無限迴圈,要如何避免?
因為生成圖片後會更新文章,而更新文章又會再次觸發 save_post,形成無限迴圈。解法是在函式執行業務邏輯前先用 remove_action 移除自身掛載,處理完成後再用 add_action 加回去;同時加上 DOING_AUTOSAVE、wp_is_post_revision 與文章類型等防呆檢查。
自動產圖功能要怎麼避免重複扣 API 費用?
在生成前先用 has_post_thumbnail() 檢查該文章是否已有特色圖片,若已存在就直接略過、不再呼叫 API。這樣可以避免每次儲存文章都重新產圖,節省 DALL-E 與 LLM 的請求成本。
自動生成的 AI 首圖對 SEO 有什麼好處?
AI 為每篇文章生成的圖片擁有獨特指紋,不會像通用圖庫照片那樣大量重複,有助於圖片搜尋優化;而且先讓 AI 讀懂文章再繪圖,圖片內容會精準呼應主題而非文不對題,提升內容相關性。
~/roamer-tech/newsletter // FREE
// newsletter

訂閱免費電子報

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

$
// final.exec()

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