MINESWEEPER

Comment ajouter le Démineur à un blog WordPress

WordPress fait volontiers tourner une grille de Démineur dans un article, mais il a aussi trois raisons distinctes de supprimer ton iframe avant même qu’elle soit en ligne.

Temps nécessaire
Environ 2 minutes
Bloc utilisé
HTML personnalisé
Commande slash
/html
Rôle requis
Administrateur ou Éditeur
<iframe
  src="https://play-minesweeper.games/embed/?size=beginner"
  width="344"
  height="472"
  frameborder="0"
  title="Minesweeper Game"
  referrerpolicy="no-referrer-when-downgrade"
  allow="clipboard-write"></iframe>
<p style="font:12px/1.5 Tahoma,'MS Sans Serif',Geneva,sans-serif;color:#555555;margin:6px 0 0;max-width:316px">
  <a href="https://play-minesweeper.games/" style="color:#555555">play-minesweeper.games</a> — free Minesweeper, no download
</p>

Rien de tout cela ne demande d’extension, de clé d’API ou de compte. La grille tourne sur nos serveurs, dans le cadre ; ton site se contente de lui réserver la place. Le paragraphe après l’iframe est le lien de mention : c’est du HTML simple dans ton propre article, c’est ce qui garde l’intégration gratuite, et il doit être collé avec le reste. Change son style comme tu veux : la couleur de lien de ton thème WordPress rend généralement mieux que le gris en ligne.

Ce guide couvre l’éditeur de blocs, l’éditeur classique, les widgets, et chacun de ces trois pièges.

Intégrer le Démineur avec le bloc HTML personnalisé

  1. Copie le code d’intégration complet

    Ouvre le générateur d’intégration, choisis une taille de grille et un thème, et copie l’extrait en entier. Il a deux parties : l’iframe qui fait tourner le jeu, et un court paragraphe de mention en dessous avec un lien vers play-minesweeper.games. WordPress accepte les deux, alors colle les deux.

  2. Ajoute un bloc HTML personnalisé

    Dans l’éditeur de blocs, place le curseur sur un paragraphe vide, tape /html et appuie sur Entrée. Tu peux aussi cliquer sur le bouton bleu + d’insertion de blocs en haut à gauche et chercher « HTML personnalisé ». Le bloc apparaît avec un bouton Modifier le HTML.

  3. Colle le code dans le bloc

    Clique sur Modifier le HTML, colle l’extrait entier dans la zone de code (l’iframe et la ligne de mention ensemble) et vérifie l’aperçu en direct qui s’affiche à côté. Clique sur Mettre à jour quand la grille te convient. Sur les versions plus anciennes de WordPress, la barre d’outils du bloc propose plutôt une bascule HTML / Aperçu pour vérifier ton travail.

  4. Ou utilise l’onglet Texte de l’éditeur classique

    Si ton site tourne encore avec l’éditeur classique, passe de l’onglet Visuel à l’onglet Texte en haut à droite de la zone d’édition, colle le code à cet endroit et enregistre sans revenir à Visuel : l’éditeur visuel réécrit le balisage qu’il ne reconnaît pas et peut supprimer l’iframe.

  5. Prévisualise sur ordinateur et sur téléphone, puis publie

    Utilise l’aperçu dans un nouvel onglet pour charger l’article sur un vrai appareil. Vérifie que la grille n’est pas coupée par la largeur de contenu de ton thème, puis clique sur Publier ou Mettre à jour.

Pourquoi WordPress supprime sans cesse ton iframe

C’est la première raison pour laquelle un jeu intégré échoue sur WordPress, et elle a trois causes distinctes qui se ressemblent en tout point depuis l’éditeur.

1. Ton rôle d’utilisateur. WordPress nettoie le contenu enregistré avec wp_kses(), sauf si l’auteur possède la capacité unfiltered_html. Les Administrateurs et les Éditeurs l’ont sur une installation standard à site unique. Les Auteurs et les Contributeurs ne l’ont pas : leur <iframe> est supprimée sans avertissement dès que l’article est enregistré. Sur un réseau multisite, seuls les super-administrateurs gardent cette capacité : l’Administrateur d’un site du réseau perdra quand même la balise.

2. Les restrictions de forfait de WordPress.com. Les sites hébergés sur WordPress.com traitent iframe, script, style, form, embed et object comme du balisage premium : il faut un forfait payant avec les fonctionnalités d’hébergement activées. Avec le forfait gratuit, le bloc HTML personnalisé accepte le collage puis le supprime à l’enregistrement. Si tu as un blog WordPress.com gratuit, mets un lien vers le jeu au lieu de l’intégrer : un lien fonctionne très bien dans un article.

3. L’onglet Visuel de l’éditeur classique. Coller dans l’onglet Texte puis revenir à Visuel avant d’enregistrer laisse TinyMCE reformater le balisage, ce qui abîme ou supprime souvent les iframes. Colle en dernier, enregistre depuis l’onglet Texte.

Adapter la grille à ton thème

Les thèmes de blocs limitent le contenu des articles à une largeur fixe, souvent de 650 à 840 pixels. L’iframe générée a des dimensions fixes en pixels : une grille plus large que cette colonne débordera ou sera coupée sur téléphone. Enveloppe-la pour qu’elle puisse défiler au lieu de casser la mise en page :

<div style="max-width:100%;overflow-x:auto;text-align:center">
  <iframe src="https://play-minesweeper.games/embed/?size=intermediate"
    width="536" height="664" frameborder="0"
    title="Minesweeper Game" loading="lazy"></iframe>
  <p style="font:12px/1.5 sans-serif;margin:6px auto 0;max-width:540px">
    <a href="https://play-minesweeper.games/">play-minesweeper.games</a> — free Minesweeper, no download
  </p>
</div>

Repères selon l’emplacement : Débutant 9×9 (344×472) pour les barres latérales et les thèmes étroits pensés pour le mobile, Intermédiaire 16×16 (536×664) pour une colonne d’article normale, Expert 30×16 (956×664) uniquement dans un groupe en pleine largeur ou en largeur étendue.

Dans l’éditeur de blocs, tu peux aussi sélectionner le bloc Groupe parent du bloc HTML personnalisé et régler son alignement sur Largeur étendue ou Pleine largeur si ton thème le permet, ce qui laisse de la place à une grille Expert.

Barres latérales, pieds de page et constructeurs de pages

Zones de widgets. Apparence > Widgets, ajoute un widget HTML personnalisé, colle le même extrait. Un jeu dans la barre latérale est un vrai levier de temps passé sur la page pour un blog de jeux ou de casse-tête.

Elementor. Fais glisser le widget HTML et colle les deux parties. N’utilise pas le widget Éditeur de texte : il filtre les balises de la même manière que l’éditeur classique.

Divi. Utilise un module Code plutôt qu’un module Texte.

AMP. L’extension AMP officielle convertit <iframe> en <amp-iframe>. AMP exige que le contenu encadré soit servi en HTTPS (c’est le cas ici) et refuse d’afficher une iframe placée en haut du premier écran si elle ne mesure pas au moins 600 pixels de haut. Place la grille après tes premiers paragraphes et la validation passe.

Mise en cache et CDN. Rien dans l’intégration n’a besoin d’être régénéré : le cache de pages complètes, Cloudflare et consorts ne posent aucun problème. Seule la réécriture pour le chargement différé pose souci, et seulement quand elle vise les iframes.

Questions sur l’intégration dans WordPress

Quel forfait WordPress faut-il pour intégrer un jeu ?

Sur un site WordPress auto-hébergé (le logiciel de wordpress.org sur ton propre hébergement), aucun forfait n’entre en jeu : les iframes fonctionnent d’emblée pour les Administrateurs et les Éditeurs. Sur WordPress.com, des balises comme iframe, script, form et embed ne sont autorisées qu’avec un forfait payant aux fonctionnalités d’hébergement activées ; les forfaits WordPress.com gratuits et d’entrée de gamme les suppriment à l’enregistrement de l’article.

Mon iframe disparaît chaque fois que j’enregistre l’article. Pourquoi ?

WordPress fait passer le contenu enregistré par wp_kses() pour tout utilisateur qui n’a pas la capacité unfiltered_html, et ce filtre retire les balises iframe et script. Les Administrateurs et les Éditeurs ont cette capacité sur un site unique ; en multisite, seuls les super-administrateurs l’ont, si bien qu’un Éditeur sur une installation en réseau perdra le code à chaque fois. Demande à un administrateur de publier l’article, ou installe une extension qui accorde cette capacité.

Peut-on ajouter le Démineur à la barre latérale WordPress ?

Oui. Va dans Apparence > Widgets, ajoute un widget HTML personnalisé à la zone de la barre latérale et colle le même extrait. Les barres latérales font généralement de 300 à 350 pixels de large : utilise la grille Débutant 9x9, la grille Intermédiaire déborderait.

Faut-il une extension pour intégrer le jeu ?

Non. C’est une simple iframe, sans JavaScript à charger sur ton site : le bloc HTML personnalisé intégré à WordPress suffit. Les extensions comme Advanced iFrame ne servent que si tu as besoin d’un comportement en plus, comme l’ajustement automatique de la hauteur.

Le jeu s’affiche en boîte vide depuis que j’ai activé mon extension de cache.

Les extensions d’optimisation agressives peuvent charger les iframes en différé ou les retarder, en les remplaçant par un espace réservé qui ne se transforme jamais en jeu. Dans WP Rocket, LiteSpeed Cache ou Autoptimize, ajoute play-minesweeper.games à la liste d’exclusion du chargement différé, puis vide le cache.

Intégrer un jeu va-t-il ralentir ma page ?

L’iframe se charge dans son propre contexte de navigateur, après l’affichage de ta page : elle ne bloque donc pas ton contenu. Si tu veux être strict, ajoute loading="lazy" à la balise iframe pour que le jeu ne se télécharge que lorsque le lecteur approche en faisant défiler.

Tout ce qui figure sur cette page part d’un extrait du générateur : un cadre de jeu et, en dessous, une ligne de mention avec un lien. Choisis une taille de grille et un thème, décide si tu affiches la ligne facultative « Powered by » à l’intérieur du jeu, puis copie le code.

Ouvrir le générateur d’intégration du Démineur

Également utile : le générateur de widget Démineur et les options de l’iframe, comment jouer au Démineur et les tailles de grille personnalisées.