Comment créer des outils d'IA avec WordPress | Hassan Aboul hassan | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Comment créer des outils d'IA avec WordPress

teacher avatar Hassan Aboul hassan, Founder @LearnWithHasan & @SimplerLLM

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Que allons-nous créer ?

      1:09

    • 2.

      Installation de base de WordPress

      1:39

    • 3.

      La structure de l'outil

      2:20

    • 4.

      Générer des hooks avec l'IA

      6:34

    • 5.

      Générer avec des extraits WordPress

      9:37

    • 6.

      Générer l'interface utilisateur

      4:13

    • 7.

      Relier l'interface utilisateur avec l'extrait

      4:35

    • 8.

      Publier sur WordPress

      7:00

    • 9.

      Mettre à jour l'interface utilisateur

      8:39

    • 10.

      Outil de restriction pour les utilisateurs authentifiés

      2:30

    • 11.

      Ajouter le système de crédit

      7:57

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

727

apprenants

3

projets

À propos de ce cours

Ce cours est parfait pour tous ceux qui souhaitent créer des outils d'IA avec WordPress ! Que vous soyez nouveau dans ce domaine ou que vous ayez une certaine expérience, notre cours est pensé pour être simple, direct et clair.

Dans ce cours, vous apprendrez :

  1. Introduction aux outils d'IA sur WordPress : nous commençons par les bases. Que sont les outils d'IA et comment fonctionnent-ils sur WordPress ? Nous le rendons simple à comprendre.

  2. Créer un générateur de crochets avec l'IA - étape par étape : vous verrez un exemple pratique de la façon de créer un outil d'IA qui génère des crochets qui attirent l'attention ou des lignes de départ pour des articles. Nous vous guiderons à chaque étape.

  3. Conception de l'interface utilisateur (UI) : apprendre à créer une interface facile à utiliser. Cela signifie créer la partie de l'outil que les gens verront et avec laquelle ils interagiront.

  4. Intégrer l'IA à votre outil : nous vous montrerons comment associer votre outil à la technologie de l'IA, pour le rendre intelligent et compétent.

  5. Se lier avec WordPress : découvrez comment faire fonctionner votre outil d'IA sans problème avec WordPress.

  6. Publier votre outil sur WordPress : une fois votre outil prêt, nous vous aiderons à le mettre sur WordPress pour que d'autres l'utilisent.

  7. Optimiser l'interface utilisateur : apprendre à rendre votre outil non seulement fonctionnel mais aussi professionnel.

  8. Commande d'accès pour les utilisateurs enregistrés : nous vous apprendrons comment paramétrer votre outil afin que seuls les utilisateurs enregistrés puissent l'utiliser.

  9. Mettre en place un système de crédit : découvrir comment créer un système de points. Cela signifie que les utilisateurs auront besoin de crédits pour utiliser votre outil, ce qui est un excellent moyen de le vendre.

  10. Ingénierie rapide : nous allons utiliser des notions d'ingénierie rapides pour vous aider à créer des invites efficaces pour générer des hooks avec l'IA.

Rencontrez votre enseignant·e

Teacher Profile Image

Hassan Aboul hassan

Founder @LearnWithHasan & @SimplerLLM

Enseignant·e

Hello, I'm Hassan.

The thing I dislike most is talking about myself, but here, I'm obliged to do so. I fell in love with computers when I was 8 years old, and by the age of 9, I had made a full Windows installation. I tried my best to learn everything I could about computers, such as Programming, Network and Server Administration, Hacking and Security, Computer Maintenance, Virtualization, Linux, and even Adobe and Auto DeskGraphic, and design products.

Computers are my life. By the time I wrote this biography, I had gained more than 8 years of experience in network and server administration.

I have more than six years of experience in .Net, Java, and C++ Programming, as well as, of course, Database design and administration.

I used to teach these subjects in... Voir le profil complet

Compétences associées

ChatGPT IA et innovation Outils d'IA
Level: Intermediate

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Cours 1: Tout le monde, c'est mon site Wordpress. Vous pouvez le voir ici, j'ai construit de nombreux outils d' intelligence artificielle directement sur Wordpress. Dans ce cours, j'ai choisi l'outil générateur AI Who. Je vais vous montrer étape par étape comment créer cet outil sur Wordpress. Par exemple, vous pouvez donner ici conseils de marketing numérique sur le sujet. Vous pouvez définir un type de contenu, par exemple pour une introduction vidéo, puis cliquer sur Générer Et maintenant, cet outil génial, alimenté par l'IA, va générer ces résultats impressionnants. Vous pouvez copier une par une, copier toutes ces fonctionnalités directement sur Wordpress. Cela vous aidera à comprendre la structure de cet outil afin que vous puissiez créer n'importe quel outil de votre choix plus tard, comme je l'ai fait sur mon site Web. Non seulement cela, je vais également vous montrer comment monétiser ces outils avec le système de points afin que vous puissiez vendre des points et transformer votre Wordpress en Si tu es prêt, commençons. 2. Cours 2: OK, mes amis. Donc, première étape, vous avez besoin d'un site Web Wordpress. C'est évident car ce cours porte sur la création de l' outil de génération de crochets AI sur Wordpress. Dans mon cas, j'ai ce site Web simple, nouveau et propre. C'est un nouveau site web que j'ai créé pour ces partitions. Si vous n'avez pas de site Web, vous pouvez simplement en obtenir un sur Ten Web, l'un des meilleurs services d' hébergement Web, peut-être Kinsa, peut-être Host Stinger comme vous le souhaitez Ou même si vous souhaitez faire un suivi sans avoir de plan d'hébergement, vous pouvez installer Wordpress localement avec Dive. Kinsta est un outil gratuit pour les installations locales de Wordpress. Vous pouvez donc télécharger Vekinsta et installer Wordpress localement sur votre ordinateur pour suivre et apprendre Dans mon cas, j'utilise mon propre serveur Web. Je l'utilise à des fins pédagogiques pour créer des sites facilement. Peut-être que je vous le montrerai dans un autre cours de toute façon. Donc, première étape, vous avez besoin d'un site Web Word Press. Ensuite, nous allons nous connecter au tableau de bord. Je vais entrer mes informations d'identification, puis aller simplement sur Plug-Ins ici et cliquer sur un plug-in en U pour les outils de construction Nous avons principalement besoin d'un connecteur. C'est ce qu'on appelle le plugin d'extrait de code WP. Cela nous aidera à personnaliser nos outils avec des codes personnalisés. Vous verrez cela plus tard dans le cours. Installez et activez. C'est ça. Nous avons maintenant notre site de presse avec version gratuite de WP Code installée. Nous sommes prêts à commencer à développer notre outil. 3. Cours 3: OK, mes amis. Voici donc notre structure d'outils de base. Si vous comprenez cela, vous pouvez peut-être créer n'importe quel outil que vous voulez, un outil puissant basé sur l'IA. Tout d'abord, nous avons notre interface, où l'utilisateur saisira un sujet et cliquera sur Générer. Lorsque l'utilisateur clique sur Générer, la demande est envoyée à notre backend Wordpress, notre tableau de bord. Laissez-moi vous montrer ceci, c'est le front end. Nous allons entrer un sujet, nous allons sélectionner un type de contenu, s'agit donc de la saisie par l'utilisateur , puis l'utilisateur clique sur Générer. Nous cliquons sur Générer. Cette demande sera redirigée vers notre tableau de bord Wordpress. C'est le retour, plus précisément aux extraits de code intégrés ici Nous ajouterons un extrait et nous connecterons le front-end à cet extrait. Encore une fois, nous La demande a été envoyée à la fin de nos extraits. Maintenant, les bribes, notre message est revenu. Nous nous connecterons à une IA ouverte pour générer le contenu ou les résultats grâce à l'intelligence artificielle. Avec l'IA, nous récupérerons les résultats. Ensuite, ils ont été pressés vers l'arrière et nous les passerons à l'avant. Et encore une fois, en revenant ici, nous obtenons les résultats de l'ouverture Y aux extraits de code WP Et cet extrait les retransmettra à nouveau à notre page d' accueil et nous les montrerons à l'utilisateur dans ce style impressionnant Donc, une dernière fois, nous avons l'interface utilisateur, l'interface, le front-end, l'utilisateur saisit l'entrée. Nous cliquons sur Générer. La demande sera envoyée à notre backend pour les extraits de code. Ensuite, les extraits de code se connecteront à API Open I pour générer le contenu Nous récupérerons le contenu et le montrerons à l'utilisateur dans le front-end. Encore une fois, j'espère que vous avez saisi l'idée. N'oubliez pas. Chaque fois que vous sentez que quelque chose n'est pas clair, vous avez besoin de plus de détails. Je suis là pour t'aider. Postez simplement vos questions. Je serai là presque tous les jours pour vous aider à répondre à toutes vos questions. Ne passez pas à autre chose. Si vous trouvez que quelque chose n' est pas clair, arrêtez-vous, demandez-moi, clarifiez les choses, puis continuez. 4. Cours 4: OK, mes amis, dans cette vidéo jouons avec l'IA et chargeons notre animal de compagnie. Je pense que tu connais ChagPT. Habituellement, lorsque vous souhaitez générer quelque chose avec CharGpt, vous dites simplement générer Par exemple, trois accroches pour ma vidéo sur le marketing, quelque chose comme ça. C'est une invite de base très simple que je n'aime pas. Vous allez voir pourquoi Chip va maintenant dire, d'accord, je serais heureux de vous aider et de commencer à générer, etc. C'est très bien. Si vous êtes débutant, vous pouvez le faire. Mais nous sommes ici pour apprendre quelque chose au-delà des débutants. Ouvrons un autre chat. Voyons voir, une autre invite de base. Nous en sommes encore au niveau débutant, mais j'ai légèrement augmenté le message. Nous disons qu'en tant que rédacteur expert spécialisé dans la génération de crochets, votre tâche consiste à générer trois crochets pour le sujet suivant Et vous pouvez passer un sujet entre parenthèses pour l'utiliser dans quelque chose comme une courte vidéo La sortie que nous sommes en train de définir doit être uniquement la liste des hooks avec son type. Ensuite, nous ajoutons la colonne de la liste des crochets , puis nous cliquons sur le sable et vous ne verrez aucune différence. Chagipeti générera directement les crochets, la liste et vous indiquera le crochet d'interrogation, le type de crochet, l'exemple de crochet, etc. Je pense donc que c'est mieux si vous créez un outil, vous ne voulez que le résultat. L'astuce consiste donc à l'utiliser dans votre invite. Je ne sais pas si vous êtes sur mon site Web et si vous avez consulté mon cours d'ingénierie rapide ou vous avez regardé mon cours gratuit sur ma chaîne Youtube. C'est l'un des meilleurs cours sur l'ingénierie rapide sur Youtube. Près d'un million de vues maintenant, avec près de 35 000 likes Je ne me vante pas, mais j'ai vraiment travaillé dur sur ce cours gratuit sur Youtube Et vous pouvez consulter les commentaires ci-dessous pour voir les avis sur ce cours gratuit. Vous pouvez y aller maintenant et le vérifier quand même, en revenant à Cha GPT Il s'agit donc de l'invite de base que vous pouvez utiliser pour générer des hooks. Comme je l'ai dit, nous en sommes encore à un niveau de base. Nous ajustons simplement l'invite avec quelques conseils d'ingénierie rapides, en ajoutant le rôle et en ajoutant le résultat Et en ajoutant ceci à la fin pour générer directement uniquement les hooks. Allons maintenant un peu au-delà du niveau débutant et nous vous montrons d'une manière ou d'une autre une invite avancée. Encore une fois, je vais ouvrir le chat. Et voici ma nouvelle invite. C'est un peu gros, tu sauras pourquoi maintenant. Maintenant, l'invite est presque la même en termes de définition d'un rouleau. Mais maintenant, vous pouvez voir que la tâche est définie ici. Votre tâche consiste à analyser les exemples de crochets fournis, puis à utiliser les meilleurs modèles adaptés pour générer les trois nouveaux crochets pour le sujet suivant et à les utiliser sous cette forme sortie ne doit être que la liste des crochets du type. Maintenant, je fournis les exemples de crochets. Dans cette invite, nous alimentons notre outil ou notre invite avec les données que nous avons collectées. Il ne s'agit pas simplement de hooks génériques générés par l'IA. Je demande à l'IA de générer sur la base mes propres exemples et modèles que j'ai collectés et je sais que cela fonctionne. Et puis la liste à nouveau pour générer uniquement les hooks s'exécute. Et maintenant, le résultat sera le même, mais le contenu est différent. Il utilise mes modèles. Maintenant, mon hook tape comme l'entrée en question, le fait, l'appel à l' action, etc. Il choisira le modèle le mieux adapté au sujet et au cas d'utilisation. Encore une fois, pour en revenir à ma chaîne Youtube, je ne sais pas si vous me suivez. J'ai publié une vidéo il y a quelques mois sur la création de PT personnalisés de la bonne façon. Dans cette vidéo, je vais vous montrer comment créer des PT personnalisés qui se vendent vraiment et se démarquent de la concurrence. La bonne façon de créer GPT. J'ai mentionné que l'un des meilleurs moyens est de créer un GPT basé sur vos propres données Autre exemple, si vous allez dans ma section d'outils, nous avons le générateur de titres Youtube. Beaucoup de personnes créent ces outils. Bloquez un générateur plus serré contre un générateur plus serré. Mais la différence ici, c'est que si nous sélectionnons un sujet et que nous cliquons sur Générer, l'invite que j'utilise derrière cet outil n'est pas une invite quelconque. Il est également construit sur mes meilleurs modèles que j'ai collectés. Si vous allez ici, laissez-moi vous montrer cette invite en tant qu'expert, Youtube bla, bla, bla Je partage ici mes modèles de titres Youtube à succès. L'invite utilise donc mes données dont je sais qu'elles fonctionnent et génère des titres en fonction de cela. où l'importance de connecter vos outils à vos propres données. C'est ainsi que vous vous démarquez de la concurrence, car n'importe qui peut désormais créer un générateur de crochets avec l'IA, ou un générateur de titres Utu, ou n'importe quel générateur Mais l'invite que vous créez est différente. C'est pourquoi je dis toujours qu'il faut apprendre l'ingénierie rapide de la bonne manière et comprendre l' importance d'ajouter ses propres données lors de la création d'outils d'IA. C'est donc l'invite que vous allez utiliser dans notre outil. Plus tard, nous parlerons plus en détail d'une invite plus avancée qui nous permettra et nous aidera à créer cette interface utilisateur géniale. Vous pouvez voir ici l'interface utilisateur structurée que nous avons. Une autre invite nous aidera à le faire de toute façon. Pour le moment, j'espère que tu as compris l'idée. Vous pouvez utiliser une invite de base ou une invite avancée comme la mienne basée sur des modèles et des données réellement réussis. D'ailleurs, toutes les instructions, tout sera joint aux conférences Ne vous inquiétez pas de le copier ou de l'écrire. Je vais joindre toutes les instructions et les scripts. Tout ce que nous utiliserons sera joint à ce cours. 5. Cours 5: OK, mes amis, lors de la dernière conférence, je vous ai montré l' invite que nous allons utiliser et nous avons généré les hooks. Mais dans le GPT, nous avons les crochets. Waouh, parfait. Mais maintenant, comment passer à Word Press. Nous voulons générer des hooks dans Word Press. C'est le but du cours. Dans cette conférence, nous allons aller un peu plus en profondeur. Nous allons créer le backend. Vous vous souvenez des extraits de code WP, de ce plugin. Vous vous souvenez de la structure, du backend Wordpress qui se connectera à open pour générer les hooks pour nous. Nous allons maintenant configurer cette partie ici. Nous allons connecter le back-end à une IA ouverte pour générer les hooks qu'il contient ou y intégrer des extraits de code WP Créons et utilisons un extrait de code. Je vais sélectionner Utiliser un code personnalisé. Et maintenant, je vais appeler cet extrait Basic Open AI Nous allons commencer par l'exemple de base pour comprendre comment les choses fonctionnent. Sélectionnez le type de code en tant qu'extrait PHP et hop, voici l' Ne t'inquiète pas, je sais que tu peux le penser maintenant. OK, je ne suis pas développeur. Je ne peux pas créer ces scripts ou ces extraits. Je ne connais pas HP. Je ne connais pas non plus HP. Je n'ai jamais écrit une seule ligne de code en PHP. Je viens de discuter avec le ChagPT et généré cette fonction Je l'utilise et elle est parfaite Et si vous connaissez un peu le codage, vous pouvez comprendre ce script simplement en le parcourant Nous définissons donc ici le sujet comme une entrée. Et voici notre invite à générer trois hooks pour un blog sur un certain sujet. Ensuite, nous entrons l'IA ouverte, l'URL, l'API d'open I. Ensuite, nous saisissons notre clé d'API, nous construisons l'appel, puis nous envoyons un appel à l'API pour ouvrir l'IA. Et nous sommes en train de lire la réponse et de la renvoyer. C'est ça. Encore une fois, ne vous inquiétez pas pour les détails, la fonction fonctionne parfaitement. Vous pouvez simplement le copier et l'utiliser sur votre site Web. Il s'agit de l' exemple de base sur la façon de générer du texte avec l'IA. Activez ce script avec Open AI. Mais n'oubliez pas de saisir votre propre clé d'API ici. Si vous ne savez pas comment ouvrir simplement, cliquez sur API de journalisation. Ici, accédez simplement aux clés d'API. Cliquez sur, créez une nouvelle clé secrète. Et je dirais que les outils testent tout pour moi. Maintenant, créez une clé secrète, copiez-la, revenez ici, collez la clé et enregistrez l'extrait Parfait. La fonction est maintenant enregistrée dans des extraits de code Maintenant, pour nous assurer que cette fonction fonctionne sur votre site Web, nous voulons la tester avant créer l'interface et le front-end, etc. Nous voulons nous assurer que cela fonctionne et nous recevons une réponse d'Open AI pour le tester. Nous disposons de nombreux outils différents. Nous pouvons utiliser une application appelée Postman. Si vous avez du code Visual Studio, j'ai installé le plug-in ou l'extension Thunder Client. Vous pouvez l'utiliser pour tester ou même utiliser outils en ligne comme celui-ci Rock Been. Je vais laisser les liens et tout cela en pièce jointe. L'idée est de tester cet appel d'API vers notre site Web. Cette demande ou ce site Web. Je vais maintenant le faire à la fois dans Visual Studio Code et en ligne pour vous montrer différentes méthodes dans Under Client. Ici, nous sélectionnons la publication en tant que demande, en tant que type de demande. Et puis vous obtenez l'URL de votre site Web comme ceci. Vous collez ici vous dites Sp admin, admin Ajax, Php. Il s'agit de l'URL que nous allons utiliser. Ensuite, nous passons au corps, puis à la formation du code, nous ajoutons le nom en tant qu'action. Il s'agit du nom de la fonction. Nous ajoutons ici le paramètre qui est le sujet dans notre cas. Laissez-moi vous montrer ceci. L' action est le nom de cette fonction. Nous le copions. C'est l' action que nous collons ici. Si vous regardez à l'intérieur de la fonction, nous avons le sujet en tant que paramètre. Nous copions simplement ce passé ici, vous voyez, nous le collons ici. Nous ajoutons une valeur telle que le marketing numérique, tout ce que vous souhaitez. Si nous avons plusieurs paramètres, nous pouvons les ajouter. Nous verrons cela dans un instant. Nous avons le nom de l'action, le nom de la fonction, et nous avons le sujet comme paramètre. Cliquez sur Envoyer. Vous pouvez voir maintenant que nous avons reçu une réponse d'Open AI dans la section du contenu. Voici nos hameçons. Vous voyez, voici nos crochets. De même, si vous souhaitez tester avec cet outil en ligne , il vous suffit d'ajouter l' URL dans le contenu. Vous sélectionnez l'URL du formulaire codée, vous ajoutez le sujet d'action, cliquez sur Envoyer. Vous pouvez voir ci-dessous que nous avons la réponse pour nous assurer que notre fonction fonctionne parfaitement. Et si nous voulions que la réponse ne contienne que les titres ? Nous n'avons pas besoin de toutes ces informations issues de l'IA ouverte, comme l'objet, le modèle, les jetons, et tout ce que nous voulons, les hooks générés, comment nous pouvons extraire uniquement cette valeur ici. Ce que je vais faire, c'est simplement modifier la réponse que je reçois à partir de cet extrait Encore une fois, j'ai utilisé GP pour générer cela. Je n'ai écrit aucun de ces codes. Vous pouvez voir simplement que je suis ici en train de naviguer dans l'objet de données Je sélectionne les choix, le premier choix, le message et le contenu. Si vous revenez ici, vous verrez que nous avons le choix. Ensuite, nous avons le premier , puisqu'il s'agit d'un tableau, puis nous avons le message, puis nous avons le contenu, la même manière que j'ai accédé au contenu. Et renvoyez la mise à jour du contenu. Revenons maintenant en arrière et testons le même envoi d'appel. Vous allez voir maintenant que je ne reçois que le contenu, les hooks directement. Et c'est ce que nous voulons. Nous voulons que le contenu soit généré directement afin pouvoir y accéder et le montrer ultérieurement à l'utilisateur dans l'interface utilisateur. en revenir à notre extrait, que vous voyez ici dans cette fonction de base, nous n'utilisons que le sujet comme paramètre Nous n'avons qu'une seule entrée dans notre invite, si vous vous souvenez, nous en avons deux. Nous avons le sujet et nous savons où nous allons l'utiliser. N'oubliez pas que nous avons deux entrées, le sujet et le type de contenu, où nous allons utiliser ce hook dans une courte vidéo, dans un article en bloc, etc. Nous avons deux entrées, nous devons les mettre à jour avec une autre entrée. Nous allons simplement modifier les paramètres et l'invite comme ceci. Nous avons un autre sujet, nous avons le paramètre d'utilisation. Nous avons le nouveau message. Si, souvenez-vous d'être retourné ici, nous avons, je pense, celui-ci. Oui, cette invite comporte deux paramètres. Voici mon message. Nous avons le paramètre d'utilisation et le paramètre de sujet. Vous pouvez ajouter 34 entrées, ce que vous voulez simplement en les ajoutant à l' invite de cette façon. Maintenant, si je mets à jour ce script et que je reviens ici pour le tester, j'ajouterai maintenant l'utilisation. Je dirais blog, par exemple. Cliquez sur Envoyer et perfectionner, nous avons obtenu notre crochet de réponse et l'exemple de crochet, et ainsi de suite. C'est ainsi que vous pouvez créer une fonction ou un extrait de code dans les extraits code WP pour connecter votre site Web Wordpress à Pour créer un outil d'IA, vous devez comprendre le concept des paramètres et de l'invite. Modifiez les entrées, modifiez l'invite, et vous avez un outil d'IA, peut-être un générateur de blocage plus serré, peut-être un rédacteur d'IA Quoi qu'il en soit, décidez simplement de vos entrées, rédigez votre invite. Et vous avez votre outil, le back-end de votre outil. Il est maintenant temps de créer l'interface utilisateur. Jusqu'à présent, nous avons créé le backend. Nous avons généré les hooks grâce à l'IA. Nous voulons maintenant renvoyer les résultats et créer l'interface utilisateur sur Wordpress. 6. Cours 6: OK, mes amis, il est maintenant temps de commencer par le front-end pour créer l' interface utilisateur, l'interface utilisateur. Donc, pour simplifier les choses, nous allons commencer par l'interface utilisateur de base. Si vous vous souvenez, nous avons deux entrées. L'utilisateur saisit un sujet, nous sélectionnons le cas d'utilisation, ou l'utilisation sur une courte vidéo, sur un blog, article, etc., puis clique sur un bouton pour générer le résultat, les crochets et les résultats. Les crochets apparaîtront dans une boîte. Nous avons principalement une zone de texte pour saisir un sujet, nous avons une liste déroulante pour sélectionner le cas d'utilisation. Nous avons un bouton et une boîte de sortie. Créons ceci. Donc, j'ai simplement ouvert ChagIpt et j'ai demandé de créer l'interface utilisateur pour Vous voyez ce message ? Je lui ai dit que vous êtes un expert en HTML. Oui, S. Et votre tâche est de m'aider à créer une interface utilisateur professionnelle, simple et propre pour mon outil, le générateur de crochets. L'outil comporte deux entrées principales, Textbox et Drop down, et les résultats seront affichés sous forme de texte plus tôt Ensuite, je lui ai demandé de générer uniquement le design pour moi, sans aucun autre code, juste du code HTML et CSS, le front-end du code de conception, et de s'assurer d'aligner correctement tous les contrôles et ajouter un espacement approprié entre eux. J'utilise cette invite et elle m'a simplement généré le code HTML de l' outil et le style CSS. Je l'ai juste copié et utilisé directement. N'oubliez pas que je vais laisser tous les codes, toutes les instructions, tout Ne t'inquiète pour rien pour le moment. Vous trouverez tous les codes joints au cours. Mais s'il vous plaît, faites un suivi. Maintenant, pour comprendre le concept et la façon dont je crée l'interface utilisateur, j'utilise simplement CharGPT Ce que nous pouvons faire, c'est copier ce code et créer un dossier U. Il s'agit d'une méthode de base simple. Je vais le nommer n'importe quelle interface utilisateur par exemple, puis créer deux fichiers texte. Le premier est, par exemple, l'interface utilisateur. Et remplacez XT par du HTML pour changer le type du fichier. Et l'autre, ça s' appelle Styles for styling. Encore une fois, allez dans ChagPT, copiez le code HGML et le code CSS et collez-les dans Il suffit d'écrire un clic et de le modifier avec un bloc-notes par exemple, et de coller le code ici. Ensuite, ouvrez simplement ce fichier et vous pourrez voir notre formidable outil de génération de crochets. Bien sûr, cela ne fonctionne pas pour le moment, mais vous pouvez voir que nous pouvons saisir un sujet ici. Nous pouvons sélectionner un type tel que bloc, publication, vidéo, etc., et cliquer sur Générer pour obtenir les résultats dans cette case cas où il y aurait un problème d' espacement ou si quelque chose ne va pas dans le design Vous pouvez simplement discuter avec ChagPT et demander à résoudre le problème C'est pourquoi je vous encourage et vous conseille toujours d'apprendre au moins le codage de base, le CML de base, le CSS de base, le script Java de base Juste au cas où vous voudriez générer des outils et générer du code avec ChaGpt pour comprendre ce qui est Et si vous voulez demander et résoudre quelque chose, vous pouvez le demander afin comprendre ce qui se passe de toute façon. Voici donc notre interface utilisateur. Notre interface de base est maintenant prête. La deuxième étape consiste à connecter cette interface, ce bouton, à notre backend War Press. N'oubliez pas que nous avons créé ici cette fonction qui génère les hooks. Nous voulons maintenant connecter cette interface utilisateur à notre extrait de code. C'est ce que nous allons voir lors de la prochaine conférence. 7. Cours 7: OK, donc jusqu'à présent, nous avons créé le back-end et le front-end. Il est maintenant temps de connecter les deux. Dans cette conférence, nous allons travailler sur ces flèches. Nous allons connecter le front-end à notre back-end. Voyons comment, avant cela, vous vous demandez peut-être si nous avons créé cette interface utilisateur de base. Mais dans l'introduction, je vous ai montré cette interface, cette interface utilisateur professionnelle Ne vous inquiétez pas, nous commençons cet exemple de base et je vous montrerai plus tard comment optimiser et créer cette interface utilisateur. Suivez-moi maintenant étape par étape et nous aborderons tout. Nous avons cette interface HTML CSS. Nous devons maintenant nous connecter à notre extrait de code. Voici comment en utilisant un script Java pour revenir à ChagIpt après avoir généré le front-end pour moi, je le demande simplement à nouveau générer et de connecter l'interface utilisateur à Je l'ai dit, veuillez générer le code JS pour appeler mon mot, appuyer sur la fonction Ajax et afficher les résultats dans la zone de texte. Assurez-vous d'ajouter un chargement pendant que l'opération est en cours. Et voici ma fonction Ajax. Et j'ai utilisé la fonction Ajac complète, l'extrait de texte, afin qu'il puisse mieux comprendre comment générer le Encore une fois, il a généré un script simple. Vous pouvez voir le script. Il l'a généré. Je copie juste pour revenir à notre dossier maintenant ici, créer un nouveau fichier texte et je l'appellerai script JS oui et modifiez-le script JS oui et simplement avec le Bloc-notes et collez le code Vous pouvez voir ici le sujet et le type de contexte utilisés dans notre cas. Vous pouvez définir ici les variables, obtenir la valeur et simplement appeler la fonction de base generate hooks lorsque vous appuyez dessus , puis obtenir les résultats dans la zone de résultats. Ici, nous devons faire une chose, changer l' URL Lee de votre site Web. J'ai ajouté ce commentaire ici, remplacez une URL Jack. Retournez simplement sur notre site Web, copiez-le, collez-le ici et enregistrez. Ouvrons à nouveau l'interface utilisateur. Entrez un sujet, par exemple, des publicités Facebook, un didacticiel, n'importe quoi, et je sélectionnerai ici une publication en bloc, par exemple, et je cliquerai sur Générer. Oups, nous avons reçu une erreur qui n'a pas pu être récupérée. Si vous voyez quelque chose comme ça, la première chose à faire est d'ouvrir ici les outils de développement dans votre navigateur et de vérifier l'erreur dans la console. Vous voyez, cela me dit qu'il a été bloqué par la politique du CRS. Cela se produit parfois lorsque vous ouvrez l'outil dans le navigateur pour résoudre ce problème. Revenez à votre extrait ici et nous allons ajouter quelques lignes pour désactiver cette politique CORS du navigateur C'est quelque chose lié à la sécurité des origines croisées. Lorsque vous appelez votre fonction depuis différents domaines, c'est en quelque sorte hors de portée pour le moment. Mais réparons-le maintenant. Juste pour continuer notre travail, je vais simplement ajouter les lignes suivantes ici. Je lui dis d' autoriser toutes les origines. N'empêchez aucun domaine ni aucun autre domaine d' accéder à cette mise à jour de fonction. Réessayons maintenant, actualisons l'outil. Publicités Facebook pour travailler, et sélectionnons chat, fr, générer et perfectionner Vous pouvez voir que nous avons maintenant les crochets dans la zone de texte des résultats. Parfait. Sélectionnez autre chose, par exemple, la croissance de Youtube, n'importe quel sujet, générez. Maintenant, l'outil fonctionne parfaitement. Nous obtenons 123 hameçons. Parfait. Nous avons maintenant connecté notre interface utilisateur de base à notre extrait de rétrocode 8. Cours 8: OK, mes amis. Donc, jusqu'à présent, nous avons créé l'interface utilisateur, le dos, et sur Wordpress, nous avons connecté l'interface utilisateur à Wordpress. L'outil génère les crochets. Tout est parfait, mais l'outil n'est pas sur Wordpress. Nous voulons le publier sur notre site Web. Ici, sur ce site. Alors faisons-le dès maintenant. Je vais revenir ici au tableau de bord. Ensuite, appuyez sur Pages, puis cliquez sur une page Maintenant, le moyen le plus simple et le plus basique consiste simplement à créer une page comme ce générateur de crochets par exemple. Ensuite, ajoutez trois blocs HTML. Le premier concerne le code CSS. Accédez simplement au fichier, ouvrez les styles. Par exemple, ici avec le Bloc-notes, il suffit de le copier et de le coller dans ce bloc. Puis un autre bloc pour l'outil HTML, il vous suffit de le copier à nouveau ici, de le copier-coller. Un autre pour Javascript, comme celui-ci, ouvrez et récupérez le fichier Javascript, copiez-le, et encore une fois, collez-le ici. Il vous suffit de publier l'outil. Il existe un moyen très simple. Ouvrez la page et vous verrez maintenant que nous avons le générateur Who. Mais le design est cassé. Pourquoi ? Tout simplement parce que si vous souhaitez ajouter du CSS et du Javascript de cette façon, vous devez ajouter et fermer des balises. Ajoutez simplement ici un style comme celui-ci. Ouvrez-le, puis copiez-le. Et descendez et fermez la balise de style. Maintenant, pour comprendre le style, pareil pour Javascript, nous allons dire ici script puis descendre et coller ici. Et ferme-le. Maintenant, mettez à jour. Voyons maintenant la magie, ce qui va se passer, rafraîchir et perfectionner. Vous pouvez maintenant voir l' ensemble du générateur. Mais il y a un problème de design. Habituellement, vous verrez des conflits avec un thème ou quelque chose comme ça. Pour résoudre ce problème, revenons à notre tableau de bord Wordpress et cliquez sur Thèmes d'apparence. Installons un autre thème. Par exemple, ajouter. Sélectionnons, par exemple, Hello Elementor Activate Alors, ajoutons-le maintenant, actualisons-le , et vous pouvez voir maintenant que l'outil apparaît ici. Le design est toujours mauvais. Je vais régler ça tout de suite. Mais voyons si l' outil fonctionne à nouveau. Je vais saisir un sujet, sélectionner quelque chose, le générer et le perfectionner. L'outil fonctionne sur notre site Wordpress. Parfait. Maintenant, la meilleure approche, ou ce que je préfère faire, est d'installer un plugin appelé Elementor Elementor est un concepteur de pages Web. Cela nous aidera à concevoir les pages Web et à créer des designs professionnels comme ceux de mon site Web. exemple, si vous allez ici sur mon site web, vous pouvez voir ici l'outil, les boutons de partage, ces zones rigides, etc. Et le menu et l'élément de pied de page vous y aideront Si vous travaillez sur Wordpress, je pense que vous connaissez Element. C'est l'un des constructeurs de pages Web les plus populaires pour Wordpress avec 5 millions d'installations. Je l'ai installé. Maintenant, allez à nouveau sur Pages ou sur la même page que celle sur laquelle nous avons travaillé. Où sont les pages de la page ? Toutes les pages le génèrent. Cliquez maintenant sur Modifier avec Elementor. Je vais supprimer tous ces codes. Maintenant, supprimez la mise à jour et cliquez sur Modifier avec Elementor. Voici notre page, très simple. Je vais ajouter ici un conteneur. Voici le conteneur. Je vais ajouter un bloc HTML, un bloc comme celui-ci. Encore une fois, je copierai les codes, commençant par le contrôle de modification du style. Retournez ici, n'oubliez pas, nous ajouterons du style. Ensuite, nous allons ajouter le code HTML. Et le code Javascript ici est le code du script. Copions le code du script. Contrôle de script Contrôle C, nous avons le code HTML. Il suffit de copier et coller entre les deux. Et vous pouvez retirer la section de tête. Conservez simplement le code de l'outil principal. Et vous le verrez tout de suite, directement dans le générateur. Vous pouvez voir que c'est un peu collé en haut. Pour résoudre ce problème, par exemple, vous pouvez accéder au navigateur et cliquer sur le conteneur Ensuite, section de danse, nous avons la marge supérieure. Nous pouvons ajouter, par exemple, 100. Et vous pouvez le voir, maintenant l' outil n'est plus bloqué. Quoi qu'il en soit, l'idée est que vous pouvez créer vos propres pages, sélectionner le thème approprié et coller le code HTML de l'outil dans votre page. C'est aussi simple que cela. Prévisualisons les modifications en tant que générateur de porcs Encore une fois, vous pouvez masquer le titre si vous le souhaitez, ou le masquer de l'outil comme ceci. Il suffit de sélectionner le code HTML ici. Vous verrez dans le code HTML que nous avons le tag ho generator H one Vous pouvez supprimer cette mise à jour. Maintenant, nous allons passer à l'outil comme je le fais ici, vous pouvez voir que ce titre est avec elementor, ce sous-titre est avec element L'outil de code est là. Je n'ai aucun titre dans l'outil. Je colle simplement le code principal dans cette zone. Retournons ici. Testons-le, ajoutons-le, générons-le, et il fonctionne parfaitement. Très sympa. Nous avons maintenant notre outil sur notre site Web Wordpress. Encore une fois, si vous rencontrez le moindre problème, je suis là pour vous aider. À tout moment, vous pouvez également discuter avec ChaChipt. Si vous rencontrez des problèmes de design, style ou autre, il peut le résoudre pour vous. 9. Cours 9: OK, mes amis, dans cette conférence, nous voulons passer de cette conception de base à cette interface utilisateur propre et professionnelle. Cette conférence est très importante si vous comprenez le concept sous-jacent à cette conférence. Vous pouvez créer presque tous les outils que vous voulez. Revenons ici à l'interface utilisateur de base. Si vous regardez les résultats, la réponse, c'est du texte pur. Le principal problème ici, concentrez-vous, est que nous avons le résultat, car ce texte peut être affiché dans une zone de texte comme celle-ci ici. Mais il est très difficile de transformer ce texte en un plan d'incendie criminel, analyse organisée des données de conception Nous disons « déchets dedans », « déchets ». Si vous avez de mauvaises données, vous obtiendrez de mauvais résultats. Si nous voulons appliquer ce concept dans notre cas, si nous avons cette mauvaise réponse, qui est un simple texte, il est très difficile d' avoir ce design organisé. Pour avoir cette conception organisée et structurée, nous voulons une sortie structurée, une réponse structurée. Alors, comment pouvons-nous le faire, comment pouvons-nous récupérer et obtenir des réponses structurées pour créer l'interface utilisateur que nous voulons. C'est là que ça revient. Le pouvoir d'une ingénierie rapide et de la création de la meilleure prompte Revenons ici pour chatter GPT et ouvrir un chat en U. N'oubliez pas notre message avancé dans cette conférence. Nous allons l'appliquer. Nous allons l'utiliser. Nous générons des hooks basés sur des données, n'oubliez pas. Et nous utilisons ce hack pour générer directement la liste des invites. Vous voyez la liste des instructions ? Nous voulons maintenant obtenir une réponse structurée. Nous voulons obtenir une réponse organisée à laquelle nous pouvons facilement accéder pour créer l'interface utilisateur de notre choix. Voici notre invite super avancée. Ouvrons à nouveau une nouvelle discussion. Et jetons un coup d'œil à cette nouvelle invite. Encore une fois, nous générons des hooks sur la base de l' exemple de hooks fourni et de nos données. Mais regardez maintenant ce qui a changé. La sortie ne doit être qu' un Jason valide comme suit. Et j'ai donné à l'invite un exemple de la façon dont je veux que la réponse ressemble au type de crochet et la réponse structurée adjacente au crochet. Si vous ne savez pas ce qu'est Jason, il s'agit simplement d'une représentation structurée des données. Au lieu d'avoir un texte factice, nous avons cette réponse structurée Et à la fin, j'ai dit que Jason s'y opposait. Nous ne pouvons donc obtenir directement que la réponse de Jason. Jetons maintenant un coup d'œil aux résultats. Vous pouvez voir maintenant que la réponse est Jason et nous avons organisé trois hooks afin que nous puissions accéder à chacun d'eux seuls et que nous puissions y accéder facilement pour créer des interfaces utilisateur sur cette base. J'en ai parlé plus en détail. Dans deux articles en bloc, celui-ci traite des chaînes de fonctions et celui-ci explique comment créer rapidement des outils informatiques et j'ai partagé mes scripts ici. Je vais créer un lien vers ces articles bloqués si vous souhaitez en savoir plus. Mais encore une fois, ce que vous devez comprendre si vous voulez créer des interfaces utilisateur organisées, vous devez obtenir une réponse structurée à partir du modèle d'IA du modèle de langage GPT dans notre cas, ou de l'Open API dans notre cas Nous avons donc cette sortie maintenant, nous pouvons l'utiliser pour créer notre interface utilisateur. J'espère que vous avez repris l'idée Si vous avez des questions et que vous pensez que quelque chose n' est pas clair, je suis là pour vous aider. Nous allons donc mettre à jour notre fonction maintenant avec cette invite. Je vais le copier et revenir à notre extrait ici. Et maintenant, nous allons remplacer notre invite. Vous voyez ici l' invite à nouveau à coller. Mais maintenant, nous avons un petit problème. Généralement, les chaînes de caractères n'importe quel langage de sondage ou le texte sont placés entre deux codes doubles Puisque nous avons ici des codes doubles dans notre code ou dans notre invite, nous devons échapper à ces doubles codes. Il suffit d'ajouter une barre oblique inverse comme celle-ci pour pouvoir échapper à ces personnages Il suffit de les ajouter un par un. N'oubliez pas de modifier à nouveau les entrées. Je vais supprimer le marketing numérique. Voici ce que je fais, beaucoup devront vous montrer comment faire au cas où vous voudriez vous tester. Vous ajoutez deux points et vous ajoutez la variable à l'intérieur. Encore une fois, pour les codes doubles d'âge. Et c'est tout. Je pense que le message est maintenant prêt. Nous l'avons ajouté. Nous en avons toujours un ici. Celui-ci ici. OK, parfait. Essayons-le maintenant. Je vais enregistrer la mise à jour, la mettre à jour Passons maintenant à notre outil. Encore une fois, je rafraîchis ici. Entrez un sujet, Google Ads, par exemple. Tout est généré et parfait. Vous pouvez voir que nous avons maintenant la sortie structurée de Jason, parfaite. Nous avons maintenant cette sortie de Jason. Nous pouvons créer l' interface utilisateur sur cette base. J'espère que vous avez eu l'idée et vous avez compris ce que nous avons fait ici. Encore une fois, je vous rappelle que je vous encourage à apprendre, à accélérer l'ingénierie, à élaborer de telles instructions Cela vous aidera non seulement à créer des outils, mais aussi à tirer le meilleur parti des modèles linguistiques. Si vous ne pouvez pas investir dans des cours premium, vous pouvez consulter mon cours gratuit sur Youtube. Je garderai des liens vers toutes ces ressources et je les joindrai à ces conférences. Quoi qu'il en soit, nous avons maintenant la réponse structurée. Il est maintenant temps d'utiliser cette réponse pour créer cette interface utilisateur, cette interface utilisateur. Comme il ne s'agit pas d'un cours HTML, CSS et Javascript, et qu'il est hors de portée de vous l' enseigner pour le moment, j'ai créé l'interface utilisateur, le modèle de base pour vous et je le partagerai avec vous dans ce cours. Nous pouvons l'utiliser et si vous voulez peaufiner, changer quelque chose, demandez à GPT de changer quelque chose pour Cela dépend de vous. Je te le donnerai gratuitement. Vous pouvez l'utiliser directement sur votre site Web. Et d'ailleurs, ce modèle peut être utilisé pour la génération de titres, peut être utilisé pour de nombreux outils, tout ce qui a une ou deux entrées et génère une liste de choses. Quoi qu'il en soit, nous allons simplement retourner dans notre dossier et créer trois fichiers. Encore une fois, même opération, mais maintenant nous avons juste un nouveau code, le nouveau code de conception. Vous trouverez les fichiers joints à cette conférence. Il suffit de les obtenir, de les télécharger et vous trouverez un I avancé, script avancé de style avancé. Si vous ouvrez cette interface utilisateur avancée, vous verrez le nouveau design. Essayons-le. Je vais dire ici, par exemple, un CO donne des conseils pour un documentaire par exemple, générer et perfectionner. Vous pouvez voir maintenant que l'interface utilisateur fonctionne parfaitement. Juste un rappel, lorsque vous copiez le script, ouvrez-le avec le Bloc-notes ou l'éditeur de votre choix Et changez l'URL de base ici, votre site Web, l'URL, c'est tout. Et vous aurez un générateur Who entièrement fonctionnel. Ensuite, vous pouvez copier, comme nous l' avons fait avec le design de base, nous pouvons copier le Wordpress et le publier sur votre site Web comme je l'ai fait ici, et ils l'ont sur mon site Web Wordpress. Lors des prochaines conférences, nous verrons comment nous pouvons restreindre l'accès à cet outil aux seuls utilisateurs connectés. Et comment implémenter cet outil avec le système de points. Si vous remarquez ici, si vous cliquez maintenant sur Générer, les points diminueront. Nous consommons donc des points ou des crédits lorsque nous utilisons les outils. Cela revient donc à créer un SAS à l'aide de ces outils. Nous verrons également comment procéder dans les prochaines conférences. 10. Cours 10: OK, mes amis, voyons maintenant comment nous pouvons restreindre Ace à cet outil uniquement pour les utilisateurs connectés. C'est donc notre outil. Encore une fois, je vais actualiser et maintenant tout le monde peut l'utiliser. Ce que nous pouvons faire, c'est simplement revenir à notre extrait. Où est notre extrait ici ? Avant d'atteindre le code, le code principal, nous vérifierons si l'utilisateur est connecté. Regardez comme c'est facile de le faire avec la guerre. Appuyez sur cette simple ligne de code. Si l'utilisateur n'est pas connecté, ce point d'exclamation s'affiche Si vous avez déjà codé, vous savez que cela signifie que si aucun utilisateur n'est connecté, je le renverrai d'abord. Ça y est, mise à jour. Et maintenant, ce qui est bien dans ce modèle, que j'ai déjà créé la logique de connexion. Voyons voir ça. Je vais encore une fois dire un conseil sur le CO , cliquez sur Générer. Maintenant, il vous indiquera que vous devez d' abord vous connecter et cliquer sur un bouton. Et nous vous redirigerons vers la page de connexion. Maintenant, dans ce cas, j'ai mis ma page de connexion utilisateur. Vous devez modifier la CRL. Je vais vous dire où dans un instant, mais vous pouvez maintenant voir à quel point il est facile de protéger vos outils contre tout accès non autorisé. Seuls les utilisateurs connectés peuvent accéder à cet outil. De cette façon, vous pouvez collecter et créer listes d' e-mails ou, comme vous le verrez ensuite, nous ne pouvons autoriser que les utilisateurs disposant de suffisamment de crédits ou de points à utiliser cet outil. Ajoutez simplement cette petite ligne de code et vous avez terminé. Revenons au script avancé et ouvrons l' édition du fichier JS . Et si vous descendez, vous verrez que nous avons cette fenêtre contextuelle d' affichage, une fenêtre contextuelle de connexion. Vous pouvez voir ici le lien vers ma page de connexion utilisateur. Modifiez simplement cela et vous pouvez également modifier l'image si vous voulez le PNG sans axe que vous pouvez voir ici. Revenons-y encore une fois. Cette image ici, vous pouvez modifier si vous le souhaitez. C'est à vous de décider. C'est ainsi que nous pouvons restreindre l'accès aux utilisateurs connectés. Implémentons le système de points et commençons à vendre ces outils lors de la prochaine conférence. 11. Cours 11: C'est bon, mes amis. Maintenant, gagnons de l'argent avec nos outils. Transformons notre site Wordpress en entreprise. En revenant sur mon site Web, vous verrez à nouveau que chaque fois que vous utiliserez l' outil, cliquez sur Générer. Regardez le solde de points ici, diminuez-le. Vous pouvez voir que nous consommons nos points. Si vous cliquez sur les points ici, vous serez redirigé vers la page des points où vous pourrez racheter des power points. C'est comme n'importe quel système Ct, n'importe quelle entreprise SA, mais sur Wordpress. Voyons comment procéder dans cette conférence. Première étape, nous revenons à notre tableau de bord Wordpress. Nous voulons installer un plug-in qui gère facilement le système de points ou de crédits. Revenez ici pour les plug-ins, les ajouter et les brancher. Ça s'appelle mon Crid. Installez-le. Nous y voilà. Installez et activez. Parfait. Gardons ça pour le moment. Et nous y voilà. Nous avons les points. Vous pouvez changer le nom si vous voulez des crédits ou quelque chose comme ça. Mais maintenant, il se concentre sur le point principal. Accédez aux utilisateurs. Ici, tous les utilisateurs. Ensuite, vous pouvez voir que l' administrateur n'a aucun point. Vous pouvez cliquer sur Ajuster. Et ajoutons quelques points pour le moment, mettons à jour. Maintenant, nous pouvons voir que j' ai 100 points. Parfait, je peux tester avec. Maintenant, si l'utilisateur est connecté puis clique sur Générer, nous voulons vérifier s'il dispose du bon équilibre pour utiliser l'outil. Voyons comment procéder à nouveau. Dans War Press, revenez aux extraits de code. Les Cold Snippets Et ouvrez notre extrait de générateur Wo que nous avons créé auparavant. Et ce que nous allons faire maintenant, vous pouvez le voir ici, déplaçons-le ici. Si l'utilisateur est connecté, nous allons déménager et maintenant nous allons vérifier le solde. OK, et vous allez ajouter ce code simple. Nous allons obtenir le nom d' utilisateur. L'utilisateur est connecté. Nous avons passé cette condition afin d'obtenir le nom d'utilisateur. Ensuite, nous allons obtenir le solde utilisateur avec cette fonction simple. Vous voyez maintenant à quel point il est facile de mettre en œuvre le système de points avec Word Press. Comme il s'agit de fonctions intégrées, si le solde est inférieur à cinq, nous n'enverrons aucun solde. C'est aussi simple que cela. Enfin, avant renvoyer la demande à l'utilisateur, nous voulons nous assurer que nous déduisons des points Nous avons également cette méthode de soustraction. Nous transmettons les deux nom et le nom d'utilisateur. Combien de points voulons-nous déduire ? Et une description simple et une heure. Et voilà, mettez à jour le script. Et voyons maintenant la magie. Avant de voir la magie, au lieu de tester le code ici, déplaçons-le. Appuyez à nouveau sur le site Web. Où se trouve ma page ? Voici ma page. Cliquez sur avec Elementor. Je vais mettre à jour les codes. C'est simple. Nous l'avons déjà fait. Il suffit de déplacer les codes HTML, CSS et Javascript de ces codes. Et mettez à la place de ce code ici, une copie de style avancée. Encore une fois, n'oubliez pas que nous ajoutons la balise de style. Nous collons le style ici. Au fait, cette feuille de style est utilisée pour styliser tous mes outils. Nous allons copier à partir d'ici, la section principale, et c'est un copier-coller ici. Vous voyez maintenant que l'outil est apparu et nous avons toujours le script. Faisons-le contrôler C et coller. Parfait. Mettons à jour. N'oubliez pas que vous devez mettre à jour l'URL et les URL des images Vous vous souvenez que nous avons ici la fenêtre contextuelle de connexion, nous avons la source de l'image. Nous devons plutôt saisir une URL ici pour accéder à une image publique. Pour cela, je vais donc retourner sur mon tableau de bord Wordpress. Cliquez ici pour ajouter de nouveaux fichiers multimédia. Sélectionnez Fichier, et je vais télécharger les images sans accès et sans solde. Png est parfait. Copions l'URL dans le presse-papiers pour mettre l'URL publique ici Encore une fois, je vous encourage à apprendre les bases du HTML, du CSS et du Javascript. Cela vous aidera beaucoup. Quoi qu'il en soit, encore une fois, trouvons le no balance et collons-le. Nous y voilà, Update. Nous allons maintenant tester l'outil ouvert. Maintenant, disons simplement, par exemple, les publicités Facebook génèrent à nouveau et perfectionnent. Vous pouvez voir que cet outil fonctionne parfaitement. Si vous actualisez la page, vous verrez moins cinq déduits pour l'utilisation du générateur de crochets Cette fenêtre contextuelle est intégrée au connecteur microd. C'est vraiment parfait. Revenons à notre tableau de bord, tous les utilisateurs, et vous pouvez voir que nous avons maintenant 90 points. Je vais le tester à nouveau, mail generate. Maintenant, si on y va, ça doit être 85. Rafraîchissons et perfectionnons, vous pouvez voir 85 points. Le système de points est également intégré et fonctionne parfaitement. La dernière étape consiste à permettre aux gens d'acheter des points. Vous pouvez le faire avec deux options. Ici, vous avez des passerelles Bride, que vous pouvez implémenter directement dans le plugin, par exemple en utilisant Paypal, Scrill, n'importe quel type Ou vous pouvez utiliser, comme je le fais sur mon site Web, j'utilise Woo Commerce. Vous pouvez donc installer Woo Commerce. Je pense que si vous avez déjà travaillé avec Wordpress, je pense que vous connaissez Woocommerce, c'est le numéro un Connectez-vous pour vendre des produits sur Wordpress. OK, maintenant allez ici aux produits, ajoutez un nouveau produit et dites simplement, par exemple, 1 000 points. Et l'idée ici est principalement de cocher cette case récompenser par des points et d'ajouter le nombre de points. Désormais, chaque fois que quelqu'un achète ce produit, il obtiendra 1 000 points sur son solde. Voilà, vous avez le système de points et les utilisateurs ne peuvent désormais accéder à vos outils que s'ils sont connectés. Et chaque fois qu'ils l'utiliseront, ils consommeront leurs crédits ou leurs points. Maintenant, pour en revenir à mon site web, si vous remarquez, j'ai ici le solde de points dans l'en-tête. J'ai aussi ce modèle où je montre les coûts et ceci pour recharger les prises électriques, etc. Si vous souhaitez en savoir plus sur la création tant que Word Press et voler tous mes codes, etc., vous pouvez consulter mon autre cours, transformer Word Press en AS. Je ne sais pas si vous êtes un membre influent. Si c'est le cas, vous pouvez accéder à ce cours gratuitement. Sinon, vous pouvez le consulter sur mon site Web. Ici, vous pouvez tout apprendre en détail sur la façon dont je construis mon système d'outils. N'oubliez pas que si vous rencontrez un problème, vous avez des questions, n'importe quoi. Je serai là pour t'aider presque tous les jours.