WordPress : utilisez l'IA pour créer des blocs personnalisés (exemple gratuit d'accordéon)

Je voulais un accordéon sur mon site WordPress. Chaque plugin « gratuit » que j'ai essayé était en fait une offre payante déguisée, avec sa page de réglages. Alors j'ai fait écrire le mien par une IA : 25 lignes, pas de plugin, pas de JavaScript, et il est à vous.

Mise à jour, juillet 2026 : cet article dormait en brouillon depuis plus d'un an, promettant « le code ci-dessous » sans aucun code en dessous. Le voici. Désolé pour l'attente.

Ce qu'on obtient

Voici une démo en direct. C'est exactement le code de la section suivante, collé dans cette page de la même façon que vous le colleriez dans WordPress (seul le texte des panneaux a été traduit). Cliquez sur les panneaux :

Ça s'ouvre et se ferme sans une ligne de JavaScript, parce que l'élément natif <details> du navigateur gère le repliage pour nous. Tous les navigateurs le prennent en charge depuis des années.

Le code

<style>
.ll-acc { border: 1px solid rgba(128,128,128,.5); border-radius: 10px; overflow: hidden; }
.ll-acc details + details { border-top: 1px solid rgba(128,128,128,.5); }
.ll-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc summary::after { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; }
.ll-acc details[open] > summary { background: rgba(128,128,128,.12); }
.ll-acc details[open] > summary::after { content: "–"; }
.ll-acc .ll-acc-body { padding: 12px 18px 16px; }
</style>

<div class="ll-acc">
  <details>
    <summary>Question one goes here</summary>
    <div class="ll-acc-body">Answer one goes here. Text, links, pictures, whatever you want.</div>
  </details>
  <details>
    <summary>Question two goes here</summary>
    <div class="ll-acc-body">Answer two. Add more panels by copying one whole details block.</div>
  </details>
  <details>
    <summary>Question three goes here</summary>
    <div class="ll-acc-body">Answer three. Delete panels the same way.</div>
  </details>
</div>

Ce que vous voudrez probablement changer :

• Le texte. Remplacez les questions et réponses d'exemple directement dans le bloc. La zone de réponse accepte du HTML normal, donc les liens et les images fonctionnent.
• Le nombre de panneaux. Copiez un bloc <details>...</details> entier pour ajouter un panneau ; supprimez-en un pour en retirer un.
• Ouvert par défaut. Changez la balise d'ouverture d'un panneau en <details open> et il se charge déjà déplié.
• Les couleurs. Les gris sont volontairement neutres pour bien rendre aussi bien en thème clair qu'en thème sombre. Remplacez les valeurs rgba(...) si vous voulez vos couleurs de marque.

Installez-le sur votre page

Ces instructions d'installation sont celles que l'IA a écrites quand je les lui ai demandées (voir le prompt plus bas). Je les ai suivies sur une installation WordPress standard et elles étaient justes, ce qui était honnêtement la partie que je doutais le plus.

1. Connectez-vous à WordPress et ouvrez la page ou l'article où vous voulez l'accordéon. Cliquez sur Modifier.
2. Cliquez sur le + à l'endroit voulu et cherchez le bloc appelé HTML personnalisé.
3. Collez l'extrait en entier — la partie <style> et la partie <div>.
4. Cliquez sur le bouton Aperçu du bloc (ou l'aperçu au niveau de la page) pour voir le rendu plutôt que le code brut.
5. Mettre à jour ou Publier. Allez cliquer sur vos nouveaux panneaux sur la page en ligne, et savourez l'argent de plugin que vous n'avez pas dépensé.

Le prompt qui l'a écrit

Petit contexte. Je n'ai trouvé aucun plugin d'accordéon qui soit à la fois gratuit et pas envahissant, et je refusais de payer un abonnement pour ce qui est essentiellement vingt-cinq lignes de HTML. Écrire ces lignes soi-même, c'est exactement le genre de tâche petite et autonome où l'IA excelle vraiment. Le workflow :

N'importe quelle IA capable d'écrire du code fera l'affaire :

• En faire tourner une en local (gratuit, privé) : j'ai utilisé mon propre DeepSeek 70B en local. Si votre machine a la puissance nécessaire, voici mon guide d'installation : Faire tourner DeepSeek en local : un guide en 4 étapes.
• Ou utiliser une IA gratuite en ligne : l'offre gratuite de ChatGPT gère ce prompt sans broncher.

Voici le prompt. La liste d'exigences est la partie importante ; un vague « fais-moi un accordéon » vous rapportera un tas fragile de JavaScript.

Write me an accordion I can paste into a WordPress "Custom HTML" block.

Requirements:
- Plain HTML and CSS only. No JavaScript, no external files, no plugin.
- Use <details> and <summary> so the browser handles opening and closing.
- Scope every CSS rule under one class so it can't restyle the rest of my theme.
- Neutral colors that look fine on a light theme or a dark theme.
- Three panels with placeholder questions and answers.
- Keep it under 40 lines.

Then explain, step by step, exactly how I install it on a WordPress page.
Assume I have never edited HTML before.

(Le prompt reste en anglais, mais vous pouvez très bien traduire cette liste d'exigences en français avant de l'envoyer — ça fonctionne tout aussi bien.)

Ce dernier paragraphe, c'est toute l'astuce du titre de cet article : la même IA qui écrit le code rédigera aussi son manuel d'installation, au niveau que vous demandez. Si une étape vous perd, recollez-la et dites « explique l'étape 3 comme si je n'avais jamais vu de HTML ». Elle le fera, patiemment, autant de fois qu'il le faut. Rien que ça, c'est déjà mieux que la plupart des documentations de plugin.

Une habitude à voler : avant que le code n'approche votre vrai site, collez-le dans un fichier nommé test.html sur votre bureau et double-cliquez dessus. Il s'ouvre dans votre navigateur, sans besoin de serveur. Cliquez sur chaque panneau. Si quelque chose cloche, montrez-le à l'IA et dites ce qui ne va pas. C'est seulement une fois qu'il se comporte bien qu'il part vers WordPress. C'est tout le labo de test, et c'est comme ça que j'ai vérifié le bloc ci-dessus.

Pièges à éviter

• Utilisez le bloc HTML personnalisé, pas un bloc paragraphe. Collez du code dans un bloc de texte classique et WordPress l'échappe gentiment pour vous, si bien que les visiteurs voient du code brut au lieu d'un accordéon.
• Deux accordéons sur une même page, aucun problème. Le bloc <style> se retrouve dupliqué, ce qui est moche mais sans danger. Si ça vous gêne, mettez le CSS une seule fois dans Apparence → Personnaliser → CSS additionnel, et ne collez que la partie <div> dans vos blocs.
• Certains thèmes dessinent leur propre flèche de summary. Le fragment masque le marqueur par défaut de deux façons différentes, mais un thème tenace peut quand même dessiner sa propre icône à côté de mon glyphe +/–. Si vous voyez un doublon, demandez à l'IA : « mon thème ajoute sa propre flèche aux éléments summary, cache-la ».
• Vous voulez un seul panneau ouvert à la fois ? Ajoutez name="faq" dans chaque balise <details>. Les navigateurs récents refermeront automatiquement les autres panneaux ; les plus anciens ignorent simplement l'attribut, sans rien casser.
• Ne collez jamais à l'aveugle une sortie d'IA sur un site en production. Le test en fichier local ci-dessus prend deux minutes. Demander l'absence de JavaScript réduit aussi ce qui peut mal tourner, ce qui est la moitié de la raison pour laquelle je l'ai exigé.