Esta guía cubre el editor de bloques, el editor clásico, los widgets y cada una de esas tres trampas.
Insertar el Buscaminas con el bloque HTML personalizado
Copia el código completo
Abre el generador, elige el tamaño del tablero y el tema, y copia el fragmento entero. Tiene dos partes: el iframe que ejecuta el juego y un breve párrafo de crédito debajo que enlaza a play-minesweeper.games. WordPress acepta las dos, así que pega las dos.
Añade un bloque HTML personalizado
En el editor de bloques, pon el cursor en un párrafo vacío, escribe /html y pulsa Intro. También puedes hacer clic en el botón azul + del insertador de bloques, arriba a la izquierda, y buscar «HTML personalizado» (Custom HTML). El bloque aparece con un botón Editar HTML (Edit HTML).
Pega el código en el bloque
Haz clic en Editar HTML, pega el fragmento entero en el panel de código (el iframe y la línea de atribución juntos) y revisa la vista previa en directo que aparece al lado. Pulsa Actualizar (Update) cuando el tablero se vea bien. En versiones antiguas de WordPress, la barra de herramientas del bloque tiene en su lugar un conmutador HTML / Vista previa para comprobar el resultado.
O usa la pestaña Texto del editor clásico
Si tu web sigue usando el editor clásico, cambia de la pestaña Visual a la pestaña Texto (Text), arriba a la derecha de la caja de edición, pega ahí el código y guarda sin volver a Visual: el editor visual reescribe el código que no reconoce y puede eliminar el iframe.
Previsualiza en ordenador y en móvil, y publica
Abre la vista previa en una pestaña nueva (Preview > Preview in new tab) para cargar la entrada en un dispositivo real. Comprueba que el ancho de contenido de tu tema no recorta el tablero y pulsa Publicar o Actualizar.
Por qué WordPress borra tu iframe una y otra vez
Es el motivo número uno por el que falla un juego insertado en WordPress, y tiene tres causas distintas que desde el editor parecen idénticas.
1. Tu rol de usuario. WordPress limpia el contenido guardado con wp_kses() salvo que el autor tenga la capacidad unfiltered_html. En una instalación normal de un solo sitio la tienen los Administradores y los Editores. Los Autores y los Colaboradores no, así que su <iframe> desaparece sin aviso en cuanto se guarda la entrada. En una red Multisite solo los Superadministradores conservan esa capacidad: el Administrador de uno de los sitios de la red seguirá perdiendo la etiqueta.
2. Las restricciones de plan de WordPress.com. Los sitios alojados en WordPress.com tratan iframe, script, style, form, embed y object como código premium: exigen un plan de pago con las funciones de alojamiento activadas. Con el plan gratuito, el bloque HTML personalizado acepta lo que pegas y luego lo elimina al guardar. Si tienes un blog gratuito de WordPress.com, enlaza al juego en lugar de insertarlo: el enlace funciona perfectamente en una entrada.
3. La pestaña Visual del editor clásico. Si pegas en la pestaña Texto y vuelves a Visual antes de guardar, TinyMCE reformatea el código, y eso a menudo estropea o elimina los iframes. Pega lo último y guarda desde la pestaña Texto.
Cómo hacer que el tablero quepa en tu tema
Los temas de bloques limitan el contenido de las entradas a un ancho fijo, normalmente de 650 a 840 píxeles. El iframe generado tiene dimensiones fijas en píxeles, así que un tablero más ancho que esa columna se saldrá o quedará recortado en los móviles. Envuélvelo para que pueda desplazarse en vez de romper el diseño:
<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>Orientación aproximada según dónde lo pongas: Principiante 9×9 (344×472) para barras laterales y temas estrechos pensados para el móvil, Intermedio 16×16 (536×664) para una columna de entrada normal, Experto 30×16 (956×664) solo dentro de un grupo a todo el ancho o con alineación amplia.
En el editor de bloques también puedes seleccionar el bloque Grupo que contiene el bloque HTML personalizado y poner su alineación en Ancho amplio o Ancho completo (Wide width / Full width) si tu tema lo admite, lo que da aire a un tablero de Experto.
Barras laterales, pies de página y maquetadores
Zonas de widgets. En Apariencia > Widgets, añade un widget HTML personalizado y pega el mismo fragmento. Un juego en la barra lateral es una forma real de alargar el tiempo de permanencia en un blog de puzles o de videojuegos.
Elementor. Arrastra el widget HTML y pega las dos partes. No uses el widget Editor de texto (Text Editor): filtra las etiquetas igual que el editor clásico.
Divi. Usa un módulo Code (código) en lugar de un módulo de texto.
AMP. El plugin oficial de AMP convierte <iframe> en <amp-iframe>. AMP exige que el contenido enmarcado se sirva por HTTPS (este lo está) y se niega a mostrar un iframe colocado arriba del todo, en la primera pantalla, salvo que mida al menos 600 píxeles de alto. Pon el tablero después de tus primeros párrafos y validará.
Caché de páginas estáticas y CDN. Nada del widget necesita regenerarse, así que la caché de página completa, Cloudflare y similares funcionan bien. Solo da problemas la reescritura para la carga diferida (lazy load), y solo cuando se aplica a los iframes.