我使用 ChatGPT 創建 WordPress 外掛的旅程:120 小時的工作,沒有經驗

已發表: 2024-08-28

老實說:我實際上認為我可以在短短幾個小時內使用 ChatGPT 來建立一個 WordPress 外掛。或者,至少,所有 YouTube 教學和 Twitter 貼文都讓我相信這一點。

但讓我告訴你,這些故事遺漏了一些關鍵細節——準確地說,大約是 120 小時的細節。是的,這就是我從開始建立插件到完成實際花費的時間:120 小時!

就上下文而言,我之前沒有任何外掛程式或 WordPress 開發經驗,但我還是決定投入其中。雖然我喜歡這個挑戰,但它比我預期的要困難得多。每走一步,我都會遇到一個又一個障礙,其中許多障礙我甚至不知道存在。這很令人沮喪,但也是一次巨大的——巨大的(!)——學習經驗。

假設您打算跟隨我的腳步,我強烈建議您事先完整閱讀本文。我這麼說並不是為了某種自我推銷。我這麼說是因為它確實可以節省您數小時甚至數天的額外工作。在這個過程中我偶然發現了很多事情,直到事後我才意識到它們的重要性。不幸的是,這導致了無數本可以避免的程式碼修改(充滿了很多挫折感)。讀完這篇文章,你就不會再遇到這個問題了。

目錄
在沒有任何經驗的情況下,我花了 120 個小時用 #ChatGPT 構建了一個 #WordPress 插件 🤯
點擊發推文

這是給誰的,不給誰的 🙋‍♂️

根據您的背景和技能,您可能想知道自己是否「足夠有資格」執行此操作。我就說這麼多:

雖然您不需要具備任何先決編碼知識,但您確實需要熱衷於學習一些程式碼和開發插件的一般過程。有很多階段需要完成,而且很多時候,就完成它所需的技能(甚至工具)而言,一個階段與另一個階段無關。簡而言之,準備好學習——很多

根據您的插件的性質和您的最終目標,您可能很容易需要一個月或更長時間才能拿出最終產品。

對細節有敏銳的洞察力並識別模式會有很大幫助,了解 PHP、JavaScript 和 CSS 的作用也會有很大幫助。您不需要知道如何使用它們進行編碼,但了解它們的目的以及如何使用它們將是一個優勢。

如果以上都無法描述您的情況(尤其是學習的意願),並且您正在尋找快速簡便的解決方案,那麼這不適合您。這既不快,也不容易。但是,如果你付出努力,這是可能的。

如果您對此表示同意,那麼我們就開始吧。

第一階段:詳細規劃你的外掛📝

您需要問自己並回答的第一個問題是我想要建立什麼類型的插件以及我想要它做什麼?

您可能會想要匆忙完成此操作,以便可以開始實際建立和編碼,但我強烈建議您花點時間。您在此處所做的操作將為您的提示奠定基礎,並使您能夠以有組織的方式進行構建,而不是即時添加內容。要有效地度過此階段,請考慮以下事項:

  • 您希望您的外掛程式具有哪些功能?
  • 您希望 wp-admin 方面是什麼樣子?
  • 建立線框或流程圖以視覺化插件的工作流程。
  • 將其繪製出來並描述到最微小的細節。
  • 決定是否要將其供私人使用,或者是否要將其放在 WordPress 儲存庫中以供公共存取。

功能

閱讀分解👇🏻

首先列出您希望外掛程式具有的每一個功能。不要在這裡猶豫——寫下所有內容,即使您還不確定如何實施。例如,當我規劃基於短代碼的插件時,我希望它能夠執行以下操作:

  • 模糊文字
  • 打亂文字
  • 為文字新增工具提示
  • 放大或縮小文字
  • 為文字添加發光背景
  • 使用背景顏色突出顯示文字
  • 淡入文字
  • 將可點擊的音訊連結新增至一段文本

您的清單可能更長或更短,但關鍵是盡可能全面。想想什麼能讓你的外掛真正有用和獨特。

wp 管理員

閱讀分解👇🏻

接下來,考慮您希望您的外掛程式如何在 WordPress 管理區域中顯示和運行。這包括:

  • 設定頁面:您想提供什麼選項?你將如何組織它們?
  • 選單:您的外掛程式將出現在管理選單中的哪個位置?會有子菜單嗎?
  • 元框:如果您的外掛程式與貼文或頁面交互,是否需要自訂元框?
  • 表格:如果您要存儲數據,您將如何顯示它以供管理員查看?

就我而言,我決定建立一個主設定頁面,其中包含每個簡碼的標籤、一個單獨的文件頁面以及一個包含聯絡表單的頁面,以防使用者想要與我聯絡。這就是我想出來的:

wp-admin 中的時髦文字效果設定。

對我來說不幸的是——但對你來說不是,因為你正在閱讀這篇文章——是我在規劃階段過於關注插件的前端功能,以至於完全忽略了 wp-admin 方面的事情。

這使得它比我提前計劃花費的時間更長,因為當我意識到我所擁有的不完整或用戶體驗很差時,我不得不不斷修改程式碼。如果我提前繪製出來,或者更好的是,如果我使用線框圖,那麼這個階段會變得更加順利——這是到下一點的完美銜接。

線框或流程圖

閱讀分解👇🏻

正如我剛才提到的,這是我個人沒有做過但希望我做過的事情。如果您打算建立一個更複雜的插件,那麼這一步至關重要。您不需要成為藝術家——即使是粗略的草圖也會非常有幫助。考慮創建:

  • 管理頁面和任何前端元素的線框圖
  • 顯示資料如何透過插件移動的流程圖
  • 用戶旅程圖以了解人們如何與您的插件交互

雖然這樣做也需要時間,但在我看來,當您進入編碼階段並使用插件的精確詳細佈局時,您將獲得整體淨時間節省和更順暢的構建過程。

如果您不確定從哪裡開始,請查看 Figma 的免費線框範本。

結合一切並詳細描述

閱讀分解👇🏻

最後,將以上所有內容詳細寫下來。對於每個功能和介面元素,描述:

  • 正是您想要它做的
  • 您希望它如何與 WordPress 和外掛程式的其他部分交互

當考慮您希望外掛程式如何與 WordPress 互動時,選項不是無限的,但它們很廣泛。例如,根據您要建立的插件類型,您可以:

  • 使用簡碼
  • 直接掛鉤到塊編輯器
  • 添加額外的區塊
  • 新增 REST API 端點
  • 包括掛鉤
  • 建立自訂貼文類型和分類法

如果您沒有技術詞彙來描述或理解這些確切的機制 - 不要驚慌!完全沒問題。我列出這些只是為了讓您思考整體概念。主要目標是盡可能清晰地描述您想要實現的目標。這樣,當您提示 ChatGPT 時,它會在編寫程式碼時考慮所有這些元素。

當我建立插件時,我最初嘗試直接連接到區塊編輯器以獲取前端功能。儘管早期取得了一些進展,但我最終還是遇到了難以克服的障礙。經過大約兩天的不懈但毫無結果的故障排除後,我最終轉而使用短代碼。對於像我這樣的新手來說,這種方法最終更容易管理。您可能會發現自己處於類似的情況,因此請記住這一點。

我在這裡要提到的最後一件事是,這些機制通常不是互相排斥的。許多插件,甚至是初學者開發的插件,都結合了多種機制。除非您不打算擁有設定區域,否則您很可能最終也會使用混合方法。

私人使用與透過 WordPress 存儲庫的公共訪問

閱讀分解👇🏻

在進入第二階段之前,您還應該做出一個決定。這個決定與你要為誰建立這個插件有關。

您只想為自己(或客戶)製作嗎?或者,您想將其提交到 WordPress 儲存庫以供批准,以便公眾可以使用嗎?

從技術上講,您還不需要絕對做出這個決定。然而,事後看來,我希望我能在這個過程中更早完成它。這就是為什麼我建議您現在就這樣做。

原因是因為我從一開始的目標就是將我的外掛程式提交到儲存庫,但我最初建立我的外掛程式時沒有遵循 WordPress 編碼標準。我只關注功能並使其能夠正常運行且沒有錯誤。

結果,我最終不得不進行大量額外的程式碼調整,以使我的程式碼符合標準。不用說,這花了很多時間,而且本來是可以避免的。

話雖如此,即使您打算只建立一個供私人使用的插件,我仍然建議遵循編碼標準。這將減少您的外掛程式在後續 WordPress 版本中發生故障的可能性。在流程方面,主要區別在於您無需對標準的非功能方面進行嚴格審查。

例如,當您進行內嵌註解時,例如// Use global default.您需要在末尾加上一個句號。該句點沒有任何功能用途,但如果缺少它,根據標準,它將被標記為“錯誤”。對於私有構建,您可以忽略此類“錯誤”。

第二階段:給 ChatGPT 一個詳細的提示,開始開發🗣️

這裡的主要想法是透過清晰的說明向 GPT 提供您的插件的概述。作為一般性建議,我建議您避免嘗試立即建造整個房子。最好採取一磚一瓦的方法。

假設您要建立我的插件作為範例。

儘管它有八種效果,但我建議告訴 GPT 您想從一個效果開始。幾乎就像您正在建立一個單效插件而不是八效插件一樣。然後檢查以確保效果有效 - 包括後端設定區域。修復所有錯誤,一旦一切看起來都不錯,就添加下一個效果。然後就依照這個過程,一一進行即可。

這樣做的原因是,隨著程式碼複雜性的增加,可以更輕鬆地修復可能引入到程式碼中的任何錯誤。如果 GPT 立即產生所有程式碼並且很多東西都無法正常工作,那麼修復起來就會困難得多。

您仍然希望向 GPT 提供有關您對該插件的整體願景的廣泛概述,但首先要關註一些特定的事情來結束提示。

為了節省您的時間,我創建了一個範例模板,您可以將其提供給 ChatGPT 以幫助您入門。

括號 [X] 中的部分需要您的輸入才能完成。您可能需要也可能不需要進一步編輯它,具體取決於您計劃建立的插件類型。

如果您不明白提示中的所有內容,請不要擔心,我也不明白。當你經歷這個過程時你會學到東西。

我的提示🤖

 I want to build a WordPress plugin called [name] that does the following: [General overview but don't give GPT the specifics yet] I'd like it to work via [Refer back to the section "combine everything and describe it in detail" from phase one; think about how you want your plugin to function - if you're not sure, then you can delete this part] . I would also like to create a settings menu in wp-admin so that users can [Explain what you want your settings menu to look like and do, including any specific UI/UX considerations; if you create any wireframes, upload those as well] I plan on using the following tools for this process: - Docker and/or Local by Flywheel {Choose one or use both} - Terminal (MAC) {if you're using a PC, substitute with Command Prompt} - Sublime Text - Chrome and Chrome inspector tool Also, I want to use GitHub for version control to track changes and collaborate effectively. I will use the default WordPress template provided by GitHub to generate the code for the .gitignore file. However, I will need your help to walk me through how to set up a repository and how to commit my files to it. For the main PHP file, the author name should be [your name] and the author URI should be [your website if you have one] . For any code you generate, please use tabs for indentation and not spaces. {important if you plan on submitting your plugin to the WordPress repository} If you need to enqueue any scripts, please ask me questions to help me figure out whether we should use conditional loading or if we should enqueue globally. In addition, when generating CSS, please follow BEM (Block Element Modifier) methodology. Let's begin with [insert which feature you'd like to build first] Please [Optional: help me setup Local by Flywheel and then] generate the initial PHP file and advise on next steps after that.

在您向 ChatGPT 提供提示後,它將引導您完成我在下面概述的其餘步驟。值得注意的是,根據 ChatGPT 的心情或您自己想要遵循我所列出的流程的願望,我列出所有內容的方式可能不像它所呈現的那樣線性。

為了讓您了解我的意思,我親自測試了該提示三次。除了幫助我設定 Local by Flywheel 和產生初始 PHP 檔案之外,它每次都選擇以不同的方式執行其他步驟。

第一次嘗試

給予 ChatGPT 初始提示以建立插件嘗試第一個。

在我的第一次嘗試中,ChatGPT 並沒有超出產生 PHP 檔案的範圍,而是向我提供了接下來如何進行的兩個選項。值得注意的是,它確實遵循了有關使用條件載入對腳本進行排隊的說明,也提到了這一點。

第二次嘗試

第二次嘗試產生了最簡單的 PHP 文件,但就步驟而言卻是最徹底的整體回應。它直接使用終端機來設定專案目錄並初始化 Sublime。它甚至指導我如何設定 Git 儲存庫。

為 ChatGPT 提供建構插件的初始提示,嘗試進行第二次嘗試。

第三次嘗試

第三次嘗試與第一次嘗試有些相似。儘管與第一次嘗試不同,ChatGPT 沒有為腳本設定條件加載,也沒有詢問我。它只是預設將它們生成為全域的。

給予 ChatGPT 初始提示以建立插件嘗試第三次。

外賣

我與您簡要分享這三個嘗試的原因不僅是為了強化我之前所說的工作流程不一定會標準化的內容,而且是為了指出提示對您來說和對於 GPT 一樣重要

我的意思是,您應該關注 ChatGPT 正在做什麼以及沒有做什麼,並在它掉線時將其重新帶回正軌。因此,當您完成此旅程時,請不要忘記參考提示以及我稍後將在調試部分中分享的指示。提醒並重新調整 ChatGPT 盡可能執行您希望它執行的操作。

下載我的插件並測試一下📥

如果您想試用我的外掛程式的“工作版本”,以下是 zip 檔案。我將在不久的將來更新它以包含 WP 儲存庫版本,但這將讓您暫時使用它。

下載時髦文字效果插件

第三階段:工具、劇本、目錄和 Git 👩‍💻

在此階段,您將為建立插件奠定基礎。這也是學習曲線會迅速增加的地方,特別是當您開始安裝腳本和使用終端機(或命令提示符,如果您在 PC 上)時。詳細情況如下:

  • 決定您要使用哪個本機環境工具(例如 Local by Flywheel、Docker)。
  • 設定您的項目目錄。
  • 安裝您的腳本(例如,npm、Composer)。
  • 設定 Git 儲存庫(“repo”)並將插件檔案提交(上傳)到其中

建構本地環境

閱讀分解👇🏻

當我建立插件時,我最終同時使用了 Local by Flywheel 和 Docker,但讓我明確一點:你實際上只需要其中一個。

我開始使用 Local by Flywheel,因為它用戶友好且專為 WordPress 開發而設計。然而,當我最初嘗試將我的插件直接掛鉤到區塊編輯器中時,我遇到了一些依賴性衝突當兩個或多個外掛程式或主題需要同一依賴項的不同版本時發生。 。當時 ChatGPT 建議我嘗試使用 Docker 來提供協助,所以我最終使用了這兩種工具。

我的建議?從 Local by Flywheel 開始。它非常簡單,並且非常適合大多數初學者插件開發場景。只有當您遇到 Local 無法處理的特定問題時,才考慮使用 Docker 等替代方案。

設定網站後,我還建議安裝 WP Fastest Cache 外掛。當您稍後進行 linting 和調試時,它會派上用場。

設定項目目錄

閱讀分解👇🏻

一旦您的本地環境啟動並運行,您將需要設定插件的目錄結構。組織良好的文件結構對於可維護和可擴展的插件開發至關重要。以下是如何開始:

  • 在您的本機環境(即硬碟)中,導覽至 WordPress 外掛目錄(通常是wp-content/plugins/ )。
  • 為您的外掛程式建立一個新資料夾。選擇一個具有描述性但簡潔的名稱。我將其命名為“時髦文字效果”。
  • 在這個主資料夾中,設定一個如下所示的基本結構:
 funky-text-effects/ ├── assets/ │ ├── css/ │ ├── js/ │ └── images/ └── funky-text-effects.php

如果您打算將外掛程式翻譯成其他語言,您也可以在主插件目錄中新增/languages目錄:

時髦的文字效果/
├── 資產/
│ ├── css/
│ ├── js/
│ └── 圖片/
├── 語言/(可選)
└── 時髦文字效果.php

  • 最後,在主插件目錄中建立一個.gitignore文件,這將幫助您避免將不必要的文件提交到 Git 儲存庫。這已包含在 ChatGPT 的初始提示範本中,因此當您到達此步驟時,GPT 可能會自動告訴您執行此操作。然而,它可能會讓人忘記,尤其是當你的線程開始變得太長時。這就是為什麼我在這裡提到它作為提醒。

安裝腳本

閱讀分解👇🏻

要安裝腳本,您需要使用命令列介面 - 即 Mac 上的終端​​機或 Windows 上的命令提示字元。

如果您是開發新手,這可能會讓人感到害怕。但別擔心,它並不像看起來那麼可怕!不僅如此,每當您遇到困難時(相信我,您一定會遇到困難),ChatGPT 就會隨時幫助您擺脫困境。我還建議使用克勞德作為備份選項。有時,如果您使用 GPT 沒有任何進展,Claude 可以提供突破。

拋開這些,讓我們來看看您幾乎肯定需要的工具,無論您要建立的插件類型如何:

  1. NPM(節點套件管理器):用於各種 JavaScript 工具。
  2. Composer:用於管理 PHP 依賴項。
  3. WordPress 腳本:用於 WordPress 開發的可重複使用腳本的集合。

在後期階段,您還需要安裝其他工具來進行 linting 等。

💡我也建議看看這個頁面。它包含您可以安裝的所有各種腳本包的目錄。儘管您在這個階段不太可能了解它們的許多功能,但有些標題的方式可以暗示它們的用途。如果其中任何一個看起來與您的插件相關,請直接向 GPT 詢問它們。

隨著您在插件開發之旅中取得進展,您將了解哪些工具是您經常使用的,哪些工具是可以不用的。不要害怕嘗試並找到最適合您和您的插件的設定。

建立 Git 儲存庫(“repo”)並提交文件

閱讀分解👇🏻
我的 GitHub 儲存庫。
我最初的 GitHub 儲存庫。目前它是私人的,但一旦我對我的程式碼進行一些額外的調整,我會將其公開 - 所以請密切關注此頁面!

完成前面的所有步驟後,是時候建立一個 Git 儲存庫並向其中提交初始文件了。此步驟建立專案起點的快照。

我個人使用 GitHub,因為我們在 Themeisle 使用的是 GitHub,所以我已經在那裡有一個帳戶,但也有其他平台(例如,GitLab、Bitbucket)。如果您最終使用了 GitHub 以外的平台,請不要忘記調整第三階段的提示範本

為了簡潔起見,我不會引導您完成此操作。到達此步驟後,ChatGPT 可以逐步引導您完成流程,包括您需要在終端機/命令提示字元中輸入哪些命令。

提交初始文件時,請記住以下幾點:

  • 檢查您所提交的內容:確保您只包含必要的文件。使用.gitignore檔案排除任何臨時檔案或產生的檔案。
  • 編寫清晰的提交訊息:諸如「初始提交:基本專案結構和配置」之類的內容效果很好。
  • 不要擔心完美:這只是您的起點。當您開發插件時,您將進行更多的提交。

同樣,ChatGPT 很可能會為您提供有關用於此初始提交的特定命令的指導。如果沒有,就要求它這樣做。請務必根據您的設定和 Git 平台寫下您需要的確切步驟。

透過完成這一步,您將正式開始您的外掛開發項目,並為版本控制奠定堅實的基礎。從現在開始,您將能夠追蹤所做的每項更改,安全地嘗試新功能,並與其他人合作(如果您選擇這樣做)。

第四階段:插件播放時間🖱️

在所有階段中,我想說這個階段和下一個階段可能是最有趣的,因為這是你真正開始看到一切都整合在一起的時候。首先,您需要登入本機 WordPress 安裝。如果您最終使用 Local by Flywheel,則非常簡單,只需單擊右上角附近的WP Admin 按鈕即可:

從 Local by Flywheel 介面登入 wp-admin。

如果您最終使用 Docker 或其他本地開發工具,並且不確定如何進入您的站點,只需詢問 ChatGPT。

登入後,透過外掛程式 → 安裝的外掛程式啟動您的外掛程式。然後在清單中找到您的外掛程式並點擊「啟動」

⚠️重要提示:如果您在這裡沒有看到您的插件,請不要驚慌。這很可能是目錄不匹配,但無論如何,您可以點擊 ChatGPT 來幫助您解決問題。如果您發現自己在多次嘗試後仍然陷入困境,而 ChatGPT 沒有建議您嘗試 WordPress 偵錯模式,那麼請它為您提供程式碼片段。它們看起來像這樣:

 define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

啟動插件後,開始使用它並做筆記:

  • 一切都如預期進行嗎?極不可能
  • 什麼不起作用?在什麼情況下它不起作用?
  • 您在最初的提示描述中完全忽略了哪些無法正常運作的小問題?

做好筆記後,您就可以進入下一階段:調試和 linting。

第五階段:調試和 linting 💻

插件複雜性和錯誤之間存在相關關係:插件越複雜,出現錯誤的可能性就越大。但即使是更簡單的插件也需要 linting 和調試。

棉絨

如果本文是您第一次看到“linting”這個詞並且不確定它的含義,很簡單,它會根據該類型程式碼的一組規則和標準檢查您的插件程式碼。然後,它會告訴您是否發現任何錯誤或不一致、它們所在的行以及如何解決它們。

我對一個 JavaScript 檔案進行 linting 的範例。

Linting 相當簡單。只需確保您使用適合您將要處理的程式碼/檔案類型的 linting 工具即可:

  • PHP_CodeSniffer 與用於 PHP linting 的 WordPress 程式碼標準。
  • ESLint 用於 JavaScript linting。
  • StyleLint 用於 CSS linting。

對於 JavaScript,您可能還需要新增:

  • ESLint Unicorn:超過 100 個強大的 ESLint 規則。
  • ESLint Promise:對於管理非同步任務非常有用,例如 API 呼叫、資料庫查詢、檔案處理或任何需要時間才能完成的操作。

偵錯

與 linting 相比,調試很像您在上一階段所做的事情,即您自己使用插件,識別需要修復的問題,然後您自己修復它們或請求 ChatGPT 幫助您。

我個人發現調試比 linting 更複雜。一個重要原因是,當您進行 lint 偵測時,linting 流程的輸出會準確地告訴您問題是什麼,以及它們在程式碼中的位置。透過調試,您就無法獲得這種奢侈。由您和 ChatGPT 來解決這個問題。

然而,ChatGPT 很難將注意力集中在有問題的程式碼行上,這意味著您需要在讓它「啟動」之前先處理好「準備好」。

為了讓事情變得更容易,我列出了在開始調試階段之前我會給自己的所有各種建議。

閱讀分解👇🏻

不要含糊其辭,不要讓 ChatGPT 決定

如果您沒有給 ChatGPT 非常具體的指令,它就會開始向您吐出無窮無盡的程式碼行,而且通常這些程式碼甚至與它已經給您的程式碼沒有任何不同。它會要求你「仔細檢查」它是否正確,但這樣做只是浪費時間。沒有什麼比這更令人沮喪的了:

ChatGPT 在偵錯期間提供與先前提供的程式碼相同的程式碼(即未解決問題)。

相反,您應該做的是向 ChatGPT 提供非常具體的指令,不僅僅是生成程式碼,而是專門隔離它認為導致問題的程式碼行並將其顯示給您。告訴它解釋它計劃如何更改這些行以及為什麼它認為這些更改將解決問題。最後,要求它告訴您實施這些變更後的預期結果應該是什麼。

這些說明將幫助它專注於問題,並最大限度地減少溢出錯誤,它可能會解決您的一個問題,但會在此過程中引起新的問題。

常規 CSS 與 BEM CSS

與上述相關但特定於 CSS,您應該記住,對於任何 CSS 片段,ChatGPT 將產生標準 CSS,或預設情況下我所說的「課堂 CSS」。

這是您在學習主題的初學者課程時需要學習的基本 CSS。它很容易理解,而且本身在技術上沒有任何問題,但是在開發 WordPress 外掛時,它可能會導致與其他外掛程式或主題的衝突。

相反,最好告訴 GPT 使用 BEM(區塊元素修改器)方法。 BEM 透過提供清晰且結構化的命名約定來幫助降低 CSS 衝突的風險。它確保您的樣式更可預測且更易於管理,因為每個區塊、元素和修飾符都有一個獨特的描述性類別名稱,可以最大限度地減少意外樣式影響的可能性。此外,BEM 可以更輕鬆地找到和更新特定樣式而不影響其他樣式,從而提高了可維護性。

我已經在第二階段的範例提示中提到了這一點,但我在這裡突出顯示它,以便您始終記住向 ChatGPT 提供 CSS 片段的這些說明。

條件載入與全域排隊

ChatGPT 的另一個預設行為與排隊腳本有關。如果您還不知道這句話的含義,請不要擔心。重要的是當你看到它時,你能在程式碼中認出它。它看起來像這樣:

 function enqueue_my_scripts() { wp_enqueue_script('my-plugin-script', plugin_dir_url( FILE ) . 'js/my-script.js', array('jquery'), '1.0.0', true); } add_action('admin_enqueue_scripts', 'enqueue_my_scripts');

在上面的範例中,程式碼將為所有管理頁面全域排隊腳本,這通常是不必要的,並且可能會導致效能問題。不幸的是,這就是 ChatGPT 會給你的,除非你大聲說出來並告訴它不要這樣做。需要明確的是,在某些情況下,這實際上是完全合適的,但在許多情況下則不然。

因此,一旦您發現 ChatGPT 產生任何帶有“enqueue”一詞的程式碼,請確保您對此進行對話。詢問 ChatGPT 將腳本全域排隊是否有意義,或僅在需要腳本的特定頁面上排隊(這稱為「條件載入」)。

經常提醒、提醒

ChatGPT 有健忘的傾向,當您使用它進行編碼時更是如此。因此,雖然您可能會給它特定的指示,但它在專案期間遵循這些指示的機率為零

有時它甚至會完全忽略你要求它做的事情。如果發生這種情況,請更加嚴厲,讓它知道它沒有按照您的意願行事:

最重要的是,在幾次互動中,它會很快默認回到其標準行為,試圖將您淹沒在與您嘗試調試的程式碼部分無關的大量程式碼中。

發生這種情況時,只需點擊 GPT 輸出上的停止按鈕並提醒它遵循您的指示。當您發出提醒時,將它們複製並貼上到聊天視窗中也很有幫助。

說到生成長行程式碼...

避免讓 ChatGPT 為您重新產生整個文件

當您不習慣使用程式碼並感到害怕時,要求 ChatGPT 在每次程式碼調整後為您重新生成整個檔案一開始似乎很有吸引力。

您所要做的就是“複製並貼上”,對吧?

雖然這看起來很誘人,但實際上這是一個壞主意。長遠來看,會為你帶來更多的麻煩。您不僅會浪費大量時間這樣做 - 特別是當您正在偵錯 PHP 檔案時(該檔案可能會變得相當長),而且 ChatGPT 可能會在此過程中向您的現有程式碼中引入新的錯誤。它會解決您正在解決的問題,但隨後它會意外地調整文件的其他部分並破壞某些內容。

最好隔離程式碼中導致問題的特定部分,並只處理這些部分。

一次只處理一個錯誤

沿著上述思路,即使您有多個錯誤 - 除非它們非常小 - 一次只告訴 ChatGPT 其中一個錯誤。修復每個錯誤,然後再繼續處理下一個錯誤。

密切注意程式碼片段的最頂部和最底部行

當 ChatGPT 為您提供程式碼片段時,它有時(但並非總是)會透過向您顯示您正在使用的整個檔案的最頂行以及最底行來封裝它們。因此,您需要小心,不要總是簡單地複製並貼上整個程式碼片段,因為這會使您的程式碼中斷。

⚠️ 密切注意上排:

忽略程式碼片段的頂行。

如果它與您嘗試偵錯的特定程式碼片段無關,請忽略它。

底線也是如此,儘管這可能更難發現。有時它可以像});一樣簡單。這會導致您的程式碼中斷,因為它關閉了尚未關閉的父程式碼片段。

忽略程式碼片段的底行。

一段時間後,您會更好地弄清楚它,但是當您開始插件開發之旅時,如果您發現添加程式碼片段後很多事情都中斷了,請嘗試刪除最後一行,看看它是否“神奇地” ” 解決了一切。

控制台是您最好的朋友

如果 ChatGPT 嘗試調試相同的問題但沒有成功,並且您發現自己陷入了困境,請要求它將 console.log 行添加到它認為導致問題的程式碼部分。然後在重新建立錯誤時打開控制台。它將解釋發生了什麼。然後,您可以截取此說明並將其提供給 ChatGPT,以便它可以找出解決方法。

使用控制台進行調試。

若要存取 Google Chrome 中的控制台,請以滑鼠右鍵按一下頁面並選擇Inspect

在 Google Chrome 中造訪控制台。

當控制台沒有給您答案時,請檢查您的資料庫

該控制台非常出色,通常會為您提供所需的答案。然而,在某些情況下,它只會確認您所經歷的情況,但不會真正為您提供任何如何解決問題的指導。

例如,當我嘗試為我的外掛程式添加打字效果時,wp-admin 中效果的預設預覽速度設定為 23 毫秒。我花了大量的時間修改 PHP 和 JavaScript 檔案來嘗試解決這個問題,但沒有成功。

控制台確認它在 23 點加載,但除此之外,它沒有給我任何其他有價值的資訊:

控制台確認錯誤,但沒有解決方案。

最終,我檢查了資料庫,並意識到錯誤的值來自那裡:

檢查資料庫是否有錯誤。

我把 23 改為 60,這就是我想要的,它解決了問題。

如果您最終使用 Local by Flywheel,則可以透過點擊「資料庫」標籤透過介面輕鬆存取資料庫:

透過 Local by Flywheel 存取資料庫。

一旦您獲得訪問權限,開始查找的好地方就是您在上面的螢幕截圖中看到的相同位置:wp_options。大多數時候你的插件設定都可以在那裡找到。

⚠️ 但是,還需要指出的是,這裡更大的根本問題是我的程式碼實際上缺少啟動指令。當您的外掛程式首次啟動時,它應該檢查資料庫中是否存在某些設定。如果沒有,您的插件應該使用您想要的預設值來添加它們。這可以確保插件的每次新安裝都以正確的設定開始。我透過慘痛的教訓學會了這一點,所以你不必這樣做。

新鮮的線索可以為你帶來突破

隨著程式碼的成長以及 ChatGPT 的線程變得越來越長,它很容易出錯或忘記事情。在某個時刻,開始一個新線程是個好主意。將您的主要插件檔案上傳到新線程,並向 ChatGPT 解釋您正在做什麼以及在哪裡停止。

這是您可以使用的範例提示:

我正在另一個線程中與您一起調試 WordPress 插件,但我認為該線程太長了,您開始感到困惑。讓我們重新開始吧。

查看此處的插件文件,讓我們嘗試排除故障[描述您的錯誤]

另外,這一點非常重要,當產生新版本的程式碼片段以嘗試進行故障排除時,請不要只產生程式碼片段,還要提供說明,說明您對現有內容進行了哪些變更。另外,請解釋更改這些行背後的理由,以及我們可以期望透過您所做的更改看到什麼。

[如果產生 CSS,請不要忘記提醒 ChatGPT 遵循 BEM(區塊元素修飾符)方法。

不要害怕使用你的大腦

你的插件越複雜,GPT 搞亂你的程式碼的可能性就越大。雖然它確實可以幫助您進行調試,但有時您會發現自己找出解決方案會更好。老實說,這種情況在我身上發生過很多次,尤其是在我構建的後期階段,我的主 PHP 檔案已增長到 500 多行(後來的版本超過 1,000 行)。

根據您對閱讀程式碼的熟悉程度和舒適度,這可能會成為一種阻礙,但如果您擅長模式識別和發現不一致,那麼您就可以通過。

我當然不是一個熟練的程式設計師,儘管我確實了解各種程式語言的功能並對程式碼有一定的了解,這對我很有幫助。

不過,即使您是個菜鳥,您也可以查看 GPT 認為可能導致問題的程式碼行。然後在程式碼中找到正常工作的相同元素。將其程式碼與損壞元素的程式碼進行比較,並嘗試看看有什麼不同。很多時候這可以解決問題:

保留插件檔案的備份(如果使用 Git,則可選)

雖然使用 Git 提供了一種管理和還原程式碼變更的強大方法,但保留手動備份也絕不是一個壞主意。每當您的程式碼達到里程碑時,我建議將主程式碼檔案的副本保存在另一個資料夾中:

製作插件檔案的副本。

這可以作為一個額外的安全網,如果您在繼續建置時遇到嚴重的錯誤,可以輕鬆恢復到以前的更好版本。

不要輕易放棄,但要知道自己的極限

無論您如何努力,可能都無法實現某些功能或調整。準備好調整你的期望並解決它們。這並不意味著碰壁就放棄。然而,這確實意味著,如果您已經進行了100 次嘗試並花費了數小時(或數天)嘗試實現某些目標但沒有成功,那麼這可能要么是不可能的,要么超出了您和ChatGPT 的能力。

最後,如果您想知道是否應該先進行調試或 lint,據我了解,沒有明確的答案。我在 linting 之前進行了調試,但是您可以在執行該過程時預設使用 ChatGPT 的首選項,或者告訴它您想先執行哪一個。

第六階段(可選):測試🔬

如果您正在建立一個相對簡單的插件,並且根據您自己的手動測試對其功能充滿信心,那麼您不一定需要執行此步驟。我這麼說是因為編寫這些測試程式碼仍然需要大量工作,就像您無法透過 ChatGPT 獲得可用的插件一樣,您也不太可能獲得不存在錯誤的功能測試。

簡單地說,這裡需要在時間投入和實用價值之間進行權衡

根據我自己的經驗,我能夠成功建立一個測試,檢查我的插件在用戶與插件互動時是否能夠執行其主要功能 - 但這花了我一整天的調試時間!

與 ChatGPT 關於測試 WordPress 外掛的對話。

從實際的角度來看,我已經手動檢查了插件的功能,但很高興看到測試確認一切正常。

如果您打算嘗試建立一個比我更複雜的插件,或者您的插件的功能將集中在後端(您無法手動檢查它們是否正常工作),那麼請花時間正確運行測試值得體力勞動。

測試類型

閱讀分解👇🏻

根據插件的複雜性,您可能需要考慮不同類型的測試,例如:

  • 單元測試:這些測試著重於驗證插件中各個元件或方法的功能。
  • 整合測試:這些測試檢查插件的不同部分如何協同工作,確保整體功能符合預期。
  • 端到端 (E2E) 測試:這些測試從頭到尾模擬使用者與插件的交互,以確保它在現實場景中按預期運行。

您編寫的特定測試將取決於插件的功能和複雜性。如果您不確定從哪裡開始,我建議首先關注核心功能的單元測試。然後根據需要擴展到整合和端到端測試。

如果您或 ChatGPT 繼續陷入困境,WordPress 開發者社群擁有豐富的測試資源可供您查看。您可以自己查看它,也可以複製其中的部分內容並將其提供給 ChatGPT,因為它會繼續幫助您進行偵錯。

需要考慮的工具

閱讀分解👇🏻
  • Yoast PHPUnit Polyfills :這個 Composer 套件為舊版的 PHP 提供了與最新版本的 PHPUnit 的兼容性,確保您的測試可以在不同的環境中一致地運行。
    終端命令composer require yoast/phpunit-polyfills
  • MySQL :MySQL 資料庫伺服器是許多 WordPress 外掛程式的常見要求,因為它們通常需要資料庫來儲存和檢索資料。
    下載連結:https://dev.mysql.com/downloads/mysql/

我使用 Yoast PHPUnit Polyfills 和 MySQL 作為測試設定的一部分。

您可能需要考慮的其他工具:

  • WP_Mock :這是一個專門為WordPress開發設計的測試框架。它允許您模擬 WordPress 核心功能,這在編寫單元測試時特別有用。
    終端機指令composer require 10up/wp_mock
  • Codeception :這是一個全面的測試框架,支援單元、整合和端到端(E2E)測試。它有一個 WordPress 特定的模組,可以簡化 WordPress 外掛的測試過程。
    終端命令composer require codeception/codeception
  • WP Browser :這是一個 Codeception 模組,提供進階 API,用於在 E2E 測試期間與 WordPress 互動。它可以幫助您模擬使用者互動並在更真實的環境中測試插件的功能。
    終端命令:沒有直接的終端命令,因為它是 Codeception 中的一個模組
  • PHPUnit Parallel Runner :如果您有一個大型測試套件,您可以考慮使用 PHPUnit Parallel Runner 同時執行測試來加速測試過程。
    終端機指令composer require brianium/paratest

第七階段(可選):將您的外掛程式提交至 WordPress 儲存庫🥳

如果您已經做到了這一點,那麼您已經成功登上了眾所周知的插件之山。剩下要做的唯一一件事就是插上您的旗幟,以便它加入 WordPress 儲存庫中的其他 59,650 個外掛程式中。

它有自己單獨的流程,並在「新增您的外掛」頁面上附有清單:

  • 閱讀常見問題。
  • 遵守所有插件開發人員指南。
  • 確保您有權將外掛程式上傳到 WordPress.org 供其他人使用和分享。
  • 您的插件(包括其所有庫)以及任何其他包含的資產均已獲得 GPL 許可或與 GPL 相容。
  • 您使用Plugin Check 插件進行最後一輪測試,並解決任何指示的問題(排除您認為誤報的問題)。
插件檢查 (PCP)插件檢查 (PCP)

作者:WordPress 效能團隊與外掛審核團隊

目前版本: 1.1.0

最後更新時間: 2024 年 8 月 28 日

插件檢查.1.1.0.zip

92%收視率1,000+安裝WP 6.3+需要

您可能認為在完成所有調試、檢查和測試之後,他們要求您使用的插件不會拾取任何內容。但是,作為首次插件開發人員,您可能還有一些未解決的問題需要解決 - 特別是如果您在執行檢查之前沒有從建置中刪除測試檔案。

若要繼續,請前往「工具」“外掛程式檢查”

從 wp-admin 存取插件檢查工具。

然後勾選所有五個類別並執行檢查:

插件檢查的結果。

然後,您可以將這些未解決的問題提供給 ChatGPT 並解決它們。完成後,再次執行檢查以確保結果乾淨。根據需要多次執行。一旦獲得完全乾淨的檢查(排除誤報),您就可以將外掛程式提交給 WordPress 開發團隊。然後耐心等待他們審核。

轉到頂部

最後的想法🧠

雖然使用 ChatGPT 建立插件是一個有趣且有益的過程,但這絕對不是一個快速的過程。你需要投入大量的汗水才能做出一個性能良好的最終產品。但最終,您將欣賞完成這個項目將教給您的所有新技能。

在沒有任何經驗的情況下,我花了 120 個小時用 #ChatGPT 構建了一個 #WordPress 插件 🤯
點擊發推文

以下是我學到的一些東西(你也可能學到):

  • 我學習如何使用終端命令在硬碟上導航,也學習了與建置插件過程相關的其他命令。
  • 我現在對 Docker 和 Local by Flywheel 都相當滿意,在這次實驗之前我從未使用過這兩者。
  • 我還熟悉許多在此之前我甚至不知道存在的開發人員工具和腳本。
  • 我過去參加過 Free Code Camp 和 Codecademy 的一些課程,雖然兩者都很棒,但我覺得完成這個專案我獲得了更多的實用知識。
  • 與上述相關,我現在有很多隨機編碼的資訊區塊,如果我再次從事類似的工作,這些資訊將會派上用場。
  • 零到工作插件之間的差距比工作插件和提交就緒插件之間的差距小得多。我在幾天之內就完成了插件的工作版本,但我又花了幾週時間才完成所有調整,使其足夠好,可以提交到 WordPress 儲存庫。

總的來說,這是我很長一段時間以來做過的最酷的活動之一。感謝您抽空閱讀。如果您最終使用這些資訊來建立您的第一個插件,請在下面給我留言。我很想看看你的最終結果。

耶!您已完成文章的結尾!