Bon, soyons honnêtes : qui n’a jamais rêvé d’avoir ChatGPT directement intégré dans l’éditeur WordPress pour générer du contenu à la volée ? C’est exactement ce qu’on va faire aujourd’hui, en développant notre propre plugin qui transforme Gutenberg en assistant d’écriture surpuissant. Préparez-vous à découvrir comment créer une intégration native avec l’API OpenAI, tout en gérant proprement la sécurité et les performances.
Prérequis et configuration de base
Avant de plonger dans le code, on va devoir préparer quelques éléments essentiels. Sans ça, notre intégration ChatGPT ne pourra tout simplement pas fonctionner !
Créer un compte OpenAI et récupérer l’API key
Première étape : direction platform.openai.com pour créer votre compte développeur. Une fois connecté, rendez-vous dans la section « API Keys » pour générer votre clé d’accès.
Attention aux tarifs : OpenAI facture actuellement $0.002 pour 1000 tokens avec GPT-3.5-turbo (soit environ 750 mots). Pour un usage modéré, comptez quelques dollars par mois. Pensez à définir des limites de facturation dans votre tableau de bord pour éviter les mauvaises surprises !
Une fois votre clé récupérée, copiez-la précieusement. Elle ressemble à ça : sk-proj-abc123.... Cette clé, c’est votre sésame pour accéder aux modèles OpenAI.
Configuration WordPress : hooks et permissions
Maintenant, on configure WordPress pour accueillir notre plugin. D’abord, ajoutons la clé API dans wp-config.php :
// Ajout de la clé API OpenAI
define('OPENAI_API_KEY', 'sk-proj-votre-cle-ici');
Pour l’intégration dans l’éditeur, on utilisera principalement deux hooks :
enqueue_block_editor_assets: pour charger nos scripts JavaScript dans Gutenbergrest_api_init: pour créer notre endpoint API qui communiquera avec OpenAI
Côté permissions, il faudra vérifier que l’utilisateur a la capability edit_posts avant d’autoriser l’accès à l’IA. On ne veut pas que n’importe qui puisse consommer notre quota OpenAI !
Structure du plugin : fichiers et architecture
Voici l’architecture que je recommande pour notre plugin :
wp-chatgpt-integration/
├── wp-chatgpt-integration.php (fichier principal)
├── assets/
│ ├── js/
│ │ └── editor-integration.js
│ └── css/
│ └── editor-styles.css
├── includes/
│ ├── class-openai-client.php
│ ├── class-rest-controller.php
│ └── class-editor-integration.php
└── readme.txt
Le fichier principal contiendra les hooks de base et l’initialisation du plugin. Les classes PHP géreront respectivement la communication avec OpenAI, les endpoints REST, et l’intégration dans l’éditeur. Simple et efficace !
Intégration dans l’éditeur Gutenberg
Bon, maintenant qu’on a configuré notre API et notre backend, passons à la partie la plus sympa : intégrer ChatGPT directement dans l’éditeur Gutenberg. C’est là que ça devient vraiment magique pour l’utilisateur !
L’idée, c’est d’ajouter un bouton dans la toolbar qui va permettre d’améliorer le contenu sélectionné avec l’IA. WordPress nous fournit tout ce qu’il faut avec ses composants React.
Voici le code JavaScript principal pour notre plugin :
import { registerPlugin } from '@wordpress/plugins';
import { PluginBlockSettingsMenuItem, PluginMoreMenuItem } from '@wordpress/edit-post';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { Button, Modal, TextControl, Spinner } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
const ChatGPTBlock = () => {
const [isOpen, setIsOpen] = useState(false);
const [prompt, setPrompt] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const { getSelectedBlock, getBlocks } = useSelect('core/block-editor');
const { updateBlockAttributes, replaceBlock } = useDispatch('core/block-editor');
const selectedBlock = getSelectedBlock();
const handleOpenModal = () => {
if (!selectedBlock) {
setError('Veuillez sélectionner un bloc d\'abord');
return;
}
setIsOpen(true);
setError('');
};
const processWithChatGPT = async () => {
if (!prompt.trim()) {
setError('Veuillez saisir une instruction');
return;
}
setIsLoading(true);
setError('');
try {
const response = await apiFetch({
path: '/chatgpt-integration/v1/process',
method: 'POST',
data: {
content: getBlockContent(selectedBlock),
prompt: prompt,
block_type: selectedBlock.name
}
});
if (response.success) {
updateBlockContent(selectedBlock, response.data.content);
setIsOpen(false);
setPrompt('');
} else {
setError(response.data.message || 'Erreur lors du traitement');
}
} catch (err) {
setError('Erreur de connexion. Vérifiez votre clé API.');
} finally {
setIsLoading(false);
}
};
const getBlockContent = (block) => {
switch (block.name) {
case 'core/paragraph':
return block.attributes.content;
case 'core/heading':
return block.attributes.content;
case 'core/list':
return block.attributes.values;
default:
return block.attributes.content || '';
}
};
const updateBlockContent = (block, newContent) => {
switch (block.name) {
case 'core/paragraph':
case 'core/heading':
updateBlockAttributes(block.clientId, { content: newContent });
break;
case 'core/list':
updateBlockAttributes(block.clientId, { values: newContent });
break;
default:
updateBlockAttributes(block.clientId, { content: newContent });
}
};
return (
<>
<PluginMoreMenuItem
icon="robot"
onClick={handleOpenModal}
>
{__('Améliorer avec ChatGPT', 'chatgpt-integration')}
</PluginMoreMenuItem>
{isOpen && (
<Modal
title={__('Amélioration du contenu avec ChatGPT', 'chatgpt-integration')}
onRequestClose={() => setIsOpen(false)}
>
<div style={{ minWidth: '400px' }}>
<TextControl
label={__('Instruction pour ChatGPT', 'chatgpt-integration')}
value={prompt}
onChange={setPrompt}
placeholder="Ex: Rends ce texte plus professionnel"
/>
{error && (
<div style={{ color: '#cc1818', marginBottom: '10px' }}>
{error}
</div>
)}
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '20px' }}>
<Button
variant="secondary"
onClick={() => setIsOpen(false)}
disabled={isLoading}
>
{__('Annuler', 'chatgpt-integration')}
</Button>
<Button
variant="primary"
onClick={processWithChatGPT}
disabled={isLoading || !prompt.trim()}
>
{isLoading ? (
<>
<Spinner />
{__('Traitement...', 'chatgpt-integration')}
</>
) : (
__('Améliorer', 'chatgpt-integration')
)}
</Button>
</div>
</div>
</Modal>
)}
</>
);
};
registerPlugin('chatgpt-integration', {
render: ChatGPTBlock
});
Et voilà ! Ce code crée une interface propre avec gestion des erreurs et loading states. L’utilisateur sélectionne un bloc, clique sur « Améliorer avec ChatGPT », tape son instruction et hop : le contenu est automatiquement mis à jour.
Attention cependant : cette approche fonctionne bien pour les blocs simples (paragraphes, titres, listes). Pour des blocs plus complexes, il faudra adapter la logique de manipulation du contenu.
Pour une meilleure UX, on pourrait aussi ajouter un système d’historique des modifications (avec un bouton « Annuler ») et des suggestions d’instructions prédéfinies. Mais bon, on a déjà une base solide qui marche !
Cas d’usage pratiques et exemples concrets
Maintenant qu’on a posé les bases techniques, passons aux choses concrètes ! Voici comment exploiter réellement ChatGPT dans vos workflows WordPress. J’ai testé ces exemples en production, et franchement, les gains de temps sont impressionnants.
Génération automatique de contenu
La génération de contenu, c’est probablement le cas d’usage le plus évident… mais attention aux prompts ! Un mauvais prompt = du contenu générique qui ne sert à rien.
Voici un exemple de prompt optimisé pour générer des articles de blog :
const generateBlogPost = async (topic, audience, tone) => {
const prompt = `Écris un article de blog de 800 mots sur "${topic}" pour une audience ${audience}.
Ton: ${tone}
Structure requise:
- Titre accrocheur (H1)
- Introduction avec hook (2 paragraphes)
- 3 sections principales avec exemples concrets
- Conclusion avec call-to-action
- Inclus des questions pour engager le lecteur
Format: Markdown avec titres H2 pour les sections`;
return await callOpenAI(prompt);
};
Pour les descriptions de produits WooCommerce, j’utilise ce prompt qui fonctionne très bien :
$product_prompt = "Rédige une description de produit convaincante pour: {$product_name}.
Caractéristiques: {$features}
Audience cible: {$target_audience}
Inclus: bénéfices émotionnels, objections courantes et leurs réponses, bullet points des fonctionnalités.
Limite: 150 mots maximum.";
Reformulation et amélioration de texte
Là où l’IA excelle vraiment, c’est la reformulation. Personnellement, j’utilise ça tout le temps pour mes clients qui écrivent du contenu… technique mais qui veulent le rendre accessible.
const improveText = async (originalText, improvement_type) => {
const prompts = {
'simplify': `Simplifie ce texte pour le rendre accessible au grand public, sans jargon technique: ${originalText}`,
'engaging': `Rends ce texte plus engageant et persuasif, ajoute du dynamisme: ${originalText}`,
'professional': `Reformule ce texte dans un ton professionnel et formel: ${originalText}`,
'conversational': `Transforme ce texte en style conversationnel et amical: ${originalText}`
};
return await callOpenAI(prompts[improvement_type]);
};
Je connecte ça à l’éditeur avec un bouton personnalisé :
function add_improvement_button() {
wp_enqueue_script('text-improver', plugin_dir_url(__FILE__) . 'js/text-improver.js', ['wp-editor']);
add_action('media_buttons', function() {
echo '<button type="button" class="button" id="improve-text-btn">Améliorer avec IA</button>';
});
}
Optimisation SEO avec l’IA
Bon, soyons honnêtes : l’IA ne va pas révolutionner le SEO à elle seule. Mais pour certaines tâches répétitives, c’est formidable !
Voici mon prompt favori pour les meta descriptions :
const generateMetaDescription = async (postContent, targetKeyword) => {
const prompt = `À partir de ce contenu, génère une meta description optimisée SEO :
Contenu: ${postContent.substring(0, 500)}...
Mot-clé principal: ${targetKeyword}
Exigences:
- 150-155 caractères maximum
- Inclus le mot-clé naturellement
- Incite au clic
- Résume l'article fidèlement`;
return await callOpenAI(prompt);
};
Pour les titres H2/H3, j’ai développé cette fonction qui fonctionne bien :
function generate_seo_headings($content, $main_keyword, $secondary_keywords) {
$prompt = "Analyse ce contenu et suggère 5 titres H2 optimisés SEO :
Contenu: " . substr($content, 0, 1000) . "...
Mot-clé principal: {$main_keyword}
Mots-clés secondaires: " . implode(', ', $secondary_keywords) . "
Les titres doivent:
- Intégrer les mots-clés naturellement
- Être informatifs et attractifs
- Refléter le contenu réellement
- Varier en longueur (30-60 caractères)";
return call_openai_api($prompt);
}
Attention cependant : vérifiez toujours les suggestions ! L’IA peut parfois bourrer de mots-clés de façon non-naturelle.
Traduction et adaptation multilingue
La traduction avec ChatGPT, c’est un autre niveau par rapport aux outils classiques. Ça comprend le contexte et adapte le ton !
Voici comment j’intègre ça avec WPML :
function ai_translate_post($post_id, $target_language, $context = '') {
$post = get_post($post_id);
$translation_prompt = "Traduis ce contenu WordPress en {$target_language} :
Titre: {$post->post_title}
Contenu: {$post->post_content}
Contexte: {$context}
Instructions:
- Garde la structure markdown/HTML
- Adapte culturellement, ne traduis pas mot à mot
- Préserve les shortcodes WordPress [entre crochets]
- Ton adapté à l'audience {$target_language}";
$translated_content = call_openai_api($translation_prompt);
// Intégration WPML
if (function_exists('wpml_insert_translation')) {
wpml_insert_translation($post_id, $target_language, $translated_content);
}
return $translated_content;
}
Pour Polylang, le principe est similaire :
add_action('pll_save_post', function($post_id, $post, $translations) {
if (get_post_meta($post_id, '_auto_translate', true)) {
$languages = pll_the_languages(['raw' => 1]);
foreach ($languages as $lang) {
if ($lang['slug'] !== pll_get_post_language($post_id)) {
$translated = ai_translate_post($post_id, $lang['name']);
// Créer la traduction...
}
}
}
}, 10, 3);
Un conseil : toujours prévoir une relecture humaine pour les traductions importantes. L’IA est excellente, mais elle peut parfois manquer des nuances culturelles spécifiques !
Sécurité et performance
Bon, on arrive maintenant à la partie cruciale : sécuriser et optimiser notre intégration ChatGPT. Parce que franchement, c’est bien beau d’avoir une IA qui génère du contenu, mais si ça ralentit votre site ou expose vos données… c’est la catastrophe assurée !
Sanitisation des données et validation
Première règle d’or : ne jamais faire confiance aux données utilisateur. Même si ChatGPT génère du contenu « propre », il faut toujours nettoyer ce qui transite par notre plugin.
Pour les données textuelles, sanitize_text_field() est votre ami :
$prompt = sanitize_text_field($_POST['prompt']);
$generated_content = sanitize_textarea_field($api_response);
Mais attention, ce n’est pas suffisant ! Il faut aussi valider les autorisations avec current_user_can() – on ne veut pas qu’un utilisateur lambda puisse déclencher des appels API coûteux :
if (!current_user_can('edit_posts')) {
wp_die('Accès refusé');
}
Et bien sûr, les nonces sont obligatoires pour éviter les attaques CSRF :
if (!wp_verify_nonce($_POST['nonce'], 'chatgpt_action')) {
wp_die('Token invalide');
}
Rate limiting et gestion des quotas
Les appels API vers OpenAI coûtent de l’argent, donc il faut absolument limiter leur fréquence. WordPress nous facilite la tâche avec les transients !
Voici comment implémenter un rate limiting simple :
function check_rate_limit($user_id) {
$key = 'chatgpt_rate_' . $user_id;
$count = get_transient($key);
if ($count === false) {
set_transient($key, 1, HOUR_IN_SECONDS);
return true;
}
if ($count >= 10) { // 10 appels max par heure
return false;
}
set_transient($key, $count + 1, HOUR_IN_SECONDS);
return true;
}
Pour la gestion des quotas OpenAI, on peut surveiller les headers de réponse et alerter quand on approche des limites :
$remaining = wp_remote_retrieve_header($response, 'x-ratelimit-remaining-tokens');
if ($remaining < 1000) {
// Envoyer une alerte admin
wp_mail(get_option('admin_email'), 'Quota OpenAI faible', 'Il reste ' . $remaining . ' tokens');
}
Mise en cache des réponses
C’est là que ça devient intéressant ! Pourquoi redemander à ChatGPT la même chose plusieurs fois ? Un système de cache intelligent peut vous faire économiser beaucoup d’argent.
Voici une approche basée sur le hash du prompt :
function get_cached_response($prompt) {
$cache_key = 'chatgpt_' . md5($prompt);
$cached = get_transient($cache_key);
if ($cached !== false) {
return $cached;
}
// Appel API ici
$response = call_openai_api($prompt);
// Cache pendant 24h
set_transient($cache_key, $response, DAY_IN_SECONDS);
return $response;
}
Mais attention aux erreurs API ! Il faut gérer proprement les codes 429 (too many requests) et 500 (erreur serveur) :
if (wp_remote_retrieve_response_code($response) === 429) {
// Retry après délai
sleep(2);
return call_openai_api($prompt);
}
Pour les cas critiques, prévoyez toujours un fallback – par exemple, retourner le contenu original si l’API est indisponible. Vos utilisateurs vous remercieront !