So erstellst du KI-Tools mit WordPress

1. Vorlesung 1: Leute, das ist meine Wordpress-Website. Sie können hier sehen, dass ich viele KI-Powertools direkt auf Wordpress gebaut habe . In diesem Kurs habe ich mich für das AI Who-Generator-Tool entschieden. Ich werde Ihnen Schritt für Schritt zeigen , wie Sie dieses Tool auf Wordpress erstellen. Zum Beispiel kannst du hier Tipps für digitales Marketing zum Thema sagen . Sie können einen Inhaltstyp festlegen, beispielsweise für ein Video-Intro, und auf Generieren klicken Und jetzt wird dieses großartige Tool, das von KI unterstützt wird, diese fantastischen Ergebnisse erzielen Sie können eins nach dem anderen kopieren und all diese Funktionen direkt auf Wordpress kopieren. Dies wird Ihnen helfen, die Struktur hinter diesem Tool zu verstehen , sodass Sie später vielleicht jedes gewünschte Tool erstellen können , wie ich es auf meiner Website getan habe. Nicht nur das, ich werde Ihnen auch zeigen , wie Sie diese Tools mit dem Punktesystem monetarisieren können, damit Sie Punkte verkaufen und Ihr Wordpress in As Business umwandeln können Wenn du bereit bist, lass uns anfangen. 2. Vorlesung 2: Okay, Freunde. Also Schritt eins, Sie benötigen eine Wordpress-Website. Das liegt auf der Hand, denn in diesem Kurs geht es darum das AI-Hook-Generator-Tool auf Wordpress zu erstellen. In meinem Fall habe ich diese einfache, neue, saubere Website. Es ist eine neue Website, die ich für diese Partituren erstellt habe. Wenn Sie keine Website haben, können Sie sich einfach eine bei Ten Web besorgen, einem der besten Webhosting-Dienste, vielleicht Kinsa, vielleicht Hosten Sie Stinger, was auch immer Oder auch wenn du weitermachen möchtest, ohne einen Hosting-Plan abzuschließen, kannst du Wordpress lokal mit Dive installieren Kinsta ist ein kostenloses Tool für lokale Wordpress-Installationen. Du kannst Vekinsta also herunterladen und Wordpress lokal auf deinem Computer installieren , um weitere Informationen zu erhalten und mit uns zu lernen In meinem Fall verwende ich meinen eigenen Webserver. Ich verwende dies für Bildungszwecke , um Websites einfach zu erstellen. Vielleicht zeige ich dir das sowieso in einem anderen Kurs. Also Schritt eins, Sie benötigen eine Wordpress-Website. Dann melden wir uns im Dashboard an. Ich gebe meine Anmeldeinformationen ein, gehe dann einfach hier zu Plug-ins und klicke auf ein U-Plug-In, um Werkzeuge zu bauen Wir benötigen hauptsächlich ein Plug-In. Es wird das WP-Code-Snippet-Plug-In genannt. Dies wird uns helfen, unsere Tools mit benutzerdefinierten Codes anzupassen. Das wirst du später im Kurs sehen. Installieren und aktivieren. Das ist es. Wir haben jetzt unsere Presse-Website mit kostenlosen WP-Code-Version installiert. Wir sind bereit, mit der Erstellung unseres Tools zu beginnen. 3. Vorlesung 3: Okay, Freunde. Also das ist unsere grundlegende Werkzeugstruktur. Wenn Sie das verstehen, können Sie vielleicht jedes beliebige Tool bauen, ein KI-Power-Tool. Zuerst haben wir unser Frontend, in dem der Benutzer ein Thema eingibt und auf Generieren klickt. Wenn der Benutzer auf Generieren klickt, wird die Anfrage an unser Wordpress-Backend, unser Dashboard, weitergeleitet. Lass mich dir das zeigen, das ist das Frontend. Wir geben ein Thema ein, wir wählen einen Inhaltstyp aus, das ist also die Benutzereingabe und dann klickt der Benutzer auf Generieren. Wir klicken auf Generieren. Diese Anfrage geht zurück zu unserem Wordpress-Dashboard. Das ist die Rückseite, genauer gesagt die Codefragmente, die hier eingesteckt Wir fügen ein Snippet hinzu und verbinden das Frontend mit diesem Snippet. Auch hier klicken wir das Frontend mit diesem Snippet. Auch hier auf Generate. Die Anfrage ging zurück zu unseren Snippets. Jetzt die Schnipsel, unser Wort wurde zurückgedrückt. Wir werden uns mit offener KI verbinden, um den Inhalt oder die Ergebnisse mit künstlicher Intelligenz zu generieren . Mit KI werden wir die Ergebnisse zurückbekommen. Und dann wurden sie zurückgedrückt und wir geben sie an die Vorderseite weiter. Und wenn wir wieder hierher zurückkehren, erhalten wir die Ergebnisse von Open Y bis hin zu den WP-Codefragmenten Und dieses Snippet leitet sie wieder an uns weiter und wir werden sie dem Benutzer in diesem tollen Design zeigen dem Benutzer in Ein letztes Mal haben wir also die Benutzeroberfläche, die Oberfläche, das Frontend, der Benutzer gibt die Eingabe ein. Wir klicken auf Generieren. Die Anfrage wird an unser Backend weitergeleitet, um Codefragmente zu erhalten. Dann stellen die Codefragmente eine Verbindung mit offenen I-API her, um den Inhalt zu generieren Wir werden den Inhalt zurückholen und dem Benutzer im Frontend zeigen Nochmals, ich hoffe, du hast die Idee. Vergiss es nicht. Immer wenn Sie das Gefühl haben, dass etwas unklar ist, benötigen Sie weitere Informationen. Ich bin hier, um dir zu helfen. Stellen Sie einfach Ihre Fragen. Ich werde fast jeden Tag hier sein, um Ihnen bei der Beantwortung Ihrer Fragen zu helfen. Geh nicht weiter. Wenn Sie etwas unklar finden, hören Sie einfach auf, fragen Sie mich, klären Sie die Dinge und fahren Sie dann fort. 4. Vorlesung 4: Okay Freunde, lasst uns in diesem Video mit KI spielen und das Haustier aufladen. Ich glaube, du kennst ChagPT. Wenn Sie etwas mit CharGPT generieren möchten, sagen Sie normalerweise Sie Zum Beispiel drei Hooks für mein Video über Marketing, irgendwas in der Art. Es ist eine sehr einfache grundlegende Aufforderung, die mir nicht gefällt. Sie werden sehen, warum Chip jetzt sagen wird, okay, ich helfe gerne und fange an generieren und so weiter. Das ist in Ordnung. Wenn du ein Anfänger bist, kannst du das tun. Aber wir sind hier, um etwas zu lernen, das über Anfänger hinausgeht. Lass uns einen weiteren Chat eröffnen. Lass uns sehen, noch eine grundlegende Aufforderung. Wir sind hier immer noch Anfänger, aber ich habe die Aufforderung etwas erhöht. Wir sagen er, als erfahrener Texter, der sich auf Hook-Generierung spezialisiert hat, ist es Ihre Aufgabe, drei Hooks für das folgende Thema zu generieren drei Hooks für das folgende Und Sie können hier ein Thema in Klammern angeben, es dann in so etwas wie einem kurzen Video zu verwenden Die Ausgabe, die wir definieren, sollte nur die Liste der Hooks mit ihrem Dann fügen wir die Spalte mit der Hooks-Liste und klicken dann auf Sand und Sie können keinen Unterschied sehen. Chagipeti generiert direkt die Hooks die Liste und teilt Ihnen den Fragenhaken, den Typ des Hooks und den Beispiel-Hook usw. Also ich denke, das ist besser, wenn du ein Tool baust, du willst nur Der Trick hier besteht also darin, dies in Ihrer Eingabeaufforderung zu verwenden. Ich weiß nicht, ob Sie auf meiner Website sind und meinen Prompt-Engineering-Kurs überprüft haben oder ob Sie vielleicht meinen kostenlosen Kurs auf meinem Youtube-Kanal gesehen haben. Es ist einer der Top-Kurse zum Thema Prompt Engineering auf Youtube. Mittlerweile fast 1 Million Views, mit fast 35.000 Likes Ich prahle hier nicht, aber ich habe wirklich hart an diesem kostenlosen Kurs auf Youtube gearbeitet Und Sie können die Kommentare unten überprüfen, um die Bewertungen zu diesem kostenlosen Kurs zu sehen Sie können es jetzt trotzdem überprüfen und zu Cha GPT zurückkehren Dies ist also die grundlegende Eingabeaufforderung , mit der Sie Hooks generieren können Wie ich bereits erwähnt habe, befinden wir uns immer noch in einer Grundstufe. Wir optimieren lediglich die Eingabeaufforderung mit einigen technischen Tipps, fügen die Rolle hinzu und fügen die Ausgabe hinzu Und das am Ende hinzufügen , um nur die Hooks direkt zu generieren Lassen Sie uns nun ein wenig über das Anfängerniveau hinausgehen und Ihnen irgendwie eine Eingabeaufforderung für Fortgeschrittene zeigen. Auch hier werde ich den Chat öffnen. Und hier ist meine neue Aufforderung. Es ist irgendwie groß, du wirst jetzt wissen warum. Jetzt ist die Aufforderung, eine Rolle zu setzen, fast dieselbe. Aber jetzt können Sie sehen, dass die Aufgabe hier definiert ist. Ihre Aufgabe ist es, die bereitgestellten Hook-Beispiele zu analysieren und dann die besten Vorlagen zu verwenden , die passen, um die drei neuen Hooks für das folgende Thema zu generieren die drei neuen Hooks für und sie in dieser Form zu verwenden Ausgabe sollte nur die Liste der Hooks mit dem Typ sein. Jetzt stelle ich die Hook-Beispiele zur Verfügung. In dieser Aufforderung versorgen wir unser Tool oder unsere Eingabeaufforderung mit den von uns gesammelten Daten Dabei handelt es sich nicht einfach um generische Hooks, die von KI generiert werden. Ich bitte KI, basierend auf meinen eigenen Beispielen und Vorlagen , die ich gesammelt habe, zu generieren meinen eigenen Beispielen und Vorlagen , und ich weiß, dass es funktioniert. Und dann läuft wieder die Liste, um nur die Hooks zu generieren. Und jetzt sieht die Ausgabe genauso aus, aber der Inhalt ist anders. Es verwendet meine Vorlagen. Jetzt sind meine Hook-Typen wie der fragliche Eintrag, die Tatsache, der Aufruf zum Handeln und so weiter. Es wird die Vorlage auswählen, die am besten zum Thema und zum Anwendungsfall passt. noch einmal zu meinem Kanal auf Youtube zurückkehre, weiß ich nicht, ob du mir folgst. Ich habe vor ein paar Monaten ein Video veröffentlicht, in dem es darum geht , maßgeschneiderte PTs richtig zu bauen. In diesem Video zeige ich Ihnen, wie Sie maßgeschneiderte PTs erstellen , die sich wirklich verkaufen und sich von der Konkurrenz abheben. Der richtige Weg, GPT zu bauen. Ich habe erwähnt, dass eine der besten Möglichkeiten darin besteht, ein GPT auf der Grundlage Ihrer eigenen Daten zu erstellen Ein anderes Beispiel: Wenn Sie in meinen Tool-Bereich gehen, haben wir den YouTube-Titelgenerator Viele Leute erstellen diese Tools. Blockieren Sie einen strafferen Generator zu einem strafferen Generator. Aber der Unterschied hier: Wenn wir ein Thema auswählen und auf Generieren klicken, ist die Aufforderung, die ich hinter diesem Tool verwende, keine Es basiert auch auf meinen Top-Vorlagen, die ich gesammelt habe. Wenn du hierher gehst, lass mich dir diese Aufforderung als Experte zeigen, Youtube bla, bla, bla. Ich teile hier meine erfolgreichen YouTube-Titelvorlagen. Die Aufforderung verwendet also meine Daten, von denen ich weiß, dass sie funktionieren, und generiert darauf basierend Titel. Aus diesem Grund ist es wichtig Ihre Tools mit Ihren eigenen Daten zu verbinden. So heben Sie sich von der Konkurrenz ab, denn jetzt kann jeder einen Hook-Generator mit KI oder einen Utu-Titelgenerator oder einen beliebigen Generator erstellen oder einen Utu-Titelgenerator oder einen beliebigen Generator Die Aufforderung, die Sie erstellen, ist jedoch anders. diesem Grund erwähne ich immer, Prompt-Engineering auf die richtige Weise zu erlernen und zu verstehen, wie wichtig es ist, bei der Entwicklung von KI-Tools eigene Daten hinzuzufügen . Das ist also die Aufforderung, die Sie in unserem Tool verwenden werden. Später werden wir mehr über eine erweiterte Eingabeaufforderung sprechen , die es uns ermöglicht und uns hilft, diese fantastische Benutzeroberfläche zu erstellen. Sie können hier die strukturierte Benutzeroberfläche sehen, die wir haben. Eine weitere Aufforderung hilft uns trotzdem dabei. Im Moment hoffe ich, dass du die Idee hast. Sie können eine einfache oder eine erweiterte Eingabeaufforderung wie meine verwenden, die auf wirklich erfolgreichen Vorlagen und Daten basiert . Übrigens, alle Eingabeaufforderungen, alles wird den Vorlesungen beigefügt Mach dir keine Gedanken darüber, das zu kopieren oder zu schreiben. Ich werde alle Eingabeaufforderungen und Skripte anhängen. Alles, was wir verwenden werden, wird diesem Kurs beigefügt. 5. Vorlesung 5: Okay Freunde, in der letzten Vorlesung habe ich euch die Eingabeaufforderung gezeigt, die wir verwenden werden, und wir haben die Hooks generiert Aber in Cha GPT haben wir die Hooks. Wow, perfekt. Aber jetzt, wie kommt man zur Wordpress. Wir wollen Hooks innerhalb der Wordpress generieren. Darum geht es in dem Kurs. In dieser Vorlesung werden wir etwas tiefer gehen. Wir werden das Backend erstellen. Du erinnerst dich an WP-Code-Schnipsel, dieses Plug-In. Ihr erinnert euch an die Struktur, das Wordpress-Backend, das sich mit Open verbindet, um die Hooks für uns zu generieren Jetzt werden wir diesen Teil hier einrichten. Wir werden das Backend mit offener KI verbinden, um die darin enthaltenen Hooks zu generieren oder WP-Codefragmente einzufügen Lassen Sie uns ein Snippet erstellen und verwenden. Ich wähle Benutzerdefinierten Code verwenden aus. Und jetzt werde ich dieses Snippet Basic Open AI Connection nennen dieses Snippet Basic Open AI Wir werden mit dem grundlegenden Beispiel beginnen um zu verstehen, wie die Dinge funktionieren Wählen Sie den Codetyp als PHP-Snippet und Bum, hier ist Keine Sorge, ich weiß , dass du jetzt vielleicht nachdenkst. Okay, ich bin kein Entwickler. Ich kann diese Skripte oder diese Schnipsel nicht erstellen. Ich kenne HP nicht. Ich kenne HP auch nicht. Ich habe nie eine einzige Codezeile in PHP geschrieben. Ich habe gerade mit dem ChagPT gechattet und diese Funktion generiert und ich benutze sie und sie ist perfekt Und wenn du dich ein bisschen mit Programmieren auskennst, kannst du dieses Skript verstehen indem du es einfach durchblätterst. Also hier definieren wir das Thema wie eine Eingabe. Und das ist unsere Aufforderung, drei Hooks für einen Blog zu einem bestimmten Thema zu generieren . Dann geben wir die offene KI, URL, die API von open I ein. Dann geben wir unseren API-Schlüssel ein und konstruieren den Aufruf und senden dann einen Aufruf an die API, um KI zu öffnen. Und hier lesen wir die Antwort und schicken sie zurück. Das ist es. Machen Sie sich auch hier keine Gedanken über die Details, die Funktion funktioniert einwandfrei. Sie können es einfach kopieren und auf Ihrer Website verwenden. Dies ist das grundlegende Beispiel für die Generierung von Text mit KI. Wenn Sie KI öffnen, aktivieren Sie dieses Skript. Denken Sie jedoch daran, hier Ihren eigenen API-Schlüssel einzugeben. Wenn Sie nicht wissen, wie das einfach funktioniert, klicken Sie auf Logging API. Gehen Sie einfach hier zu den API-Schlüsseln. Klicken Sie hier, um einen neuen geheimen Schlüssel zu erstellen. Und ich würde sagen, Tools testen alles für mich. Erstellen Sie jetzt den geheimen Schlüssel, kopieren Sie ihn, gehen Sie zurück, fügen Sie den Schlüssel ein und speichern Sie das Snippet Perfekt. Wir haben die Funktion jetzt in Codefragmenten gespeichert Um nun sicherzustellen , dass diese Funktion auf Ihrer Website funktioniert, möchten wir sie testen, bevor wir die Oberfläche und das Frontend usw. erstellen Wir möchten sicherstellen, dass dies funktioniert, und wir erhalten eine Antwort von Open AI, um dies zu testen. Wir haben viele verschiedene Tools. Wir können eine App namens Postman verwenden. Wenn Sie Visual Studio-Code haben, habe ich das Thunder Client-Plug-In oder die Erweiterung installiert Sie können es zum Testen verwenden oder sogar Online-Tools wie dieses Rock Been verwenden. Ich werde die Links und das alles beigefügt lassen. Die Idee ist, dass Sie diesen API-Aufruf auf unserer Website testen möchten . Diese Anfrage oder Website. Ich werde das jetzt sowohl im Visual Studio-Code als auch online tun , um Ihnen verschiedene Methoden im Client zu zeigen. Hier wählen wir Post als Anfrage, als Anfragetyp. Und dann bekommst du deine Webseiten-URL wie folgt. Sie fügen hier ein und sagen Sp admin, admin Ajax, Php. Dies ist die URL, die wir verwenden werden. Dann gehen wir zum Hauptteil und bilden dann den Code. Wir fügen den Namen als Aktion hinzu. Es ist der Funktionsname. Hier fügen wir den Parameter hinzu, der in unserem Fall das Thema ist. Lass mich dir das zeigen. Die Aktion ist dieser Funktionsname. Wir kopieren es. Das ist die Aktion, die wir hier einfügen. Wenn Sie in die Funktion schauen, haben wir das Thema als Parameter. Wir kopieren diese Vergangenheit einfach hierher, Sie sehen, wir fügen sie hier ein. Wir bieten einen Mehrwert wie digitales Marketing, alles, jeden Input, den Sie wollen. Wenn wir mehrere Parameter haben, können wir sie hinzufügen. Wir werden das gleich sehen. Wir haben den Aktionsnamen, den Funktionsnamen und wir haben das Thema als Parameter. Klicken Sie auf Senden. Sie können jetzt im Inhaltsbereich sehen, dass wir eine Antwort von Open AI erhalten haben . Hier haben wir unsere Hooks. Sie sehen hier sind unsere Haken. Das Gleiche gilt, wenn Sie mit diesem Online-Tool hier testen möchten , fügen Sie einfach die URL in den Inhalt ein. Sie wählen das URL-kodierte Formular aus, fügen das Aktionsthema hinzu und klicken auf Senden Sie können hier unten sehen, dass wir die Antwort darauf haben , um sicherzustellen, dass unsere Funktion einwandfrei funktioniert Was ist nun, wenn wir möchten, dass die Antwort nur die Titel enthält? Wir benötigen nicht all diese Informationen von Open AI, wie das Objekt, das Modell, die Tokens und was auch immer wir wollen, die generierten Hooks, also können wir hier nur diesen Wert extrahieren. Ich werde einfach die Antwort ändern , die ich von diesem Snippet zurückerhalte Auch hier habe ich GP verwendet, um das zu generieren. Ich habe keinen dieser Codes geschrieben. Sie können einfach sehen, dass ich hier durch das Datenobjekt navigiere Ich wähle Optionen aus, die erste Wahl, die Botschaft und den Inhalt Wenn du hierher zurückkehrst, wirst du sehen, dass wir Wahlmöglichkeiten haben. Dann haben wir das erste , da es ein Array ist, dann haben wir die Nachricht, dann haben wir den Inhalt, genauso wie ich auf den Inhalt zugegriffen habe. Und gib das Inhaltsupdate zurück. Gehen wir jetzt zurück und testen das Senden desselben Anrufs. Du wirst sehen, dass ich jetzt nur den Inhalt erhalte, die Hooks direkt. Und das wollen wir. Wir möchten den generierten Inhalt direkt haben, damit wir darauf zugreifen und ihn dem Benutzer später in der Benutzeroberfläche anzeigen können. Zurück zu unserem Snippet, Sie hier in dieser Basisfunktion sehen, verwenden wir nur das Thema als Parameter Wir haben nur eine Eingabe in unserer Eingabeaufforderung Wenn Sie sich erinnern, haben wir zwei Wir haben das Thema und wir wissen, wo wir es verwenden werden. Denken Sie daran, dass wir hier zwei Eingaben haben, das Thema und wir haben den Inhaltstyp, bei dem wir diesen Hook in einem kurzen Video, in einem Blockbeitrag usw. verwenden werden. Wir haben zwei Eingaben, wir müssen diese mit einer weiteren Eingabe aktualisieren. Wir werden einfach Parameter und die Eingabeaufforderung so ändern. Wir haben ein anderes Thema, wir haben den Nutzungsparameter. Wir haben die neue Eingabeaufforderung. Wenn Sie sich daran erinnern, hierher zurückgekehrt , wir haben, glaube ich, diesen hier. Ja, diese Aufforderung mit zwei Parametern. Hier ist meine Aufforderung. Wir haben den Verwendungsparameter und wir haben den Themenparameter. Sie können 34 Eingaben hinzufügen, was auch immer Sie möchten, indem Sie sie einfach auf diese Weise zur Eingabeaufforderung hinzufügen. Wenn ich jetzt dieses Skript aktualisiere und zum Testen hierher zurückkehre, füge ich jetzt die Verwendung hinzu. Ich werde zum Beispiel Blog sagen. Klicken Sie auf Senden und Perfekt, wir haben unseren Antwort-Frage-Hook und das Hook-Beispiel erhalten und so weiter. So kannst du eine Funktion innerhalb oder ein Snippet in WP-Codefragmenten erstellen , um deine Wordpress-Website mit Pen AI zu verbinden Um ein KI-Tool zu erstellen, müssen Sie das Konzept der Parameter und die Eingabeaufforderung verstehen Konzept der Parameter und die Eingabeaufforderung Ändern Sie die Eingaben, ändern Sie die Eingabeaufforderung und schon haben Sie ein KI-Tool, vielleicht einen Blockstraffer-Generator, vielleicht einen KI-Writer Egal, entscheide dich einfach für deine Eingaben, gestalte deine Eingabeaufforderung. Und Sie haben Ihr Tool, das Backend Ihres Tools. Jetzt ist es an der Zeit, die Benutzeroberfläche zu erstellen. Bis jetzt haben wir das Backend erstellt. Wir haben die Hooks mit KI generiert. Jetzt wollen wir die Ergebnisse zurückgeben und die Benutzeroberfläche auf Wordpress erstellen. 6. Vorlesung 6: Okay Freunde, jetzt ist es an der Zeit, mit dem Frontend zu beginnen , um die Benutzeroberfläche zu erstellen. Um es einfach zu machen, beginnen wir mit der grundlegenden Benutzeroberfläche. Wenn Sie sich erinnern, haben wir zwei Eingänge. Der Benutzer gibt ein Thema ein, wir wählen den Anwendungsfall oder die Verwendung in einem kurzen Video, in einem Blog, Beitrag was auch immer aus und klicken dann auf eine Schaltfläche, um die Ausgabe, die Hooks und die Ergebnisse zu generieren . Die Hooks werden in einer Box angezeigt. Wir haben hauptsächlich ein Textfeld zur Eingabe eines Themas, wir haben ein Dropdown-Feld zur Auswahl des Anwendungsfalls. Wir haben eine Schaltfläche und wir haben ein Ausgabefeld. Lass uns das erstellen. Also habe ich einfach Chagipt geöffnet und gebeten, die Benutzeroberfläche für mich zu erstellen Siehst du diese Aufforderung? Ich habe ihm gesagt, dass Sie ein Experte für HTML sind. Ja, S. Und deine Aufgabe ist es, mir zu helfen, eine professionelle, aber einfache und saubere Benutzeroberfläche für mein Tool, den Hook-Generator, zu erstellen . Das Tool hat zwei Haupteingaben, Textbox und Dropdown, und die Ergebnisse werden früher als Text angezeigt Dann habe ich es gebeten, nur das Design für mich ohne weitere Codes zu generieren , nur HTML- und CSS-Code, das Frontend des Designcodes und darauf zu achten, dass alle Steuerelemente korrekt ausgerichtet sind und richtige Abstand zwischen ihnen besteht Ich verwende diese Eingabeaufforderung und sie hat einfach den HTML-Code für das Tool und das CSS-Styling für mich generiert . Ich habe es einfach kopiert und direkt verwendet. Denken Sie daran, ich werde alle Codes, alle Eingabeaufforderungen, alles hinterlassen alle Eingabeaufforderungen, alles Mach dir jetzt über nichts Sorgen. Sie finden alle Codes, die dem Kurs beigefügt sind. Aber bitte mach weiter. Um das Konzept zu verstehen und zu verstehen, wie ich die Benutzeroberfläche erstelle, verwende ich einfach ChargPT Was wir tun können, ist diesen Code zu kopieren und einen U-Ordner zu erstellen. Dies ist eine einfache grundlegende Methode. Ich werde es zum Beispiel wie auch immer UI nennen und dann zwei Textdateien erstellen. Die erste ist zum Beispiel UI. Und ersetzen Sie XT durch HTML, um den Typ der Datei zu ändern. Und der andere heißt Styles for Styling. Gehen Sie einfach wieder zu ChagPT, kopieren Sie den HTML-Code und den CSS-Code und fügen Sie ihn in Schreiben Sie einfach einen Klick und bearbeiten Sie ihn zum Beispiel mit dem Notizblock Fügen Sie den Code Dann öffne einfach diese Datei und du kannst dir unser fantastisches Hook-Generator-Tool ansehen. Natürlich funktioniert es momentan nicht, aber Sie können sehen, dass wir hier ein Thema eingeben können. Wir können einen Typ wie Block, Beitrag, Video oder was auch immer auswählen und auf Generieren klicken, um die Ergebnisse in diesem Feld falls es ein Problem mit Abständen gibt oder vielleicht etwas mit dem Design nicht stimmt. Du kannst einfach mit ChagPT chatten und nach der Lösung des Problems fragen diesem Grund ermutige ich Sie immer und sage Ihnen, dass Sie mindestens grundlegende Codierung, Basic CML, Basic CSS und Basic Java Script lernen CML, Basic CSS und Basic Java Script Nur für den Fall , dass Sie Tools generieren und Code mit ChagPT generieren möchten Code mit ChagPT generieren um zu verstehen, was Und wenn Sie etwas fragen und lösen möchten, können Sie es fragen, damit Sie verstehen, was sowieso vor sich geht Das ist also unsere Benutzeroberfläche. Unsere Basisschnittstelle ist jetzt fertig. Schritt zwei besteht darin, diese Schnittstelle, diese Taste, mit unserem Warpress-Backend zu verbinden . Denken Sie daran, dass wir hier diese Funktion erstellt haben , die die Hooks generiert. Jetzt wollen wir diese Benutzeroberfläche mit unserem Snippet verbinden. Das werden wir in der nächsten Vorlesung sehen. 7. Vorlesung 7: Okay, bis jetzt haben wir das Backend und das Frontend erstellt das Backend und das Frontend Jetzt ist es an der Zeit, beide miteinander zu verbinden. In dieser Vorlesung werden wir an diesen Pfeilen arbeiten. Wir werden das Frontend mit unserem Backend verbinden. Mal sehen, wie. Davor wundern Sie sich vielleicht , dass wir diese grundlegende Benutzeroberfläche erstellt haben. Aber im Intro habe ich dir diese Oberfläche gezeigt, diese professionelle Benutzeroberfläche Keine Sorge, wir beginnen mit diesem grundlegenden Beispiel und später werde ich Ihnen zeigen, wie Sie diese Benutzeroberfläche optimieren und erstellen Nehmen Sie jetzt Schritt für Schritt Kontakt mit mir auf und wir werden alles besprechen. Wir haben dieses HTML-CSS-Frontend. Wir müssen jetzt mit unserem Codeausschnitt hier eine Verbindung herstellen, wie ich mithilfe von Java-Skript, das zu Chagipt zurückkehrt , nachdem es das Frontend für mich generiert hat, einfach erneut auffordere es einfach erneut auffordere, die Benutzeroberfläche zu generieren und mit meinem Backend zu verbinden Ich habe es gesagt, bitte generiere den JS-Code, um mein Wort aufzurufen, drücke die Ajax-Funktion und zeige die Ergebnisse im Stellen Sie sicher, dass Sie während des Vorgangs eine Ladung hinzufügen. Und hier ist meine Ajax-Funktion. Und ich habe die komplette Ajac-Funktion übergeben, das Wordpress-Snippet, damit es besser versteht, wie man den Code einfach generiert Auch hier wurde ein einfaches Skript generiert. Sie können das Skript sehen. Es hat es generiert. Ich kopiere einfach Going back to our folder jetzt hierher, erstelle eine neue Textdatei und ich nenne sie Script JS ja und bearbeite sie einfach mit Notepad und füge den Code Hier seht ihr, wie ihr hier das Thema und den Kontexttyp bekommt das Thema und den Kontexttyp , was in unserem Fall der Fall ist Sie sehen hier, wie Sie die Variablen definieren, den Wert abrufen und einfach die Grundfunktion Generate Hooks aufrufen , wenn Sie drücken, und dann die Ergebnisse im Ergebnisbereich abrufen. Hier müssen wir eine Sache tun, die Lee-URL Ihrer Website ändern. Ich habe diesen Kommentar hier hinzugefügt, ersetze eine Jack-URL. Gehen Sie einfach zurück zu unserer Website, kopieren Sie dies, fügen Sie es hier ein und speichern Sie es. Lassen Sie uns nun erneut die Benutzeroberfläche öffnen. Gib ein Thema ein, zum Beispiel Facebook-Werbung, Tutorial, irgendwas, und ich wähle hier zum Beispiel einen Blockbeitrag aus und klicke auf Generieren. Ups, wir haben einen Fehler beim Abrufen erhalten. Wenn Sie so etwas sehen, müssen Sie als Erstes hier die Entwicklertools in Ihrem Browser öffnen die Entwicklertools in und den Fehler in der Konsole überprüfen Sie sehen, es sagt mir, dass es durch die CRS-Richtlinie blockiert wurde. Manchmal passiert das, wenn Sie das Tool im Browser öffnen , um das Problem zu beheben Kehren Sie hier zu Ihrem Snippet zurück und wir werden ein paar Zeilen hinzufügen , um diese CORS-Richtlinie des Browsers zu deaktivieren Es hat etwas mit ursprungsübergreifender Sicherheit zu tun. Wenn Sie Ihre Funktion von verschiedenen Domänen aus aufrufen, ist das vorerst irgendwie nicht möglich. Aber lassen Sie uns das jetzt beheben. Nur um unsere Arbeit fortzusetzen, füge ich hier einfach die folgenden Zeilen hinzu. Ich sage es, dass es alle Ursprünge zulassen soll. Blockieren Sie keine Domain oder andere Domains für den Zugriff auf dieses Funktionsupdate. Und versuchen wir es jetzt erneut, das Tool zu aktualisieren. Facebook-Werbung zum Abarbeiten und dann wählen wir Chat, Ende, Generieren und Perfektionieren Du kannst jetzt sehen, dass wir die Hooks im Ergebnistextbereich bekommen . Perfekt. Wählen Sie etwas anderes aus, zum Beispiel YouTube-Wachstum, ein beliebiges Thema, generieren Sie. Jetzt funktioniert das Tool einwandfrei. Wir haben 123 Hooks. Perfekt. Jetzt haben wir unsere grundlegende Benutzeroberfläche mit unserem Backcode-Snippet verbunden unsere grundlegende Benutzeroberfläche mit unserem Backcode-Snippet 8. Vorlesung 8: Okay, Freunde. Bis jetzt haben wir die Benutzeroberfläche erstellt, die Rückseite, und auf Wordpress haben wir die Benutzeroberfläche mit Wordpress verbunden. Das Tool generiert die Hooks. Alles ist perfekt, aber das Tool ist nicht auf Wordpress. Wir möchten es auf unserer Website veröffentlichen. Hier auf dieser Website. Also lass es uns jetzt machen. Ich gehe zurück zum Armaturenbrett. , drücken Sie, gehen Sie hier zu Seiten und klicken Sie dann auf eine Seite. Am einfachsten und grundlegendsten ist es nun, einfach eine Seite wie diesen Hook-Generator zu erstellen . Dann füge hier drei HTML-Blöcke hinzu. Der erste ist für den CSS-Code. Geh einfach hier zur Datei, öffne die Styles. Zum Beispiel hier mit Notepad, kopiere es einfach und füge es in diesen Block Dann noch ein Block für das Tool HTML, du kopierst einfach nochmal hier, kopierst und fügst ein Noch einer für Javascript, wie dieser öffne und hol dir die Javascript-Datei, kopiere und füge sie wieder hier ein. Veröffentlichen Sie das Tool einfach. Es gibt einen sehr einfachen Weg. Öffnen Sie die Seite und Sie können sehen dass wir jetzt den Who-Generator haben. Aber das Design ist kaputt. Warum? Einfach, weil Sie , wenn Sie CSS und Javascript auf diese Weise hinzufügen möchten, Sie Tags hinzufügen und schließen müssen. Fügen Sie hier einfach einen Stil wie diesen hinzu. Öffne es und kopiere es dann. Und geh runter und schließe das Style-Tag. Um nun das Styling zu verstehen, das Gleiche gilt für Javascript, sagen wir hier Script und gehen runter und fügen es hier ein. Und schließe es. Jetzt aktualisiere. Lass uns jetzt die Magie sehen, was passieren wird, Refresh und Perfect. Sie können jetzt den ganzen Generator sehen. Aber es gibt ein Problem mit dem Design. Normalerweise wirst du Konflikte mit einem Thema oder so sehen. Um dies zu beheben, kehren wir zu unserem Wordpress-Dashboard zurück und klicken auf Appearance Themes. Lass uns ein anderes Theme installieren. Zum Beispiel hinzufügen. Wählen wir zum Beispiel Hello Elementor Activate Dann lassen Sie uns das jetzt starten, aktualisieren und Sie können sehen, wie das Tool jetzt hier angezeigt wird. Das Design ist immer noch schlecht. Ich werde das sofort reparieren. Aber lassen Sie uns überprüfen, ob das Tool wieder funktioniert. Ich gebe ein Thema ein, wähle etwas aus, generiere es und perfektioniere es. Das Tool funktioniert auf unserer Wordpress-Website. Perfekt. Jetzt ist der beste Ansatz, oder was ich lieber mache, ein Plug-In namens Elementor zu installieren Elementor ist ein Webseitendesigner. Es wird uns helfen, die Webseiten zu gestalten und irgendwie professionelle Designs wie die auf meiner Website zu Wenn du zum Beispiel hier auf meine Website gehst, kannst du hier das Tool, die Sharing-Buttons, diese starren Bereiche und so weiter sehen . Und das Menü und das Fußzeilenelement werden dir dabei helfen Wenn du an Wordpress arbeitest, glaube ich, dass du Element kennst. Es ist einer der beliebtesten Webseitenersteller für Wordpress mit 5 Millionen Installationen. Ich habe es installiert. Gehen Sie jetzt wieder hier zu Pages oder zu derselben Seite, mit der wir gearbeitet haben. Wo sind die Seitenseiten? Alle Seiten generieren es. Klicken Sie nun auf Mit Elementor bearbeiten. Ich werde all diese Codes löschen. Löschen Sie nun das Update und klicken Sie auf Mit Elementor bearbeiten. Das ist unsere Seite, sehr einfach. Ich werde hier einen Container hinzufügen. Das ist der Container. Ich werde einen HTML-Block hinzufügen, einen Block wie diesen. Dann werde ich die Codes erneut kopieren, beginnend mit der Styling-Bearbeitungssteuerung. Geh noch einmal hierher, vergiss nicht, wir werden Stil hinzufügen. Dann werden wir den HTML-Code hinzufügen. Und der Javascript-Code hier ist der Skriptcode. Lass uns den Skriptcode kopieren. Skriptsteuerung C-Steuerung, wir haben den HTML-Code. Einfach dazwischen kopieren und einfügen. Und du kannst das Kopfteil entfernen. Behalte einfach den Code des Hauptwerkzeugs. Und Sie werden es jetzt direkt im Builder sehen . Sie können sehen, dass es ein bisschen oben klebt. Um das zu beheben, können Sie zum Beispiel in den Navigator gehen und auf den Container klicken Dann die Tanzabteilung, wir haben den oberen Rand. Wir können zum Beispiel 100 hinzufügen. Und Sie können sehen, dass das Tool jetzt nicht mehr blockiert ist. Wie dem auch sei, die Idee ist, dass Sie Ihre eigenen Seiten erstellen, das entsprechende Thema auswählen und den HTML-Code des Tools in Ihre Seite einfügen So einfach ist das. Lassen Sie uns eine Vorschau der Änderungen als Schweinegenerator Auch hier können Sie den Titel ausblenden, wenn Sie möchten, oder ihn wie folgt vor dem Tool verstecken Wählen Sie hier einfach den HTML-Code aus. Sie werden im HTML-Code sehen, dass wir den Ho-Generator H mit einem Tag haben Sie können dieses Update löschen. Nun, wir werden es auf dem Tool haben, so wie ich es hier mache, du kannst sehen, dass dieser Titel bei Elementor ist, diese Unterüberschrift ist bei Das Code-Tool ist da. Ich habe keine Titel im Tool. Ich füge einfach den Hauptcode in diesen Bereich ein. Lass uns wieder hierher gehen. Lass es uns testen, hinzufügen, generieren und es funktioniert perfekt. Sehr nett. Jetzt haben wir unser Tool auf unserer Wordpress-Website. Auch hier, wenn Sie auf ein Problem stoßen, bin ich hier, um Ihnen zu helfen. Sie können jederzeit auch mit ChaChipt chatten. Wenn Sie mit Designproblemen, Styling oder ähnlichem konfrontiert sind, kann es diese für Sie beheben 9. Vorlesung 9: Okay Freunde, in diesem Vortrag wollen wir von diesem grundlegenden Design zu dieser professionellen, sauberen Benutzeroberfläche übergehen . Diese Vorlesung ist sehr wichtig , wenn Sie das Konzept hinter dieser Vorlesung verstehen. Sie können fast jedes Tool erstellen, das Sie möchten. Kehren wir hier zur grundlegenden Benutzeroberfläche zurück. Wenn Sie sich die Ergebnisse ansehen, die Antwort, ist es reiner Text. Das Hauptproblem hier, bitte konzentrieren Sie sich, ist, dass wir das Ergebnis haben, da dieser Text in einem Textbereich wie diesem hier angezeigt werden kann. Aber es ist extrem schwierig, aus diesem Text diesen Brandstiftungsentwurf zu machen, diese organisierte Entwurfsdatenanalyse Wir sagen Müll rein, Müll raus. Wenn Sie schlechte Daten haben, werden Sie schlechte Ergebnisse haben. Wenn wir dieses Konzept in unserem Fall anwenden wollen, wenn wir diese schlechte Antwort haben, sich um einfachen Text handelt, ist es sehr schwierig, dieses organisierte Design zu haben. Um dieses organisierte und strukturierte Design zu haben, wollen wir strukturierte Ergebnisse und strukturierte Reaktionen. Also, wie wir das machen können, wie wir strukturierte Antworten abrufen und erhalten können , um jede beliebige Benutzeroberfläche zu erstellen. Da kommt es wieder. Die Macht der schnellen Planung und Herstellung der besten Prompt Lass uns hierher zurückkehren, um GPT zu chatten und zu öffnen und zu chatten. Denken Sie an unsere Aufforderung für Fortgeschrittene in dieser Vorlesung. Wir werden es anwenden. Wir werden es benutzen. Wir generieren Hooks auf der Grundlage von Daten, denk dran. Und wir verwenden diesen Prompt-Hack, um direkt die Liste der Eingabeaufforderungen zu generieren Siehst du die Liste der Eingabeaufforderungen? Jetzt wollen wir eine strukturierte Antwort erhalten. Wir möchten eine organisierte Antwort erhalten, auf die wir leicht zugreifen können , um jede gewünschte Benutzeroberfläche zu erstellen. Hier kommt unsere super erweiterte Eingabeaufforderung. Lass uns wieder einen neuen Chat öffnen. Und schauen wir uns diese neue Eingabeaufforderung an. Auch hier generieren wir Hooks auf der Grundlage des bereitgestellten Hooks-Beispiels und unserer Daten. Aber sieh dir jetzt an, was sich geändert hat. Die Ausgabe sollte wie folgt nur ein gültiger Jason sein. Und ich habe der Aufforderung ein Beispiel dafür gegeben wie die Antwort wie der Hook-Typ und der Hook neben der strukturierten Antwort aussehen soll wie der Hook-Typ und der Hook neben der strukturierten Antwort aussehen . Falls Sie nicht wissen, was Jason ist Es ist einfach eine strukturierte Darstellung von Daten. Anstatt Scheintext haben wir diese strukturierte Antwort Und am Ende sagte ich, dass Jason Einwände hat. Wir können also nur die Jason-Antwort direkt erhalten. Schauen wir uns jetzt die Ergebnisse an. Sie können jetzt sehen, dass die Antwort Jason ist und wir haben drei Hooks so organisiert, dass wir auf jeden einzeln zugreifen können und wir einfach darauf zugreifen können, um darauf basierende Benutzeroberflächen zu erstellen. Ich habe ausführlicher darüber gesprochen. In zwei Blockbeiträgen und in diesem die Funktionsketten und diesem, wie man schnell Tools erstellt , und ich habe meine Skripte hier geteilt. Ich werde auf diese Blockbeiträge verlinken , wenn du mehr erfahren möchtest. Aber noch einmal, was Sie verstehen müssen, wenn Sie organisierte Benutzeroberflächen erstellen wollen , müssen Sie eine strukturierte Antwort aus dem KI-Modell des Sprachmodells von GPT in unserem Fall oder der Open API in unserem Fall oder der Open API in unserem Fall Wir haben jetzt diese Ausgabe, wir können sie verwenden, um unsere Benutzeroberfläche zu erstellen Ich hoffe, Sie haben die Idee wieder Wenn Sie Fragen haben oder der Meinung sind, dass etwas unklar ist, bin ich hier, um Ihnen zu helfen. Also werden wir unsere Funktion jetzt mit dieser Aufforderung aktualisieren . Ich werde es kopieren und hier zu unserem Snippet zurückkehren. Und jetzt werden wir unsere Eingabeaufforderung ersetzen. Sie sehen hier die Aufforderung erneut einfügen. Aber jetzt haben wir ein kleines Problem. Normalerweise werden die Zeichenketten in einer beliebigen Sondierungssprache oder der Text zwischen zwei Doppelcodes gesetzt Da wir hier Doppelcodes in unserem Code oder in unserer Eingabeaufforderung haben, müssen wir diese Doppelcodes umgehen Wir müssen nur einen solchen Backslash hinzufügen , damit wir diesen Zeichen entkommen können Füge sie einfach eins nach dem anderen hinzu. Vergessen Sie nicht, die Eingaben erneut zu ändern. Ich werde digitales Marketing löschen. Hier mache ich das, viele werden dir zeigen müssen wie es geht, falls du dich selbst testen willst. Du fügst zwei Punkte hinzu und fügst die Variable darin hinzu. Nochmals, für das Alter doppelte Codes. Und das ist es. Ich denke, die Aufforderung ist jetzt fertig. Wir haben es hinzugefügt. Wir haben immer noch einen hier. Dieser hier. Okay, perfekt. Lass es uns jetzt versuchen. Ich werde das Update speichern und es aktualisiert ausschneiden Gehen wir jetzt zu unserem Tool. Nochmals, ich aktualisiere hier. Geben Sie ein Thema ein, zum Beispiel Google-Anzeigen. Alles, was generiert und perfekt ist. Sie können jetzt sehen, dass wir die strukturierte Jason-Ausgabe haben , perfekt. Jetzt haben wir diese Jason-Ausgabe. Darauf können wir die Benutzeroberfläche aufbauen. Ich hoffe, du hast die Idee verstanden und verstanden, was wir hier gemacht haben. Ich erinnere Sie noch einmal daran, ich ermutige Sie, zu lernen, Prompt Engineering, wie man solche Prompts erstellt Dass dies Ihnen nicht nur beim Erstellen von Tools hilft, sondern auch dabei, das Beste aus Sprachmodellen herauszuholen Wenn du nicht in Premium-Kurse investieren kannst, kannst du dir meinen kostenlosen Kurs auf Youtube ansehen. Ich werde Links zu all diesen Ressourcen behalten und sie diesen Vorlesungen beifügen. Wie dem auch sei, jetzt haben wir die strukturierte Antwort. Jetzt ist es an der Zeit, diese Antwort zu verwenden, um diese Benutzeroberfläche, diese Benutzeroberfläche zu erstellen. Da dies kein HTML-, CSS- und Javascript-Kurs ist kein HTML-, CSS- und Javascript-Kurs und es nicht möglich ist, Ihnen das jetzt beizubringen, habe ich die Benutzeroberfläche erstellt, die Basisvorlage für Sie ich Ihnen in diesem Kurs vorstellen werde. Wir können es verwenden und wenn Sie etwas optimieren oder ändern möchten, bitten Sie GPT, etwas für Sie zu ändern Es liegt an dir. Ich gebe es dir umsonst. Kann es direkt auf Ihrer Website verwenden. Übrigens kann diese Vorlage für die Titelgenerierung verwendet werden, kann für viele Tools verwendet werden, für alles, was eine oder zwei Eingaben hat und eine Liste von Dingen generiert. Wie auch immer, wir werden einfach wieder in unseren Ordner gehen und drei Dateien erstellen. Wieder die gleiche Operation, aber jetzt haben wir nur einen neuen Code, den neuen Designcode. Sie finden die Dateien im Anhang zu dieser Vorlesung. Holen Sie sie sich einfach, laden Sie sie herunter und schon finden Sie Advanced I, Advanced Script im fortgeschrittenen Stil. Wenn Sie diese erweiterte Benutzeroberfläche öffnen, sehen Sie das neue Design. Lass es uns versuchen. Ich werde hier zum Beispiel sagen, ein CO-Tipp für einen Dokumentarfilm, generieren und perfektionieren. Sie können jetzt sehen, dass die Benutzeroberfläche perfekt funktioniert. Nur eine Erinnerung, wenn Sie das Skript kopieren und mit Notepad oder einem beliebigen Editor öffnen Und ändern Sie hier die Basis-URL, Ihre Website, URL, fertig Und Sie werden einen voll funktionsfähigen Who-Generator haben. Und dann können Sie kopieren, genauso wie wir es mit dem Grunddesign gemacht haben, wir können Wordpress kopieren und auf Ihrer Website veröffentlichen, wie ich es hier getan habe, und sie haben es auf meiner Wordpress-Website. In den nächsten Vorlesungen werden wir sehen, wie wir den Zugriff auf dieses Tool nur für angemeldete Benutzer einschränken können . Und wie man dieses Tool mit dem Punktesystem implementiert. Wenn du hier merkst, wenn du jetzt auf Generieren klickst, werden die Punkte abnehmen. Wir verbrauchen also Punkte oder Credits , wenn wir die Tools verwenden. Es ist also so, als würde man mit diesen Tools eine SAS aufbauen. Wie das geht, werden wir auch in den nächsten Vorlesungen sehen. 10. Lektion 10: Okay, Freunde, lasst uns jetzt sehen, wie wir Ace auf dieses Tool nur für angemeldete Benutzer beschränken können . Das ist also unser Tool. Nochmals, ich werde es aktualisieren und jetzt kann es jeder benutzen. Was wir tun können, ist einfach zu unserem Snippet zurückzukehren. Wo ist unser Snippet hier? Bevor wir den Code, den Hauptcode, erreichen , werden wir überprüfen, ob der Benutzer angemeldet ist Schau, wie einfach es ist , das mit Krieg zu tun. Drücken Sie diese einfache Codezeile. Wenn der Benutzer nicht angemeldet ist, dieses Ausrufezeichen angezeigt Wenn du schon einmal etwas programmiert hast, weißt du, das heißt, wenn kein Benutzer angemeldet ist, schicke ich zuerst die Anmeldung zurück. Das war's, Update. Und was an dieser Vorlage schön ist, ich habe auch schon die Login-Logik erstellt. Lass uns das sehen. Ich werde hier nochmal einen CO-Tipp sagen, alles klicken Sie auf Generieren. Jetzt wird dir gesagt, dass du dich zuerst anmelden und auf eine Schaltfläche klicken musst. Und wir bringen Sie zur Anmeldeseite. In diesem Fall habe ich jetzt meine Benutzer-Anmeldeseite eingerichtet. Sie müssen die CRL ändern. Ich werde Ihnen gleich sagen, wo , aber Sie können jetzt sehen, wie einfach es ist, Ihre Tools vor unbefugtem Zugriff zu schützen Ihre Tools vor unbefugtem Zugriff Nur angemeldete Benutzer können auf dieses Tool zugreifen. Auf diese Weise kannst du E-Mail-Listen sammeln und erstellen oder, wie du gleich sehen wirst, können wir nur Benutzern, die über genügend Credits oder Punkte verfügen, erlauben , dieses Tool zu verwenden. Fügen Sie einfach diese kleine Codezeile hinzu und schon sind Sie fertig. Gehen wir zurück zum erweiterten Skript und öffnen den JS-Dateieditor . Und wenn du runtergehst, wirst du sehen, dass wir diese Show und das Login-Popup haben. Sie können hier den Link zu meiner Benutzeranmeldeseite sehen. Ändern Sie dies einfach und Sie können auch das Bild ändern, wenn Sie das achsenlose PNG möchten das achsenlose PNG , das Sie hier sehen können. Lass uns wieder zurückgehen. Dieses Bild hier, Sie können es ändern, wenn Sie möchten. Es liegt an dir. So können wir den Zugriff auf angemeldete Benutzer einschränken. Lassen Sie uns das Punktesystem implementieren und in der nächsten Vorlesung mit dem Verkauf dieser Tools beginnen. 11. Vorlesung 11: Ordnung, Freunde. Jetzt lasst uns mit unseren Tools etwas Geld verdienen. Lassen Sie uns unsere Wordpress-Website in ein Unternehmen verwandeln. Wenn Sie zu meiner Website zurückkehren, werden Sie erneut sehen, dass Sie bei jeder Verwendung des Tools auf Generieren klicken. Schauen Sie sich hier den Punktestand an, verringern Sie ihn. Sie können sehen, dass wir unsere Punkte verbrauchen. Wenn Sie hier auf die Punkte klicken, gelangen Sie zur Punkteseite, auf der Sie Powerpoints zurückkaufen können. Es ist wie jedes CT-System, jedes Sa-Geschäft, aber auf Wordpress. Sehen wir uns in dieser Vorlesung an, wie das geht. Schritt eins, wir kehren zu unserem Wordpress-Dashboard zurück. Wir möchten ein Plug-In installieren, das das Punkte- oder Kreditsystem einfach verwaltet. Gehen Sie zurück zu Plug-ins, Hinzufügen und Anschließen. Es heißt My Crid. Installiere es. Hier sind wir. Installieren und aktivieren. Perfekt. Behalten wir das vorerst. Und hier sind wir. Wir haben die Punkte. Du kannst den Namen ändern, wenn du Credits machen willst oder so. Aber jetzt konzentriert es sich auf den Hauptpunkt. Gehe zu Benutzern. Hier, alle Benutzer. Dann kannst du sehen, dass der Admin jetzt null Punkte hat. Du kannst auf Anpassen klicken. Und lassen Sie uns vorerst einige Punkte hinzufügen, aktualisieren. Jetzt können wir sehen, dass ich 100 Punkte habe. Perfekt, ich kann damit testen. Nun wollen wir, wenn der Benutzer angemeldet ist und dann auf Generieren klickt, überprüfen, ob er das richtige Guthaben hat , um das Tool zu verwenden. Schauen wir uns noch einmal an, wie das In War Press kehren wir zu kalten Schnipseln zurück . Die kalten Schnipsel Und öffne unseren beiden Generator-Snippet, den wir zuvor erstellt haben. Und was wir jetzt tun werden, können Sie hier sehen, lassen Sie uns das hier verschieben Wenn der Benutzer angemeldet ist, werden wir umziehen und jetzt nach dem Kontostand suchen. Okay, und du wirst diesen einfachen Code hinzufügen. Wir werden die Benutzer-ID bekommen. Der Benutzer ist angemeldet. Wir haben diese Bedingung erfüllt , damit wir die Benutzer-ID erhalten können. Dann werden wir mit dieser einfachen Funktion das Benutzerguthaben ermitteln. Sie sehen jetzt, wie einfach es ist, das Punktesystem mit Wordpress zu implementieren. Da es sich um eingebaute Funktionen handelt, senden wir bei einem Saldo von weniger als fünf kein Guthaben. So einfach ist das. Eine letzte Sache: Bevor wir die Anfrage an den Benutzer zurücksenden, möchten wir sicherstellen, dass wir Punkte abziehen Wir haben auch diese Methode zum Subtrahieren. Wir übergeben die beiden Namen und die Benutzer-ID. Wie viele Punkte wir abziehen wollen. Und eine einfache Beschreibung und eine Zeit. Und das war's, aktualisiere das Skript. Und lass uns jetzt die Magie sehen. Bevor wir die Magie sehen, den Code nicht hier testen, sondern wollen wir den Code nicht hier testen, sondern ihn verschieben. Drücken Sie erneut auf Website. Wo ist meine Seite? Hier ist meine Seite. Klicke mit Elementor weiter. Ich werde die Codes aktualisieren. Es ist ganz einfach. Das haben wir schon einmal gemacht. Verschieben Sie einfach die HTML-, CSS- und Javascript-Codes in diese Codes. Und fügen Sie anstelle dieses Codes hier eine erweiterte Styling-Kopie ein. Denken Sie auch hier daran, dass wir das Style-Tag hinzugefügt haben. Wir fügen den Stil hier ein. Lassen Sie uns übrigens nach unten gehen, dieses Stylesheet wird verwendet, um all meine Tools zu stylen. Wir werden von hier, dem Hauptabschnitt, kopieren und das ist ein Copy-Paste hier. Sie sehen, jetzt ist das Tool erschienen und wir haben immer noch das Skript. Lass es uns C kontrollieren und einfügen. Perfekt. Lass uns aktualisieren. Vergessen Sie nicht, dass Sie die URL und die Bild-URLs aktualisieren müssen . Erinnerst du dich, hier haben wir das Login-Popup, wir haben die Bildquelle. Wir müssen hier stattdessen eine URL eingeben, um auf ein öffentliches Bild zuzugreifen. Um das zu tun, gehe ich zurück zu meinem Wordpress-Dashboard. Gehen Sie hier zu Medien und fügen Sie neue Mediendateien hinzu. Wählen Sie Datei aus, und ich werde die Bilder „Kein Zugriff“ und „Keine Balance“ hochladen. PNG ist perfekt. Lassen Sie uns die URL der öffentlichen URL in die Zwischenablage kopieren und hier ablegen. Auch hier ermutige ich Sie, grundlegende HTML-, CSS- und Javascript-Grundlagen zu erlernen grundlegende HTML-, CSS- und Javascript-Grundlagen Das wird dir sehr helfen. Wie dem auch sei, lassen Sie uns noch einmal das No-Balance nehmen und es einfügen. Hier sind wir, Update. Lassen Sie uns jetzt das Tool öffnen. Sagen wir jetzt einfach zum Beispiel, Facebook-Werbeanzeigen werden wieder generiert und perfektioniert. Sie können sehen, dass das Tool einwandfrei funktioniert. Wenn Sie die Seite aktualisieren, werden Ihnen minus fünf für die Verwendung des Hook-Generators abgezogen Dieses Popup ist im Microd-Plug-In integriert . Es ist wirklich perfekt Gehen wir zurück zu unserem Dashboard, alle Benutzer, und Sie können sehen, dass wir jetzt 90 Punkte haben. Ich werde das nochmal testen, Mail generieren. Wenn wir jetzt gehen, müssen es 85 sein. Lassen Sie uns das Ganze auffrischen und perfektionieren, Sie können 85 Punkte sehen. Das Punktesystem ist ebenfalls integriert und funktioniert einwandfrei. Der letzte Schritt besteht darin, den Leuten den Kauf von Punkten zu ermöglichen. Sie können dies mit zwei Optionen tun. Hier haben Sie Bride-Gateways, Sie direkt im Plug-In implementieren können, z. B. mit Paypal, Scrill Oder Sie können, wie ich es auf meiner Website mache, Woo Commerce verwenden Sie können also Woo Commerce installieren. Ich denke, wenn Sie schon einmal mit Wordpress gearbeitet haben, ich glaube, Sie kennen Woocommerce, es ist die Nummer eins. Einfach einloggen, um Produkte auf Wordpress zu verkaufen. Okay, gehen Sie jetzt hier zu Produkten, fügen Sie ein neues Produkt hinzu und sagen Sie einfach zum Beispiel 1.000 Punkte. Und die Idee hier ist hauptsächlich, dieses Kästchen anzukreuzen , mit Punkten zu belohnen und die Anzahl der Punkte hinzuzufügen. Wenn jetzt jemand dieses Produkt kauft, erhält er 1.000 Punkte auf seinem Konto. Das war's, Sie haben das Punktesystem und jetzt können Benutzer nur noch auf Ihre Tools zugreifen, wenn sie angemeldet sind Und wann immer sie es verwenden, verbrauchen sie ihre Credits oder ihre Punkte. Gehen wir nun zurück zu meiner Website, falls Sie feststellen, dass ich hier den Punktestand in der Kopfzeile habe . Ich habe auch diese Vorlage, in der ich die Kosten zeige und das zum Aufladen von Powerpoints und so weiter. Falls du daran interessiert bist, mehr über das Bauen als Wordpress zu erfahren und all meine Codes zu stehlen und so weiter, kannst du in meinem anderen Kurs nachschauen, Wordpress in AS umwandeln. Ich weiß nicht, ob du ein Powermitglied bist. Wenn ja, können Sie kostenlos auf diesen Kurs zugreifen. Wenn nicht, können Sie es auf meiner Website überprüfen. Hier erfährst du alles im Detail, wie ich mein Toolsystem baue. Vergiss nicht, wenn du ein Problem stößt, hast du irgendwelche Fragen, irgendwas. Ich werde fast jeden Tag hier sein, um dir zu helfen.