準備工作同環境搭建
喺開始編寫代碼之前,你需要確保擁有一個合適嘅開發環境。呢個包括一個本地嘅WordPress安裝同一個代碼編輯器。本地環境可以令你喺唔影響線上網站嘅情況下自由測試同除錯。常用嘅本地開發環境軟件有Local by Flywheel、XAMPP或者MAMP。
你需要為你嘅插件諗一個獨一無二嘅名稱,呢個名稱將會被用作插件嘅主目錄名同主文件名。例如,如果你嘅插件叫做「Hello World」,咁你嘅主插件文件可以命名為 hello-world.php。確保你嘅插件名稱同描述喺WordPress插件目錄中係獨一無二嘅,咁樣可以有效避免同其他插件撞名。
另外,熟讀WordPress嘅官方開發手冊同代碼參考係好緊要嘅。了解WordPress嘅核心概念,例如動作掛鈎(Action Hooks)、過濾器掛鈎(Filter Hooks)、短代碼(Shortcodes)同設定API,會為你嘅開發打好穩固基礎。
推薦閱讀 WordPress插件開發全攻略:由零開始打造專業嘅PHP插件。
創建第一個插件檔案
插件嘅核心係一個或者多個PHP檔案。最簡單嘅情況下,一個插件可以淨係由一個PHP檔案構成。為咗創建一個有效嘅插件,你需要喺主插件檔案嘅頭部加入標準嘅插件資訊註解。呢個註解區塊會話俾WordPress知你嘅插件所有元資訊,例如名稱、描述、版本、作者等等。
編寫插件頭部信息
WordPress 會透過讀取檔案頂部特定格式嘅註釋嚟識別同顯示插件資訊。下面係一個最基本嘅插件標頭示例:
<?php
/**
* Plugin Name: 我的第一个插件
* Plugin URI: https://example.com/my-first-plugin
* Description: 这是一个用于学习和演示的简单 WordPress 插件。
* Version: 1.0.0
* Requires at least: 5.2
* Requires PHP: 7.2
* Author: 你的名字
* Author URI: https://example.com
* License: GPL v2 or later
* Text Domain: my-first-plugin
* Domain Path: /languages
*/ 將呢段代碼保存為一個新嘅 PHP 檔案,例如 my-first-plugin.php。然後,將呢個檔案放入你本地 WordPress 安裝目錄嘅 wp-content/plugins 資料夾入面。而家,進入 WordPress 後台嘅「插件」頁面,你應該會見到一個叫做「我嘅第一個插件」嘅新插件出現喺列表度,而且可以啟動佢。暫時佢仲未有任何功能。
為插件添加基本功能
啟動插件之後,我哋會為佢加一個簡單功能:喺文章內容嘅最尾自動加一段自訂文字。呢個需要用到 WordPress 嘅過濾器掛鈎 the_content。
你可以將以下嘅程式碼加喺頭先插件頭部資料嘅下面:
推薦閱讀 從零開始:WordPress插件開發全流程詳解。
/**
* 在文章内容末尾添加自定义文本
*
* @param string $content 当前文章内容。
* @return string 修改后的文章内容。
*/
function mfp_add_footer_text( $content ) {
// 仅针对主循环中的单个文章页面
if ( is_single() && in_the_loop() && is_main_query() ) {
$custom_text = '<p><em>多謝你睇呢篇文章,由「我嘅第一個插件」為你呈現。</em></p>';
$content .= $custom_text;
}
return $content;
}
// 将自定义函数挂载到 `the_content` 过滤器上
add_filter( 'the_content', 'mfp_add_footer_text' ); 呢段代碼定義咗個叫做 mfp_add_footer_text 嘅函數,佢接收文章內容 $content 作為參數。函數入面首先用條件標籤(is_single(), in_the_loop(), is_main_query())嚟確保我哋只係喺單篇文章頁面嘅主循環度修改內容,避免影響其他頁面好似首頁、存檔頁咁。然後,佢創建一段自訂嘅 HTML 文本,並將佢附加到原文內容後面。最後,透過 add_filter 函數會將呢個自訂函數「掛載」到 WordPress 嘅 the_content 過濾器上。
保存檔案之後,刷新前端嘅一篇文章頁面,你就會喺文章正文嘅末尾見到加咗嘅文字。
開發進階功能:建立管理選單同選項頁
一個功能完善嘅插件通常需要同管理員互動,呢個通常係透過喺後端加設設定頁面嚟實現。WordPress 提供咗豐富嘅 API 嚟創建管理菜單同選項頁。
喺後台加插件菜單項
我哋會為插件創建一個獨立嘅管理菜單頁面,用嚟配置一啲選項。呢個需要使用 add_action 鉤子同 admin_menu 動作。
喺你嘅插件主文件度繼續加以下代碼:
/**
* 在 WordPress 后台管理菜单中添加一个新的顶级菜单项
*/
function mfp_register_admin_menu() {
add_menu_page(
'我的插件设置', // 页面标题
'我的插件', // 菜单标题
'manage_options', // 所需权限
'my-first-plugin', // 菜单 slug
'mfp_render_settings_page', // 渲染页面的回调函数
'dashicons-admin-plugins', // 图标(可选)
80 // 菜单位置
);
}
add_action( 'admin_menu', 'mfp_register_admin_menu' ); add_menu_page 呢個函數用嚟註冊一個新嘅頂級選單。manage_options 係一個權限標識,意思係只有擁有「管理選項」權限嘅用戶(通常係管理員)先會睇到呢個選單。mfp_render_settings_page 係我哋接落嚟要定義嘅、用嚟輸出設定頁面 HTML 內容嘅函數名。
推薦閱讀 WordPress 插件開發終極指南:從零開始建立你嘅第一個自訂插件。
構建設置頁面嘅內容
而家,我哋需要定義上面提到嘅回調函數 mfp_render_settings_page 嚟渲染一個簡單嘅設置頁面。
/**
* 渲染插件设置页面的内容
*/
function mfp_render_settings_page() {
?>
<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
// 输出设置字段、安全 nonce 字段等
settings_fields( 'mfp_settings_group' );
do_settings_sections( 'my-first-plugin' );
submit_button( '保存设置' );
?>
<input type="hidden" name="trp-form-language" value="yue"/></form>
</div>
<?php
} 呢個函數輸出咗一個基本嘅 WordPress 管理頁面結構,包含標題同一個表單。佢用咗 WordPress 設置 API 嘅兩個核心函數:settings_fields 同埋 do_settings_sections。為咗令佢運作,我哋仲需要註冊設定、節同埋欄位。
使用設定 API 註冊選項
WordPress 設定 API 提供咗一種安全、標準化嘅方式嚟處理表單選項嘅註冊、儲存同驗證。我哋繼續加入以下代碼嚟註冊一個簡單嘅文字欄位。
/**
* 初始化插件的设置
*/
function mfp_settings_init() {
// 注册一个新的设置项 `mfp_options` 到数据库
register_setting( 'mfp_settings_group', 'mfp_options' );
// 在页面内添加一个新的节
add_settings_section(
'mfp_section_basic',
'基础设置',
'mfp_section_basic_callback',
'my-first-plugin'
);
// 向节中添加一个字段
add_settings_field(
'mfp_field_custom_text',
'自定义页脚文本',
'mfp_field_custom_text_callback',
'my-first-plugin',
'mfp_section_basic',
array( 'label_for' => 'mfp_field_custom_text' )
);
}
add_action( 'admin_init', 'mfp_settings_init' );
/**
* 节描述的回调函数(可以为空)
*/
function mfp_section_basic_callback() {
echo '<p>喺呢度設定插件嘅基本選項。</p>';
}
/**
* 字段 `mfp_field_custom_text` 的回调函数,用于输出 HTML 输入框
*/
function mfp_field_custom_text_callback() {
// 从数据库获取现有值
$options = get_option( 'mfp_options' );
$value = isset( $options['custom_text'] ) ? $options['custom_text'] : '';
?>
<input type="text"
id="mfp_field_custom_text"
name="mfp_options[custom_text]"
value="<?php echo esc_attr( $value ); ?>"
class="regular-text" />
<p class="description">呢段文字會喺文章尾顯示。</p>
<?php
} 而家,我哋需要修改之前嘅 mfp_add_footer_text 個函數,等佢用我哋新整嘅選項值,而唔係硬編碼嘅文字。
function mfp_add_footer_text( $content ) {
if ( is_single() && in_the_loop() && is_main_query() ) {
$options = get_option( 'mfp_options' );
$custom_text = isset( $options['custom_text'] ) ? $options['custom_text'] : '';
if ( ! empty( $custom_text ) ) {
$content .= '<p><em>' . esc_html( $自訂文字 ) . '</em></p>';
}
}
return $content;
} 到咗呢一步,你個插件已經有個完整嘅後台設定頁面。管理員可以喺「我嘅插件」菜單下面搵到設定頁,輸入自訂嘅頁尾文字,然後保存。呢段文字會動態噉顯示喺網站前端嘅文章尾段。
插件優化同安全實踐
開發插件嗰陣,跟住最佳實踐對於安全性、效能同可維護性都好緊要。呢度介紹幾個核心原則。
確保代碼安全
所有由前端或管理界面接收到嘅數據,喺輸出到瀏覽器或者存入數據庫之前,都必須進行驗證、清理同轉義。咁樣可以防止跨站腳本(XSS)同 SQL 注入等安全漏洞。
- 轉義輸出:使用函數如
esc_html(),esc_attr(),esc_url(),wp_kses_post()來轉義動態內容。 - 清理輸入:使用函數如
sanitize_text_field(),sanitize_email(),intval()來處理用戶提交嘅表單數據。 - 權限檢查:喺管理員回調函數中,使用
current_user_can()進行二次權限確認。喺涉及數據修改嘅 AJAX 或 REST API 端點,務必使用 nonce(數字令牌)進行驗證。
遵循 WordPress 編碼標準
採用 WordPress 編碼標準可以確保你嘅代碼風格同核心代碼一致,提高可讀性,同埋方便其他開發者協作。呢個包括使用正確嘅縮排、括號風格、命名約定(函數同變數使用細階字母加底線)等等。你可以用 PHP CodeSniffer 配合 WordPress 標準規則嚟自動檢查代碼。
實現國際化支援
由一開始就為你嘅插件加入國際化支援,可以令全世界嘅用戶輕鬆噉將佢翻譯成自己嘅語言。呢個主要透過以下步驟實現:
1. 在插件头部注释中正确设置 Text Domain 同埋 Domain Path。
2. 在所有需要翻译的字符串周围使用 WordPress 的翻译函数,如 (), _e(), esc_html() 等等
3. 使用工具如 Poedit 来生成 .pot 模板檔案,供翻譯者創建 .po 同埋 .mo 翻譯檔案。
例如,將設定頁嘅描述文字國際化:
function mfp_section_basic_callback() {
echo '<p>' . esc_html__( '在这里配置插件的基础选项。', 'my-first-plugin' ) . '</p>';
} 摘要
本文從零開始,引導你完成咗創建一個基礎但功能完整嘅 WordPress 插件嘅全過程。我哋涵蓋咗從環境準備、創建插件檔案、編寫插件頭部信息,到使用動作鈎同過濾器鈎為文章添加內容,再到使用 WordPress 設定 API 構建複雜嘅後台管理介面。最後,我哋探討咗插件開發中至關重要嘅安全、編碼標準同國際化等優化實踐。
透過呢個實踐,你應該已經掌握咗 WordPress 插件開發嘅核心流程同基本工具。下一步,你可以試吓開發更複雜嘅功能,例如創建自定義文章類型、自定義數據庫表、使用 jQuery 增強互動,或者將你嘅插件提交到 WordPress 官方插件目錄。記住,持續學習同閱讀核心代碼係提升開發技能嘅最佳途徑。
常見問題
點樣調試我嘅 WordPress 插件?
啟用 WordPress 嘅調試模式係首要步驟。喺你嘅 wp-config.php 檔案入面,將 WP_DEBUG 常數設定為 true。咁樣會直接喺頁面上顯示 PHP 錯誤、警告同通知。
同時,可以使用 error_log() 函數將自訂除錯資訊寫入伺服器嘅錯誤日誌,或者用瀏覽器嘅開發者工具(控制台同網絡標籤頁)嚟除錯 JavaScript 同 AJAX 請求。對於複雜嘅邏輯,用好似 Xdebug 呢類專業除錯工具會事半功倍。
我個插件會唔會同主題或者其他插件撞?
有可能,特別係處理相同嘅掛鈎、用通用嘅全域變數名或者類名嗰陣。為咗盡量減少撞嘅機會,一定要為你所有嘅函數、類、變數同選項名加返個獨特嘅前綴。例如,唔好用 add_footer_text,而係用類似 myplugin_add_footer_text 嘅名。
喺修改全局內容(例如查詢變數)之前,要進行充分嘅檢查同條件限制。發佈之前,盡可能喺唔同環境同唔同主題組合下測試你嘅插件。
我需要學啲咩技術嚟開發高級插件?
除咗紮實嘅 PHP 基礎,你仲需要深入了解:
- JavaScript:用于前端交互和 WordPress 定制器开发。
- jQuery:尽管 WordPress 正在向现代 JS 框架过渡,但 jQuery 仍被广泛使用。
- REST API:用于创建解耦的前端应用或与外部服务交互。
- 数据库知识:了解 WordPress 的数据库结构,以及如何安全地进行自定义查询或创建新表。
- Composer:用于管理 PHP 依赖包。
構建工具:例如 Webpack,用嚟管理現代 JavaScript 同 SASS 嘅編譯。
點樣將我嘅插件發佈到 WordPress 官方目錄?
首先,確保你嘅插件完全符合官方插件開發指南同安全最佳實踐。你需要一個WordPress.org帳戶。喺帳戶底下遞交你嘅插件壓縮檔進行審核。審核過程會檢查代碼質素、安全性、許可證(必須係GPL兼容)等等。
如果你嘅插件通過審核,佢就會被加入SVN倉庫,你可以透過SVN嚟更新同維護你嘅插件。發佈之後,用戶就可以直接喺佢哋嘅WordPress後台搜尋、安裝同更新你嘅插件啦。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。