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

想在 WordPress 側邊欄加一個「每次刷新就換一句」的隨機靈感小工具，到底要寫多少程式碼？答案是：一個 PHP 檔、一個繼承 WP_Widget 的類別，加上一行 register_widget() 註冊，就能完成。本文用 Vibe Coding（目標驅動、先讓它動起來）的精神，帶你從「我想要的畫面」一路拆解到可上線的外掛，並逐行解釋每段程式碼在做什麼、為什麼要這樣寫。即使你完全不懂 PHP，也能靠「複製、貼上、理解目的、修改內容」做出第一個屬於自己的小工具。

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

上次我們聊了 Vibe Coding 這套以「感覺」和「目標」為導向的開發哲學。但光說不練是假把戲，今天我就要帶你捲起袖子，把這個聽起來有點玄的概念，變成你網站上一個真正能動、能看見的小東西。這是一篇專為非資工背景的你設計的實戰篇。

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

什麼是 Vibe Coding？它和傳統開發差在哪？

傳統的程式開發，開頭通常是規格書、功能列表、資料庫結構圖⋯這些讓人頭大的文件。Vibe Coding 不一樣，我們的起點是一個純粹的「感覺」或「畫面」：先決定想要的結果，再倒推出達成它所需的最小技術步驟。核心精神可以濃縮成兩句話——目標驅動、拆解任務，以及先讓它動起來，再慢慢調整姿勢。

第一步：把 Vibe 具象化

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

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

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

第二步：把「感覺」翻譯成電腦的語言

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

看到沒？我們已經把一個模糊的「Vibe」變成了一張清晰的施工藍圖。你不需要一開始就懂所有技術細節，你只需要清楚知道自己想完成什麼。

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

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

Step 1：建立外掛檔案與「身分證」

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

打開這個 PHP 檔案，把下面這段「咒語」貼進去。這是 WordPress 外掛的「身分證」——WordPress 會讀取檔案開頭這段註解區塊（稱為 plugin header），藉此知道它是誰、要做什麼，並把它顯示在後台的外掛列表裡。

<?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，其餘欄位（描述、版本、作者⋯）都是讓後台列表更完整的資訊，你可以改成自己喜歡的內容。

最下面那段 if 是個安全機制：WPINC 這個常數只有在 WordPress 正常載入時才會被定義。如果有人試圖用瀏覽器直接打開這個 PHP 檔（繞過 WordPress 環境），這個常數不存在，程式就會 die 立刻中止，避免外掛在沒有 WordPress 保護的情況下被執行。這是 WordPress 外掛的標準慣例，你就當作是個護身符吧。

Step 2：用「填空題」的心態拼出 Widget 程式碼

在 WordPress 裡建立一個 Widget，需要遵從一個特定的「類別（Class）」結構——也就是建立一個繼承自 WP_Widget 的類別。這聽起來很嚇人，但你可以把它想像成填空題：WordPress 已經把表格畫好了（規定好有哪幾個方法要實作），我們只需要把內容填進去。

繼承 WP_Widget 後，標準上要實作四個方法，各司其職：

• __construct()：Widget 的自我介紹（名字、說明）。
• widget()：決定前台訪客「看到什麼」。
• form()：後台編輯小工具時「長什麼樣」的設定表單。
• update()：使用者按下儲存時「要存哪些資料」。

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

// 我們的 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 '<p style="font-style: italic;font-size: 1.1em;text-align: center">' . esc_html($inspiration) . '</p>';
        // --- 魔法結束 ---

        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 的自我介紹。第一個參數是內部用的 Base ID，第二個是顯示在後台的名稱「靈感製造機」，第三個是說明文字。
• widget()：這才是我們的靈魂！它決定了訪客會看到什麼。流程是先輸出 before_widget（佈景主題包在小工具外層的 HTML）、有標題就輸出標題，接著定義一個 $quotes 陣列（你的靈感庫），用 array_rand() 隨機挑一個索引，最後用 echo 把那句話印出來。你可以自由修改陣列裡的文字。
• form() 與 update()：這兩個處理後台設定，讓你能在後台自訂 Widget 標題。form() 畫出輸入框，update() 在你儲存時負責清理並保存資料。初學時可以先把它們當作必要的「行政程序」。

為什麼最後那兩行是關鍵？

光是寫好類別，WordPress 還不知道它的存在。最後的 add_action( 'widgets_init', ... ) 才是把整件事串起來的開關：它掛在 widgets_init 這個動作（hook）上，等 WordPress 跑到「初始化所有小工具」的時機點時，就會呼叫我們的函式去執行 register_widget()，把「靈感製造機」正式加進小工具列表。換句話說，WordPress 是靠 hook 機制在對的時間點通知你的程式碼上場，而不是你的程式碼隨意自行執行。

那幾個 esc_ 開頭的函式是做什麼的？

你會注意到程式碼裡大量出現 esc_html()、esc_attr()。這些是 WordPress 的輸出跳脫（escaping）函式，原則是「在資料要輸出到畫面的那一刻才做跳脫」：esc_html() 用在輸出純文字內容，esc_attr() 用在輸出 HTML 屬性值。它們會把可能被當成程式碼執行的特殊字元轉成無害的純文字，避免惡意內容被注入頁面。這也呼應了 Vibe Coding 的態度——就算是入門練習，幾個基本的安全習慣還是順手帶上，成本很低、保障很大。

Step 3：啟用並見證奇蹟

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

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

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

做出來之後，下一步可以怎麼進化？

Vibe Coding 的美妙之處在於，它是一個起點而不是終點。現在你的小工具「能動」了，腦中可能會冒出更多「我想要⋯」。下面這些方向，都是從同一個檔案延伸出去的自然演化：

• 讓使用者從後台自己新增名言，而不是寫死在程式碼裡。這時你會回頭擴充 form()（多放一個 textarea 輸入框）和 update()（把使用者輸入的內容存起來），widget() 再改成讀取存好的資料。可以從搜尋「wordpress widget add textarea field」開始。
• 讓每句名言搭配不同顏色。在 widget() 裡根據不同名言給 <p> 標籤加上不同的 class，再用 CSS 控制樣式即可。
• 從外部 API 抓取名言。這就更進階了，你會用到 WordPress 內建的 wp_remote_get() 來發送請求、取回資料，從此打開新世界的大門。可以搜尋「wordpress fetch api php」入門。

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

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

延伸閱讀

• 企業官網該用 WordPress 嗎？2026 企業級開發完整指南
• 不只會用，更要會『造』！WordPress Hooks 實戰：從自訂 Action/Filter 到打造可擴展外掛架構
• 你的 WordPress 搜尋匡還在裝傻？一步步打造 OpenAI 智慧搜尋引擎，讓使用者秒懂你的網站！
• WordPress 網站一片空白？教你啟用錯誤日誌 (Error Log)，秒速揪出問題元兇！