Como configurar o WordPress para exibir imagens responsivas automaticamente
Olá, querido(a) cliente! Seja bem-vindo(a) ao seu novo lar digital na GeHost — onde seu site cresce com você, com segurança e simplicidade. 🌿
Hoje, vamos aprender juntos como deixar suas imagens no WordPress responsivas automaticamente. Isso quer dizer: elas se ajustam perfeitamente em celulares, tablets e computadores — sem precisar de ajustes manuais. É como ter um espelho mágico que se adapta ao seu formato!
Seu site vai ficar mais bonito, mais rápido e mais acessível. E o melhor? Não precisa de código complexo. Vamos lá, com passos simples, como se fosse um bate-papo entre amigos.
Passo 1: Acesse o Painel do cPanel
Para começar, faça login no seu painel de controle da GeHost:
Use as credenciais que você recebeu ao contratar o serviço. Se não lembra, entre em contato com o suporte no painel.gehost.com.br — e não se preocupe, estamos aqui para te ajudar!
Passo 2: Acesse o Gerenciador de Arquivos
Depois de logado, localize e clique em Gerenciador de Arquivos no painel (na seção "Arquivos").
Na tela que abrir, selecione a pasta public_html — é onde está o seu site WordPress.
Passo 3: Encontre o arquivo functions.php
Dentro de public_html, procure pela pasta do seu tema. Normalmente, ela se chama algo como twentytwentyfour, generatepress ou custom-theme.
Abra essa pasta e localize o arquivo chamado functions.php. Clique nele para editar.
Passo 4: Adicione o código para imagens responsivas
Abra o arquivo functions.php e, no final dele, antes do fechamento de PHP (ou seja, antes do `?>`), cole este código simples e seguro:
add_filter('wp_get_attachment_image_attributes', 'ativar_imagens_responsivas', 10, 3);
function ativar_imagens_responsivas($attributes, $attachment, $size) {
$attributes['loading'] = 'lazy';
$attributes['decoding'] = 'async';
return $attributes;
}
Esse código faz duas coisas importantes:
- Lazy load: as imagens só carregam quando aparecem na tela — isso deixa seu site mais rápido.
- Decodificação assíncrona: evita travamentos no carregamento.
Após colar, clique em Salvar no canto superior direito do editor.
Passo 5: Verifique no seu site
Volte para o seu site no navegador e faça um teste:
- Abrir a página com imagens.
- Reduza o tamanho da janela do navegador (como se fosse um celular).
- Observe como as imagens se ajustam automaticamente — sem cortar, sem distorcer.
Se tudo estiver bonito e ajustado, parabéns! Você acabou de tornar seu site mais moderno e amigável com todos os dispositivos. 🎉
Importante: sempre faça backup antes de editar
Antes de alterar qualquer arquivo no WordPress, especialmente o functions.php, faça um backup da sua pasta public_html usando a ferramenta Backup no cPanel.
Isso garante que, se algo der errado, você pode voltar ao ponto anterior. Segurança é o nosso primeiro amor na GeHost!
Quer ajuda extra?
Se tiver dúvidas, não fique com medo de pedir. O suporte da GeHost está disponível por 30 dias após a entrega — e, mesmo depois, você pode entrar em contato pelo painel.gehost.com.br.
Seu site é um projeto de coração. Nós cuidamos da infraestrutura, você cuida da alma dele. 💙
Com carinho,
Sensei da GeHost
*Seu parceiro digital desde 2015 — com amor, tecnologia e propósito.