Carregando código apenas em dispositivos móveis

O WordPress possui uma função bem bacana para identificar se o site está sendo acessado por um dispositivo móvel.

<?php
if ( wp_is_mobile() ) {
    // Exiba seu código específico para mobile aqui
} else {
   // Caso não seja mobile, exiba outra coisa
}
?>

Leia mais sobre essa função na documentação do WordPress.

Essas são algumas características da função wp_is_mobile:

• É uma conditional tag, ou seja, deve ser usada em conjunto com uma condição (exemplo acima com if)
• É uma função booliana (só retorna true ou false)
• Não aceita nenhum parâmetro
• Analisa o user agent do navegador ($_SERVER[‘HTTP_USER_AGENT’])
• Não leva em consideração a resolução do dispositivo

Normalmente o último item desanima a galera:

Então não é possível carregar algo só em dispositivos com menos de 800 pixels?

Não, não é possível. Por favor, não confunda essa função com Media Queries.

Na página da documentação dessa função é indicado um plugin muito útil caso você queira carregar código em dispositivos específicos.

O Mobble é um plugin muito útil que adiciona algumas funções condicionais para detectar diversos dispositivos móveis e pode te ajudar em conjunto com Media Queries.

Agora você já pode começar a usar as seguintes funções condicionais em seu tema:

<?php
    is_handheld(); // qualquer dispositivo móvel (phone, tablet, Nintendo)
    is_mobile(); // qualquer tipo de smartphone (iPhone, Android etc.)
    is_tablet(); // qualquer tipo de tablet
    is_ios(); // qualquer dispositivo móvel da Apple (iPhone, iPad, iPod)
?>

As funções acima já ajudam bastante, mas esse plugin não para por aí e ainda disponibiliza mais essas funções:

<?php
is_iphone();
is_ipad();
is_ipod();
is_android();
is_blackberry();
is_opera_mobile();
is_symbian();
is_kindle();
is_windows_mobile();
is_motorola();
is_samsung();
is_samsung_tablet();
is_sony_ericsson();
is_nintendo();
?>

Como usar

Eu não queria carregar o sidebar.php caso o site seja acessado por smartphones.

<?php
if ( ! is_mobile() ) {
    get_sidebar();
}
?>

Eu consigo carregar um CSS exclusivo em dispositivos móveis da Apple?

<?php
// Dentro da sua função responsável por carregar JS e CSS
if ( is_ios() ) {
    wp_enqueue_style( 'ios', get_template_directory_uri() . '/ios.css' );
}
?>

Ah mas eu queria usar essas condições dentro do conteúdo do meu post/página! Esse plugin é inútil!

Só lembrando que o WordPress é tão legal que te dá a opção de criar shortcodes que podem ser inseridos em seu conteúdo. Você só precisa criar seu shortcode personalizado.

Criando um shortcode

Instale e ative o Mobble, abra o arquivo functions.php do seu tema e adicione o seguinte código:

<?php
function my_is_mobile_function( $atts, $content = null ) {
    if ( is_mobile() ) {
        $my_content =  do_shortcode( $content );
    }
    return $my_content;
}
add_shortcode( 'is_mobile', 'my_is_mobile_function' );
?>

Pronto, agora você já pode usar o shortcode `[is_mobile]` no seu conteúdo assim:

[is_mobile]Esse texto só será exibido em dispositivos móveis[/is_mobile]

Curtiu o Mobble e quer ajudar? É possível colaborar no desenvolvimento do plugin no GitHub.

---

E aí, curtiu essa dica? Tem alguma sugestão? Use os comentários para isso 🙂