Como deixar um site WordPress responsivo no celular

A maioria dos sites WordPress que não funcionam bem no celular tem uma de três causas: um tema antigo que nunca foi responsivo, configurações de blocos ou do construtor de páginas que ignoram o mobile, ou CSS personalizado com larguras fixas. Corrija nessa ordem: confirme que o tema é responsivo, ajuste as configurações mobile no editor ou no construtor e depois limpe o código personalizado e os plugins. Confira cada etapa num tamanho de celular antes de seguir.

Etapa 1: veja se o seu tema é responsivo

Abra o site numa visualização mobile (veja como ver a versão mobile de um site no PC) e olhe uma página simples, sem layout especial, como a política de privacidade. Se até essa página aparece afastada ou rola para os lados, o problema é o tema.

Duas checagens rápidas:

• Veja o código-fonte da página e procure name="viewport". Um tema responsivo coloca a meta tag viewport no <head>. Se ela não existe, o tema é anterior ao design mobile.
• Confira a idade do tema e as atualizações em Aparência > Temas. Um tema sem atualização há vários anos é um risco que vai além do layout mobile.

Se o tema não for responsivo, trocar costuma sair mais barato que remendar. Os temas de blocos padrão atuais, como o Twenty Twenty-Five, e a maioria dos temas com manutenção ativa já vêm responsivos. Teste o tema novo com a Visualização ao vivo antes de ativar.

Etapa 2: use a prévia mobile do editor

O WordPress tem prévias por dispositivo:

• No editor de blocos e no editor do site, o controle de prévia na barra superior alterna entre Desktop, Tablet e Celular.
• No Personalizador clássico (para temas clássicos), os botões de dispositivo no rodapé da barra lateral fazem o mesmo.

Essas prévias redimensionam a área de edição, o que ajuda a ver problemas de layout enquanto você edita. Elas não enviam user agent mobile, então confirme depois na página publicada, numa visualização mobile de verdade.

Etapa 3: ajuste os blocos para telas pequenas

Problemas comuns do editor de blocos e como resolver:

• Colunas que espremem em vez de empilhar. Selecione o bloco Colunas e confirme que a opção de empilhar no celular está ativada.
• Larguras e alturas fixas. Os blocos Imagem, Capa e Grupo podem ter tamanhos fixos em pixels. Prefira larguras em porcentagem e alturas mínimas em vez de fixas, para o texto não ser cortado em telas estreitas.
• Fontes enormes. Um título de 72 px que fica bonito no desktop estoura no celular. Use os presets de tipografia fluida do tema, quando existirem, que acompanham o tamanho da tela.
• Tabelas largas. Tabelas com muitas colunas estouram no celular. Deixe-as menores ou permita rolagem horizontal dentro do próprio container.

Etapa 4: confira as configurações mobile do construtor de páginas

Se você usa um construtor como Elementor, Divi ou Beaver Builder, a maioria dos problemas no celular vem de configurações aplicadas só no tamanho desktop. Os construtores têm um modo responsivo com valores separados para celular e tablet: espaçamento, tamanho de fonte, largura de coluna e visibilidade.

1. Mude o construtor para a visualização mobile.
2. Reduza paddings e margens grandes definidos em pixels.
3. Ajuste o tamanho dos títulos para o celular.
4. Confira a ordem das colunas quando elas empilham; inverta se a imagem aparecer antes do título que ela ilustra.
5. Evite esconder conteúdo importante no celular. O Google indexa a versão mobile, então texto escondido é praticamente texto que não existe.

Os construtores também definem os próprios breakpoints (os padrões do Elementor são 767 px para celular e 1024 px para tablet, e dá para adicionar mais). Garanta que o seu CSS personalizado use as mesmas larguras. Mais sobre como escolher: breakpoints responsivos.

Etapa 5: arrume o menu

No celular, a navegação deve virar um botão de menu. Temas de blocos fazem isso com a configuração de sobreposição do bloco Navegação (defina como Celular ou Sempre). Em temas clássicos, quem cuida disso é o tema; se ele não faz, é mais um motivo para trocar. Mantenha o menu mobile curto e teste se os submenus abrem com toque.

Etapa 6: imagens e velocidade

O WordPress já faz bastante aqui: cria vários tamanhos de cada imagem enviada, adiciona srcset para os celulares receberem arquivos menores e faz lazy load das imagens por padrão. Você pode ajudar:

• enviando imagens no máximo do tamanho em que elas serão exibidas;
• convertendo para WebP ou AVIF (com suporte nativo nas versões recentes do WordPress ou por meio de um plugin de imagens);
• usando um plugin de cache ou o cache da hospedagem;
• removendo plugins que você não usa, já que cada um pode adicionar scripts em todas as páginas.

Meça o resultado com os métodos do guia de teste de velocidade mobile.

Etapa 7: caçe CSS personalizado e conflitos de plugins

Se o site ainda rola para os lados, encontre o elemento largo demais. No Chrome DevTools, rode isto no Console para listar os elementos mais largos que a tela:

[...document.querySelectorAll('*')].filter(el => el.scrollWidth > document.documentElement.clientWidth)

Os culpados típicos são regras width: 1200px em Aparência > Personalizar > CSS adicional, widgets incorporados com tamanho fixo (feeds antigos de redes sociais, mapas, formulários) e sliders que definem larguras inline.

Etapa 8: teste direito o site publicado

As prévias do editor são um começo. Antes de dar o trabalho por encerrado:

1. Abra as páginas principais numa visualização mobile no Chrome. O Mobile View Extension faz isso com um clique e carrega a página publicada com user agent mobile, então você vê o que os celulares realmente recebem, inclusive o que o cache ou os plugins mobile entregam.
2. Teste formulários e o checkout num celular de verdade.
3. Rode uma auditoria Lighthouse mobile (como fazer).

Se algo aparece diferente no celular em relação à prévia, por que o site fica diferente no celular lista os motivos mais comuns.

Perguntas frequentes

Por que meu WordPress fica bom no editor mas não no celular?

As prévias do editor só redimensionam a área de edição. Plugins de cache, plugins mobile, configurações de CDN e o próprio navegador do celular podem mudar o que é entregue. Confira a página publicada numa visualização mobile real e limpe os caches depois das mudanças.

Preciso de um plugin para deixar o WordPress responsivo?

Normalmente não. Um tema responsivo faz a maior parte do trabalho. Plugins que criam um tema mobile separado eram comuns anos atrás, mas hoje raramente são necessários.

O AMP ainda é necessário para sites WordPress no celular?

Não. O AMP é opcional, e uma página responsiva rápida atinge os mesmos objetivos sem um formato separado.