Botões de compartilhamento, seu conteúdo WordPress nas redes sociais
O uso de redes sociais é algo indispensável hoje em dia, por isso é importante que seu conteúdo seja possa ser replicado por botões de compartilhamento.
Você se lembra de sua infância quando sua preferência era por livros com imagens ao invés de apenas texto? As imagens são capazes de expressar milhares de palavras quando bem aplicadas no conteúdo de sua publicação. Podendo, inclusive, manter seus leitores mais dispostos quando em conteúdos maiores.
Com a constante evolução, a densidade e o tamanho das telas continuam a crescer, gerando uma busca por imagens de boa qualidade, que consequentemente ocupam mais espaço e geram maior tempo de carregamento em nossos sites. Mas em contra partida à evolução dos monitores, contamos também com os displays menores, presentes em celulares e tablets.
A tag <picture>
Diante disto você deve estar se perguntando: “Mas como atender todos esses tamanhos sem afetar no carregamento do meu site?” Como todos já sabem, inserir uma imagem grande só porque atenderá todos os dispositivos passa longe de ser uma boa prática já que nem sempre a requisição será a dimensão da imagem total quando em sites responsivos. Com o HTML5 é possível gerarmos um tamanho de imagem para cada largura de tela, o que já ameniza os problemas causados por imagens muito grandes. Através da tag <picture> conseguimos estipular cada imagem para cada tamanho de tela.
<picture class="card-thumb"> <source media="(min-width: 1024px)" srcset="<?php echo wp_get_attachment_image_src( $thumb_id, Image::SIZE_280_190, true )[0]; ?>"> <source media="(min-width: 768px)" srcset="<?php echo wp_get_attachment_image_src( $thumb_id, Image::SIZE_500_375, true )[0]; ?>"> <img src="<?php echo wp_get_attachment_image_src( $thumb_id, Image::SIZE_740_555, true )[0]; ?>” /> </picture>
Mas como vemos, é um pouco complicado e gera demanda de tempo, já que precisamos setar todos os thumbnail_sizes, definir tamanhos e fazer um get_attachment para cada tamanho estipulado.
Imagens responsivas e automáticas!
Em sua versão 4.4, o WordPress consegue prever o tamanho da imagem ideal para o dispositivo em uso. Quando fazemos o upload de uma imagem, por padrão, o WordPress já faz cortes em tamanhos menores e com dimensões já pré selecionadas. Por exemplo, se subimos uma imagem de 1500×706, a imagens geradas serão algo como:
- Full Size – 1500 x 706
- Large – 500 x 235
- Medium – 300 x 141
- Thumbnail – 150 x 150
Anteriormente, se você utilizasse o tamanho total em sua publicação, independente do tamanho do dispositivo, o tamanho exibido seria sempre o mesmo, o que não ocorre na nova feature. Através da tag <picture>, o tamanho ideal é selecionado automaticamente, gerando um ganho de velocidade inimaginável.
Concluindo
A web é para todos e cabe a nós fazê-la cada vez melhor, gerando mais tráfego de conteúdo com tempos de carregamento cada vez menores. A cada nova versão, o WordPress busca alcançar uma melhor experiência tanto para desenvolvedores como para consumidores de conteúdo. E as novidades não param por aí, além das imagens responsivas existem outras grandes novidades que você encontrará em conteúdos exclusivos docnosso blog.
Links Úteis
Ficou curioso sobre o assunto? Abaixo listo alguns links sobre o assunto:
Pablo Almeida 
Fabio Carvalho 
