Como fazer com que as imagens do WordPress sejam responsivas
O WordPress é uma plataforma realmente poderosa. Fazer um tema responsivo e integrá-lo é muito fácil, uma vez que você conheça os fundamentos da temática. As imagens responsivas, por outro lado, não são algo com o qual o WordPress lida fora da caixa. Você poderia percorrer a rota de gerar manualmente cada tamanho de imagem e, em seguida, no editor de HTML, você poderia digitar manualmente a tag de imagem, os atributos srcset e cada imagem. Isso não só leva tempo, mas pode ser um problema para qualquer usuário administrador que não seja alfabetizado em HTML.
Felizmente, existe uma maneira de fazer o WordPress fazer todo o trabalho pesado. Ele pode gerar todos os tamanhos de imagem a partir de um único upload de imagem e, por meio de um plug-in, implementar a tag de imagem e os atributos srcset em qualquer lugar em que o autor opte por inserir uma imagem.
Etapa 1: modifique functions.php para gerar mais tamanhos de imagem
Toda vez que você envia uma imagem, o WordPress salva-a em seu tamanho original. Ele também gera automaticamente 3 cópias redimensionadas nesses tamanhos padrão (a altura ou a largura podem ser alteradas com base na proporção da imagem):
- Miniatura (150 × 150)
- Médio (300 × 300)
- Grande (1024 × 1024)
Este é um recurso muito poderoso, pois pode ser personalizado para fazer qualquer tamanho de imagem. Isso significa que você não precisa fazer várias cópias de uma imagem em tamanhos diferentes. Você acabou de carregar uma única imagem e o WordPress cria as cópias redimensionadas.
Isso é feito modificando o arquivo functions.php. Para adicionar novos tamanhos de imagem, você precisa adicionar chamadas à função add_image_size . Veja um exemplo que adiciona quatro novos tamanhos de imagem:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Cada chamada para a função inclui um nome (para que o WordPress possa identificar o tamanho) e uma largura. Os novos tamanhos terão 300, 600, 1200 e 2400 pixels de largura. É possível, com a função add_image_size , que o WordPress também defina a altura ou corte a imagem, mas o exemplo acima manterá a proporção da imagem original. (Mais pode ser encontrado sobre a função add_image_size no WordPress Codex .)
O exemplo acima mostra apenas quatro novos tamanhos de imagem sendo adicionados, mas você pode querer adicionar mais ou menos… isso será baseado no design do seu tema. Agora, sempre que uma imagem for carregada no WordPress, ela gerará os novos tamanhos de imagem. O próximo passo é incluí-los no HTML.
Etapa 2: instalar o plug-in de imagens responsivas RICG
Para que o WordPress produza todos os tamanhos de imagem, um novo plugin precisa ser instalado: Imagens responsivas RICG plugar. Uma vez instalado e ativado, todos os tamanhos de imagens serão incluídos na tag de imagem por meio do atributo srcset.
Normalmente, quando uma imagem é adicionada a uma página no WordPress, a saída HTML é semelhante a esta:
Existe uma única imagem no atributo src.
Uma vez instalado o plugin, o HTML ficará assim:
Todos os novos tamanhos de imagem foram adicionados através do atributo srcset .
O plugin também inclui Picturefill.js , um polyfill de imagem responsivo que adiciona suporte para o elemento picture e os novos atributos responsivos para o elemento img. Isso, junto com os atributos srcset agora incluídos na tag de imagem, é o que torna suas imagens responsivas.
Suas imagens agora são responsivas
Agora as imagens em seu site serão responsivas - o navegador escolherá a imagem mais apropriada para fazer o download.
Usuários em dispositivos com telas menores receberão as imagens menores. Seu site carregará mais rápido, pois essas imagens serão baixadas mais rapidamente, elas precisarão de menos largura de banda dos usuários. Usuários em dispositivos com telas maiores receberão as imagens maiores. Eles não aparecerão pixelados ou de menor qualidade.
Há apenas um problema em potencial com esse método: ele só funcionará com imagens carregadas no WordPress depois que o plug-in de Imagens Responsivas RICG for instalado. Se é um novo site que você está trabalhando, então isso pode não ser um problema, no entanto, se for um site existente com conteúdo existente, os novos tamanhos de imagem que você adicionou em functions.php não serão gerados. Felizmente, você não precisa adicionar novamente todas as imagens - existe um plugin que pode ajudar.
Etapa 3: Instalar o plugin para gerar novamente os tamanhos das imagens (opcional)
o Regenerar Miniaturas O plugin passará por todos os anexos de imagens existentes e gerará novamente os novos tamanhos de imagem com base nos novos criados em functions.php - é uma proteção em tempo real e requer apenas o clique de um único botão.
Uma vez instalado, vá para Ferramentas -> Regen. Miniaturas , em seguida, clique no botão "Regenerar todas as miniaturas". Uma barra de status aparecerá e você verá as informações sobre quantas imagens foram redimensionadas.
Agora, todas as imagens existentes em seu site serão exibidas corretamente usando a tag de imagem por meio do atributo srcset .
Usos da imagem em destaque imagem do dispositivo e imagem do dispositivo móvel via Shutterstock.