Has creado una experiencia increíble con MindAR y A-Frame, pero ahora te enfrentas al muro de WordPress: si pegas el código en una entrada, se rompe o desaparece.
Esto ocurre porque WordPress limpia el código por seguridad. En este tutorial, aprenderás la forma correcta, segura y profesional de incrustar tus proyectos WebAR en cualquier sitio web (WordPress, Wix, Squarespace) sin que dejen de funcionar.
No intentes pegar las 100 líneas de código HTML dentro de un bloque de WordPress. Los estilos de tu tema (CSS) chocarán con la cámara de AR y arruinarán la experiencia.
Lo que haremos es alojar el archivo AR como una página independiente y abrir una «ventana» (iframe) dentro de tu post.
Paso 1: Prepara tus archivos
Necesitas tener tu proyecto listo en una carpeta. Deberías tener al menos:
- index.html (Tu código AR).
- targets.mind (Tu archivo de marcadores).
- (Opcional) Tus modelos .glb o imágenes.
Paso 2: Sube los archivos (Elige una opción)
Necesitas que tu proyecto tenga una dirección web (URL) real. Elige la opción que prefieras:
Opción A: Usar tu propio Hosting (Recomendada)
Si ya pagas un hosting para tu WordPress, usa esta opción.
- Entra al cPanel o FTP de tu hosting.
- Ve a la carpeta public_html.
- Crea una carpeta nueva (ej: ar-proyectos).
- Sube ahí tus archivos. Tu enlace será: https://tusitio.com/ar-proyectos/index.html
Opción B: Usar GitHub Pages (Alternativa Gratis)
Úsala solo si no tienes acceso a los archivos de tu servidor.
- Sube tu código a un repositorio de GitHub.
- Activa «GitHub Pages» en la configuración. Tu enlace será: https://usuario.github.io/proyecto
Paso 3: El Código de Incrustación.
Ahora, ve a tu editor de WordPress (Gutenberg o Elementor).
- Añade un bloque de «HTML Personalizado».
- Pega el siguiente código.
⚠️ IMPORTANTE: En donde dice src=»…», borra el ejemplo y pega TU enlace (el que creaste en el Paso 2).
<!-- BLOQUE DE HTML PARA COPIAR EN WORDPRESS -->
<div class="ar-container">
<!--
IMPORTANTE:
Reemplaza 'https://tusitio.com/ar-proyectos/index.html'
con la URL real donde subiste tus archivos HTML.
-->
<iframe
src="https://tusitio.com/ar-proyectos/index.html"
allow="camera; microphone; gyroscope; accelerometer; xr-spatial-tracking;"
width="100%"
height="600px"
frameborder="0"
scrolling="no">
</iframe>
<div class="ar-instructions">
👆 Escanea la imagen de abajo usando esta cámara
</div>
</div>
<style>
/* ESTILOS CSS PARA EL CONTENEDOR */
/* Hace que el recuadro tenga bordes redondos y sombra */
.ar-container {
position: relative;
border-radius: 15px;
overflow: hidden; /* Recorta el contenido que se salga de los bordes redondos */
box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra suave */
margin-bottom: 30px; /* Espacio debajo del recuadro */
background: #000; /* Fondo negro por si tarda en cargar */
}
/* Estilo para la barra de instrucciones negra de abajo */
.ar-instructions {
text-align: center;
background: #222;
color: white;
padding: 10px;
font-family: sans-serif;
font-size: 14px;
}
/* RESPONSIVE: Ajustes para celulares */
@media (max-width: 768px) {
iframe {
height: 500px; /* En móvil hacemos la ventana un poco más cuadrada */
}
}
</style>
Paso 4: Coloca el Marcador (Target)
Justo debajo del bloque HTML del iframe, añade un bloque de Imagen normal y sube el .jpg o .png que usaste para crear el marcador.
Esto es vital: El usuario leerá tu post en su PC, verá la imagen del marcador en la pantalla, y usará la cámara del iframe (o su celular) para escanear esa misma imagen.
Solución de Problemas Comunes
1. «La cámara se queda negra o dice Permiso Denegado»
Causa: Tu web no tiene certificado SSL (candado verde).
Solución: WebAR (y el acceso a cámara) SOLO funciona en https://. Si tu web es http://, nunca funcionará. Asegúrate de que tanto tu WordPress como la URL del iframe sean HTTPS.
2. «El botón de VR/AR aparece abajo a la derecha»
A-Frame pone un botón de gafas VR por defecto. Para quitarlo en una web incrustada, asegúrate de tener esto en tu código HTML original (index.html): vr-mode-ui=»enabled: false»
3. «El modelo se ve oscuro»
Al estar dentro de un iframe, a veces el brillo de la pantalla afecta. Asegúrate de usar <a-light> dentro de tu escena para iluminar el modelo artificialmente.
Veamos un ejemplo de cómo poner una aplicación realidad aumentada WebAR en tus páginas y post de wordpress.
Para este tutorial utilice como marcador la siguiente imagen.
¿Te gusto este tutorial? Recuerda que puedes apoyarme en mi Patreon. Tu ayuda es necesaria para mantener el blog a flote y lograr más y mejor contenido. Gracias.
Da clic en la imagen para ser dirigido al PATREON.
