Building Your First WordPress Plugin: A Beginner's Tutorial - OpenByt - Your Ultimate Source for Free WordPress Knowledge

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

WordPress 外掛是一種引人注目的方式，可以為您的網站增加功能。無論您是要新增自訂功能、改善網站效能或整合外部服務，建立 WordPress 外掛程式都能讓您完全控制網站的功能。在這份初學者教學中，我會引導您從頭開始建立您的第一個 WordPress 外掛程式。如果您是新手，也不用擔心，我會分享一些技巧和個人經驗，讓您享受這個旅程！

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

建立 WordPress 外掛程式可讓您

擴充功能:新增您的主題或其他外掛程式可能無法提供的功能。
可重複使用的程式碼:外掛程式可在不同的網站重複使用，因此如果您管理多個網站，外掛程式是有效的解決方案。
客製化:使用您的外掛程式，您可以完全控制 WordPress 網站的行為，而無需變更核心檔案或主題。
學習與成長:外掛程式開發是學習更多 WordPress、PHP 和編碼最佳實務的好方法。

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

設定您的開發環境

在您開始建立您的第一個外掛之前，建立一個本機 WordPress 開發環境是非常必要的。工具如 本地由 Flywheel 提供, XAMPP或 MAMP 將允許您測試您的外掛程式，而無須冒險使用您的即時網站。

快速提示:建立外掛時，請務必在本機或暫存環境中進行。這樣，您就可以避免意外地破壞您的 Live 網站。相信我，這是真正的救星！

步驟 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/
*/

注意事項:外掛頭部是必須的。沒有它，WordPress 將不會識別您的檔案為外掛程式。

步驟 3：啟動外掛程式

現在您已經建立了第一個外掛檔案，您可以啟動它了：

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

恭喜您！您剛剛建立並啟用了您的第一個 WordPress 外掛程式。🎉

挑戰:花點時間反思一下這個成就。外掛程式啟動是一大步！現在，讓我們讓它做一些非凡的事情。

步驟 4：新增功能

讓我們為您的外掛程式加入一些簡單的功能。例如，我們要在您網站的頁尾加入自訂訊息。

在您的 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：整理您的外掛程式

隨著您的外掛程式成長，您會想要讓它井井有條：

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

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

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

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

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

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

以下是新增設定頁面的簡化範例：

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_。

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

摘要

您已經建立了您的第一個 WordPress 外掛！在本教程中，您學會了如何

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

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

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

使用者回饋與常見問題

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