建立您的第一個 WordPress 外掛程式：初學者教程

開啟

3 個月前

A 創建您自己的 WordPress 外掛的步驟指南

WordPress plugins are a compelling way to add functionality to your website. Whether you want to add custom features, improve site performance, or integrate with external services, building a WordPress plugin gives you complete control over what your site can do. In this beginner’s tutorial, I’ll guide you through creating your first WordPress plugin from scratch. And don’t worry if you’re new—I’ll share some tips and personal experiences to make this journey enjoyable!

為什麼要建立 WordPress 外掛程式？

建立 WordPress 外掛程式可讓您

擴充功能:新增您的主題或其他外掛程式可能無法提供的功能。
可重複使用的程式碼:外掛程式可在不同的網站重複使用，因此如果您管理多個網站，外掛程式是有效的解決方案。
客製化: With your plugin, you can fully control your WordPress site’s behavior without altering core files or themes.
學習與成長:外掛程式開發是學習更多 WordPress、PHP 和編碼最佳實務的好方法。

有趣的事實:WordPress 外掛程式庫中有超過 55,000 個外掛程式。您可以添加下一個大插件！

設定您的開發環境

Before you start creating your first plugin, it’s essential to set up a local WordPress development environment. Tools like 本地由 Flywheel 提供, XAMPP或 MAMP 將允許您測試您的外掛程式，而無須冒險使用您的即時網站。

快速提示: Always work in a local or staging environment when building a plugin. This way, you can avoid accidentally breaking your live site. Trust me, it’s a real lifesaver!

步驟 1：建立外掛程式資料夾及檔案

導覽到您的外掛程式目錄:進入 WordPress 安裝資料夾，找到 wp-content/plugins/ 目錄。
建立新資料夾:將它命名為獨一無二的名稱，例如 my-first-plugin。
建立 PHP 主檔案:在您的外掛資料夾中建立一個名為 my-first-plugin.php 的檔案。此檔案將是您外掛的核心。

真實故事:我還記得第一次瀏覽我的外掛目錄。雖然感覺很吃力，但當您習慣了資料夾結構之後，它就變成了第二天性！

步驟 2：新增外掛程式標頭

外掛程式標頭是一個區塊注解，提供 WordPress 有關您外掛程式的基本資訊。在您的 my-first-plugin.php file:

<?php
/*
外掛名稱：我的第一個外掛程式
外掛 URI: http://example.com/
說明：一個簡單的外掛程式，用來示範 WordPress 外掛程式開發的基本知識。
版本: 1.0
作者：您的姓名
作者 URI: http://example.com/
*/

注意事項: The plugin header is mandatory. Without it, WordPress won’t recognize your file as a plugin.

步驟 3：啟動外掛程式

Now that you’ve created your first plugin file, you can activate it:

前往 WordPress 控制面板.
按一下 外掛程式 > 已安裝的外掛程式.
您應該會看到列出的新外掛程式。按一下啟動.

Congratulations! You’ve just created and activated your first WordPress plugin. 🎉

挑戰: Take a moment to reflect on this achievement. Plugin activation is a huge step! Now, let’s make it do something extraordinary.

步驟 4：新增功能

Let’s add some simple functionality to your plugin. For example, we’ll add a custom message to your site’s footer.

在您的 my-first-plugin.php file:

function add_custom_footer_message() {
    echo '<p style="text-align: center;">感謝您造訪我的網站！</p>';
}
add_action('wp_footer', 'add_custom_footer_message')；

說明:add_custom_footer_message() 函數會在頁面底部輸出一則訊息。add_action() 函式告訴 WordPress 在 wp_footer 鈎被呼叫時執行我們的函式。

挑戰：嘗試修改訊息或樣式，看看如何自訂輸出！考慮加入您最喜歡的名言。

步驟 5：整理您的外掛程式

As your plugin grows, you’ll want to keep it organized:

使用獨立檔案:如有必要，請將程式碼分成多個檔案，例如不同的功能或管理頁面。
新增評論:撰寫註解以解釋您的程式碼每一部分的作用，尤其是當您打算稍後更新或分享時。

快速故事：當我開始開發外掛程式時，加入更多註解變得非常混亂。相信我，未來會感謝您的有條理！

挑戰：將您目前的程式碼分割成獨立的函式檔，並將其包含在您的主外掛程式檔中。這是保持整潔的絕佳做法！

步驟 6：將設定加入您的外掛程式

為了讓您的外掛程式更有活力，您可能想要加入設定，例如允許網站管理員變更頁腳訊息。

新增設定頁面:您可以在 WordPress 管理區中新增一個設定頁面，讓使用者可以修改外掛選項。
建立欄位:使用 WordPress 函式建立可將選項儲存至資料庫的輸入欄位。

Here’s a simplified example of adding a settings page:

function my_first_plugin_menu() {
    add_options_page('My First Plugin Settings', 'My First Plugin', 'manage_options', 'my-first-plugin', 'my_first_plugin_settings_page')；
}
add_action('admin_menu', 'my_first_plugin_menu')；

function my_first_plugin_settings_page() {
    ?&gt;
    <div class="wrap">
        <h1>我的第一個外掛程式設定</h1>
        <form method="post" action="/zh/options.php/" data-trp-original-action="options.php">
            <?php
                settings_fields('my_first_plugin_options_group');
                do_settings_sections('my-first-plugin');
                submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="zh"/></form>
    </div>
    <?php
}

此程式碼片段會在設定中的 WordPress 面板。

挑戰：建立一個新的設定，讓管理員可以變更頁尾訊息的字型大小。這將使您的外掛程式更具彈性！

測試與除錯

將您的外掛程式部署到 Live 網站之前，請務必徹底測試。使用下列工具 查詢監控 或 除錯列 以找出問題並調試您的外掛程式。

快速故事：當我建立我的第一個外掛程式時，我了解到在與其他外掛程式發生意想不到的衝突後進行除錯的重要性。Query Monitor 之類的工具可以讓您省去數小時的沮喪！

常犯的錯誤：切記在不同的環境下測試您的外掛程式，這可能會導致意外。務必在多個主題和配置上進行測試。

外掛程式開發的最佳實作

遵循 WordPress 編碼標準:確保您的程式碼是可讀且可維護的。
逃逸輸出:使用 esc_html() 或 esc_attr() 等函數來防止 XSS 攻擊等漏洞。
為您的功能加上前綴:為了避免衝突，請在函式名稱前加上獨特的前綴，例如 my_first_plugin_。

個人提示:在使用多個外掛程式時，前綴的函式名是救星。它可以防止可能導致意外行為的碰撞。

摘要

You’ve built your first WordPress plugin! In this tutorial, you learned how to:

建立開發環境。
建立並啟動一個新的外掛程式。
新增基本功能並建立設定頁面。

下一步:繼續實驗！嘗試增加更多的功能、探索不同的掛勾、實踐安全且有效率的外掛程式開發最佳實務。

透過時間和練習，您可以建立功能強大的外掛，大幅提升 WordPress 網站的效能。祝您編碼愉快！

使用者回饋與常見問題

我可以為我的外掛程式加入多種功能嗎？絕對可以！當您瞭解基本原理後，就可以透過建立額外的功能和使用適當的鉤子，來擴充您的外掛程式，以增加多種功能。
如果我在開發外掛的過程中破壞了我的網站怎麼辦？務必在本機或暫存環境中工作，並保留工作的備份。像 Query Monitor 之類的工具可以在部署到您的 Live 網站之前幫助您找出問題。
如何使我的外掛程式易於使用？專注於建立簡單乾淨的使用者設定介面。使用工具提示或說明文字引導使用者。
如何調試外掛程式的常見問題？Use the built-in WordPress debugging mode by adding define(‘WP_DEBUG,’ true) to your wp-config.php. Query Monitor can also help track errors, conflicts, or deprecated functions.
如果我的外掛程式與其他外掛程式衝突，該怎麼辦？預先修正您的功能，並與常用的外掛程式一起測試您的外掛程式，以找出潛在的衝突。WordPress 社群也是解決特定爭議的絕佳資源。

進階學習資源

WordPress 外掛程式手冊:創建 WordPress 外掛的全面指南。
WooCommerce 開發人員文件:如果您想深入了解 WooCommerce 專用外掛程式。
WordPress 守則:官方 WordPress 文件可協助您進一步瞭解掛鉤、動作和其他功能。

最後提示:加入 WordPress 社群或論壇，以獲得啟發、解決問題並提升技能。WordPress 社群充滿了熱心互助的開發人員！