「感覺對了，Code 就來了？」- 資深工程師的 Vibe Coding 實戰，帶你打造第一個 WordPress 靈感小工具

嗨，我是浪花科技的 Eric。身為一個整天跟程式碼、伺服器和 API 打交道的工程師，我聽過太多創作者朋友對「寫 Code」這件事的恐懼：「我是設計師，看到程式碼就頭痛」、「我只是想在側邊欄加個小功能，為什麼要搞得像在造火箭？」、「Vibe Coding 聽起來很酷，但那真的能用嗎？不會寫出什麼數位垃圾吧？」

上次我們聊了《Code 不再是麻瓜的魔法！創作者專屬「Vibe Coding」心法》，解釋了這個以「感覺」和「目標」為導向的開發哲學。但光說不練是假把戲，今天，我就要帶你捲起袖子，把這個聽起來有點玄的概念，變成你網站上一個真正能動、能看見的小東西。這就是一篇專為非資工背景的你設計的 **創作者視角的程式開發：不用當資工背景也能玩 Vibe Coding 的入門指南** 實戰篇。

我們要做的很簡單：一個會在你的 WordPress 網站側邊欄顯示「每日一句」或「隨機靈感」的文字小工具 (Widget)。別怕，我們不會一頭栽進複雜的物件導向或演算法地獄。相反地，我們要用 Vibe Coding 的精神，一步步把「我想要…」的感覺，翻譯成電腦看得懂的語言。

Vibe Coding 的第一步：從「我想要」到「它需要」

傳統的程式開發，開頭通常是規格書、功能列表、資料庫結構圖…等等讓人頭大的文件。但 Vibe Coding 不一樣，我們的起點是一個純粹的「感覺」或「畫面」。

第一階段：把 Vibe 具象化

閉上眼睛想像一下，你希望這個小工具長怎樣？

• 感覺： 我希望每次刷新頁面，訪客都能看到一句不一樣的、能激發靈感的短語。
• 畫面： 在文章右邊的側邊欄，有一個小小的區塊，裡面就一行字，乾乾淨淨的。
• 目標： 讓網站更有溫度，而不只是一堆冰冷的資訊。

好了，這就是我們的「需求」。接著，身為一個（假裝是 Vibe Coder 的）工程師，我要開始翻譯了。

第二階段：翻譯成電腦的語言

電腦聽不懂「溫度」或「靈感」，它只懂指令。所以我們要把它拆解成具體的任務：

• 「一個小小的區塊」 -> WordPress 裡叫做 **Widget (小工具)**。
• 「在側邊欄」 -> 我們要把這個 Widget 註冊到 WordPress 的小工具區域。
• 「一句不一樣的短語」 -> 我們需要一個 **短語清單 (陣列)**。
• 「每次刷新都不一樣」 -> 我們需要一個 **隨機選取** 的機制。

看到沒？我們已經把一個模糊的「Vibe」，變成了一張清晰的施工藍圖。這就是 Vibe Coding 的核心：目標驅動，拆解任務。你不需要一開始就懂所有技術細節，你只需要清楚知道你想完成什麼。

動手實戰：打造你的第一個「靈感製造機」外掛

接下來就是重頭戲了。我們會建立一個超級迷你的 WordPress 外掛來實現這個功能。別擔心，真的只有一個檔案，而且我會逐行解釋。

Step 1: 建立你的外掛檔案

首先，你需要在你的電腦上建立一個資料夾，隨便取個名字，例如 `roamer-inspiration-widget`。然後在裡面建立一個 PHP 檔案，檔名也隨意，例如 `roamer-inspiration-widget.php`。

接著，打開這個 PHP 檔案，把下面這段「咒語」貼進去。這是 WordPress 外掛的「身分證」，讓 WordPress 知道它是誰，要做什麼。

<?php
/**
 * Plugin Name:       Roamer Inspiration Widget
 * Plugin URI:        https://roamer-tech.com/
 * Description:       A simple widget that displays a random inspirational quote. My first Vibe Coding project!
 * Version:           1.0
 * Author:            Your Name
 * Author URI:        https://roamer-tech.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       roamer-inspiration-widget
 */

// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
	die;
}

這段程式碼的重點只有 `Plugin Name` 和 `Description`，你可以改成自己喜歡的名字。最下面那段 `if` 是個安全機制，防止有人直接訪問這個檔案，算是工程師的小小堅持，你就當作是個護身符吧。

Step 2: 用「感覺」拼湊 Widget 程式碼

在 WordPress 裡建立一個 Widget，確實需要遵從一個特定的「類別 (Class)」結構。這聽起來很嚇人，但你可以把它想像成填空題。WordPress 已經把表格畫好了，我們只需要把內容填進去。

在剛剛的檔案下方，繼續貼上這段程式碼：

// 我們的 Widget 主體
class Roamer_Inspiration_Widget extends WP_Widget {

    // 1. 設定 Widget 的基本資料
    function __construct() {
        parent::__construct(
            'roamer_inspiration_widget', // Base ID
            __('靈感製造機', 'roamer-inspiration-widget'), // Name
            array( 'description' => __( '一個用 Vibe Coding 打造的隨機靈感小工具。', 'roamer-inspiration-widget' ), ) // Args
        );
    }

    // 2. Widget 在前台長怎樣 (這是重點！)
    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }

        // --- Vibe Coding 的魔法發生在這裡 ---
        $quotes = array(
            "感覺對了，Code 就來了。",
            "動手做，勝過完美的空想。",
            "Debug 的過程，就是與自己對話。",
            "今天寫下的註解，是明天感謝自己的禮物。",
            "最好的程式碼，是能解決問題的程式碼。",
        );

        // 隨機挑一句
        $random_index = array_rand($quotes);
        $inspiration = $quotes[$random_index];

        // 把它印出來！
        echo '
' . esc_html($inspiration) . '
';
        // --- 魔法結束 ---

        echo $args['after_widget'];
    }

    // 3. Widget 在後台的設定欄位
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( '每日靈感', 'roamer-inspiration-widget' );
        ?>
        <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( '標題:', 'roamer-inspiration-widget' ); ?></label> 
        <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php 
    }

    // 4. 更新後台設定時，要儲存什麼資料
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
    }
}

// 告訴 WordPress：「嘿！我做好一個新的 Widget 了，快來註冊它！」
function register_roamer_inspiration_widget() {
    register_widget( 'Roamer_Inspiration_Widget' );
}
add_action( 'widgets_init', 'register_roamer_inspiration_widget' );

我知道這看起來很長，但別慌！我們用 Vibe Coding 的視角來解讀它：

• `__construct()`: 這是 Widget 的自我介紹，告訴 WordPress 它的名字叫「靈感製造機」。
• `widget()`: **這才是我們的靈魂！** 這裡決定了訪客會看到什麼。我們定義了一個 `$quotes` 陣列（你的靈感庫），然後用 `array_rand()` 隨機挑一個，最後用 `echo` 把它顯示出來。你可以自由修改陣列裡的文字，甚至加上一些簡單的 inline style 讓它變漂亮。
• `form()` 和 `update()`: 這兩個是處理後台設定的，也就是讓你在後台可以設定 Widget 的標題。你可以暫時忽略它們的細節，把它們當作是必要的「行政程序」。
• `add_action(‘widgets_init’, …)`: 這最後兩行是關鍵，它像是在跟 WordPress 說：「喂！開工了！把我們剛才定義的『靈感製造機』加到你的小工具列表裡！」

Step 3: 啟用並見證奇蹟

現在，把 `roamer-inspiration-widget` 這個資料夾壓縮成 ZIP 檔。然後進入你的 WordPress 後台 -> 外掛 -> 安裝外掛 -> 上傳外掛，選擇你剛剛壓縮的檔案並啟用它。

接著，到 外觀 -> 小工具，你就會在左邊的列表看到一個全新的「靈感製造機」！把它拖曳到你想要的側邊欄位置，設定一個標題，儲存。

回到你的網站前台，刷新頁面。看到了嗎？你親手寫的、用「感覺」打造的小工具，就這樣動起來了！每一次刷新，它都會給你一句不同的靈感。

從「能動」到「好玩」：Vibe Coding 的演化之路

Vibe Coding 的美妙之處在於，它是一個起點，而不是終點。現在你的小工具「能動」了，你腦中可能會冒出更多「我想要…」

• 「我想要讓使用者自己從後台新增名言，而不是寫死在程式碼裡！」 -> 這時你就可以去 Google 搜尋「wordpress widget add textarea field」，你會發現可以透過修改 `form()` 和 `update()` 函式來達成。
• 「我想要每句名言都搭配不同的顏色！」 -> 你可以試著在 `widget()` 函式裡，根據不同的名言，給 `

  ` 標籤加上不同的 class，然後用 CSS 去控制樣式。

• 「我想要從外部 API 抓取名言！」 -> 這就更進階了，你可以搜尋「wordpress fetch api php」，你會學到 `wp_remote_get()` 這個函式，從此打開新世界的大門。

這就是迭代。從一個最小、最核心的「Vibe」開始，讓它動起來，獲得成就感，然後再根據新的「Vibe」去學習、去擴充。你不需要一次就成為全能的工程師，你只需要成為一個懂得如何把想法變現實的創作者。

身為工程師，我還是要囉嗦一句：當你的專案越來越大，還是得回頭學習一些程式碼的規範和架構，這能讓你的作品更穩固。但別讓這些「規範」成為你起步的絆腳石。先上路，再調整姿勢，這就是 **創作者視角的程式開發** 最迷人的地方。你不是在寫冰冷的邏輯，你是在用一種新的媒介，持續創作。

延伸閱讀

• 別再只會裝外掛！資深工程師的 WordPress 外掛開發入門聖經：從 0 到 1 打造你的第一個實用功能
• functions.php 不是只能複製貼上！資深工程師解鎖 WordPress 主題的『大腦中樞』
• Action vs. Filter 不再是選擇題！WordPress Hooks 實戰情境指南，秒懂何時『執行』何時『修改』

希望今天的實戰教學，能讓你對程式開發有新的認識。它不總是那麼遙遠和困難。當你把焦點從「學會所有語法」轉移到「完成我想像的畫面」時，你會發現自己充滿了力量。

如果你在實作過程中遇到任何問題，或是對於如何將你的創意點子透過 WordPress 實現有更多想法，別客氣，浪花科技的團隊永遠在這裡。我們熱愛將創作者的 Vibe 轉化為穩定、高效的數位產品。歡迎填寫表單聯繫我們，讓我們一起聊聊你的下一個精彩專案！