Ce site a été monté avec Claude (IA), Elementor et WordPress — en moins d’une journée. La petite histoire (et les limites de l’IA) →
Depuis la rédaction de ce guide, Claude a évolué : il peut maintenant se connecter directement à Chrome et naviguer sur le web depuis l'application Claude. Pour travailler dans WordPress au quotidien, la tuyauterie MCP décrite ci-dessous n'est donc plus nécessaire — la preuve : ce site a été refait par Claude exactement de cette façon. Le mode d'emploi à jour : notre guide Claude + Chrome. Je laisse l'article en ligne : la mécanique MCP reste pertinente pour l'automatisation programmatique et les intégrations sur mesure.
Imaginez pouvoir dire à une IA : « Crée-moi une page WordPress avec un design cyberpunk, ajoute du contenu, uploade des images » — et que tout se fasse automatiquement. C'est exactement ce que permet le Model Context Protocol (MCP) couplé à Claude d'Anthropic. Cet article est lui-même la preuve vivante : il a été créé entièrement par Claude, directement dans WordPress, via MCP.
Le Model Context Protocol est un protocole ouvert créé par Anthropic qui permet aux modèles d'IA comme Claude de se connecter à des outils externes de manière standardisée. Pensez-y comme un « USB universel » pour l'IA : un seul protocole pour connecter n'importe quel outil, n'importe quel service.
Avant le MCP, chaque intégration nécessitait du code custom, des API wrappers spécifiques, et beaucoup de colle technique. Avec MCP, un serveur expose des « outils » (tools) que Claude peut appeler nativement, comme s'ils faisaient partie de ses capacités de base.
Claude (client) → envoie une requête → MCP Server → traduit en appel API → WordPress REST API → réponse → retour à Claude
Le serveur MCP tourne en Node.js parce que le protocole utilise le transport stdio (standard input/output). Claude lance le serveur MCP comme un processus enfant et communique avec lui via stdin/stdout en JSON-RPC. Node.js est léger, rapide à démarrer, et le SDK MCP officiel d'Anthropic est écrit en TypeScript.
Concrètement, quand vous configurez un MCP dans Claude Desktop, vous lui dites : « Lance ce programme Node.js et parle-lui ». Le serveur reste actif pendant toute la session et répond aux appels d'outils de Claude en temps réel.
Côté WordPress, il faut activer l'accès API REST et créer un mot de passe d'application. C'est ce token qui permettra au serveur MCP de s'authentifier auprès de votre site sans exposer votre mot de passe principal.
Dans votre admin WordPress, allez dans Utilisateurs → Votre profil. Descendez jusqu'à la section « Mots de passe d'application ». Donnez un nom (ex: « MCP Claude ») et cliquez sur « Ajouter un nouveau mot de passe d'application ». Copiez le mot de passe généré immédiatement — il ne sera plus affiché.
Testez que l'API est accessible en visitant votresite.com/wp-json/wp/v2/posts dans votre navigateur. Vous devriez voir du JSON. Si vous obtenez une erreur 404, vérifiez vos permaliens (Réglages → Permaliens → sauvegarder).
L'utilisateur associé au mot de passe d'application doit avoir le rôle Administrateur pour pouvoir créer des pages, articles, uploader des médias et gérer les utilisateurs. Si vous voulez restreindre les accès, un rôle « Éditeur » suffit pour les pages et articles.
Le serveur MCP WordPress est un package npm qui fait le pont entre Claude et votre API REST WordPress. Il expose des outils comme wp_add_page, wp_update_post, wp_upload_media, etc.
La configuration se fait dans le fichier claude_desktop_config.json. Ce fichier indique à Claude quels serveurs MCP lancer et avec quels paramètres.
Une fois connecté, Claude a accès à une trentaine d'outils WordPress. Voici les principales catégories :
Créer, modifier, supprimer, chercher des pages. Inclut le support complet d'Elementor Pro via les meta fields (_elementor_data, _elementor_edit_mode).
Créer et gérer des articles, catégories, tags. Supporter tous les formats (standard, galerie, vidéo, etc.).
Uploader des images, chercher dans la bibliothèque, modifier les métadonnées (alt text, description, titre).
Lire, copier et réutiliser les templates enregistrés dans votre bibliothèque Elementor (elementor_library).
Créer, modifier, chercher des utilisateurs. Gérer les rôles et permissions.
Lire et modifier les réglages généraux (titre, description, URL, format de date, fuseau horaire).
L'intégration avec Elementor est probablement l'aspect le plus puissant. Plutôt que de créer des pages en Gutenberg (l'éditeur par défaut de WordPress), Claude crée des pages directement en mode Elementor avec la structure JSON native du page builder.
La clé réside dans trois meta fields spécifiques :
La structure JSON d'Elementor suit une hiérarchie précise : Sections contiennent des Colonnes qui contiennent des Widgets. Chaque élément a un elType (section, column, widget) et les widgets ont un widgetType (heading, text-editor, html, image, button, etc.).
Voici ce que j'ai réalisé concrètement avec cette configuration MCP + Claude sur mon site marcdesfosses.com :
Un guide technique créé entièrement par Claude, avec du contenu structuré dans un widget text-editor Elementor. Mise à jour itérative : d'abord le contenu de base, puis ajout d'explications Node.js et d'instructions CLI.
Une page de services professionnels avec un design nordique/viking personnalisé. Claude a intégré des images de la bibliothèque média WordPress, créé du CSS custom avec hover effects, et utilisé la palette de couleurs existante du site.
À partir d'un screenshot du site Pieux Xtrême, Claude a reproduit le design complet en CSS pur : header, hero, barre de recherche, carte interactive, footer — le tout comme pièce de portfolio.
L'article que vous lisez en ce moment. Claude a analysé le site utopiatokyo.com via Chrome, extrait les tokens de design (couleurs, fonts, CSS variables), créé un design system réutilisable, et généré cet article complet directement dans WordPress.
Vérifiez que le mot de passe d'application est correct et que l'utilisateur a les permissions suffisantes. Le format est « user:password » encodé en Base64.
Assurez-vous que Node.js est dans votre PATH. Essayez which node (macOS/Linux) ou where node (Windows). Relancez Claude Desktop après installation.
Vérifiez que les 3 meta fields sont présents ET que le template est « elementor_header_footer ». Si un seul manque, WordPress affiche la page en mode Gutenberg.
Certains plugins de sécurité (Wordfence, iThemes) bloquent l'API REST. Ajoutez une exception pour /wp-json/ ou désactivez temporairement le pare-feu applicatif.
Le MCP transforme fondamentalement la relation entre l'IA et vos outils. Ce n'est plus « je demande à l'IA de générer du texte que je copie-colle » mais « l'IA agit directement dans mon environnement ». WordPress devient un terrain de jeu où Claude peut créer, styler, organiser et publier du contenu sans intervention manuelle.
L'avenir du développement web est là : des agents IA qui comprennent vos outils, respectent vos conventions de design, et exécutent des tâches complexes de bout en bout. Et tout ça commence avec un simple fichier de config JSON.
// FIN DE TRANSMISSION //
ARTICLE GÉNÉRÉ PAR CLAUDE OPUS via MCP → WORDPRESS → ELEMENTOR