html2wp / Blog / Lovable para WordPress
Lovable para WordPress: um projeto convertido num tema de verdade
Converter Lovable para WordPress é o mesmo trabalho que converter HTML para WordPress, com um passo extra. Um projeto mais antigo do Lovable é um app React, então o HTML dele não tem nada para converter: a página só aparece no navegador, depois que o JavaScript roda. Os projetos mais novos (TanStack Start, desde maio de 2026) geram as páginas no servidor, e o html2wp converte os dois do mesmo jeito. Este passo a passo leva você de um projeto assim até um tema WordPress que carrega o seu código, e não uma versão refeita dele. Cada passo vem de uma conversão real, e você pode abrir as duas pontas.
Um exemplo de Lovable para WordPress, aberto nas duas pontas
Tudo abaixo descreve uma conversão que realmente fizemos. O original é um app do Lovable: bruce-banner.lovable.app, um portfólio de fotografia. O resultado é bruce.html2wp.dev, rodando no WordPress. Você entra no painel dele em /wp-admin com o usuário demo e a senha demo.
A conversão gerou cinco páginas e cinco posts no tema bruce-banner. Isso cabe na versão gratuita, que converte até cinco páginas por conversão e não precisa de chave. Abra os dois sites lado a lado antes de continuar a leitura. Este artigo trata da diferença entre eles, e assim você pode medi-la por conta própria.
Mais duas conversões do Lovable estão abertas do mesmo jeito. Primeiro, spark-remix-kindred.lovable.app virou terra.html2wp.dev, uma loja de tricô no WooCommerce. Depois, bloom-echo-remix.lovable.app virou soria.html2wp.dev, o site de uma fotógrafa de casamentos. Nos três, o login do painel do WordPress é demo / demo.
O que “1:1” significa aqui, exatamente
O código que o app do Lovable monta no navegador é o mesmo código que vai para o tema. Ninguém refaz as suas seções como widgets de um construtor de páginas, então você nunca recebe uma aproximação do design página por página. Todos os passos abaixo partem disso.
O que o seu computador precisa para converter Lovable para WordPress
O build, o trabalho de navegador e todas as verificações rodam na sua máquina. Só o resultado do build vai para o serviço que gera o tema. Então isto não é um serviço web onde você envia um ZIP, e há requisitos que vale conhecer antes:
- Node 20 ou mais novo para o build e os scripts locais.
- Python 3 com os pacotes Playwright e Pillow. O Playwright controla um navegador de verdade, e é assim que um app React vira HTML.
- Docker com o comando
docker compose. Ele inicia um WordPress temporário no seu computador, e o conversor testa o tema ali antes de você ver. - php-cli, porque cada arquivo PHP passa por uma verificação de sintaxe antes de entrar no ZIP.
jq,curl,bashetar. O WordPress de destino precisa ser a versão 6.6 ou mais nova.
O plugin confere tudo isso no primeiro passo e mostra duas listas. A primeira traz o que ele pode instalar sozinho dentro das suas próprias pastas. A segunda traz o que você precisa decidir: Docker, um Node mais novo e iniciar o Docker. Ele nunca instala o segundo grupo pelas suas costas.
O Docker é o que mais surpreende
Outros conversores não precisam dele, porque pulam esta etapa. Aqui, o conversor instala o tema gerado num WordPress de verdade e testa ali. É para isso que servem o navegador e o contêiner. Se você quer uma ferramenta de cinco minutos no navegador, não é esta.
Instale o plugin
Publicamos o plugin duas vezes, uma para cada agente. Os scripts e o número de versão são os mesmos no Claude Code e no Codex. Escolha o que você usa.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Depois, uma vez, num terminal:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Na versão gratuita, não há mais nada para configurar: sem chave, sem cadastro, sem cartão. Se você prefere não trabalhar no terminal, pode fazer a mesma conversão no app html2wp para desktop (um guia com capturas de tela).
Como colocar o seu projeto do Lovable no disco
O endereço de um site no ar não é uma entrada aceita, e isso é de propósito. Uma cópia de uma página publicada guarda só o resultado renderizado. Ela perde o que o código-fonte sabe: quais rotas existem, quais são os componentes e o que o build produz.
Por isso, a entrada é uma pasta. O Lovable sincroniza o seu projeto com um repositório no GitHub. Conecte, clone, e você tem o projeto na sua máquina. Seja qual for a cara da interface do Lovable neste mês, o que você quer é o repositório: os mesmos arquivos com que o Lovable gera o site.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Você não precisa rodar npm install nem um build antes. A conversão faz isso sozinha.
Diga “convert this project”
Nessa pasta, com o seu agente aberto, digite:
/html2wp:html2wp
convert this project
O Codex não tem comando com barra. Em vez disso, diga a ele convert this project into a verified WordPress block theme (converta este projeto num tema de blocos WordPress verificado), e ele encontra a skill sozinho. No Claude Code ou no Codex, essa frase é a instrução inteira. Você não escreve arquivo de configuração e não escolhe comando de build.
O Flash leva cerca de 30 minutos e o Full cerca de uma hora, dependendo do número de páginas e da velocidade do seu computador. Quase tudo roda sem supervisão, e ele informa onde está depois de cada passo, então não espere silêncio.
O que acontece com o React ao converter Lovable para WordPress
Este é o passo que um projeto do Lovable acrescenta.
Um app mais antigo do Lovable (React e Vite) tem um único index.html. O corpo dele é um elemento vazio onde o app React se monta, mais uma tag de script, então não há nada para converter. Primeiro, o conversor gera o build do projeto. Depois, um navegador de verdade percorre cada rota enquanto um gravador observa. O resultado é HTML puro por rota, exatamente o que o resto do processo precisa. Um projeto mais novo em TanStack Start já gera as páginas no servidor; mesmo assim, o conversor faz o build e percorre cada rota do mesmo jeito.
O que o gravador captura
- Estados que só existem depois que o JavaScript roda. Acordeões abertos, conteúdo de menus suspensos, classes que um script muda. O gravador guarda tudo isso como dados nos elementos, e um pequeno runtime genérico reproduz. Ninguém escreve isso à mão, de memória.
- Limites de rolagem, no pixel. Um cabeçalho que muda em
scrollY > 40usa um número que alguém inventou. O gravador o encontra e calcula exatamente onde ele fica. Um palpite arredondado mudaria o cabeçalho no momento errado, para sempre. - Relações do tipo “só um pode ficar aberto”. Você abre A, depois B. O A fechou? Gravar cada elemento sozinho não responde isso, então o gravador testa à parte.
- As animações de entrada na rolagem sobrevivem. O gravador as captura, e o tema as reproduz exatamente como o original. O conteúdo continua visível sem JavaScript, um elemento só se esconde enquanto o runtime roda, e com
prefers-reduced-motiono tema pula a animação. Medimos a correspondência 1:1 em repouso, depois que as animações terminam.
O que ele não finge
- O comportamento que ele não conseguiu gravar vai para uma lista. Cada página tem a sua. Leia.
Este passo tem a sua própria verificação, porque nenhuma verificação posterior consegue vê-lo. O conversor tira uma captura de tela de cada rota ao vivo e compara com a captura estática dela a 1440, 820 e 390 pixels de largura. Se forem diferentes, o passo falha. Todos os passos seguintes medem da captura até o WordPress, então um defeito criado aqui passaria por todos eles.
A revisão que você não pode pular
Quando as verificações automáticas terminam, a conversão ainda não acabou. O conversor coloca cada página numa imagem ao lado da original, e você lê cada uma de cima a baixo.
Numa conversão, faltava uma seção inteira mais abaixo na página, e a comparação de pixels mostrou só 0,4% de diferença. Essa página passa na verificação sem a seção. Pela própria natureza, as verificações automáticas não enxergam três tipos de defeito. Primeiro, um controle que parece perfeito, mas não faz nada. Segundo, um valor fixado no código a partir da única página de onde veio um modelo. Terceiro, qualquer coisa que só aparece depois de rolar, clicar ou enviar um formulário.
Confira também se dá para editar o conteúdo, além de ver se ele parece certo. Uma página pode bater no pixel e, mesmo assim, o dono pode não conseguir editar o FAQ ou a grade de recursos dela. Vimos isso ao vivo: um acordeão com cinco perguntas parecia idêntico, mas nenhum editor o oferecia. Uma revisão que só olhou a aparência deixou passar. Então, em cada página, pergunte se dá para editar cada grupo repetido e cada bloco de texto pelo wp-admin.
Instale o tema
A pasta do seu projeto recebe um ZIP do tema e, ao lado dele, o CONVERSION-REPORT.md. Nada mais. A pasta de trabalho com o build fica fora do seu projeto, numa pasta de cache, então o seu repositório continua limpo. O relatório é a exceção, porque quem o lê é você. Ele lista o que a conversão cobriu, o que a revisão encontrou, cada aviso (inclusive os aceitáveis) e o que ainda está pendente.
No WordPress, vá em Aparência → Temas → Adicionar novo tema → Enviar tema, escolha o ZIP e ative. O tema funciona sozinho. Páginas, blog, formulários, menus, SEO e redirecionamentos são todos código dele. Ele não precisa de plugin para rodar e nunca se comunica com nenhum servidor nosso.
Editar o site depois da conversão de Lovable para WordPress: três caminhos
Os posts do blog viram posts comuns do WordPress, então você já os escreve no editor de blocos. O texto das páginas fica no seu HTML, e para ele há duas opções que vale conhecer. Uma delas é um construtor de páginas.
| Caminho | O que você ganha | O que isso custa |
|---|---|---|
| Só o tema | O seu código, sem mudanças. Sem plugin, sem dependência, nada para renovar. Os posts passam pelo editor de blocos. | Sem plugin, o texto das páginas muda no HTML. Se o cliente quiser editar sozinho, o Visual Edit resolve (o Lite é gratuito). |
| Visual Edit, o nosso plugin | Você clica num título direto na página, digita por cima e salva. Você edita textos, imagens, links, formulários e menus onde eles estão, e o código fica como estava. O Lite é gratuito e não precisa de chave. | É mais um plugin instalado no WordPress. O Lite guarda 10 passos de histórico e não tem chat com IA. O Pro custa € 59 por ano. |
| Elementor ou outro construtor de páginas |
Quem conhece o Elementor consegue reorganizar a página sozinho, e muita gente conhece. Para um cliente que vai mudar o layout por conta própria, essa familiaridade tem valor. | O código é refeito como widgets do construtor e deixa de ser seu. Depois disso, o site não é exibido sem o Elementor, e você herda a estrutura, o CSS e as atualizações dele. |
Se você converte para que o design sobreviva, um construtor de páginas é exatamente o que o destrói. Passar um design para um construtor à mão é o passo depois do qual o site deixa de parecer com o design, e é por isso que este conversor existe. Mas se o design é só um ponto de partida e o cliente vai refazer metade dele no próximo trimestre de qualquer jeito, pode entregar o Elementor.
Lite ou Pro, se você escolher o Visual Edit
| Lite (grátis) | Pro | |
|---|---|---|
| Edição de conteúdo por clique | ✓ | ✓ |
| Formulários, menus, campos de SEO | ✓ | ✓ |
| Edição por chat com IA | – | ✓, com a sua própria chave de API |
| Exportação do tema | – | ✓ |
| Proteção de formulários com Turnstile | – | ✓ |
| Edição de imagens com IA e animações a partir de imagens | – | ✓ |
| Histórico de edições | 10 passos | 300 passos |
O chat com IA do Pro roda com a sua própria chave de API. Não vendemos tokens, e você acerta o custo de uso direto com o seu provedor.
Lovable ou WordPress? Você não precisa escolher
Em geral, a questão aparece como uma coisa ou outra. Para um site de conteúdo, não precisa ser assim. No Lovable, você cria um design rápido. No WordPress, um site vive por anos e outra pessoa o edita. A conversão mantém o primeiro e leva o segundo. Como o tema roda em qualquer hospedagem WordPress, o site não precisa mais morar onde você o criou.
O que se muda é o site: páginas, blog, formulários, menus, SEO e redirecionamentos. O que não se muda é a aplicação por trás: login, banco de dados e chamadas à sua própria API. Se o seu projeto do Lovable é principalmente isso, mantenha no Lovable. Uma loja fica no meio do caminho. Com uma licença Pro, o catálogo dela vira WooCommerce, como aconteceu com a Terra Studios.
Quanto custa converter Lovable para WordPress e o que a conversão recusa
A versão gratuita é aberta a todos, sem chave e sem cadastro: três conversões de cinco páginas cada e cinco reexecuções no total. Os dois números são contados por endereço IP, então um escritório que divide um endereço recebe uma única cota para todos. A versão gratuita serve para testar a ferramenta, para sites pessoais e para trabalhos não comerciais.
Uma licença Pro remove o limite de páginas e deixa conversões e reexecuções ilimitadas. Ela também acrescenta o passo que transforma uma loja em WooCommerce. Esse passo não existe na versão gratuita: o app recusa por completo a conversão gratuita de um site com loja, em vez de fazer metade. O Pro custa € 49 por mês ou € 490 por ano, e os preços estão na página de preços. Durante o beta, o primeiro pagamento sai 30% mais barato, e a chave chega por e-mail.
Duas recusas valem ser conhecidas antes. Um projeto React cujas rotas só existem por registro (/product/:id sem dados para renderizar) é um app web, não um site para converter. O conversor recusa isso abertamente, em vez de entregar uma instância qualquer do modelo. E isto é um beta: as verificações pegam a maioria das diferenças, não todas. Por isso, a revisão página por página faz parte do processo e não é um acabamento opcional.
Um guia passo a passo de todo o processo está na documentação do app html2wp. As três conversões do Lovable que você pode abrir nas duas pontas estão no exemplo do início deste artigo.