Mein Weg zur Erstellung eines WordPress-Plugins mit ChatGPT: 120 Stunden Arbeit, keine Vorkenntnisse
Veröffentlicht: 2024-08-28Ich bin ehrlich: Eigentlich dachte ich, ich könnte mit ChatGPT in nur ein paar Stunden ein WordPress-Plugin erstellen. Zumindest haben mich all die YouTube-Tutorials und Twitter-Threads dazu gebracht, das zu glauben.
Aber lassen Sie mich Ihnen sagen, dass diese Geschichten ein paar entscheidende Details ausgelassen haben – um genau zu sein etwa 120 Stunden an Details. Ja, so lange habe ich tatsächlich gebraucht, um das Plugin von Anfang bis Ende zu erstellen: 120 Stunden!
Zum Kontext: Ich hatte noch keine Erfahrung mit der Entwicklung von Plugins oder WordPress, habe mich aber trotzdem dazu entschlossen, einzusteigen. Und obwohl ich die Herausforderung liebte, war sie viel schwieriger als ich erwartet hatte. Bei jedem Schritt stieß ich auf eine Hürde nach der anderen, von der ich oft nicht einmal wusste, dass sie existierte. Es war frustrierend, aber auch eine riesige (!) Lernerfahrung.
Falls Sie vorhaben, in meine Fußstapfen zu treten, empfehle ich Ihnen dringend, diesen Artikel vorher vollständig zu lesen. Ich sage das nicht als eine Art Eigenwerbung. Ich sage es, weil es Ihnen wirklich Stunden – sogar Tage – zusätzlicher Arbeit erspart. Es gibt so viele Dinge, über die ich in diesem Prozess gestolpert bin, dass ich erst im Nachhinein wusste, dass sie wichtig sind. Leider führte dies zu unzähligen Coderevisionen (mit viel Frust), die hätten verhindert werden können. Wenn Sie dies lesen, werden Sie dieses Problem nicht haben.
Für wen das ist und für wen nicht 🙋♂️
Abhängig von Ihrem Hintergrund und Ihren Fähigkeiten fragen Sie sich möglicherweise, ob Sie dafür „qualifiziert genug“ sind. Ich sage so viel:
Sie müssen zwar nicht unbedingt über Programmierkenntnisse verfügen, aber Sie müssen sich für das Erlernen von Code und den allgemeinen Prozess der Plugin-Entwicklung begeistern. Es gibt viele Phasen, die es zu durchlaufen gilt, und oft hat eine Phase nichts mit der anderen zu tun, was die Fähigkeiten (oder sogar die Werkzeuge) angeht, die Sie zum Abschließen benötigen. Kurz gesagt, seien Sie bereit zu lernen – VIEL .
Abhängig von der Art Ihres Plugins und Ihren ultimativen Zielen kann es leicht einen Monat oder länger dauern, bis Sie ein Endprodukt entwickeln.
Ein ausgeprägter Blick für Details und das Erkennen von Mustern sind von großem Nutzen, ebenso wie das Wissen, was PHP, JavaScript und CSS tun. Sie müssen nicht wissen, wie man mit ihnen programmiert, aber es ist von Vorteil, ihren Zweck und ihre Verwendung zu verstehen.
Wenn keiner der oben genannten Punkte auf Sie zutrifft – insbesondere die Lernbereitschaft – und Sie auf der Suche nach einer schnellen und einfachen Lösung sind, dann ist dies nicht das Richtige für Sie. Es ist weder schnell noch einfach. Aber es ist möglich, wenn man sich die Mühe macht.
Wenn Sie damit einverstanden sind, dann fangen wir an.
Phase eins: Planen Sie Ihr Plugin im Detail 📝
Die allererste Frage, die Sie sich stellen und beantworten müssen, ist , welche Art von Plugin möchte ich erstellen und was soll es tun?
Sie könnten versucht sein, dies zu überstürzen, damit Sie mit dem eigentlichen Erstellen und Codieren beginnen können, aber ich bitte Sie dringend, sich Zeit dafür zu nehmen. Was Sie hier tun, legt den Grundstein für Ihre Eingabeaufforderungen und ermöglicht es Ihnen, auf organisierte Weise aufzubauen, anstatt Dinge spontan hinzuzufügen. Um diese Phase effektiv zu meistern, sollten Sie Folgendes berücksichtigen:
- Welche Funktionen soll Ihr Plugin haben?
- Wie soll die wp-admin-Seite aussehen?
- Erstellen Sie Wireframes oder Flussdiagramme, um den Workflow des Plugins zu visualisieren.
- Planen Sie es und beschreiben Sie es bis ins kleinste Detail.
- Entscheiden Sie, ob Sie es für den privaten Gebrauch nutzen oder es im WordPress-Repository für den öffentlichen Zugriff verfügbar machen möchten.
Funktionen
Der wp-admin
Überlegen Sie als Nächstes, wie Ihr Plugin im WordPress-Administrationsbereich angezeigt und funktionieren soll. Dazu gehört:
- Einstellungsseiten : Welche Optionen möchten Sie bereitstellen? Wie werden Sie sie organisieren?
- Menüs : Wo erscheint Ihr Plugin im Admin-Menü? Wird es Untermenüs geben?
- Metaboxen : Wenn Ihr Plugin mit Beiträgen oder Seiten interagiert, benötigt es benutzerdefinierte Metaboxen?
- Tabellen : Wenn Sie Daten speichern, wie werden diese dem Administrator zur Überprüfung angezeigt?
In meinem Fall habe ich mich für eine Haupteinstellungsseite mit Registerkarten für jeden meiner Shortcodes, eine separate Seite zur Dokumentation und auch eine Seite mit einem Kontaktformular für den Fall entschieden, dass Benutzer mit mir in Kontakt treten möchten. Folgendes habe ich mir ausgedacht:
Leider war es für mich – aber nicht für Sie, weil Sie dies lesen –, dass ich mich in der Planungsphase so auf die Frontend-Funktionalität meines Plugins konzentriert habe, dass ich die wp-admin-Seite völlig vernachlässigt habe.
Dadurch dauerte es länger, als wenn ich es im Voraus geplant hätte, da ich den Code immer wieder überarbeiten musste, wenn mir klar wurde, dass das, was ich hatte, unvollständig war oder eine schlechte UX hatte. Wenn ich es im Voraus geplant hätte, oder noch besser, wenn ich Wireframes verwendet hätte, wäre diese Phase viel reibungsloser verlaufen – was ein perfekter Übergang zum nächsten Punkt ist.
Wireframes oder Flussdiagramme
Kombinieren Sie alles und beschreiben Sie es ausführlich
Private Nutzung vs. öffentlicher Zugriff über das WordPress-Repository
Es gibt noch eine weitere Entscheidung, die Sie treffen sollten, bevor Sie mit Phase zwei fortfahren. Diese Entscheidung hängt davon ab, für wen Sie dieses Plugin erstellen möchten.
Möchten Sie es nur für sich selbst (oder einen Kunden) machen? Oder möchten Sie es zur Genehmigung an das WordPress-Repository senden, damit es für die breite Öffentlichkeit verfügbar ist?
Technisch gesehen müssen Sie diese Entscheidung noch nicht unbedingt treffen. Im Nachhinein hätte ich mir jedoch gewünscht, dass ich es früher im Prozess getan hätte. Deshalb empfehle ich Ihnen, es jetzt zu tun.
Der Grund dafür ist, dass mein Ziel von Anfang an darin bestand, mein Plugin an das Repository zu senden, aber ich habe mein Plugin zunächst erstellt, ohne die WordPress-Codierungsstandards zu befolgen. Ich habe mich ausschließlich auf die Funktionalität konzentriert und darauf, es so weit zu bringen, dass es ohne Fehler funktioniert.
Infolgedessen musste ich viele zusätzliche Code-Optimierungen vornehmen, um meinen Code an die Standards anzupassen. Das hat natürlich viel Zeit gekostet und hätte vermieden werden können.
Selbst wenn Sie vorhaben, ein Plugin nur für den privaten Gebrauch zu erstellen, würde ich dennoch empfehlen, sich an die Codierungsstandards zu halten. Dadurch wird die Wahrscheinlichkeit einer Fehlfunktion Ihres Plugins bei späteren WordPress-Versionen verringert. Was den Prozess betrifft, besteht der Hauptunterschied darin, dass Sie nicht so detailliert auf nichtfunktionale Aspekte der Standards eingehen müssen.
Zum Beispiel, wenn Sie Inline-Kommentare wie // Use global default. Sie müssen am Ende einen Punkt einfügen. Der Punkt hat keinen funktionalen Zweck, aber wenn er fehlt, wird er gemäß den Standards als „Fehler“ gekennzeichnet. Bei einem privaten Build können Sie diese Art von „Fehler“ ignorieren.
Phase zwei: Geben Sie ChatGPT eine detaillierte Aufforderung, mit der Entwicklung zu beginnen 🗣️
Die Hauptidee besteht darin, GPT einen Überblick über Ihr Plugin mit klaren Anweisungen zu geben. Als allgemeine Empfehlung würde ich Ihnen raten, nicht zu versuchen, das ganze Haus auf einmal zu bauen. Es ist besser, einen Stein-für-Stein-Ansatz zu wählen.
Nehmen wir an, Sie möchten mein Plugin als Beispiel erstellen.
Obwohl es acht Effekte hat, würde ich empfehlen, GPT mitzuteilen, dass Sie mit einem Effekt beginnen möchten. Fast so, als würden Sie ein Ein-Effekt- Plugin anstelle eines Acht-Effekt- Plugins erstellen. Überprüfen Sie anschließend, ob der Effekt funktioniert – einschließlich des Backend-Einstellungsbereichs. Beheben Sie alle Fehler und fügen Sie den nächsten Effekt hinzu, sobald alles gut aussieht. Folgen Sie dann einfach diesem Vorgang, Schritt für Schritt.
Der Grund für diese Vorgehensweise besteht darin, dass es einfacher ist, etwaige Fehler zu beheben, die mit zunehmender Komplexität Ihres Codes in Ihren Code eingeführt werden könnten. Wenn GPT Ihren gesamten Code auf einmal generiert und viele Dinge nicht funktionieren, wird es viel schwieriger, das Problem zu beheben.
Sie möchten GPT dennoch einen umfassenden Überblick über Ihre Gesamtvision für das Plugin geben, beenden die Aufforderung jedoch, indem Sie sich zunächst auf eine bestimmte Sache konzentrieren.
Um Ihnen etwas Zeit zu sparen, habe ich eine Beispielvorlage erstellt, die Sie ChatGPT als Einstieg geben können.
Für die Abschnitte in Klammern [X] ist Ihre Eingabe erforderlich. Abhängig von der Art des Plugins, das Sie erstellen möchten, müssen Sie es möglicherweise weiter bearbeiten oder auch nicht.
Wenn Sie in der Eingabeaufforderung nicht alles verstanden haben, machen Sie sich keine Sorgen, ich habe es auch nicht verstanden. Sie werden lernen, während Sie den Prozess durchlaufen.
Meine Aufforderung 🤖
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.Nachdem Sie ChatGPT Ihre Eingabeaufforderung übermittelt haben, werden Sie durch die restlichen Schritte geführt, die ich unten beschrieben habe. Es ist erwähnenswert, dass die Art und Weise, wie ich alles aufliste, je nach der Stimmung von ChatGPT oder Ihrem eigenen Wunsch, dem von mir dargelegten Prozess zu folgen, möglicherweise nicht so linear ist, wie es dargestellt wird.
Um Ihnen eine Vorstellung davon zu geben, was ich meine, habe ich die Eingabeaufforderung selbst drei Mal getestet. Abgesehen davon, dass es mir bei der Einrichtung von Local by Flywheel und der Generierung der anfänglichen PHP-Datei geholfen hat, entschied es sich, die anderen Schritte jedes Mal auf eine andere Art und Weise durchzuführen.
Erster Versuch
Bei meinem ersten Versuch blieb ChatGPT über die Generierung der PHP-Datei hinaus und präsentierte mir zwei Optionen, wie ich als nächstes vorgehen möchte. Insbesondere wurden die Anweisungen zum Einreihen von Skripten mit bedingtem Laden befolgt und auch erwähnt.
Zweiter Versuch
Der zweite Versuch ergab die einfachste PHP-Datei, aber insgesamt die gründlichste Antwort in Bezug auf die Abarbeitung der Schritte. Es ging direkt darum, Terminal zu verwenden, um Projektverzeichnisse einzurichten und Sublime zu initialisieren. Es ging sogar so weit, mir beizubringen, wie man das Git-Repository einrichtet.
Dritter Versuch
Der dritte Versuch verlief etwas ähnlich wie der erste Versuch. Allerdings hat ChatGPT im Gegensatz zum ersten Versuch kein bedingtes Laden für die Skripte eingerichtet und mich auch nicht danach gefragt. Es hat sie einfach standardmäßig als global generiert.
Das Essen zum Mitnehmen
Der Grund, warum ich diese drei Versuche kurz mit Ihnen geteilt habe, war nicht nur, um zu bekräftigen, was ich zuvor gesagt habe, dass der Workflow nicht unbedingt standardisiert sein wird, sondern auch, um darauf hinzuweisen, dass die Eingabeaufforderung für Sie genauso wichtig ist wie für GPT .
Ich meine damit, dass es an Ihnen liegt, darauf zu achten, was ChatGPT tut – und was nicht – und es wieder auf Kurs zu bringen, wenn es abstürzt. Vergessen Sie also nicht, auf dieser Reise noch einmal auf die Eingabeaufforderung und die Hinweise zurückzugreifen, die ich etwas später im Debugging-Abschnitt erläutern werde. Erinnern Sie ChatGPT daran und orientieren Sie es neu, so oft wie nötig das zu tun, was Sie möchten.
Lade mein Plugin herunter und teste es 📥
Wenn Sie die „Arbeitsversion“ meines Plugins ausprobieren möchten, finden Sie unten die ZIP-Datei. Ich werde dies in naher Zukunft aktualisieren, um die WP-Repository-Version aufzunehmen, aber damit können Sie es vorerst verwenden.
Phase drei: Tools, Skripte, Verzeichnisse und Git 👩💻
In dieser Phase legen Sie den Grundstein für die Erstellung Ihres Plugins. Hier wird auch die Lernkurve schnell zunehmen, insbesondere wenn Sie mit der Installation von Skripten und der Verwendung von Terminal (oder der Eingabeaufforderung, wenn Sie einen PC verwenden) beginnen. Hier ist die Aufschlüsselung:
- Entscheiden Sie, welches lokale Umgebungstool Sie verwenden möchten (z. B. Local by Flywheel, Docker).
- Richten Sie Ihre Projektverzeichnisse ein.
- Installieren Sie Ihre Skripte (z. B. npm, Composer).
- Richten Sie ein Git-Repository („Repo“) ein und laden Sie Ihre Plugin-Dateien dorthin hoch
Bauen Sie eine lokale Umgebung auf
Projektverzeichnisse einrichten
Skripte installieren
Erstellen Sie ein Git-Repository („Repo“) und übertragen Sie Ihre Dateien
Nachdem alle vorherigen Schritte erledigt sind, ist es an der Zeit, ein Git-Repository zu erstellen und Ihre ersten Dateien darin zu übertragen. Dieser Schritt erstellt eine Momentaufnahme des Ausgangspunkts Ihres Projekts.
Ich persönlich habe GitHub verwendet, weil wir das hier bei Themeisle verwenden, also hatte ich dort bereits ein Konto, aber es gibt auch andere Plattformen (z. B. GitLab, Bitbucket). Wenn Sie letztendlich eine andere Plattform als GitHub verwenden, vergessen Sie nicht, die Eingabeaufforderungsvorlage in Phase drei anzupassen .
Der Kürze halber werde ich Ihnen nicht erklären, wie das geht. Sobald Sie diesen Schritt erreicht haben, kann ChatGPT Sie Schritt für Schritt durch den Prozess führen, einschließlich der Befehle, die Sie in Ihr Terminal/Ihre Eingabeaufforderung eingeben müssen.
Beachten Sie beim Übertragen Ihrer ersten Dateien die folgenden Punkte:
- Überprüfen Sie, was Sie übertragen: Stellen Sie sicher, dass Sie nur die erforderlichen Dateien hinzufügen. Verwenden Sie Ihre
.gitignore-Datei, um alle temporären oder generierten Dateien auszuschließen. - Schreiben Sie eine klare Commit-Nachricht: Etwas wie „Erstes Commit: Grundlegende Projektstruktur und Konfigurationen“ funktioniert gut.
- Machen Sie sich keine Sorgen um Perfektion: Dies ist nur Ihr Ausgangspunkt. Während Sie Ihr Plugin entwickeln, werden Sie noch viele weitere Verpflichtungen eingehen.
Auch hier wird Ihnen ChatGPT höchstwahrscheinlich Hinweise zu den spezifischen Befehlen geben, die Sie für diesen ersten Commit verwenden sollten. Wenn nicht, bitten Sie es einfach darum. Stellen Sie sicher, dass Sie aufschreiben, dass Sie die genauen Schritte basierend auf Ihrem Setup und Ihrer Git-Plattform benötigen.
Wenn Sie diesen Schritt abschließen, starten Sie Ihr Plugin-Entwicklungsprojekt offiziell mit einer soliden Grundlage für die Versionskontrolle. Von nun an können Sie jede von Ihnen vorgenommene Änderung verfolgen, sicher mit neuen Funktionen experimentieren und bei Bedarf mit anderen zusammenarbeiten.
Phase vier: Plugin-Spielzeit 🖱️
Von allen Phasen würde ich sagen, dass diese und die nächste wahrscheinlich am meisten Spaß machen, weil man dann wirklich sieht, wie alles zusammenpasst. Um zu beginnen, müssen Sie sich bei Ihrer lokalen WordPress-Installation anmelden. Wenn Sie Local by Flywheel verwenden, ist das ganz einfach: Klicken Sie einfach oben rechts auf die Schaltfläche „WP Admin“ :
Wenn Sie Docker oder ein anderes lokales Entwicklungstool verwenden und nicht sicher sind, wie Sie auf Ihre Website gelangen, fragen Sie einfach ChatGPT.
Sobald Sie angemeldet sind, aktivieren Sie Ihr Plugin, indem Sie auf Plugins → Installierte Plugins gehen. Suchen Sie dann Ihr Plugin in der Liste und klicken Sie auf Aktivieren :
⚠️ Wichtig : Wenn Sie Ihr Plugin hier nicht sehen, geraten Sie nicht in Panik. Es handelt sich höchstwahrscheinlich um eine Nichtübereinstimmung des Verzeichnisses, aber Sie können trotzdem auf ChatGPT tippen, um das Problem herauszufinden. Wenn Sie nach wiederholten Versuchen immer noch nicht weiterkommen und ChatGPT Ihnen nicht empfohlen hat, den WordPress-Debug-Modus auszuprobieren, bitten Sie darum, Ihnen die Codeausschnitte dafür zu geben. Sie werden etwa so aussehen:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );Nachdem Sie Ihr Plugin aktiviert haben, beginnen Sie mit der Verwendung und machen Sie sich Notizen:
- Funktioniert alles wie es soll? Höchst unwahrscheinlich .
- Was funktioniert nicht? In welcher Weise funktioniert es nicht?
- Welche Kleinigkeiten haben Sie in Ihrer ersten Beschreibung der Eingabeaufforderung völlig übersehen und funktionieren nicht richtig?
Sobald Sie Ihre Notizen gemacht haben, können Sie mit der nächsten Phase fortfahren: Debuggen und Flusen.
Phase fünf: Debuggen und Flusen 💻
Plugin-Komplexität und Fehler stehen in einem Zusammenhang: Je komplexer Ihr Plugin wird, desto größer ist das Fehlerpotenzial . Aber auch einfachere Plugins erfordern Linting und Debugging.
Flusen
Wenn Sie in diesem Artikel zum ersten Mal das Wort „Linting“ sehen und nicht sicher sind, was es bedeutet, wird ganz einfach der Code Ihres Plugins anhand einer Reihe von Regeln und Standards für diese Art von Code überprüft. Anschließend erfahren Sie, ob Fehler oder Inkonsistenzen festgestellt wurden, in welchen Zeilen sie sich befinden und wie Sie sie beheben können.
Flusen ist ziemlich einfach. Stellen Sie einfach sicher, dass Sie die richtigen Linting-Tools für die Code-/Dateitypen verwenden, an denen Sie arbeiten:
- PHP_CodeSniffer mit WordPress-Coding-Standards für PHP-Linting.
- ESLint für JavaScript-Linting.
- StyleLint für CSS-Linting.
Für JavaScript möchten Sie möglicherweise auch Folgendes hinzufügen:
- ESLint Unicorn: Mehr als 100 leistungsstarke ESLint-Regeln.
- ESLint-Versprechen: Nützlich für die Verwaltung asynchroner Aufgaben wie API-Aufrufe, Datenbankabfragen, Dateiverarbeitung oder andere Vorgänge, deren Abschluss zeitaufwändig ist.
Debuggen
Im Gegensatz zum Linting ähnelt das Debuggen weitgehend dem, was Sie in der vorherigen Phase getan haben. Das heißt, Sie verwenden das Plugin selbst, identifizieren Probleme, die behoben werden müssen, und beheben sie dann entweder selbst oder bitten ChatGPT um Unterstützung.
Ich persönlich fand das Debuggen komplizierter als das Flusen. Ein wichtiger Grund dafür ist, dass beim Linting die Ausgabe des Linting-Prozesses genau sagt, um welche Probleme es sich handelt und wo in Ihrem Code sie sich befinden. Beim Debuggen können Sie sich diesen Luxus nicht leisten. Es liegt an Ihnen und ChatGPT, es herauszufinden.
Allerdings fällt es ChatGPT schwer, sich auf problematische Codezeilen zu konzentrieren, was bedeutet, dass Sie sich um das „Fertig stellen“ kümmern müssen, bevor Sie es „abfeuern“ lassen.
Um Ihnen die Arbeit zu erleichtern, habe ich eine Liste mit allen Ratschlägen zusammengestellt, die ich mir vor Beginn der Debugging-Phase gegeben hätte.
Seien Sie nicht vage und überlassen Sie es nicht ChatGPT
Wenn Sie ChatGPT keine sehr spezifischen Anweisungen geben, wird es Ihnen endlose Codezeilen ausspucken, und oft unterscheidet sich der Code nicht einmal von dem, was er Ihnen bereits gegeben hat. Sie möchten, dass Sie die Richtigkeit noch einmal überprüfen, aber das verschwendet nur Zeit. Es gibt nichts Frustrierenderes als Folgendes:
Was Sie stattdessen tun sollten, ist, ChatGPT sehr spezifische Anweisungen zu geben, nicht nur Code zu generieren, sondern gezielt zu isolieren, welche Codezeilen seiner Meinung nach das Problem verursachen, und sie Ihnen anzuzeigen. Erklären Sie ihm, wie es diese Zeilen ändern will und warum es glaubt, dass diese Änderungen das Problem lösen werden. Bitten Sie es abschließend, Ihnen mitzuteilen, wie das erwartete Ergebnis nach der Implementierung dieser Änderungen aussehen soll.
Diese Anweisungen helfen dabei, sich auf das Problem zu konzentrieren und Spillover-Bugs zu minimieren, bei denen zwar ein Problem behoben wird, dabei aber neue Probleme entstehen.
Reguläres CSS im Vergleich zu BEM-CSS
Im Zusammenhang mit oben, aber speziell für CSS, sollten Sie bedenken, dass ChatGPT für alle CSS-Snippets Standard-CSS generiert, oder was ich standardmäßig „Klassenzimmer-CSS“ nenne.
Dies ist das grundlegende CSS, das Sie lernen würden, wenn Sie einen Anfängerkurs zu diesem Thema belegen. Es ist leicht zu verstehen und an sich ist technisch nichts auszusetzen, aber bei der Entwicklung von WordPress-Plugins kann es zu Konflikten mit anderen Plugins oder Themes kommen.
Stattdessen ist es besser, GPT anzuweisen, die BEM-Methode (Block Element Modifier) zu verwenden. BEM trägt dazu bei, das Risiko von CSS-Konflikten zu verringern, indem es eine klare und strukturierte Namenskonvention bereitstellt. Es stellt sicher, dass Ihre Stile vorhersehbarer und einfacher zu verwalten sind, da jeder Block, jedes Element und jeder Modifikator über einen eindeutigen, beschreibenden Klassennamen verfügt, der das Risiko unbeabsichtigter Auswirkungen auf den Stil minimiert. Darüber hinaus verbessert BEM die Wartbarkeit, indem es das Auffinden und Aktualisieren bestimmter Stile erleichtert, ohne andere zu beeinträchtigen.
Ich habe dies bereits in der Beispielaufforderung in Phase zwei erwähnt, aber ich hebe es hier hervor, damit Sie immer daran denken, diese Anweisungen für Ihre CSS-Snippets an ChatGPT weiterzugeben.
Bedingtes Laden versus globales Einreihen in die Warteschlange
Ein weiteres Standardverhalten von ChatGPTs hat mit dem Einreihen von Skripten in die Warteschlange zu tun. Machen Sie sich keine Sorgen, wenn Sie noch nicht wissen, was dieser Satz bedeutet. Wichtig ist, dass Sie es in Ihrem Code erkennen, wenn Sie es sehen. Es wird ungefähr so aussehen:
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');Im obigen Beispiel stellt der Code global ein Skript für alle Admin-Seiten in die Warteschlange, was oft unnötig ist und zu Leistungsproblemen führen kann. Leider ist es das, was Ihnen ChatGPT bietet, es sei denn, Sie melden sich zu Wort und weisen es nicht an. Um es klarzustellen: In einigen Fällen ist dies tatsächlich völlig angemessen, in vielen Fällen jedoch nicht.
Sobald Sie bemerken, dass ChatGPT Code mit dem Wort „enqueue“ generiert, stellen Sie daher sicher, dass Sie darüber sprechen. Fragen Sie ChatGPT, ob es sinnvoll ist, Ihre Skripte global in die Warteschlange zu stellen oder nur auf den spezifischen Seiten, auf denen die Skripte benötigt werden – was als „bedingtes Laden“ bezeichnet wird.
Erinnern und erinnern Sie häufig
ChatGPT neigt dazu, vergesslich zu sein, und das gilt umso mehr, wenn Sie es zum Codieren verwenden. Auch wenn Sie ihm also spezifische Anweisungen geben, ist die Wahrscheinlichkeit, dass es diese Anweisungen während der Dauer Ihres Projekts befolgt, gleich Null .
Manchmal ignoriert es sogar völlig, was Sie von ihm verlangen. Wenn das passiert, seien Sie einfach strenger und lassen Sie es wissen, dass es nicht das tut, was Sie wollen:
Darüber hinaus kehrt es innerhalb weniger Interaktionen schnell zu seinem Standardverhalten zurück und versucht, Sie in riesigen Codemengen zu ertränken, die nichts mit dem Codeabschnitt zu tun haben, den Sie debuggen möchten.
Wenn dies geschieht, drücken Sie einfach die Stopp-Taste in der GPT-Ausgabe und erinnern Sie das Gerät daran, Ihren Anweisungen zu folgen. Es hilft auch, sie zu kopieren und in das Chatfenster einzufügen, wenn Sie die Erinnerung geben.
Apropos Generieren langer Codezeilen …
Vermeiden Sie, dass ChatGPT ganze Dateien für Sie neu generiert
Wenn Sie nicht daran gewöhnt sind, mit Code zu arbeiten, und sich dadurch eingeschüchtert fühlen, könnte es zunächst verlockend erscheinen, ChatGPT zu bitten, nach jeder Code-Optimierung die gesamte Datei für Sie neu zu generieren.
Alles, was Sie tun müssen, ist „Kopieren und Einfügen“, oder?
Obwohl es verlockend erscheinen mag, ist es eigentlich eine schlechte Idee . Auf lange Sicht wird es Ihnen mehr Ärger bereiten. Damit verschwenden Sie nicht nur viel Zeit – insbesondere, wenn Sie Ihre PHP-Datei debuggen, die ziemlich lang werden kann –, sondern ChatGPT könnte dabei auch neue Fehler in Ihren vorhandenen Code einführen. Dadurch wird das Problem, an dem Sie arbeiten, behoben, aber dann wird versehentlich ein anderer Teil der Datei angepasst und etwas kaputt gemacht.
Es ist besser, die spezifischen Teile des Codes zu isolieren, die das Problem verursachen, und nur an diesen zu arbeiten.
Nehmen Sie einen Fehler nach dem anderen
In diesem Sinne gilt: Auch wenn Sie mehrere Fehler haben – es sei denn, diese sind sehr geringfügig – teilen Sie ChatGPT jeweils nur einen davon mit. Beheben Sie jeden Fehler, bevor Sie mit dem nächsten fortfahren.
Achten Sie genau auf die obersten und untersten Zeilen von Codefragmenten
Wenn ChatGPT Ihnen Codeausschnitte liefert, werden diese manchmal – aber nicht immer – gekapselt, indem Ihnen die oberste Zeile der gesamten Datei, mit der Sie arbeiten, und auch die unterste Zeile angezeigt wird. Daher müssen Sie darauf achten, nicht immer einfach das gesamte Snippet zu kopieren und einzufügen, da Ihr Code sonst beschädigt wird.
⚠️ Achten Sie genau auf die oberste Zeile:
Wenn es für den spezifischen Codeausschnitt, den Sie debuggen möchten, nicht relevant ist, ignorieren Sie es.
Das Gleiche gilt für das Endergebnis, obwohl es schwieriger sein kann, dies zu erkennen. Es kann manchmal so einfach sein wie }); Dies führt dazu, dass Ihr Code kaputt geht, weil er ein übergeordnetes Snippet schließt, das noch nicht geschlossen werden soll.
Nach einer Weile werden Sie es besser verstehen, aber wenn Sie mit der Plugin-Entwicklung beginnen und bemerken, dass nach dem Hinzufügen eines Snippets viele Dinge kaputt gehen, versuchen Sie, die allerletzte Zeile zu löschen, um zu sehen, ob es „magisch“ funktioniert „repariert alles.
Die Konsole ist dein bester Freund
Wenn ChatGPT erfolglos versucht, dasselbe Problem zu beheben, und Sie sich im Kreis drehen, bitten Sie ChatGPT, den Codeabschnitten, von denen es annimmt, dass sie das Problem verursachen, console.log-Zeilen hinzuzufügen. Öffnen Sie dann die Konsole, während Sie den Fehler neu erstellen. Es wird erklären, was passiert ist. Anschließend können Sie einen Screenshot dieser Erklärung erstellen und ihn an ChatGPT weiterleiten, damit dieser herausfinden kann, wie das Problem behoben werden kann.
Um auf die Konsole in Google Chrome zuzugreifen, klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Inspizieren“ aus:
Wenn die Konsole keine Antworten liefert, überprüfen Sie Ihre Datenbank
Die Konsole ist ausgezeichnet und wird Ihnen oft die Antworten geben, die Sie brauchen. In manchen Fällen wird das Problem jedoch nur bestätigt, ohne dass Ihnen wirklich Hinweise gegeben werden, wie Sie das Problem beheben können.
Als ich beispielsweise versuchte, meinem Plugin einen Tippeffekt hinzuzufügen, war die Standardvorschaugeschwindigkeit des Effekts im wp-admin auf 23 Millisekunden eingestellt. Ich habe wahnsinnig viel Zeit damit verbracht, meine PHP- und JavaScript-Dateien zu überarbeiten, um das Problem zu beheben, aber ohne Erfolg.
Die Konsole bestätigte, dass es mit 23 geladen wurde, aber darüber hinaus lieferte es mir keine weiteren wertvollen Informationen:
Schließlich überprüfte ich die Datenbank und stellte fest, dass der fehlerhafte Wert von dort kam:
Ich habe die 23 auf 60 umgestellt, was ich wollte, und das Problem wurde dadurch gelöst.
Wenn Sie Local by Flywheel verwenden, können Sie einfach über die Benutzeroberfläche auf Ihre Datenbank zugreifen, indem Sie auf die Registerkarte „Datenbank“ klicken:
Sobald Sie Zugriff erhalten haben, können Sie mit der Suche an derselben Stelle beginnen, an der Sie mich im obigen Screenshot gesehen haben: wp_options. Meistens finden Sie dort Ihre Plugin-Einstellungen.
⚠️ Es ist jedoch auch wichtig darauf hinzuweisen, dass das größere zugrunde liegende Problem darin bestand, dass in meinem Code tatsächlich Aktivierungsanweisungen fehlten. Wenn Ihr Plugin zum ersten Mal aktiviert wird, sollte es prüfen, ob bestimmte Einstellungen in der Datenbank vorhanden sind. Ist dies nicht der Fall, sollte Ihr Plugin sie mit den beabsichtigten Standardwerten hinzufügen. Dadurch wird sichergestellt, dass jede Neuinstallation Ihres Plugins mit den richtigen Einstellungen startet. Ich habe das auf die harte Tour gelernt, damit Sie es nicht tun müssen.
Ein neuer Thread kann Ihnen Durchbrüche verschaffen
Wenn Ihr Code wächst und Ihr Thread mit ChatGPT immer länger wird, besteht die Gefahr, dass er Fehler macht oder Dinge vergisst. Ab einem bestimmten Punkt ist es eine gute Idee, einen neuen Thread zu starten. Laden Sie Ihre Haupt-Plugin-Dateien in den neuen Thread hoch und erklären Sie ChatGPT, was Sie gerade tun und wo Sie aufgehört haben.
Hier ist eine Beispielaufforderung, die Sie verwenden können:
Ich habe mit Ihnen in einem anderen Thread daran gearbeitet, ein WordPress-Plugin zu debuggen, aber ich glaube, der Thread wurde zu lang und Sie begannen, verwirrt zu werden. Fangen wir neu an.
Schauen Sie sich die Plugin-Dateien hier an und versuchen wir, den Fehler zu beheben [Ihren Fehler beschreiben] .
Und das ist SEHR WICHTIG: Wenn Sie zur Fehlerbehebung neue Versionen von Code-Snippets generieren, generieren Sie bitte nicht nur das Snippet, sondern geben Sie auch eine Erklärung dazu an, welche Zeilen Sie gegenüber den bereits vorhandenen geändert haben. Erklären Sie außerdem die Gründe für die Änderung dieser Zeilen und was wir von den von Ihnen vorgenommenen Änderungen erwarten können.
[Vergessen Sie beim Generieren von CSS nicht, ChatGPT daran zu erinnern, die BEM-Methodik (Block Element Modifier) zu befolgen.]
Haben Sie keine Angst, Ihr Gehirn zu benutzen
Je komplexer Ihr Plugin ist, desto größer ist die Gefahr, dass GPT Ihren Code durcheinander bringt. Obwohl es Ihnen beim Debuggen hilft, werden Sie manchmal feststellen, dass es besser ist, die Lösung selbst zu finden. Um ehrlich zu sein, ist mir das ziemlich häufig passiert, insbesondere in den späteren Phasen meines Builds, als meine Haupt-PHP-Datei auf über 500 Zeilen angewachsen war (in späteren Versionen waren es mehr als 1.000).
Abhängig davon, wie gut Sie mit dem Lesen von Code vertraut sind und wie gut Sie sich damit auskennen, kann dies eine abschreckende Wirkung haben. Wenn Sie sich jedoch gut mit der Mustererkennung und dem Erkennen von Inkonsistenzen auskennen, kommen Sie zurecht.
Ich bin sicherlich kein erfahrener Programmierer, obwohl ich weiß, was verschiedene Programmiersprachen tun, und mit Code vertraut bin, was mir geholfen hat.
Aber selbst wenn Sie ein absoluter Neuling sind, können Sie sich die Codezeilen ansehen, von denen GPT glaubt, dass sie das Problem verursachen könnten. Suchen Sie dann in Ihrem Code nach einem identischen Element, das ordnungsgemäß funktioniert. Vergleichen Sie seinen Code mit dem Code des defekten Elements und versuchen Sie herauszufinden, was daran anders ist. Oft wird das Problem dadurch gelöst:
Erstellen Sie Backups Ihrer Plugin-Dateien (optional, wenn Sie Git verwenden).
Während die Verwendung von Git eine leistungsstarke Möglichkeit bietet, Änderungen an Ihrem Code zu verwalten und rückgängig zu machen, ist es nie eine schlechte Idee, auch manuelle Backups zu erstellen. Immer wenn Sie mit Ihrem Code einen Meilenstein erreichen, empfehle ich, eine Kopie Ihrer Hauptcodedateien in einem anderen Ordner zu speichern:
Dies kann als zusätzliches Sicherheitsnetz dienen und es Ihnen ermöglichen, problemlos zu einer früheren, besseren Version zurückzukehren, wenn Sie beim Weiterbauen auf schwerwiegende Fehler stoßen.
Geben Sie nicht so schnell auf, sondern kennen Sie Ihre Grenzen
Möglicherweise gibt es einige Funktionen oder Optimierungen, die Sie einfach nicht implementieren können, egal wie sehr Sie es versuchen. Seien Sie bereit, Ihre Erwartungen anzupassen und sie zu umgehen . Das bedeutet nicht, dass Sie aufgeben müssen, wenn Sie gegen eine Wand stoßen. Es bedeutet jedoch, dass, wenn Sie 100 Versuche unternommen und Stunden (oder Tage) damit verbracht haben, etwas zu erreichen, ohne Erfolg, dies wahrscheinlich entweder nicht möglich ist oder außerhalb der Möglichkeiten von Ihnen und ChatGPT liegt.
Wenn Sie sich schließlich fragen, ob Sie zuerst debuggen oder linten sollten, gibt es meines Wissens keine eindeutige Antwort. Ich habe das Debugging durchgeführt, bevor ich Linting durchgeführt habe, aber Sie können beim Durchlaufen des Prozesses entweder standardmäßig die Einstellungen von ChatGPT verwenden oder ihm mitteilen, welche Option Sie zuerst ausführen möchten.
Phase sechs (optional): Testen 🔬
Wenn Sie ein relativ einfaches Plugin erstellen und aufgrund Ihrer eigenen manuellen Tests von seiner Funktionalität überzeugt sind, müssen Sie diesen Schritt nicht unbedingt unternehmen. Ich sage das, weil es immer noch viel Arbeit erfordert, diese Tests zu programmieren, und genauso, wie Sie mit ChatGPT kein funktionierendes Plugin von Anfang an bekommen, ist es auch unwahrscheinlich, dass Sie einen Funktionstest ohne Fehler erhalten.
Vereinfacht gesagt gibt es hier einen Kompromiss zwischen Zeitinvestition und praktischem Nutzen .
Meiner eigenen Erfahrung nach konnte ich erfolgreich einen Test erstellen, der überprüfte, ob meine Plugins ihre Hauptfunktionen ausführen konnten, wenn ein Benutzer mit ihnen interagierte – aber das Debuggen hat mich einen ganzen Tag gekostet!
Aus praktischer Sicht hatte ich die Funktionalitäten meines Plugins bereits manuell überprüft, aber es war schön zu sehen, dass der Test bestätigte, dass alles funktionierte.
Wenn Sie versuchen, ein komplexeres Plugin als ich zu erstellen, oder wenn sich die Funktionen Ihres Plugins auf das Back-End konzentrieren (wo Sie nicht manuell überprüfen können, ob sie funktionieren oder nicht), dann nehmen Sie sich die Zeit, dies zu tun Die ordnungsgemäße Durchführung von Tests ist die manuelle Arbeit wert.
Arten von Tests
Zu berücksichtigende Werkzeuge
Phase sieben (optional): Senden Sie Ihr Plugin an das WordPress-Repository 🥳
Wenn Sie es bis hierher geschafft haben, haben Sie den sprichwörtlichen Plugin-Berg erfolgreich erklommen. Sie müssen nur noch Ihre Flagge platzieren, damit sie sich mit den anderen 59.650 Plugins im WordPress-Repository verbindet.
Dafür gibt es einen eigenen Prozess, der von einer Checkliste auf der Seite „Plugin hinzufügen“ begleitet wird:
- Lesen Sie die häufig gestellten Fragen.
- Befolgen Sie alle Richtlinien für Plugin-Entwickler.
- Stellen Sie sicher, dass Sie die Berechtigung haben, Ihr Plugin auf WordPress.org hochzuladen, damit andere es verwenden und teilen können.
- Ihr Plugin, einschließlich aller seiner Bibliotheken, und alle anderen enthaltenen Assets sind unter der GPL lizenziert oder GPL-kompatibel.
- Sie führen eine letzte Testrunde mit dem Plugin-Check-Plugin durch und beheben alle angezeigten Probleme (mit Ausnahme der Ihrer Meinung nach falsch positiven Ergebnisse).
Plugin-Check (PCP)Aktuelle Version: 1.1.0
Letzte Aktualisierung: 28. August 2024
Plugin-Check.1.1.0.zip
Sie könnten denken, dass das Plugin, das Sie verwenden sollen, nach all dem Debuggen, Flusen und Testen nichts erkennt. Als Plugin-Entwickler zum ersten Mal müssen Sie jedoch wahrscheinlich noch ein paar offene Probleme lösen – insbesondere, wenn Sie die Testdateien nicht aus Ihrem Build entfernen, bevor Sie die Prüfung durchführen.
Um fortzufahren, gehen Sie zu Extras → Plugin-Prüfung :
Dann kreuzen Sie alle fünf Kategorien an und führen Sie die Prüfung durch:
Anschließend können Sie die offenen Probleme an ChatGPT weiterleiten und lösen. Wenn Sie fertig sind, führen Sie die Prüfung erneut durch, um ein sauberes Ergebnis zu gewährleisten. Machen Sie es so oft wie nötig. Sobald Sie eine völlig saubere Prüfung (ohne Fehlalarme) erhalten haben, können Sie Ihr Plugin an das WordPress-Entwicklungsteam senden. Warten Sie dann geduldig, bis sie es überprüfen.
Letzte Gedanken 🧠
Obwohl es ein unterhaltsamer und lohnender Prozess ist, ein Plugin mit ChatGPT zu erstellen, ist es keineswegs ein schneller Prozess. Sie müssen eine Menge Eigenkapital investieren, um ein anständig funktionierendes Endprodukt zu erhalten. Am Ende werden Sie jedoch all die neuen Fähigkeiten zu schätzen wissen, die Ihnen dieses Projekt vermittelt.
Hier sind ein paar Dinge, die ich gelernt habe (und Sie vielleicht auch):
- Ich habe gelernt, wie ich mich mit Terminal-Befehlen auf meiner Festplatte zurechtfinde, und habe auch andere Befehle kennengelernt, die mit dem Prozess der Plugin-Erstellung zusammenhängen.
- Mittlerweile bin ich sowohl mit Docker als auch mit Local by Flywheel ziemlich vertraut, beide habe ich vor diesem Experiment noch nie verwendet.
- Ich bin auch mit vielen Entwicklertools und Skripten vertraut, von denen ich vorher nicht einmal wusste, dass sie existieren.
- Ich habe in der Vergangenheit einige Kurse bei Free Code Camp und Codecademy besucht, und obwohl beide großartig waren, habe ich das Gefühl, dass ich durch den Abschluss dieses Projekts viel mehr praktisches Wissen erworben habe.
- Im Zusammenhang mit dem oben Gesagten verfüge ich jetzt über viele zufällige Codierungsnuggets an Informationen, die mir nützlich sein werden, wenn ich wieder an etwas Ähnlichem arbeite.
- Die Lücke zwischen null und funktionierendem Plugin ist viel kleiner als die Lücke zwischen funktionierendem Plugin und einreichungsbereitem Plugin. Ich habe innerhalb weniger Tage eine funktionierende Version meines Plugins erstellt, aber es dauerte noch ein paar Wochen, bis ich alle Optimierungen vorgenommen hatte, um es gut genug zu machen, um es an das WordPress-Repository einzureichen.
Insgesamt war dies eine der coolsten Aktivitäten, die ich seit langem gemacht habe. Vielen Dank, dass Sie sich die Zeit zum Lesen genommen haben. Wenn Sie diese Informationen schließlich zum Erstellen Ihres ersten Plugins verwenden, hinterlassen Sie mir bitte unten einen Kommentar. Ich würde gerne Ihr Endergebnis überprüfen.