WordPress 不是不用寫code就有網站了嗎?
WordPress 本身是一個 內容管理系統 (CMS)，裝好之後就已經能「不用寫程式」建一個網站了。
為什麼會有人「寫程式」或「寫外掛」？
外掛 (Plugin)：WordPress 社群有成千上萬的外掛，像是 SEO、購物車、表單、會員系統等等，大部分功能只要安裝外掛就能用，不需要自己寫程式。
寫外掛的用途：如果你需要的功能外掛市集找不到，或現有外掛不能滿足需求，才會自己寫外掛（或請工程師寫）。例如：你想把 Google Gemini AI 整合進 WordPress 幫你生成文章，就需要客製化外掛。
所以情況是：
一般網站需求（公司介紹、部落格、電商）：完全不用寫程式，只要挑佈景主題 + 裝外掛就好。
特殊需求（像是 AI 文章自動生成、跟公司內部系統串接、很客製化的功能）：這時候才需要寫程式，寫外掛或改佈景。
Gemini Cli 寫WordPress 外掛
Gemini Cli
╭──────────────────────────────────────────────────────────╮
│ > 如何開發ｗｏｒｄｐｒｅｓｓ使用ｇｅｍｉｎｉ的外掛程式 │
╰──────────────────────────────────────────────────────────╯
✦ 太棒了！開發一個整合 Gemini API 的 WordPress 外掛程式是一個非常實用的專案。下面我會提供一個完整、循序漸進的教學，從建立檔案到完成一個可以使用的基本外掛。
這個外掛的功能是：
1. 在 WordPress 後台提供一個設定頁面，讓你輸入你的 Gemini API 金鑰。
2. 提供一個簡碼 (Shortcode)，讓你在文章或頁面中像這樣使用：[gemini_response prompt="你好，世界"]，然後它會被自動替換為 Gemini 的回覆。
---
前置準備
1. 一個 WordPress 網站：你需要有管理員權限，並且能夠上傳外掛檔案。本機開發環境或線上網站都可以。
2. Google AI Gemini API 金鑰：前往 Google AI for Developers (https://ai.google.dev/) 獲取你的 API 金鑰。
---
步驟一：建立外掛基本結構
1. 在你的 WordPress 網站的 wp-content/plugins/ 目錄下，建立一個新的資料夾，例如 gemini-wordpress-plugin。
2. 在這個新資料夾中，建立一個 PHP 檔案，名稱與資料夾相同，例如 gemini-wordpress-plugin.php。
3. 打開 gemini-wordpress-plugin.php 檔案，在最上方貼上 WordPress 外掛所需的標頭資訊。這段註解非常重要，它告訴 WordPress 這是一個外掛。
1 <?php
2 /**
3 * Plugin Name: Gemini AI Assistant
4 * Plugin URI: https://example.com/
5 * Description: Integrates Google's Gemini API into your WordPress site using a shortcode.
6 * Version: 1.0.0
7 * Author: Your Name
8 * Author URI: https://example.com/
9 * License: GPL v2 or later
10 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
11 * Text Domain: gemini-ai
12 */
13
14 // 防止直接訪問檔案
15 if (!defined('ABSPATH')) {
16 exit;
17 }
18
19 // 後續的所有程式碼都將加在這裡...
---
步驟二：建立後台設定頁面
我們需要一個地方來儲存 Gemini API 金鑰。最好的方式是在 WordPress 後台新增一個設定頁面。
將以下程式碼加入到你的 gemini-wordpress-plugin.php 檔案中：
1 // 1. 新增後台選單
2 function gemini_plugin_add_admin_menu() {
3 add_options_page(
4 'Gemini AI Settings', // 頁面標題
5 'Gemini AI', // 選單標題
6 'manage_options', // 所需權限
7 'gemini_ai_settings', // 選單 slug
8 'gemini_plugin_settings_page' // 顯示頁面內容的函式
9 );
10 }
11 add_action('admin_menu', 'gemini_plugin_add_admin_menu');
12
13 // 2. 註冊設定
14 function gemini_plugin_register_settings() {
15 register_setting(
16 'gemini_plugin_options_group', // 選項組名稱
17 'gemini_plugin_api_key' // 選項名稱
18 );
19 }
20 add_action('admin_init', 'gemini_plugin_register_settings');
21
22 // 3. 渲染設定頁面的 HTML
23 function gemini_plugin_settings_page() {
24 ?>
25 <div class="wrap">
26 <h1>Gemini AI Assistant Settings</h1>
27 <form method="post" action="options.php">
28 <?php
29 settings_fields('gemini_plugin_options_group');
30 do_settings_sections('gemini_ai_settings');
31 ?>
32 <table class="form-table">
33 <tr valign="top">
34 <th scope="row">Gemini API Key</th>
35 <td><input type="text" name="gemini_plugin_api_key" value="<?php echo esc_attr(get_option('gemini_plugin_api_key')); ?>" size="50" /></td>
36 </tr>
37 </table>
38 <?php submit_button(); ?>
39 </form>
40 </div>
41 <?php
42 }
現在，你可以到 WordPress 後台的「外掛」頁面啟用 "Gemini AI Assistant"。啟用後，在「設定」選單下，你應該會看到一個新的 "Gemini AI" 子選單。點擊它，你就可以輸入並儲存你的 API 金鑰了。
---
步驟三：建立 Shortcode 並呼叫 Gemini API
這是核心功能。我們將建立一個 [gemini_response] 的簡碼。當 WordPress 在文章中偵測到這個簡碼時，它會執行一個函式，該函式會呼叫 Gemini API 並返回結果。
將以下程式碼加入到你的 gemini-wordpress-plugin.php 檔案中：
1 function gemini_response_shortcode($atts) {
2 // 1. 處理簡碼的參數，設定預設值
3 $atts = shortcode_atts(
4 array(
5 'prompt' => 'Hello, what is WordPress?', // 預設提示
6 ),
7 $atts,
8 'gemini_response'
9 );
10
11 $prompt = sanitize_text_field($atts['prompt']);
12 $api_key = get_option('gemini_plugin_api_key');
13
14 // 2. 檢查 API 金鑰和提示是否存在
15 if (empty($api_key)) {
16 return '<p style="color: red;">Error: Gemini API key is not set.</p>';
17 }
18 if (empty($prompt)) {
19 return '<p style="color: red;">Error: Prompt is empty.</p>';
20 }
21
22 // 3. 準備 API 請求
23 $api_url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=' . $api_key;
24
25 $request_body = array(
26 'contents' => array(
27 array(
28 'parts' => array(
29 array(
30 'text' => $prompt
31 )
32 )
33 )
34 )
35 );
36
37 $args = array(
38 'body' => json_encode($request_body),
39 'headers' => array('Content-Type' => 'application/json'),
40 'timeout' => 60, // 60 秒超時
41 'method' => 'POST',
42 );
43
44 // 4. 使用 WordPress 的 HTTP API 發送請求
45 $response = wp_remote_post($api_url, $args);
46
47 // 5. 處理 API 回應
48 if (is_wp_error($response)) {
49 return '<p style="color: red;">Error: Failed to connect to API. ' . $response->get_error_message() . '</p>';
50 }
51
52 $response_body = wp_remote_retrieve_body($response);
53 $result = json_decode($response_body, true);
54
55 // 檢查 Gemini API 是否返回錯誤
56 if (isset($result['error'])) {
57 return '<p style="color: red;">API Error: ' . esc_html($result['error']['message']) . '</p>';
58 }
59
60 // 提取並返回 Gemini 的回覆
61 if (isset($result['candidates'][0]['content']['parts'][0]['text'])) {
62 $gemini_text = $result['candidates'][0]['content']['parts'][0]['text'];
63 // 將 Markdown 格式的換行符轉換為 HTML 的 <br>
64 return wpautop(esc_html($gemini_text));
65 }
66
67 return '<p style="color: red;">Error: Could not parse Gemini response.</p>';
68 }
69 add_shortcode('gemini_response', 'gemini_response_shortcode');
步驟四：如何使用
1. 啟用外掛：到 WordPress 後台 > 外掛，啟用 "Gemini AI Assistant"。
2. 設定 API 金鑰：到 WordPress 後台 > 設定 > Gemini AI，輸入你的 Gemini API 金鑰並儲存。
3. 在文章中使用：建立或編輯一個文章/頁面，在內容編輯器中輸入以下簡碼：
1 [gemini_response prompt="請用中文介紹一下什麼是 WordPress"]
或者
1 [gemini_response prompt="寫一首關於程式設計的短詩"]
4. 預覽/發布：儲存並查看你的文章，簡碼會被替換成 Gemini API 的回覆內容。
---
接下來的進階功能建議
這個基本外掛已經可以運作了，但你還可以擴充很多功能，讓它更強大：
1. 非同步請求 (AJAX)：目前的方式會在頁面載入時呼叫 API，如果 API 回應慢，會拖慢整個頁面。你可以改成用 JavaScript (AJAX) 在頁面載入後再發送請求，並顯示一個「載入中...」的動畫。
2. 快取 (Cache)：對於相同的 prompt，API 的回覆可能是一樣的。你可以將結果暫存在 WordPress 的 Transients API 中，設定一個過期時間（例如 24 小時）。這樣可以大幅減少 API
呼叫次數，節省成本並加快速度。
3. 更豐富的 UI：與其用簡碼，你可以在文章編輯器側邊欄新增一個 Meta Box，讓使用者可以直接輸入提示詞，點擊按鈕生成內容並插入到文章中。
4. 支援更多參數：Gemini API 有很多參數可以調整，比如 temperature, maxOutputTokens 等。你可以讓使用者在簡碼中設定這些參數。
5. 錯誤處理：提供更詳細、對使用者更友善的錯誤訊息。
╭──────────────────────────────╮
│ > 可以用ｌｏｃａｌ來測試嗎 │
╰──────────────────────────────╯
✦ 當然可以！使用本地端 (Local) 環境來測試是開發 WordPress 外掛的標準做法，而且是強烈推薦的方式。
在本地端開發有非常多的好處：
* 安全：你不會影響到任何線上的正式網站，可以隨意修改和測試，不用擔心弄壞東西。
* 快速：所有檔案都在你的電腦上，修改程式碼後儲存即可立即看到效果，不需要透過 FTP 或其他方式上傳檔案。
* 免費：本地環境是免費的，而且在 Gemini API 的免費額度內，你也不需要花任何錢。
* 離線工作：除了需要呼叫 Gemini API 的那一刻，大部分的開發工作都可以在沒有網路連線的情況下完成。
如何設定本地 WordPress 環境
對於 WordPress 開發，最推薦的工具叫做 Local (以前叫做 Local by Flywheel)。它是一個免費的應用程式，可以一鍵建立和管理本地的 WordPress 網站，操作非常簡單。
步驟一：下載並安裝 Local
前往官方網站下載符合你作業系統的 Local 應用程式。
官方網站：[https://localwp.com/](https://localwp.com/)
步驟二：在 Local 中建立一個新網站
1. 打開 Local 應用程式。
2. 點擊左下角的 + 按鈕 (Create a new site)。
3. 跟隨引導，輸入你的網站名稱（例如 gemini-test）。
4. 選擇預設的環境設定 (Preferred) 即可，它會自動幫你設定好 PHP、Web 伺服器和資料庫。
5. 設定你的 WordPress 管理員帳號和密碼。
6. 點擊 "Add Site"，等待幾分鐘，Local 就會幫你把整個 WordPress 網站架設好。
步驟三：找到你的外掛資料夾
1. 在 Local 的介面中，你會看到你剛剛建立的網站。
2. 在網站名稱旁邊，點擊 "Go to site folder" 按鈕（或是一個指向右邊的箭頭圖示）。
3. 這會打開你電腦的檔案總管，並定位到該網站的根目錄。路徑看起來會像這樣：
* macOS: /Users/你的使用者名稱/Local Sites/gemini-test/
* Windows: C:\Users\你的使用者名稱\Local Sites\gemini-test\
4. 進入 app/public/wp-content/plugins/ 這個路徑。這裡就是你本地網站的外掛資料夾。
步驟四：放入並啟用你的 Gemini 外掛
1. 將你之前建立的 gemini-wordpress-plugin 資料夾整個複製到這個 plugins 資料夾裡面。
2. 回到 Local 應用程式，點擊 "WP Admin" 按鈕，登入你本地網站的 WordPress 後台。
3. 跟在線上網站一樣，到「外掛」頁面，你就會看到 "Gemini AI Assistant"，點擊「啟用」。
4. 接著去「設定」>「Gemini AI」輸入你的 API 金鑰並測試。
一個重要的提醒
雖然你的 WordPress 網站是在本地端運行的，但是你的外掛需要呼叫 Google 的 Gemini API。這是一個外部網路請求。
所以，在測試 API 功能時，你的電腦必須要連上網路。
如果沒有網路，wp_remote_post() 函式會失敗，你的外掛會顯示無法連接到 API 的錯誤訊息。
總結來說，使用 Local 進行開發是完全可行的，也是最專業、最高效的方式。祝你開發順利！
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ You are running Gemini CLI in your home directory. It is recommended to run in a project-specific directory. │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
Using: 1 GEMINI.md file
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > Type your message or @path/to/file │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
~ no sandbox (see /docs) gemini-2.5-pro (99% context left)
使用lcaolwp測試
╭──────────────────────────────╮
│ > 可以用ｌｏｃａｌ來測試嗎 │
╰──────────────────────────────╯
✦ 當然可以！使用本地端 (Local) 環境來測試是開發 WordPress 外掛的標準做法，而且是強烈推薦的方式。
在本地端開發有非常多的好處：
* 安全：你不會影響到任何線上的正式網站，可以隨意修改和測試，不用擔心弄壞東西。
* 快速：所有檔案都在你的電腦上，修改程式碼後儲存即可立即看到效果，不需要透過 FTP 或其他方式上傳檔案。
* 免費：本地環境是免費的，而且在 Gemini API 的免費額度內，你也不需要花任何錢。
* 離線工作：除了需要呼叫 Gemini API 的那一刻，大部分的開發工作都可以在沒有網路連線的情況下完成。
如何設定本地 WordPress 環境
對於 WordPress 開發，最推薦的工具叫做 Local (以前叫做 Local by Flywheel)。它是一個免費的應用程式，可以一鍵建立和管理本地的 WordPress 網站，操作非常簡單。
步驟一：下載並安裝 Local
前往官方網站下載符合你作業系統的 Local 應用程式。
官方網站：[https://localwp.com/](https://localwp.com/)
步驟二：在 Local 中建立一個新網站
1. 打開 Local 應用程式。
2. 點擊左下角的 + 按鈕 (Create a new site)。
3. 跟隨引導，輸入你的網站名稱（例如 gemini-test）。
4. 選擇預設的環境設定 (Preferred) 即可，它會自動幫你設定好 PHP、Web 伺服器和資料庫。
5. 設定你的 WordPress 管理員帳號和密碼。
6. 點擊 "Add Site"，等待幾分鐘，Local 就會幫你把整個 WordPress 網站架設好。
步驟三：找到你的外掛資料夾
1. 在 Local 的介面中，你會看到你剛剛建立的網站。
2. 在網站名稱旁邊，點擊 "Go to site folder" 按鈕（或是一個指向右邊的箭頭圖示）。
3. 這會打開你電腦的檔案總管，並定位到該網站的根目錄。路徑看起來會像這樣：
* macOS: /Users/你的使用者名稱/Local Sites/gemini-test/
* Windows: C:\Users\你的使用者名稱\Local Sites\gemini-test\
4. 進入 app/public/wp-content/plugins/ 這個路徑。這裡就是你本地網站的外掛資料夾。
步驟四：放入並啟用你的 Gemini 外掛
1. 將你之前建立的 gemini-wordpress-plugin 資料夾整個複製到這個 plugins 資料夾裡面。
2. 回到 Local 應用程式，點擊 "WP Admin" 按鈕，登入你本地網站的 WordPress 後台。
3. 跟在線上網站一樣，到「外掛」頁面，你就會看到 "Gemini AI Assistant"，點擊「啟用」。
4. 接著去「設定」>「Gemini AI」輸入你的 API 金鑰並測試。
一個重要的提醒
雖然你的 WordPress 網站是在本地端運行的，但是你的外掛需要呼叫 Google 的 Gemini API。這是一個外部網路請求。
所以，在測試 API 功能時，你的電腦必須要連上網路。
如果沒有網路，wp_remote_post() 函式會失敗，你的外掛會顯示無法連接到 API 的錯誤訊息。
總結來說，使用 Local 進行開發是完全可行的，也是最專業、最高效的方式。祝你開發順利！
執行結果
總結
第一次使用WordPress 就開發了外掛程式，還可以成功的執行起來，只能說
Gemini Cli 真的太神啦!!!!!
iThome鐵人賽
看影片追技術