WordPress

Intégrez vos graphiques Embases dans WordPress via le bloc HTML personnalisé Gutenberg, l'éditeur classique, ou en configurant les plugins de sécurité.

Bloc HTML personnalisé (Gutenberg)

L'éditeur Gutenberg (WordPress 5+) intègre nativement un bloc HTML personnalisé qui vous permet d'insérer du code HTML brut, y compris des iFrames. Pour commencer, ouvrez l'article ou la page WordPress où vous souhaitez insérer le graphique et passez en mode édition.

Dans l'éditeur Gutenberg, cliquez sur le bouton « + » en haut à gauche de l'écran (ou à l'endroit où vous souhaitez insérer le bloc — une icône + apparaît quand vous survolez l'espace entre deux blocs existants). Dans la barre de recherche de blocs, tapez « HTML » pour filtrer les résultats. Cliquez sur « HTML personnalisé » (Custom HTML) dans la liste. Un éditeur de code en texte brut s'ouvre dans la page, remplaçant le bloc sélectionné.

Collez le code iFrame Embases dans cet éditeur de code. Cliquez ensuite sur l'onglet « Aperçu » (Preview) en haut du bloc pour vérifier le rendu visuel du graphique sans quitter l'éditeur. Si le graphique s'affiche correctement dans l'aperçu, cliquez sur « Mettre à jour » ou « Publier » en haut à droite pour enregistrer la page. Si l'aperçu reste vide, vérifiez que l'URL de l'embed est correcte et que l'embed est en mode Public.

<iframe
  src="https://embases.com/e/VOTRE_TOKEN"
  width="100%"
  height="420"
  frameborder="0"
  loading="lazy"
  title="Graphique Embases"
></iframe>

Astuce : Pour un embed pleine largeur, ajoutez la classe wp-block-group alignfull au bloc parent, ou utilisez un thème qui supporte les blocs en pleine largeur.

Éditeur classique

Si vous utilisez l'éditeur classique WordPress (plugin Classic Editor avec TinyMCE), l'insertion d'un iFrame nécessite de passer en mode HTML brut. L'éditeur visuel (mode WYSIWYG) ne permet pas d'insérer des iFrames directement, et TinyMCE peut supprimer ou altérer le code HTML si vous essayez de l'insérer en mode Visuel.

Pour insérer correctement le code iFrame, cliquez sur l'onglet « Texte » en haut à droite de l'éditeur classique (à côté de l'onglet « Visuel »). L'éditeur bascule en mode HTML brut et affiche le code source complet de votre contenu. Placez votre curseur à l'endroit voulu dans le HTML — par exemple entre deux balises de paragraphe — et collez le code iFrame Embases. Cliquez sur l'onglet « Visuel » pour prévisualiser le résultat. Le graphique devrait apparaître à l'emplacement choisi.

Avertissement important : si vous repassez en mode Visuel et faites des modifications dans TinyMCE, puis revenez en mode Texte, vérifiez que le code de l'iFrame est toujours intact. TinyMCE a tendance à nettoyer le HTML et peut supprimer les attributs ou les balises qu'il ne reconnaît pas. Pour éviter ce problème, faites toujours vos modifications en mode Texte lorsque la page contient un iFrame.

Astuce : Certains thèmes WordPress suppriment les iFrames depuis le mode Visuel. Toujours revérifier en mode Texte après une modification visuelle.

Plugins de sécurité

Certains plugins de sécurité WordPress peuvent bloquer le chargement des iFrames provenant de domaines externes. Les plugins les plus courants qui peuvent causer ce problème sont Wordfence Security, iThemes Security (maintenant Solid Security), All In One WP Security, ainsi que les plugins de Content Security Policy (CSP). Si votre embed Embases ne s'affiche pas du tout alors que le code iFrame est correctement inséré, une règle de sécurité est probablement en cause.

Dans Wordfence : accédez à Wordfence → Firewall → Firewall Rules dans le menu WordPress. Examinez la liste des règles actives et cherchez toute règle concernant les iFrames ou les domaines externes. Si une règle bloque le domaine embases.com, vous devez soit la désactiver, soit ajouter une exception. Wordfence permet également de vérifier les blocages via Wordfence → Scan → scan results.

Pour les plugins de Content Security Policy : accédez aux paramètres du plugin CSP. Cherchez la directive frame-src ou default-src dans la politique de sécurité configurée. Ajoutez https://embases.com à la liste des sources autorisées pour frame-src. Enregistrez les paramètres et rechargez la page pour tester. Si le graphique s'affiche alors, la politique CSP était bien en cause.

Domain Whitelisting

Si vous avez activé le Domain Whitelisting sur votre embed Embases, vous devez ajouter le domaine de votre site WordPress dans la liste blanche de l'embed. Le domaine à ajouter est celui que vos visiteurs voient dans la barre d'adresse de leur navigateur quand ils consultent votre site — par exemple www.monsite.com ou monsite.com.

Pour ajouter ce domaine, connectez-vous à votre dashboard Embases et ouvrez les paramètres de l'embed concerné. Dans la section « Sécurité » → « Domaines autorisés », cliquez sur « Ajouter un domaine » et entrez votre domaine WordPress sans le protocole (sans https://). Si votre site est accessible à la fois avec et sans www (www.monsite.com et monsite.com), ajoutez les deux versions séparément pour éviter tout problème.

Si vous utilisez WordPress en mode multi-site (WordPress Multisite), chaque sous-site a son propre domaine ou sous-domaine. Ajoutez séparément dans Embases chaque domaine depuis lequel vous souhaitez afficher l'embed. De même, si votre site WordPress est accessible via un sous-domaine (blog.monsite.com), ajoutez ce sous-domaine exact plutôt que le domaine racine.

Astuce : Votre domaine WordPress ne doit pas inclure le chemin (pas de /mon-article). Entrez uniquement le nom de domaine racine.

Étapes suivantes