Imagens responsivas no WordPress e a relação com o Mobile First
Projetos Mobile First devem dar devida atenção à responsividade das imagens utilizadas. Como você lida com as imagens do seu projeto web?
A nova versão do WordPress 4.3 está chegando e trás com ela novas features essenciais para o mercado web atual, que já concentra grande parte dos acessos via mobile. Eis que surge uma maneira fácil de incluir os despercebidos “Favicons” em nosso site. E não pense que a web atual aceita somente aquele formato clichê .ico ou .png de 16×16 pixels.
A funcionalidade, além de facilitar nossas vidas, veio com o propósito de tornar a web um local mais acessível e elegante. O seu intuito é permitir a todos os usuários do WordPress criarem uma identidade visual presente do Desktop ao Mobile. De forma que, após salvar seu blog como favorito ou como ícone, ele seja facilmente identificado em seu dispositivo.
Tamanhos Suportados
O tamanhos suportados, por padrão, pela nova feature são:
- 32x32px favicon.
- 180x180px app icon for iOS up to the iPhone 6+.
- 192x192px Android/Chrome app icon.
- 270x270px medium-sized tile for Windows.
Como utilizar?
Utilizar a nova funcionalidade é bem fácil, assim como o WordPress. Basta subir uma imagem de no mínimo 512×512 pixels para que o icon se torne visível (em excelente qualidade) a todos os dispositivos. A feature pode ser acessada facilmente através de Configurações > Geral. Outra novidade, não menos importante, é a possibilidade de fazer um crop na imagem selecionada, dispensando a necessidade do uso de editores gráficos.
Após o seu Favicon configurado, é hora de inserir em nosso tema. Para isto, a comunidade nos ajudou e muito com 4 novas funções:
wp_site_icon()exibe todos os favicon e app icons disponíveis.get_site_icon_url()retorna a url do favicon presente ou de um default passada para a função.site_icon_url()exibe uma versão “escapada” da url do site icon atual.has_site_icon()retorna se o site possui ou não um icon setado.
Indo mais além..
Caso você ainda não tenha ficado satisfeito com o tamanhos padrão disponibilizados pelo o WordPress, é possível criars novos padrões através do filtro “site_icon_image_sizes”. Segue um exemplo:
<?php
functionprefix_custom_site_icon_size($sizes) { $sizes[] = 64; return $sizes;}add_filter('site_icon_image_sizes','prefix_custom_site_icon_size');Ainda é possível modificar as mate-tags referentes ao Favicon, como no exemplo abaixo:
<?php
function prefix_custom_site_icon_tag( $meta_tags ) { $meta_tags[] = sprintf( '<link rel="icon" href="%s" sizes="64x64" />', esc_url( get_site_icon_url( null, 64 ) ) ); return $meta_tags;}add_filter( 'site_icon_meta_tags', 'prefix_custom_site_icon_tag' );Às vezes os Favicons passam despercebidos aos nossos olhos, mas estudos comprovam que nosso cérebro guarda de forma mais fácil imagens do que textos. Um bom uso desta feature pode contribuir por uma melhora considerável em seu site WordPress, aumentado o fluxo de usuários e também, dando mais beleza ao seu projeto.
Airton 
