Content Creator Assistant | Outil de création de contenu WordPress

Assistant de création de contenu WordPress avec analyse SEO en temps réel :root { --primary-color: #2271b1; --secondary-color: #135e96; --success-color: #00a32a; --warning-color: #dba617; --error-color: #d63638; --bg-color: #f0f0f1; } * { margin: 0; padding: 0; box-sizing: border-box; } .container { max-width: 1200px; margin: 0 auto; } .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .panel { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .editor-container { grid-column: 1 / -1; } .toolbar { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; } .toolbar button { padding: 8px 15px; border: none; border-radius: 4px; background: var(--primary-color); color: white; cursor: pointer; transition: background 0.3s; } .toolbar button:hover { background: var(--secondary-color); } #editor { width: 100%; min-height: 300px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 15px; font-family: inherit; line-height: 1.6; resize: vertical; } .analysis-panel { background: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 15px; } .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; } .metric-card { background: white; padding: 15px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .metric-value { font-size: 24px; font-weight: bold; color: var(--primary-color); } .progress-bar { width: 100%; height: 8px; background: #eee; border-radius: 4px; margin-top: 10px; } .progress { height: 100%; background: var(--primary-color); border-radius: 4px; transition: width 0.3s ease; } .keyword-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .keyword-tag { background: #e9ecef; padding: 5px 10px; border-radius: 15px; font-size: 14px; cursor: pointer; transition: background 0.3s; } .keyword-tag:hover { background: #dee2e6; } .seo-score { display: flex; align-items: center; gap: 10px; margin-top: 15px; } .score-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; } .preview-panel { margin-top: 20px; padding: 20px; background: white; border-radius: 8px; } .google-preview { font-family: Arial, sans-serif; max-width: 600px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; } .preview-title { color: #1a0dab; font-size: 18px; margin-bottom: 5px; } .preview-url { color: #006621; font-size: 14px; margin-bottom: 5px; } .preview-description { color: #545454; font-size: 14px; } .export-options { display: block; gap: 10px; margin-top: 20px; } .export-button { display : inline-block; padding: 10px 20px; margin-bottom : 10px; margin-right: 10px; border: none; border-radius: 4px; background: var(--primary-color); color: white; cursor: pointer; transition: background 0.3s; } .export-button:hover { background: var(--secondary-color); } @media (max-width: 768px) { .toolbar { flex-direction: column; } .toolbar button { width: 100%; } } Gras Italique H2 H3 Lien Liste Analyser SEO Analyse du contenu Nombre de mots 0 Score de lisibilité 0 Score SEO 0 Suggestions de mots-clés: Aperçu Google Titre de votre article www.votresite.com/article Description de votre article... Options d'export Exporter vers WordPress Exporter en HTML Exporter en Markdown const editor = document.getElementById('editor'); const wordCount = document.getElementById('wordCount'); const readabilityScore = document.getElementById('readabilityScore'); const seoScore = document.getElementById('seoScore'); const wordProgress = document.getElementById('wordProgress'); const readabilityProgress = document.getElementById('readabilityProgress'); const seoProgress = document.getElementById('seoProgress'); const keywordContainer = document.getElementById('keywordContainer'); editor.addEventListener('input', updateMetrics); function updateMetrics() { const text = editor.value; const words = text.trim().split(/\s+/).length; // Mise à jour du nombre de mots wordCount.textContent = words; const wordProgressValue = Math.min((words / 500) * 100, 100); wordProgress.style.width = `${wordProgressValue}%`; // Calcul du score de lisibilité const readability = calculateReadability(text); readabilityScore.textContent = readability; readabilityProgress.style.width = `${readability}%`; // Mise à jour de l'aperçu updatePreview(text); // Suggestions de mots-clés updateKeywordSuggestions(text); } function calculateReadability(text) { // Algorithme simplifié de lisibilité const sentences = text.split(/[.!?]+/).length; const words = text.trim().split(/\s+/).length; const avgWordsPerSentence = words / sentences; let score = 100; if (avgWordsPerSentence > 20) score -= 10; if (avgWordsPerSentence > 25) score -= 20; return Math.max(0, Math.min(100, score)); } function updatePreview(text) { const previewTitle = document.getElementById('previewTitle'); const previewDescription = document.getElementById('previewDescription'); // Extraction du titre (première ligne ou premiers mots) const title = text.split('\n')[0].substring(0, 60); const description = text.substring(0, 160) + '...'; previewTitle.textContent = title || 'Titre de votre article'; previewDescription.textContent = description; } function updateKeywordSuggestions(text) { // Analyse simple des mots fréquents const words = text.toLowerCase().match(/\b\w+\b/g) || []; const wordFreq = {}; words.forEach(word => { if (word.length > 3) { wordFreq[word] = (wordFreq[word] || 0) + 1; } }); // Affichage des mots-clés les plus fréquents keywordContainer.innerHTML = ''; Object.entries(wordFreq) .sort(([,a], [,b]) => b - a) .slice(0, 5) .forEach(([word, freq]) => { const tag = document.createElement('span'); tag.className = 'keyword-tag'; tag.textContent = `${word} (${freq})`; keywordContainer.appendChild(tag); }); } function formatText(format) { const textarea = document.getElementById('editor'); const start = textarea.selectionStart; const end = textarea.selectionEnd; const selectedText = textarea.value.substring(start, end); let formattedText = ''; switch(format) { case 'bold': formattedText = `${selectedText}`; break; case 'italic': formattedText = `${selectedText}`; break; case 'h2': formattedText = `\n${selectedText}\n`; break; case 'h3': formattedText = `\n${selectedText}\n`; break; case 'link': const url = prompt('Entrez l\'URL:'); if (url) formattedText = `${selectedText}`; break; case 'list': formattedText = `\n\n\t${selectedText}\n`; break; } textarea.value = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end); updateMetrics(); } function checkSEO() { const text = editor.value; let score = 100; // Vérifications SEO basiques if (text.length < 300) score -= 20; if (!text.includes('')) score -= 10; if (!text.includes('