O acesso à Internet por meio de dispositivos móveis está cada vez mais comum, proporcionar um site mobile-friendly é mais do que um luxo, tornou-se essencial para todos aqueles que procuram o sucesso e a sobrevivência no mundo digital…
Sites mobile-friendly são sites desenvolvidos para proporcionar ao utilizador final uma experiência de uso mais adequada ao dispositivo utilizado, no caso, o smartphone ou tablet. Os elementos são organizados de uma forma que permita uma navegação mais fluída, seja pela sua disposição, seja pelo ajuste no tamanho para o correto ponto de toque.
No entanto um tablet não possui o mesmo poder de processamento de um computador e a Internet móvel é relativamente mais lenta do que a banda larga, cabo ou fibra óptica que normalmente temos em casa, muitas páginas podem aparecem totalmente desconfiguradas ou demoram muito tempo para carregar todas as imagens quando são vistas em um equipamento móvel.
Neste artigo vamos aprender como detectar dispositivos móveis ou tablet em WordPress. Em algum momento, mesmo mesmo que já tenha otimizado o seu site WordPress para visualização móvel, vai verificar que ainda há alguns ajustes que pode fazer para otimizar ainda mais para que seus sites sejam carregados corretamente e mais rapidamente em dispositivos móveis. Por exemplo, você não deseja mostrar alguma imagem, algum elemento como a barra lateral, algumas opções de publicidade, etc, sempre que estiverem em um dispositivo móvel ou tablet.
Vovê pode usar a função “wp_is_mobile” que já esta incorporada no WordPress, é uma ótima maneira de detectar o dispositivo, no entanto esta função não diferencia o dispositivo, este tanto pode ser um smartphone ou tablet. O que pode complicar se você quer mostrar menos coisas quando o utilizador usa um dispositivo móvel que não em um tablet.
Se deseja separar as duas condições entre elas, o mobile detection php é muito útil. Você pode fazer o download em github, e copie o “Mobile_Detect.php” para “/wp-content/themes/seu_tema/” em seu alojamento web.
Depois, crie uma nova função dentro do arquivo de funções do seu tema (ex: functions.php), veja o exemplo:
<?php
/* check if user using smaller mobile device */
function detectable_is_mobile() {
include_once ( get_template_directory() . '/Mobile_Detect.php');
$detect = new Mobile_Detect;
if( $detect->isMobile() && !$detect->isTablet() ) {
return true;
} else {
return false;
}
}
/* check if user using tablet device */
function detectable_is_tablet() {
include_once ( get_template_directory() . '/Mobile_Detect.php');
$detect = new Mobile_Detect;
if( $detect->isTablet() ) {
return true;
} else {
return false;
}
}
?>
Com esta função, você pode facilmente saber dispositivos móveis e tablet, e assim ocultar ou mostrar qualquer conteúdo em um determinado despositivo. Por exemplo, se você não quer mostrar barra lateral no dispositivo móvel, experimente o seguinte:
<?php
/* sidebar will show in desktop/tablet but not mobile device */
if( detectable_is_mobile() ) {
// does nothing
} else {
get_sidebar();
};
?>
Alem disso você pode verificar mais informações sobre os dispositivos, como a detecção de navegador e o sistema operacional do dispositivo. Dados bastante úteis para o ajudar a melhorar a otimização móvel do seu site WordPress. Quer uma amostra ao vivo?, tente navegar no nosso site no seu smartphone e/ou tablet, certamente verá a diferença.