Le « Vibe Coding » au service de WordPress 🤖

Quand on travaille sur le Web, on a toujours besoin d’un développeur, ou tout du moins, d’un petit bout de code. Grâce à l’IA et au Vibe Coding, on peut maintenant s’improviser « codeur du dimanche » !

Dans cet article, je vous explique ce qu’est le « Vibe Coding » et comment l’exploiter au sein de vos sites WordPress…

1 – Qu’est-ce que le Vibe Coding ?

Je suis sûre que vous avez déjà entendu ce terme de « Vibe Coding » qui envahi les ondes et les réseaux depuis quelques semaines et qui a déjà fait le tour de la planète ! Eh bien, croyez-le, ce terme date seulement de février 2025. C’est Andrej Karpathy, une personnalité du monde de l’intelligence artificielle, qui l’a prononcé pour la première fois.

Le Vibe Coding, littéralement « programmation au ressenti » (ou « programmation au feeling »), est une nouvelle façon d’écrire du code grâce à l’intelligence artificielle.

Le principe est simple : au lieu de taper vous-même des lignes de code, vous décrivez votre besoin en langage naturel à un grand modèle de langage (LLM), et l’IA génère le code pour vous.

En résumé, votre rôle n’est plus d’écrire du code, mais de guider l’IA, tester le code généré et l’affiner au fil des itérations.

Les défenseurs du vibe coding vont même plus loin : ils estiment qu’il permet à des personnes sans formation poussée en développement de produire des logiciels fonctionnels.

2 – Comment exploiter le vibe coding pour WordPress ?

Si vous vous demandez comment peut-on pratiquer le vibe coding – et en tirer parti au quotidien dans WordPress – je vous propose un exemple simple, mais concret :

#1 – Le prompt

Dans Chat GPT (ou autre), formulez votre besoin clairement afin que le prompt soit précis et concis. Prenons l’exemple d’un prompt pour ajouter la date de dernière mise à jour d’un article de blog :

Dans mon blog WordPress, je souhaite afficher la date de dernière mise à jour de mes articles. J’aimerais avoir un shortcode que je placerai dans un modèle d’article. Es-tu capable de me donner un code à placer dans un « code snippet » ? Ce code doit être fonctionnel et sécurisé.

#2 – La réponse à vérifier

Voici sa réponse :

// Shortcode [last_updated]
function lw_last_updated_shortcode( $atts ) {
    global $post;

    // Vérifier qu'on est bien sur un article valide
    if ( ! isset( $post ) || ! is_a( $post, 'WP_Post' ) ) {
        return '';
    }

    // Récupérer la date de dernière modification
    $last_updated = get_the_modified_time( get_option( 'date_format' ), $post );

    // Sécurité : échapper la sortie
    $last_updated = esc_html( $last_updated );

    // Texte affiché (tu peux personnaliser ici)
    $output = '<p class="last-updated">Dernière mise à jour : ' . $last_updated . '</p>';

    return $output;
}
add_shortcode( 'last_updated', 'lw_last_updated_shortcode' );

Et voici ses instructions :

• Tu ajoutes ce code dans un snippet via le plugin Code Snippets (ou dans functions.php si tu préfères).
• Ensuite, tu insères simplement [last_updated]

Chat GPT vous a donné un bout de code avec des commentaires afin de mieux comprendre… À ce moment-là, vous devez relire le code, et vous pouvez lui poser des questions ou lui demander plus d’explications quant à la procédure pour mettre le code dans votre site. N’hésitez pas à le challenger en termes de sécurité ou d’accessibilité.

#3 – Le test du code

Il est temps maintenant de passer à la mise en pratique sur un site de test (j’ai bien dit « un site de test« , j’insiste 😅).

La plupart du temps, le code doit être placé dans un thème enfant ou dans un snippet. Pour ma part, je préfère utiliser l’extension Code Snippet.

1. Créez un snippet dédié au code généré par IA dans l’extension Code Snippet, sauvegardez et activez-le.
2. Placez le shortcode où vous le souhaitez dans votre site, pour mon exemple, ce sera dans le modèle des articles de blog.
3. Vérifiez le rendu et son bon fonctionnement.

#4 – Amélioration et itération du code

Pour l’exemple précédent, c’était un grand classique, simple et très facile pour l’IA. Mais parfois, pour des demandes plus complexes, le code obtenu lors du premier prompt n’est pas 100% satisfaisant… C’est à ce moment-là que vous allez devoir être de plus en plus précis dans vos prompts pour obtenir exactement ce que vous voulez. Cela peut parfois représenter de nombreux ping-pong avec le LLM et de nombreux tests dans WordPress…

#5 – Copilot pour des projets plus « ambitieux »

Lorsque votre code commence à dépasser plusieurs lignes, Chat GPT va commencer à « délirer ». Les échanges peuvent devenir de moins en moins pertinents…

Mon conseil serait alors d’obtenir une V1 du code via Chat GPT puis de passer ensuite dans Copilot.

3 – Quelques idées de vibe coding à implémenter dans WordPress

Le vibe coding n’est pas qu’un concept abstrait : il s’incarne dans de petites touches de code qui donnent de la personnalité et de la convivialité à votre site WordPress. Voici 10 exemples simples que vous pouvez réaliser en vibe codant :

1. Effet machine à écrire sur du texte (Typing.js)
   → Une animation qui affiche les lettres une par une, façon machine à écrire.
2. Arrière-plan dynamique selon l’heure de la journée
   → Lever de soleil le matin, tons chauds l’après-midi, couleurs sombres le soir.
3. Boutons interactifs qui « vibrent » ou s’illuminent au survol
   → Micro-interactions CSS pour rendre le parcours plus engageant.
4. Confettis ou petites étoiles qui tombent lors d’une action réussie
   → Exemple : après l’envoi d’un formulaire de contact ou un clic sur « J’aime » ➡️ comment ajouter des confettis au clic.
5. Affichage du nombre de vues d’un article
   → Un petit shortcode qui compte et affiche le nombre de vues (« Post View Counter »).
6. Barre de progression de la lecture
   → Une barre progresse en fonction du scroll sur la page.
7. Temps de lecture
   → Afficher le temps de lecture d’une publication.
8. Curseur personnalisé
   → Par exemple un cercle fluide qui suit la souris, ou un petit emoji adapté au thème du site.
9. Mode « Dark/Light » avec une bascule fluide
   → Permettre aux visiteurs de changer de style et d’adapter l’ambiance à leur préférence.
10. Easter Egg caché
    → Exemple : si l’utilisateur tape le Konami Code (↑ ↑ ↓ ↓ ← → ← → B A), une animation surprise ou un texte caché apparaît.

4 – Retour d’expérience avec le vibe coding…

Depuis l’arrivée de Chat GPT, je lui demande régulièrement de l’aide pour coder de petites choses simples… Mais tout récemment, une élève m’a demandé comment pouvait-elle réaliser un effet de texte défilant sur son site, comme celui-ci ⬇️

Ma première idée a été de demander cela à Chat GPT. Dès la première version, le code fonctionnait, mais de nombreuses itérations ont eu lieu pour obtenir le design souhaité. 👉 Cela peut prendre du temps, car chaque itération va donner lieu à un test, puis un nouveau prompt et ainsi de suite jusqu’à obtenir l’effet souhaité…

💡 Il me vient alors une idée : l’IA serait-elle capable de créer un générateur de texte défilant en ligne ? Avec une preview en live afin d’éviter aux internautes de devoir itérer pendant des heures avec Chat GPT.

Bien sûr que Chat GPT en est capable ! Mais pour un générateur, on passe vite de quelques lignes de code à plusieurs centaines de lignes de code… Copilot devient à ce moment-là un super allié, j’ai donc continué le « codage » avec lui.

J’ai testé, corrigé, demandé des ajustements, ajouté des options… et au final, je me suis retrouvée avec un outil complet, prêt à être publié sur La Webeuse ➡️ découvrez ici mon Générateur de « texte défilant » pour WordPress.

C’est incroyable de se dire que même les novices peuvent réaliser un petit projet fonctionnel. Certes, il faut faire preuve de patience et avoir quelques connaissances minimales comme être en mesure d’utiliser les « bons termes » pour réaliser des prompts efficaces.

Voilà un petit retour d’expérience concret que j’ai eu envie de vous partager…

5 – En conclusion : peut-on dire que c’est la fin des développeurs ?

Avec l’arrivée d’outils intelligents comme GitHub Copilot, ChatGPT ou Cursor, la question se pose : avons-nous encore besoin de développeurs humains ?

Évidemment, la réponse est OUI, mais différemment :

1. Les IA codent vite, mais pas toujours juste : un assistant peut générer des fonctions entières en quelques secondes. Cependant, le code produit doit être relu, testé, sécurisé. L’IA accélère le travail, mais ne remplace pas le jugement humain.
2. Le rôle du développeur évolue : plutôt que de tout écrire à la main, le développeur devient : un chef d’orchestre qui guide l’IA, un critique qui valide ou rejette les propositions, et un concepteur qui pense la logique métier avant la technique.
3. L’importance de la créativité et du contexte : les IA excellent à compléter du code, mais elles ne comprennent pas le pourquoi. Un site WordPress, une appli métier ou un plugin sur mesure nécessitent toujours une compréhension humaine des besoins, de l’expérience utilisateur et des contraintes techniques.

En conclusion, l’IA n’annonce pas la fin des développeurs, mais la fin de la programmation répétitive et fastidieuse 🥵 et le début d’une productivité et d’un pouvoir hors norme pour ces métiers !

Les développeurs qui sauront tirer parti de ces nouveaux outils tout en y injectant leur savoir et leur propre créativité verront leur valeur décupler 🦾.

Quant aux non-développeurs — les néophytes comme moi — le vibe coding devient une expérience ludique 🎮 : c’est un peu comme cuisiner avec un robot multifonction. Vous donnez la recette, l’outil fait le plus gros du travail, et il ne vous reste plus qu’à ajuster l’assaisonnement pour y apporter votre touche personnelle !

💬 Dites-moi en commentaire si vous utilisez l’IA pour vous aider au quotidien dans WordPress et n’hésitez pas à nous partager vos exemples d’utilisation !

Découvrez ma formation : WordPress Vidéo Boost – Une formation pratique et actionnable qui vous permet de rapidement créer et gérer votre site web.