html2wp / Blog / Lovable a WordPress
Lovable a WordPress: un proyecto convertido en un tema real
Pasar de Lovable a WordPress es el mismo trabajo que convertir HTML a WordPress, con un paso más. Un proyecto antiguo de Lovable es una app de React, así que su HTML no tiene nada que convertir: la página solo aparece en el navegador, cuando se ejecuta el JavaScript. Los proyectos más nuevos (TanStack Start, desde mayo de 2026) generan sus páginas en el servidor, y html2wp convierte los dos tipos de la misma manera. Esta guía te lleva desde un proyecto así hasta un tema de WordPress que contiene tu código, sin rehacerlo. Cada paso sale de una conversión real, y puedes abrir sus dos extremos.
Un ejemplo de Lovable a WordPress, abierto en ambos extremos
Todo lo que sigue describe una conversión que hicimos de verdad. El original es una app de Lovable: bruce-banner.lovable.app, un portafolio de fotografía. El resultado es bruce.html2wp.dev, que funciona sobre WordPress. Puedes entrar en su administración en /wp-admin con el usuario demo y la contraseña demo.
La conversión generó cinco páginas y cinco entradas con el tema bruce-banner. Eso cabe en el plan gratuito, que convierte hasta cinco páginas por conversión y no necesita clave. Abre los dos sitios uno al lado del otro antes de seguir leyendo. Este artículo trata de la diferencia entre ellos, así que puedes medirla tú mismo.
Hay dos conversiones más de Lovable a WordPress abiertas de la misma forma. Primero, spark-remix-kindred.lovable.app se convirtió en terra.html2wp.dev, una tienda de punto con WooCommerce. Después, bloom-echo-remix.lovable.app pasó a ser soria.html2wp.dev, la web de una fotógrafa de bodas. En los tres sitios, el acceso a la administración de WordPress es demo / demo.
Qué significa exactamente "1:1" aquí
El código que la app de Lovable genera en el navegador es el mismo código que entra en el tema. Nadie rehace tus secciones como widgets de un constructor de páginas, así que nunca recibes una aproximación del diseño, página por página. Todos los pasos de abajo parten de esa idea.
Qué necesita tu equipo para pasar de Lovable a WordPress
La compilación, el trabajo en el navegador y todas las comprobaciones se ejecutan en tu máquina. Al servicio que genera el tema solo llega el resultado compilado. Por eso no es un servicio web al que subes un ZIP, y tiene requisitos que conviene conocer desde el principio:
- Node 20 o posterior para la compilación y los scripts locales.
- Python 3 con los paquetes Playwright y Pillow. Playwright controla un navegador real, y así es como una app de React se convierte en HTML.
- Docker con el comando
docker compose. Arranca un WordPress temporal en tu equipo, y el conversor prueba ahí el tema antes de que tú lo veas. - php-cli, porque cada archivo PHP pasa una comprobación de sintaxis antes de entrar en el ZIP.
jq,curl,bashytar. El WordPress de destino debe ser la versión 6.6 o posterior.
El plugin comprueba todo esto en el primer paso y muestra dos listas. La primera recoge lo que puede instalar por sí mismo dentro de tus propias carpetas. La segunda recoge lo que tienes que decidir tú: Docker, un Node más reciente y arrancar Docker. El segundo grupo nunca lo instala a tus espaldas.
Docker es lo que más sorprende
Otros conversores no lo necesitan, porque se saltan este paso. Aquí el conversor instala el tema generado en un WordPress real y lo prueba ahí. Para eso sirven el navegador y el contenedor. Si buscas una herramienta de cinco minutos en el navegador, esta no lo es.
Instala el plugin
Publicamos el plugin dos veces, una para cada agente. Los scripts y el número de versión son los mismos para Claude Code y Codex. Elige el que uses.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Después, una sola vez, en una terminal:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Para el plan gratuito no hay nada más que configurar: ni clave, ni registro, ni tarjeta. Si prefieres no trabajar en una terminal, puedes hacer la misma conversión en la app de escritorio html2wp (una guía con capturas de pantalla).
Cómo llevar tu proyecto de Lovable a tu disco
La dirección de un sitio publicado no es una entrada admitida, y es a propósito. Una copia de una página publicada solo conserva el resultado ya renderizado. Pierde lo que sabe el código fuente: qué rutas existen, cuáles son los componentes y qué produce la compilación.
Por eso la entrada es una carpeta. Lovable sincroniza tu proyecto con un repositorio de GitHub. Conéctalo, clónalo y tendrás el proyecto en local. Cambie como cambie la interfaz de Lovable este mes, lo que quieres es el repositorio: los mismos archivos con los que Lovable construye el sitio.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
No hace falta ejecutar antes npm install ni una compilación. La conversión lo hace por sí misma.
Escribe "convert this project"
En esa carpeta, con tu agente abierto, escribe:
/html2wp:html2wp
convert this project
Codex no tiene comando con barra. En su lugar, dile convert this project into a verified WordPress block theme y encontrará la skill por sí mismo. Con Claude Code o Codex, esa frase es toda la instrucción. No escribes ningún archivo de configuración ni eliges un comando de compilación.
Flash tarda unos 30 minutos y Full alrededor de una hora, según el número de páginas y la velocidad de tu equipo. Casi todo el tiempo trabaja sin ti e informa de dónde está después de cada paso, así que no esperes silencio.
Qué pasa con el React al convertir Lovable a WordPress
Este es el paso que añade un proyecto de Lovable.
Una app antigua de Lovable (React y Vite) tiene un único index.html. Su cuerpo es un elemento vacío en el que se monta la app de React, más una etiqueta script, así que no hay nada que convertir. Primero el conversor compila el proyecto. Luego un navegador real recorre cada ruta mientras una grabadora observa. El resultado es HTML plano por cada ruta, justo lo que necesita el resto del proceso. Un proyecto más nuevo con TanStack Start ya genera sus páginas en el servidor; aun así, el conversor lo compila y recorre cada ruta igual.
Qué captura la grabadora
- Estado que solo existe tras ejecutar JavaScript. Acordeones abiertos, contenido de menús desplegables, clases que cambia un script. La grabadora los guarda como datos en los elementos, y un pequeño runtime genérico los reproduce. Nadie los reescribe a mano de memoria.
- Umbrales de scroll, al píxel. Una cabecera que cambia en
scrollY > 40usa un número que alguien se inventó. La grabadora lo encuentra y calcula exactamente dónde está. Un valor redondeado a ojo cambiaría la cabecera en el momento equivocado, para siempre. - Relaciones del tipo "solo uno puede estar abierto". Abres A y luego B. ¿Se cerró A? Grabar cada elemento por separado no lo revela, así que la grabadora lo prueba aparte.
- Las animaciones al hacer scroll se conservan. La grabadora las captura y el tema las reproduce igual que el original. El contenido sigue visible sin JavaScript, un elemento solo se oculta mientras corre el runtime, y con
prefers-reduced-motionel tema omite la animación. La coincidencia 1:1 la medimos en reposo, cuando las animaciones han terminado.
Lo que no finge
- El comportamiento que no pudo grabar va a una lista. Cada página tiene la suya. Léela.
Este paso tiene su propia comprobación, porque ninguna comprobación posterior lo ve. El conversor hace una captura de cada ruta en vivo y la compara con su copia estática a 1440, 820 y 390 píxeles de ancho. Si difieren, el paso falla. Todos los pasos siguientes miden desde la copia estática hasta WordPress, así que un defecto creado aquí se les escaparía a todos.
La revisión que no te puedes saltar
Cuando terminan las comprobaciones automáticas, la conversión aún no ha acabado. El conversor pone cada página en una imagen junto a su original, y tú lees cada una de arriba abajo.
En una conversión faltaba una sección entera más abajo en la página, y la comparación de píxeles mostró una diferencia de solo el 0,4 %. Esa página pasa la comprobación sin la sección. Por su naturaleza, las comprobaciones automáticas no ven tres tipos de defecto. El primero es un control que se ve perfecto pero no hace nada. Otro es un valor fijado a mano a partir de la única página de la que salió una plantilla. Y el tercero es todo lo que solo aparece después de hacer scroll, pulsar algo o enviar un formulario.
Además del aspecto, comprueba si puedes editar el contenido. Una página puede coincidir al píxel y, aun así, el propietario quizá no consiga editar sus preguntas frecuentes o su cuadrícula de funciones. Lo vimos en vivo: un acordeón con cinco preguntas se veía idéntico, pero ningún editor lo ofrecía. Una revisión que solo miraba el aspecto lo dejó pasar. Así que en cada página pregúntate si puedes editar desde wp-admin cada grupo que se repite y cada bloque de texto.
Instala el tema
Tu carpeta de proyecto recibe un ZIP del tema y, a su lado, CONVERSION-REPORT.md. Nada más. La carpeta de trabajo con la compilación queda fuera de tu proyecto, en una carpeta de caché, así que tu repositorio sigue limpio. El informe es la excepción, porque quien lo lee eres tú. Recoge qué cubrió la conversión, qué encontró la revisión, cada aviso (también los aceptables) y lo que sigue pendiente.
En WordPress, ve a Apariencia → Temas → Añadir nuevo tema → Subir tema, elige el ZIP y actívalo. El tema funciona por sí solo. Páginas, blog, formularios, menús, SEO y redirecciones son todos código propio del tema. No necesita ningún plugin para funcionar y nunca se comunica con ningún servidor nuestro.
Editar el sitio tras pasar de Lovable a WordPress: tres caminos
Las entradas del blog pasan a ser entradas normales de WordPress, así que las escribes en el editor de bloques desde el primer momento. El texto de las páginas se queda en tu HTML, y para editarlo hay dos opciones que conviene conocer. Una de ellas es un constructor de páginas.
| Camino | Qué obtienes | Qué te cuesta |
|---|---|---|
| Solo el tema | Tu código, sin cambios. Sin plugin, sin dependencias, nada que renovar. Las entradas se escriben en el editor de bloques. | Sin plugin, el texto de las páginas se cambia en el HTML. Si el cliente quiere editarlo él mismo, lo hace con Visual Edit (Lite es gratis). |
| Visual Edit, nuestro plugin | Haces clic en un título directamente en la página, escribes encima y guardas. Editas textos, imágenes, enlaces, formularios y menús donde están, y el código queda como estaba. Lite es gratis y no necesita clave. | Es un plugin más instalado en WordPress. Lite guarda 10 pasos de historial y no tiene chat con IA. Pro cuesta 59 € al año. |
| Elementor u otro constructor de páginas |
Cualquiera que conozca Elementor puede reorganizar la página sin ayuda, y mucha gente lo conoce. Para un cliente que va a cambiar el diseño por su cuenta, esa familiaridad tiene valor. | El código pasa a ser widgets del constructor y ya no es tuyo. A partir de ahí, el sitio no se muestra sin Elementor, y heredas su estructura, su CSS y sus actualizaciones. |
Si conviertes para que el diseño sobreviva, un constructor de páginas es justo lo que lo destruye. Pasar un diseño a mano a un constructor es el paso tras el cual el sitio deja de parecerse al diseño, y por eso existe este conversor. Pero si el diseño es solo un punto de partida y el cliente va a rehacer la mitad el próximo trimestre de todos modos, dale Elementor sin problema.
Lite o Pro, si eliges Visual Edit
| Lite (gratis) | Pro | |
|---|---|---|
| Editar el contenido con un clic | ✓ | ✓ |
| Formularios, menús, campos SEO | ✓ | ✓ |
| Edición mediante chat con IA | – | ✓, con tu propia clave de API |
| Exportar el tema | – | ✓ |
| Protección de formularios con Turnstile | – | ✓ |
| Edición de imágenes con IA y animaciones a partir de imágenes | – | ✓ |
| Historial de edición | 10 pasos | 300 pasos |
El chat con IA de Pro funciona con tu propia clave de API. No te vendemos tokens, y el coste de usarlos lo pagas directamente a tu proveedor.
¿Lovable o WordPress? No tienes que elegir
Se suele plantear como una cosa o la otra. Para un sitio de contenido, no tiene por qué serlo. En Lovable haces un diseño rápido. En WordPress un sitio vive durante años y lo edita otra persona. La conversión conserva lo primero y traslada lo segundo. El tema funciona en cualquier hosting de WordPress, así que el sitio ya no tiene que vivir en Lovable, donde lo creaste.
Lo que se traslada es el sitio web: páginas, blog, formularios, menús, SEO y redirecciones. Lo que no se traslada es la aplicación que hay detrás: el inicio de sesión, la base de datos y las llamadas a tu propia API. Si tu proyecto de Lovable es sobre todo eso, déjalo en Lovable. Una tienda queda a medio camino. Con una licencia Pro, su catálogo pasa a WooCommerce, como ocurrió con Terra Studios.
Cuánto cuesta pasar de Lovable a WordPress y qué rechaza
El plan gratuito está abierto a todo el mundo, sin clave y sin registro: tres conversiones de cinco páginas cada una y cinco repeticiones en total. Ambas cifras cuentan por dirección IP, así que una oficina que comparte una dirección tiene un solo cupo para todos. El plan gratuito sirve para probar la herramienta, para sitios personales y para trabajo no comercial.
Una licencia Pro elimina el límite de páginas y hace ilimitadas las conversiones y las repeticiones. También añade el paso que convierte una tienda en WooCommerce. Ese paso no existe en el plan gratuito: la app rechaza de entrada la conversión gratuita de un sitio con tienda, en lugar de hacer solo la mitad. Pro cuesta 49 € al mes o 490 € al año, y los precios están en la página de precios. Durante la beta, el primer pago es un 30 % más barato y la clave llega por correo electrónico.
Conviene conocer dos rechazos de antemano. Un proyecto de React cuyas rutas solo existen por registro (/product/:id sin datos que mostrar) es una aplicación web, no un sitio que convertir. El conversor lo rechaza abiertamente en vez de entregar una instancia cualquiera de la plantilla. Y esto es una beta: las comprobaciones detectan la mayoría de las diferencias, no todas. Por eso la revisión página por página forma parte del proceso y no es un retoque opcional.
Tienes una guía paso a paso de todo el proceso en la documentación de la app html2wp. Las tres conversiones de Lovable a WordPress que puedes abrir en ambos extremos están en el ejemplo del principio de este artículo.