WordPress插件開發從入門到精通:手把手教你整第一個自訂插件

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

點解要學 WordPress 插件開發

WordPress之所以成為全球最受歡迎嘅內容管理系統,佢強大嘅可擴展性功不可沒。呢種可擴展性嘅核心正正就係插件。透過開發自定義插件,你可以為網站加入任何你諗得到嘅功能,而唔使修改 WordPress 核心代碼。咁樣唔單止保證咗核心更新嘅安全性,亦令你嘅功能模組化,更加容易管理同搬遷。

學插件開發可以令你由 WordPress 嘅「使用者」變身做「創造者」。無論係為客戶度身訂造獨特功能,解決特定業務需求,定係將你嘅創意打包成產品喺市場上賣,掌握呢門技能都為你打開無限可能。更重要嘅係,理解插件開發嘅工作流程,可以令你喺用其他插件嗰陣,具備更好嘅調試同二次開發能力。

一個標準嘅 WordPress 插件喺結構上係一個包含主 PHP 文件嘅文件夾。呢個主文件透過特定嘅註釋頭部信息,向 WordPress 系統宣告自己嘅存在。所有業務邏輯,無論係加一個新嘅小工具、創建一個自定義文章類型,定係處理表單數據,都係透過 WordPress 提供嘅各種「鈎子」嚟掛載同執行。

推薦閱讀 WordPress 插件開發從入門到精通:手把手教你打造自己嘅專屬功能

搭建你嘅第一個插件項目

開始開發之前,你需要一個本地開發環境。我哋推薦使用 XAMPP、MAMP、Local by Flywheel 或者 Docker 等工具嚟搭建一個包含 PHP、MySQL 同 Apache/Nginx 嘅本地伺服器。喺本機 WordPress 安裝上面進行開發,可以避免對線上網站造成影響。

UltaHost WordPress 主機
30日退款保證,無限頻寬同數據庫,免費DDoS防護,買3年優惠50%

創建插件嘅基本檔案結構

一個最簡單嘅插件可以只係包含一個檔案。喺你嘅 WordPress 安裝目錄下面,進入 wp-content/plugins 文件夾,創建一個新嘅文件夾,例如 my-first-plugin。然後,喺呢個資料夾入面創建一個主 PHP 檔案,檔案名通常同資料夾名一樣,即係 my-first-plugin.php

編寫插件嘅元資訊頭部

喺插件主檔案入面,檔案頂部嘅註解區塊好重要。佢會話俾 WordPress 知呢個插件嘅名、描述、版本、作者等資訊。一個標準嘅頭部如下所示:

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于学习 WordPress 插件开发的自定义插件。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

保存檔案之後,登入你嘅 WordPress 後台,進入「插件」頁面,你應該會睇到「我嘅第一個插件」出現喺插件列表入面,並且可以啟動佢。到呢一步,一個「空」但有效嘅插件就創建完成喇。佢暫時冇任何功能,但結構係正確嘅。

探索 WordPress 核心機制:掛鈎同過濾器

WordPress 插件開發嘅核心在於理解並運用其「掛鈎」系統。掛鈎分為兩種:動作掛鈎同過濾器掛鈎。佢哋係 WordPress 容許你喺特定時間點「注入」自訂程式碼或修改數據嘅機制。

推薦閱讀 WordPress插件開發入門指南:從零建立你嘅第一個功能擴展

理解動作掛鈎嘅運作方式

動作掛鈎容許你喺 WordPress 執行流程嘅特定時刻運行你嘅函數。例如,當頁面載入完畢時,或者當一篇文章發佈時。使用 add_action() 函數可以將你嘅自訂函數掛載到一個鈎上。其基本語法係:add_action( ‘hook_name’, ‘your_function_name’ );

等我哋實現一個功能:喺網站前台嘅頁面底部顯示一條自訂訊息。我哋會用到 wp_footer 呢個動作鈎子。

function my_custom_footer_message() {
    echo '<p style="text-align: center; color: #666;">多謝您嚟到本站!呢個係由自訂插件加嘅頁腳資訊。</p>';
}
add_action( 'wp_footer’, 'my_custom_footer_message’ );

將呢段代碼加落你嘅插件主檔案 my-first-plugin.php 度,保存並重新整理網站前台頁面,你就會喺頁腳見到呢行字。

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。

運用過濾器修改預設內容

過濾器掛鈎用於修改 WordPress 喺處理過程中產生嘅數據。同動作掛鈎唔同,過濾器函數必須要返一個值。用 add_filter() 函數嚟掛載過濾器。例如,修改文章標題嘅預設內容:

function modify_post_title( $title ) {
    if ( is_single() ) {
        return '【精选】’ . $title;
    }
    return $title;
}
add_filter( ‘the_title’, 'modify_post_title’ );

呢個函數會喺文章單頁嘅標題前加上「【精選】」前綴,而其他頁面(例如首頁、列表頁)嘅標題就保持不變。透過組合使用動作同過濾器,你可以控制 WordPress 嘅幾乎每一個環節。

建立一個實用嘅後台管理頁面

為咗俾插件用家可以設定選項,我哋通常需要為佢建立一個後台管理頁面。呢個涉及 WordPress 嘅管理選單 API。

推薦閱讀 WordPress插件開發由入門到精通:構建高自定義功能模組嘅完整指南

新增一個管理選單項目

使用 add_menu_page()add_options_page() 等函數,可以將一個新嘅頁面加到 WordPress 後台左邊嘅選單度。我哋以喺「設定」子選單下面加一個頁面做例子。

首先,創建一個函數嚟渲染管理頁面嘅 HTML 內容。

InterServer 共享主機
共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。
function my_plugin_settings_page_html() {
    // 检查用户权限
    if ( ! current_user_can( ‘manage_options’ ) ) {
        return;
    }
    ?&gt;
    <div class="wrap">
        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
        <form action="/yue/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段和安全字段
            settings_fields( ‘my_plugin_settings’ );
            do_settings_sections( ‘my_plugin_settings’ );
            submit_button( ‘保存设置’ );
            ?>
        <input type="hidden" name="trp-form-language" value="yue"/></form>
    </div>
    &lt;?php
}

註冊設定、區塊同欄位

WordPress 提供咗 register_setting(), add_settings_section() 同埋 add_settings_field() 呢一套 API 可以規範化咁處理設定。咁樣會自動處理安全驗證(Nonce)同選項嘅儲存/讀取。

跟住,我哋需要一個函數嚟初始化呢啲設定。呢個函數應該掛載到 admin_init 掛咗鈎

function my_plugin_settings_init() {
    // 注册一个新的设置选项组
    register_setting( ‘my_plugin_settings’, ‘my_plugin_options’ );

// 在页面中添加一个新的区块
    add_settings_section(
        ‘my_plugin_section_1’,
        ‘基础设置’,
        null, // 回调函数,用于输出区块描述,可为空
        ‘my_plugin_settings’
    );

// 在区块内添加一个字段
    add_settings_field(
        ‘my_plugin_field_text’,
        ‘欢迎语’,
        ‘my_plugin_field_text_cb’,
        ‘my_plugin_settings’,
        ‘my_plugin_section_1’,
        [
            ‘label_for’ =&gt; ‘my_plugin_field_text’,
            ‘class’ =&gt; ‘my_plugin_row’,
        ]
    );
}
add_action( ‘admin_init’, ‘my_plugin_settings_init’ );

// 字段的回调函数,用于输出字段的 HTML
function my_plugin_field_text_cb( $args ) {
    $options = get_option( ‘my_plugin_options’ );
    ?&gt;
    <input type="text" id="<?php echo esc_attr( $args[‘label_for’] ); ?>"
           name="my_plugin_options[<?php echo esc_attr( $args[‘label_for’] ); ?>]"
           value="<?php echo esc_attr( $options[ $args[‘label_for’] ] ?? ‘’ ); ?>">
    <p class="“description”">呢段文字將會顯示喺網站首頁。</p>
    &lt;?php
}

將頁面連結加落菜單度

最後,使用 add_options_page() 將我哋創建嘅呢個頁面加到「設定」選單下面。

function my_plugin_add_settings_page() {
    add_options_page(
        ‘我的插件设置’, // 页面标题
        ‘我的插件’, // 菜单标题
        ‘manage_options’, // 所需能力
        ‘my-plugin-settings’, // 菜单别名
        ‘my_plugin_settings_page_html’ // 渲染页面的回调函数
    );
}
add_action( ‘admin_menu’, ‘my_plugin_add_settings_page’ );

而家,啟動插件之後,你喺 WordPress 後台嘅「設定」選單下面可以搵到「我嘅插件」選項,撳入去就會見到一個包含一個文字欄位嘅設定頁面,你可以輸入同儲存歡迎語。之後,你可以透過 get_option( ‘my_plugin_options’ ) 喺前台攞到同使用呢個數值。

實現插件嘅前台功能同安全考慮

喺插件度實現前台功能嗰陣,安全係首要考慮因素。千祈唔好信用戶輸入嘅數據,一定要做驗證、清理同轉義。

假設我哋要用喺後台設定度保存嘅「歡迎語」,然後將佢顯示喺網站首頁嘅頂部。首先,我哋需要從數據庫攞呢個選項,然後安全咁輸出。

function display_frontend_greeting() {
    // 1. 获取数据
    $options = get_option( ‘my_plugin_options’ );
    $greeting = $options[‘my_plugin_field_text’] ?? ‘’;

// 2. 如果内容为空,则不输出任何东西
    if ( empty( $greeting ) ) {
        return;
    }

// 3. 在输出前进行清理和转义
    $safe_greeting = esc_html( $greeting );

// 4. 输出到前端(这里假设只在首页显示)
    if ( is_front_page() ) {
        echo ‘<div class="“my-plugin-greeting”"><p>’ . $安全問候語 . ‘</p></div>’;
    }
}
add_action( ‘wp_body_open’, ‘display_frontend_greeting’ );

呢度我哋用咗 esc_html() 用函數嚟轉義 HTML 字元,防止跨站腳本攻擊(XSS)。我哋仲檢查咗數據係咪空嘅,同用條件標籤 is_front_page() 嚟控制輸出嘅位置。將函數掛載到 wp_body_open 呢個鉤子度,可以確保內容喺頁面 body 標籤開始之後即刻顯示。

另外,喺插件開發入面,國際化都係一項重要實踐。通過使用 __() 同埋 _e() 等翻譯函數,並正確設定插件嘅文本域(Text Domain),可以令你嘅插件被翻譯成任何語言。喺前面嘅插件頭部元信息中,我哋已經定義咗 Text Domain: my-first-plugin。喺代碼中,應該咁樣使用:

echo esc_html__( ‘Hello, World!’, ‘my-first-plugin’ );

摘要

透過本文嘅實踐,我哋完成咗一個完整但簡單嘅 WordPress 插件開發流程。我哋從創建插件嘅基礎文件結構同元信息開始,逐步深入到 WordPress 嘅核心機制——鉤子系統,利用動作同過濾器嚟控制程序流同修改數據。跟住,我哋構建咗一個帶有自訂字段嘅後台管理頁面,令用戶可以配置插件選項,並最終將呢啲選項安全噉輸出到網站前台。

呢個過程涵蓋咗插件開發嘅幾個關鍵方面:文件組織、鉤子運用、後台界面創建、選項管理以及前端數據安全處理。記住,優秀嘅插件唔單止功能強大,更應該係安全、高效且易於維護嘅。接下來,你可以嘗試為插件添加更多功能,比如自訂文章類型、短代碼、小工具或者 REST API 端點,不斷深化你對 WordPress 插件開發嘅理解。

常見問題

一個插件可以只包含一個 PHP 檔案嗎?

係呀,一個最簡單嘅 WordPress 插件可以只係由一個 PHP 檔案組成,只要個檔案包含正確嘅插件頭部註釋。不過對於功能複雜嘅插件,建議將代碼組織喺唔同嘅檔案入面,例如將後台功能、前台功能同公共函數分開放,咁樣可以提高代碼嘅可讀性同可維護性。

點樣調試自己開發嘅插件呢?

推薦開啟 WordPress 嘅除錯模式。喺網站根目錄嘅 wp-config.php 檔案入面,將 WP_DEBUG 常數設定為 true。咁樣,PHP 嘅錯誤、警告同通知都會顯示出嚟。同時,可以結合使用 error_log() 函數將調試資訊寫入伺服器嘅錯誤日誌,或者使用瀏覽器開發者工具嘅控制台進行 JavaScript 調試。

開發插件嗰陣,有邊啲必須遵守嘅安全規範?

首要原則係:永遠唔好信任任何用戶輸入。對所有從 $_GET$_POST$_COOKIE 攞到嘅數據要進行驗證同清理。喺將數據輸出到 HTML 嗰陣,要用 esc_html()esc_attr()esc_url() 呢啲函數嚟轉義。喺構建數據庫查詢嗰陣,一定要用 $wpdb->prepare() 呢個方法嚟防止 SQL 注入攻擊。另外,檢查當前用戶嘅權限(例如 current_user_can())都係必不可少嘅步驟。

點樣可以將我個插件提交到官方嘅 WordPress 插件目錄?

首先,要確保你個插件完全跟足 WordPress 嘅編碼標準同 GPL 許可證。你需要去 WordPress.org 開個帳戶,然後喺插件提交頁面上傳你個插件壓縮檔。官方團隊會進行人手審核,檢查代碼質素、安全性、文件同合規性。審核通過之後,你個插件就會被列入官方目錄,有自動更新支援,同埋可以俾全球用戶搜尋同安裝。