主頁/知識/WordPress/內容詳情

零基礎入門實戰：手把手教你進行WordPress插件開發

3分鐘閱讀
2026-03-14
2026-06-03
2,882
當你透過以下連結購物,我會獲得佣金,對你嚟講冇額外成本。.

WordPress插件開發環境與基礎準備

喺開始寫程式碼之前，你需要一個合適嘅本地開發環境。通常包括一個本地伺服器（例如XAMPP、MAMP或者Local by Flywheel）、一個程式碼編輯器（例如VS Code或者PHPStorm）同一個用嚟測試嘅WordPress安裝。要確保你嘅PHP版本同WordPress官方推薦版本保持一致。

一個WordPress插件嘅核心係一個位於/wp-content/plugins/目錄下嘅資料夾。呢個資料夾嘅名就係你嘅插件識別符，最好用細楷字母、數字同連字號。喺呢個資料夾入面，必須要有一個同資料夾同名嘅PHP主檔案，例如my-first-plugin.php。呢個檔案係插件嘅入口點，包含咗插件嘅元資訊。

創建你嘅第一個插件檔案

等我哋由創建一個最簡單嘅插件開始，呢個插件會喺網站嘅管理後台顯示一條歡迎訊息。

推薦閱讀 深入解析 WooCommerce 插件：從入門配置到高級自訂完全指南。

插件標頭註釋嘅編寫

每個WordPress插件都必須以特定嘅標頭註釋開始，WordPress透過讀取呢啲資訊嚟識別同展示插件。喺你嘅插件資料夾（例如my-first-plugin）入面，創建主檔案my-first-plugin.php，然後寫入以下代碼：

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面 
<?php
/**
 * Plugin Name: 我的第一个WordPress插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是一个用于学习WordPress插件开发的入门插件，将在管理后台添加一个欢迎提示。
 * Version:     1.0.0
 * Author:      你的名字
 * Author URI:  https://example.com
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 */

保存檔案之後，登入你嘅 WordPress 後台，進入「插件」頁面，你應該會睇到「我嘅第一個 WordPress 插件」出現喺插件列表度。呢個時候你可以啟動佢，雖然佢暫時仲未有任何功能。

為插件加入第一個功能

而家，等我哋為呢個插件加個簡單功能：喺管理後台嘅頂部顯示一條自訂嘅管理通知。我哋會用WordPress嘅admin_notices鉤子。

喺主檔案my-first-plugin.php嘅頭部註釋下面，加返以下代碼：

// 在管理后台添加一个欢迎提示
function my_first_plugin_admin_notice() {
    ?&gt;
    <div class="notice notice-success is-dismissible">
        <p>歡迎使用「我嘅第一個WordPress插件」！你已經成功啟動咗呢個插件。</p>
    </div>
    &lt;?php
}
add_action( &#039;admin_notices&#039;, &#039;my_first_plugin_admin_notice&#039; );

呢段代碼定義咗個叫做my_first_plugin_admin_notice嘅函數，呢個函數會輸出一段HTML，形成一個可以閂嘅成功提示框。add_action()函數將呢個自訂函數「掛載」到WordPress嘅admin_notices呢個動作掛喺個鈎度。保存檔案同重新整理WordPress後台，你就會喺頁面頂部見到呢條綠色嘅歡迎信息㗎啦。

推薦閱讀 網站建設實用教程：從零到上線嘅完整開發流程同技術選型指南。

理解WordPress插件核心機制：鈎子同過濾器

WordPress插件開發嘅核心在於同WordPress核心嘅互動，呢個主要係透過「鈎子」機制實現。鈎子分為兩種：動作同過濾器。

動作鈎子嘅使用

動作鈎子容許你喺WordPress執行嘅特定時間點插入自訂代碼，好似我哋啱啱用嗰個admin_notices。另一個常見例子係init鈎會喺WordPress初始化時觸發，通常用嚟註冊自訂文章類型或者分類法。

例如，我哋可以喺插件初始化時設定一個選項值：

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。
hosting.com 標誌 瀏覽該頁面 
function my_first_plugin_set_default_option() {
    // 如果选项不存在，则添加它
    if ( false === get_option( 'my_first_plugin_greeting' ) ) {
        add_option( 'my_first_plugin_greeting', 'Hello from my plugin!' );
    }
}
add_action( 'init', 'my_first_plugin_set_default_option' );

過濾器鈎子嘅用法

過濾器掛鈎容許你修改喺流程中傳遞嘅數據。例如，the_content過濾器容許你修改文章正文嘅輸出。我哋可以用佢嚟自動喺每篇文章末尾加一段版權資訊。

function my_first_plugin_add_copyright( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() &amp;&amp; in_the_loop() &amp;&amp; is_main_query() ) {
        $copyright = '<p><em>本文受版權保護，轉載請註明出處。</em></p>';
        $content .= $copyright;
    }
    return $content;
}
add_filter( 'the_content', 'my_first_plugin_add_copyright' );

喺呢個例子入面，函數my_first_plugin_add_copyright接收原始嘅$content，經過條件判斷（確保只喺單篇文章頁面生效）之後，喺佢末尾附加咗一段HTML，最後必須將修改後嘅$content返回。

構建更複雜嘅插件：短代碼同設定頁面

一個功能完整嘅插件通常需要提供前端互動（例如短代碼）同後端配置（例如設定頁面）。

推薦閱讀 搜尋引擎優化嘅利器：從零開始構建 WordPress 網站嘅 SEO 策略。

創建自訂短代碼

短代碼允許用戶透過簡單嘅標籤（例如[my_greeting]）喺文章或頁面中插入插件功能。註冊短碼使用add_shortcode()函數。

// 注册一个简单的问候短代码
function my_first_plugin_greeting_shortcode( $atts ) {
    // 使用 shortcode_atts 定义默认属性并合并用户输入
    $attributes = shortcode_atts( array(
        'name' =&gt; '访客',
    ), $atts );

// 获取我们之前设置的选项
    $greeting_text = get_option( 'my_first_plugin_greeting', 'Hello' );

// 生成输出
    $output = '<div class="my-plugin-greeting">';
    $output .= esc_html( $greeting_text ) . ', ' . esc_html( $attributes['name'] ) . '!';
    $output .= '</div>';

return $output;
}
add_shortcode( 'my_greeting', 'my_first_plugin_greeting_shortcode' );

而家，用戶可以喺編輯器中輸入[my_greeting name="张三"]，前端就會顯示「Hello from my plugin!，張三！」。

InterServer 共享主機
共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。
InterServer 標誌 瀏覽該頁面

添加插件設定頁面

為咗等用戶可以自訂問候語，我哋需要喺管理後台加一個設定頁面。呢個涉及加頂級或者子菜單頁，同埋處理表單選項嘅儲存。

// 在后台“设置”菜单下添加子菜单页
function my_first_plugin_add_settings_page() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的第一个插件',        // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单slug
        'my_first_plugin_render_settings_page' // 回调函数，用于输出页面内容
    );
}
add_action( 'admin_menu', 'my_first_plugin_add_settings_page' );

// 渲染设置页面的HTML
function my_first_plugin_render_settings_page() {
    ?&gt;
    <div class="wrap">
        <h1>我第一個插件設定</h1>
        <form method="post" action="/yue/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'my_first_plugin_settings_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="yue"/></form>
    </div>
    &lt;?php
}

// 注册设置、区域和字段
function my_first_plugin_register_settings() {
    register_setting(
        &#039;my_first_plugin_settings_group&#039;, // 设置组名
        &#039;my_first_plugin_greeting&#039;        // 选项名
    );

add_settings_section(
        &#039;my_first_plugin_main_section&#039;,    // 区域ID
        &#039;问候语设置&#039;,                     // 区域标题
        null,                            // 区域回调函数（可为空）
        &#039;my-first-plugin&#039;                // 页面slug
    );

add_settings_field(
        &#039;greeting_text_field&#039;,            // 字段ID
        &#039;问候语文本&#039;,                     // 字段标题
        &#039;my_first_plugin_greeting_field_callback&#039;, // 字段HTML的回调函数
        &#039;my-first-plugin&#039;,                // 页面slug
        &#039;my_first_plugin_main_section&#039;    // 所属区域ID
    );
}
add_action( &#039;admin_init&#039;, &#039;my_first_plugin_register_settings&#039; );

// 渲染问候语输入字段
function my_first_plugin_greeting_field_callback() {
    $greeting = get_option( &#039;my_first_plugin_greeting&#039; );
    echo &#039;<input type="text" name="my_first_plugin_greeting" value="' . esc_attr( $greeting ) . '" class="regular-text" />';
}

呢段代碼建立咗一個標準嘅WordPress設定頁面。當用戶喺設定頁面改咗問候語並儲存之後，之前建立嘅短代碼就會用到新嘅問候語文字。

摘要

透過呢個教程，我哋由零開始完成咗一個有基本功能嘅WordPress插件。你學識咗點樣建立插件檔案結構、編寫插件頭部資訊、利用動作鈎子加後台通知、用過濾器修改內容、建立短代碼畀用戶喺前端調用，同埋構建一個完整嘅設定頁面嚟管理插件選項。呢啲係WordPress插件開發最核心同基礎嘅技能。掌握咗呢啲之後，你可以透過查閱WordPress官方插件手冊，深入學習更多API，例如自訂數據庫表、REST API端點、AJAX處理等等，從而開發出功能更強大、更專業嘅插件。

常見問題

開發WordPress插件需要咩程式語言知識？

開發WordPress插件主要需要PHP語言知識，因為WordPress核心本身係用PHP寫嘅。同時，你仲需要熟識HTML、CSS同基礎嘅JavaScript，用嚟構建插件嘅前端界面同互動邏輯。對SQL有基本了解都有助處理更複雜嘅數據操作。

點樣調試我嘅WordPress插件？

首先，確保你喺你嘅wp-config.php檔案中開啟WP_DEBUG模式，咁樣會將PHP錯誤同警告顯示喺螢幕上。其次，可以用error_log()函數將除錯資訊寫入伺服器嘅錯誤日誌。對於更複雜嘅除錯，可以考慮用專門嘅PHP除錯工具，例如Xdebug，或者安裝WordPress除錯插件嚟幫手排查問題。

我開發嘅插件點樣發佈到WordPress官方插件目錄？

你需要訪問WordPress.org並創建一個開發者帳號。然後，透過Subversion（SVN）工具將你嘅插件代碼提交到官方為你分配嘅代碼倉庫中。你嘅插件必須遵守GPL許可證，而且代碼質量、安全性同文檔需要符合一定嘅審核標準。審核通過後，你嘅插件就會喺官方目錄中出現俾用戶下載。

插件嘅前端CSS同JavaScript檔案應該點樣正確加載？

為咗避免衝突同確保性能，唔應該直接喺模板檔案中引入資源。正確嘅方法係使用wp_enqueue_style()同埋wp_enqueue_script()函數。對於管理後台嘅資源，應該掛載到admin_enqueue_scripts掛鉤；對於網站前端嘅資源，應該掛載到wp_enqueue_scripts掛鉤。咁樣可以確保依賴關係正確，而且同一檔案唔會重複載入。

下一步應該點做?

如果你正喺建立或優化 WordPress 網站,我哋建議你繼續閱讀有關效能優化、插件設定同主題自訂嘅內容。

延伸閱讀及實用知識

以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。

標籤: