Utiliser des outils d’intelligence artificielle pour créer un plugin WordPress

L’IA étant si présente dans notre monde actuel, nous avons pensé qu’il serait intéressant d’explorer comment les développeurs peuvent utiliser ces outils pour créer ou améliorer des extensions WordPress. Cet article vous guidera pas à pas dans la création d’une extension WordPress à l’aide de l’assistant de codage IA populaire – Cursor.

Bien que l’IA puisse être un assistant fiable, elle ne remplace pas totalement l’expertise humaine. Un développeur compétent doit toujours examiner le résultat, détecter les bogues, optimiser les performances et s’assurer que le code est sécurisé et évolutif.

Cela dit, nous sommes clairement entrés dans l’ère de la programmation en langage naturel. Vous ne créerez probablement pas un CMS complet avec une simple invite – et ne vous attendez pas non plus à obtenir un constructeur de pages complet – mais l’IA peut contribuer à accélérer de nombreuses parties du processus. Même les adeptes du low-code peuvent en bénéficier, tandis que les développeurs avancés trouvent des moyens plus intelligents et plus rapides de construire.

Aperçu des outils de codage de l’IA

Quel que soit l’outil utilisé, en ligne ou de bureau, la plupart des générateurs de code d’IA ont les points suivants en commun :

• Ils ont ingéré des volumes massifs de données et ont été formés sur des référentiels de code.
• Ils offrent une autocomplétion et des suggestions de code intelligentes qui permettent de gagner du temps.
• Ils maîtrisent de nombreux langages de programmation.
• Ils sont sensibles au contexte, ce qui signifie qu’ils peuvent comprendre la structure de votre base de code.
• Ils interprètent les messages en langage naturel, même en cas de fautes de frappe mineures.
• Certains vous permettent de passer d’un modèle de langage à l’autre.
• La plupart prennent en charge les systèmes d’extensions.
• Beaucoup incluent des outils de débogage et de remaniement.

Quels sont donc les principaux acteurs de l’espace de codage de l’IA aujourd’hui ?

1. ChatGPT : Le nom le plus connu dans le domaine de l’IA à l’heure actuelle. ChatGPT ne nécessite aucune configuration et peut générer du code, expliquer ce qu’il fait et répondre aux questions de suivi, le tout en un seul endroit.
2. Copilote GitHub : Construit par GitHub et OpenAI, Copilot s’intègre directement dans vos IDE préférés et suggère du code en temps réel au fur et à mesure que vous saisissez. C’est comme si vous faisiez de la programmation en binôme avec un développeur d’IA.
3. Grok : Similaire à ChatGPT et Claude, Grok est un outil de xAI disponible pour les utilisateurs X et est connu pour son attitude.
4. Gemini : Il s’agit de la famille d’outils d’IA polyvalents de Google, qui est similaire à ChatGPT.
5. Windsurf : Il s’agit d’un IDE spécialisé dans l’anticipation des besoins d’un développeur.

Quelques mots sur l’utilisation de Cursor AI

Pour construire notre extension, nous avons choisi d’utiliser Cursor AI, un des favoris des développeurs. Cursor AI est un fork de l’IDE VSCode, ce qui explique son aspect et sa convivialité. Comme il est flexible, vos réglages et préférences VSCode peuvent être importés dans Cursor AI.

En tant qu’IDE open source complet, il existe de nombreuses extensions disponibles et de nombreux moyens d’accéder à la documentation du code.

Cursor’s Chat dispose de plusieurs modes, chacun optimisé pour un type de tâche différent.

Vous pouvez passer d’un mode à l’autre à l’aide du sélecteur de mode (Cmd+.) ou des raccourcis clavier :

• Mode Demande : Meilleur pour les questions rapides, les explications ou la planification des fonctionnalités. Par exemple, vous pouvez saisir « Quel est le langage de programmation utilisé dans cette base de code ? » et obtenir une réponse contextuelle basée sur vos fichiers ouverts. Accédez-y avec Cmd+L (Mac) ou Ctrl+L (Windows/Linux).
• Mode agent : Idéal lorsque vous souhaitez que Cursor raisonne sur l’ensemble de votre base de code et effectue des changements plus importants, comme la génération de fichiers, l’implémentation d’une nouvelle fonctionnalité ou la refactorisation. Vous pouvez dire quelque chose comme « Créer un fichier de documentation basé sur ce qu’il y a dans /plugins/contentwriter. » Déclenchez ce mode en utilisant Cmd+I ou Ctrl+I.
• Mode manuel : Utilisez ce mode lorsque vous souhaitez avoir plus de contrôle et que l’IA ne doit travailler que sur un fichier ou un extrait spécifique. Par exemple, vous pouvez lui demander de « Refondre theme.json en utilisant les composants trouvés dans ../docs. » Ce mode est activé automatiquement lorsque vous commencez à éditer directement ou par l’intermédiaire de la palette de commandes.

Flux de travail pour l’ajout d’un plugin

Si vous n’avez utilisé que ChatGPT pour écrire votre code, il se peut que vous passiez à côté de ce que peut faire l’assistance au code de l’IA. Il est vrai que les outils d’IA généraux peuvent créer une extension WordPress valide, mais ce n’est certainement pas la manière la plus efficace de tester ou de déboguer du code.

C’est là que des outils comme Cursor AI entrent en jeu – ils combinent l’IA avec un IDE complet pour vous guider à travers un flux de travail plus structuré et centré sur le développeur.

Une bonne façon de commencer à travailler avec des assistants de codage IA est de leur demander quelque chose qui vous est déjà familier. Choisissez un petit projet bien défini. Ne vous lancez pas tout de suite dans des fonctionnalités complexes ou dans le développement d’extensions à grande échelle. Et n’attendez surtout pas de l’IA qu’elle construise l’intégralité de votre extension à partir d’un simple message vague. Comme pour toute tâche de développement, commencez par rédiger vos objectifs en langage clair.

Pour ce guide, nous allons créer une extension appelée Custom Writer qui enregistre un nouveau rôle d’utilisateur dans WordPress. Ce rôle peut créer et modifier des articles, mais il ne doit pas être en mesure de supprimer quoi que ce soit ou d’accéder à d’autres types de publications.

Étape 1 : Ouvrir le répertoire du plugin

Lancez Cursor et utilisez File > Open Folder pour naviguer dans votre répertoire /wp-content/plugins. Ceci prépare le terrain pour la construction de votre extension.

Étape 2 : Démarrer une nouvelle session de discussion

Appuyez sur Cmd + Shift + L (ou Ctrl + Shift + L sous Windows) pour démarrer une nouvelle session de discussion.

Passez en mode interrogation en appuyant sur Cmd + L / Ctrl + L afin de commencer par une invite de planification. Dans ce mode, Cursor vous aidera à raisonner sur votre idée sans passer directement au code.

Au-dessus de l’entrée principale de l’invite, vous verrez un champ intitulé Add Context (Ajouter un contexte). C’est ici que vous pouvez décrire votre objectif en détail. Soyez précis, même si votre orthographe n’est pas parfaite – Cursor est indulgent.

Voici ce que nous avons saisi :

Prenez note du mot-clé @WordPress – il indique à Cursor de faire référence à la documentation officielle de WordPress. C’est l’une des façons les plus simples de s’assurer que votre extension respecte les meilleures pratiques.

Étape 3 : Examiner les instructions en markdown

Une fois que vous avez appuyé sur Send, Cursor vous répond avec un document détaillé markdown. Il décrit tout ce que votre extension doit faire – de la mise en place des hooks au nettoyage lors de la désinstallation.

Voici un aperçu de ce que Cursor inclut :

• Détails de l’en-tête de l’extension (nom, version, licence)
• Structure du code (un seul fichier .php dans un dossier personnalisé de l’extension)
• Création d’un rôle avec add_role()
• Capacités spécifiques (edit_posts, publish_posts, etc.)
• Hooks pour l’activation, la désactivation et la désinstallation
• Recommandations en matière de sécurité, de performances et de tests

Vous pouvez modifier les instructions avant de continuer, mais nous sommes satisfaits en l’état.

Étape 4 : Passer en mode agent et créer le plugin

Il est maintenant temps de générer le code.

Passez en mode Agent en appuyant sur Cmd + Shift + I (ou Ctrl + Shift + I). Cela permet à Cursor de travailler sur votre base de code et d’exécuter des tâches en plusieurs étapes.

Appuyez sur Entrée, et vous verrez apparaître le bouton Run Command.

Cliquez sur le bouton Run Command et Cursor créera votre extension. Vous devriez voir un nouveau dossier (par exemple, custom-writer-role) avec un seul fichier .php à l’intérieur.

Étape 5 : Examiner et accepter le fichier

Ouvrez le fichier généré par Cursor. Vous pouvez faire des modifications ici, comme mettre à jour l’auteur de l’extension ou affiner les commentaires en ligne.

Lorsque vous êtes satisfait, cliquez sur Accepter le fichier. Ne vous inquiétez pas, vous pourrez toujours le modifier plus tard. Cela confirme simplement que le fichier doit faire partie de votre base de code.

Étape 6 : Activer le plugin dans WordPress

Rendez-vous dans votre tableau de bord d’administration WordPress. Sous Extensions, localisez votre nouvelle extension et activez-la.

Si tout a été généré correctement, vous verrez un message de succès et l’extension sera active.

Étape 7 : Tester le nouveau rôle

Créez un nouvel utilisateur et attribuez-lui le rôle Custom Writer. Votre test devrait indiquer :

• Nouveau rôle utilisateur créé avec succès
• Seuls les articles peuvent être créés.
• Les articles peuvent être modifiés et consultés, mais pas supprimés.

Étape 8 : Découvrir et corriger les bizarreries de l’interface utilisateur

Vous remarquerez que le lien Édition rapide est toujours disponible dans la liste des articles. Bien qu’il ne permette pas la suppression, nous ne l’avons pas demandé et il peut être déroutant pour les utilisateurs.

Retournez dans Cursor et lancez une nouvelle demande d’aide pour supprimer Quick Edit.

Lors de la création de la démo pour ce guide, nous avons fait une série d’invites demandant à Cursor d’adopter différentes approches pour supprimer Quick Edit. À un moment donné, nous avons vu des références à « user_switch », ce qui nous a amenés à nous demander s’il n’y avait pas un conflit avec l’extension Switch User Role. (C’était la seule extension que nous utilisions en plus de la nôtre)

Cursor nous a indiqué qu’il y aurait un conflit après que nous l’ayons alerté sur ce problème potentiel. Une autre série d’invites a suivi. Pendant ce temps, nous avons découvert que le nouvel utilisateur n’était pas en mesure de se connecter parce qu’il avait besoin d’un niveau d’autorisation plus élevé.

Une autre série d’invites a commencé, sans succès. À certains intervalles, Cursor supprimait Quick Edit, mais la fonction d’édition était également supprimée. Nous sentant perdus, nous avons demandé à Cursor de résumer où nous en étions pour nous assurer que nous étions à l’aise avec ce qu’il comprenait. À un moment donné, nous nous sommes retrouvés à demander : « Qu’en pensez-vous ? »

Finalement, Cursor a trouvé un moyen de résoudre tous les problèmes et nous a donné un résumé des modifications apportées.

Étape 9 : Observer d’autres comportements

Lors de nos tests, nous avons également remarqué que :

• La médiathèque est inaccessible, même si nous ne l’avons pas mentionné. Ceci est un rappel : si vous ne demandez pas explicitement une capacité, l’IA ne l’inclura probablement pas.
• Le résumé de Cursor mentionne qu’il « fonctionne pour les articles et les pages », mais l’extension bloque correctement l’accès aux pages. Donc, l’IA a légèrement sur-expliqué, mais le comportement est correct.

Étape 10 : Continuer à tester et à itérer

À partir de là, vous pouvez installer d’autres extensions, tester la compatibilité et affiner votre rôle si nécessaire. Si quelque chose ne fonctionne pas ou ne se comporte pas comme prévu, revenez à Cursor avec des questions de suivi.

Vous serez amené à le faire souvent – en posant des questions complémentaires, en reformulant les instructions ou même en demandant simplement « Qu’en pensez-vous ? » pour connaître le point de vue de Cursor.

C’est là que Cursor brille vraiment : la boucle de rétroaction est rapide et l’assistant s’améliore à chaque itération.

Ne soyez pas trop prudent

Ce n’est pas parce que vous pouvez demander à une IA de générer une extension que vous devez le faire – du moins, pas sans y avoir réfléchi au préalable.

Avant de demander une extension, prenez le temps de définir ce qu’elle est censée faire. Réfléchissez à son objectif, aux fonctionnalités requises et à toutes les dépendances potentielles. Posez-vous la question suivante : cette extension pourrait-elle entrer en conflit avec des extensions majeures comme WooCommerce ? Si la réponse est oui, indiquez-le dans votre message.

Plus vous donnez de contexte à l’IA, meilleurs seront les résultats. Soyez précis. Décrivez clairement vos objectifs. N’ayez pas de retenue.

L’IA peut sembler magique, mais il est toujours important de construire de manière responsable. Gardez à l’esprit les mêmes piliers que ceux que vous prenez en compte lorsque vous codez à la main :

• Sécurité – désinfectez les entrées, vérifiez les capacités, suivez les meilleures pratiques
• Performance – évitez les requêtes redondantes, gardez une logique rigoureuse
• Accessibilité – tenez compte des rôles des utilisateurs, des éléments de l’interface utilisateur et de l’interaction inclusive
• Tests – essayez les cas limites, mélangez les extensions et validez les fonctionnalités
• Déploiement – préparez-vous à la gestion des versions, aux retours en arrière et à l’évolutivité
• Refonte – revisitez votre code, pas seulement une fois, mais régulièrement

Résumé

Le paysage du code généré de manière assistée change chaque minute. Cela rappelle les premiers jours de la recherche, lorsqu’il y avait de nombreuses entrées. À la fin, seules quelques-unes d’entre elles ont survécu. C’est ce qui pourrait finalement se produire ici aussi, bien que l’open source puisse nous emmener dans une direction différente.

Nous vous suggérons d’explorer un certain nombre d’outils d’IA en utilisant la même demande initiale, puis de comparer les parcours de codage et les résultats. Soyez ouvert à la possibilité de devoir changer votre application préférée au fur et à mesure que le paysage continue d’évoluer.

À mesure que les outils d’IA évoluent, votre flux de travail doit lui aussi évoluer, et cela commence par un environnement approprié.

L’hébergement WordPress de Kinsta, convivial pour les développeurs, vous offre la vitesse, le contrôle et les outils dont vous avez besoin pour construire, tester et lancer en toute confiance. Que vous travailliez localement avec DevKinsta ou que vous déployiez vers le staging, nous vous soutenons.

Découvrez les plans d’hébergement WordPress de Kinsta et commencez à construire plus intelligemment.