No outono de 2012, foi lançada a versão 3.4 do WordPress. Além de introduzir o personalizador de temas e a capacidade de incorporar automaticamente os tweets, a versão 3.4 também adicionou uma função que os desenvolvedores poderiam usar para testar se um visitante do site estava se conectando de um dispositivo móvel, como um smartphone ou tablet.

Essa função – wp_is_mobile() – surgiu em uma época em que a famosa “Tela Retina” que a Apple havia revelado para o iPhone 4 tinha apenas 640 x 960 pixels. Quando o iPhone 5 foi lançado, alguns meses depois do WordPress 3.4, a tela do telefone alcançou 640 x 1.136 pixels – ainda muito distante das telas dos smartphones e tablets modernos, que apagam os limites entre o espaço da tela do celular e do desktop.

Então, o wp_is_mobile() tem alguma utilidade hoje em dia?

O objetivo da função wp_is_mobile()

Em 2012, o suporte do navegador para consultas de mídia CSS que permitiam o design responsivo da web ainda era relativamente novo. (Realmente novo para os usuários do navegador Internet Explorer da Microsoft!) Mas permitir layouts de página que se adaptam a diferentes dimensões de viewport não era o objetivo do wp_is_mobile().

A função não faz distinção entre telefones e tablets e desconhece completamente os pixels disponíveis no navegador de um visitante. Em vez disso, o wp_is_mobile() foi concebido como uma ferramenta que permitiria aos desenvolvedores otimizar a largura de banda ao responder a dispositivos móveis, que eram muitas vezes menos potentes e possivelmente usados por pessoas que pagavam suas operadoras de telecomunicação pelas transferências de dados.

Atualmente, com telefones e tablets mais avançados do que muitos desktops disponíveis em 2012, a limitação da largura de banda pode ser menos importante, mas ainda há casos de uso para uma função que simplesmente divide o mundo em dois: dispositivos móveis e todo o resto.

A função wp_is_mobile() em ação

A função wp_is_mobile() do WordPress retorna true quando executada como resultado de uma solicitação de navegadores na maioria dos smartphones e tablets (incluindo o Kindle). Portanto, o exemplo clássico da função que gera diferentes fluxos de conteúdo em PHP é o seguinte:

<?php if( wp_is_mobile()){ ?>

    <p>This content is for mobile devices</p>

<?php } else { ?>

    <p>This content is for desktops (and laptops).</p>

<?php } ?>

Se você realmente precisar otimizar a saída do seu site para dispositivos móveis (provavelmente para minimizar os requisitos de largura de banda), a técnica acima poderá ser usada em arquivos de tema para gerar estruturas totalmente diferentes para páginas móveis e de desktop.

Detecção de dispositivos para ajustes específicos de conteúdo

Media queries de CSS e outras técnicas que suportam o design responsivo ajudam os layouts de página a se adaptarem a uma ampla variedade de tamanhos e orientações de tela. No entanto, elas não ajudam você a se comunicar com os visitantes do site, como usuários móveis ou de desktop.

Por exemplo, você sabe que os usuários de desktop provavelmente usarão um mouse para “clicar” nos elementos do seu site, enquanto os usuários de celular “tocarão”. Os usuários de desktop podem “clicar com o botão direito do mouse” em um link para abrir o link em uma nova janela do navegador. Enquanto isso, os usuários de dispositivos móveis podem “pressionar e segurar” para iniciar a mesma tarefa. A simples comunicação com os usuários sobre como navegar no seu site (como na documentação de ajuda) pode significar que você está usando a terminologia errada na maioria das vezes.

Veja como podemos combinar a função wp_is_mobile() com shortcodes do WordPress para suportar a saída personalizada de conteúdo para dispositivos móveis ou desktops de uma forma que seja fácil para os editores de sites gerenciarem.

Usaremos nossa detecção de celular/desktop em conjunto com as funções do WordPress add_shortcode() e do_shortocde() para criar ferramentas de shortcode que os editores possam aplicar nos artigos.

Primeiro, adicionaremos esse código ao arquivo functions.php do nosso tema (após proteger o tema criando um tema filho (child theme):

/**
 * Add shortcodes
 */

// Create [desktop] shortcode
add_shortcode('desktop', 'show_desktop_content');
function show_desktop_content($atts, $content = null){
    if( !wp_is_mobile() ){
        return do_shortcode( $content );
    } else {
        return null;
    }
}

// Create [mobile] shortcode
add_shortcode('mobile', 'show_mobile_content');
function show_mobile_content($atts, $content = null){
    if( wp_is_mobile() ){
        return do_shortcode( $content );
    } else {
        return null;
    }
}

Isso cria os códigos de acesso [desktop] e [mobile] (e suas tags de fechamento) que podemos usar em qualquer artigo ou conteúdo de página como este:

<h2>Password Help</h2>

To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.

Em um dispositivo móvel, o conteúdo acima aparecerá assim:

Captura de tela mostrando a saída dos shortcodes em um dispositivo móvel, com referência ao texto “toque”.
Usuários de dispositivos móveis verão “toque” na saída acima.

Em todos os outros dispositivos, os visitantes verão isso:

Captura de tela mostrando a saída dos shortcodes em um dispositivo desktop, com referência ao texto “clique”.
Usuários de “desktop” verão “clique” na saída acima.

Essa técnica facilita bastante o fornecimento de conteúdo que está “ciente” de como os visitantes interagem com seu site WordPress.

A função wp_is_mobile() e o cache do WordPress

Você não precisa estar usando o WordPress desde 2012 para saber que o armazenamento em cache de páginas é uma das formas mais eficazes de melhorar o desempenho. Mas o cache básico do WordPress pode atrapalhar as tentativas de fornecer conteúdo diferente nas solicitações para a mesma página.

Um cache de página individual no WordPress é iniciado por uma solicitação do cliente. Se a primeira solicitação vier de um dispositivo móvel, o conteúdo armazenado em cache será adaptado para usuários móveis se for modificado por wp_is_mobile(). E cada solicitação subsequente para essa página fornecerá conteúdo móvel, mesmo para usuários de desktop, até que o cache seja limpo.

Por isso, a plataforma de hospedagem gerenciada de WordPress da Kinsta suporta caches separados para conteúdo móvel e de desktop – começando com o cache local do seu servidor web NGINX e se estendendo ao Edge Caching da Kinsta em 260+ PoPs do Cloudflare em todo o mundo.

Para habilitar o cache de páginas para dispositivos móveis, você só precisa de alguns cliques (ou toques!) no painel MyKinsta:

Captura de tela mostrando os controles de cache no painel MyKinsta. É visível a opção para desativar ou habilitar o cache para dispositivos móveis.
Controles de cache para um site WordPress no painel MyKinsta.

Resumo

A função wp_is_mobile() do WordPress pode parecer uma coisa do passado, mas você pode encontrar usos para sua detecção de “celular ou desktop” que podem ajudá-lo a criar uma experiência melhor para todos os visitantes do seu site.

Não se esqueça de que você precisará de caches separados para os diferentes conteúdos gerados se quiser obter o melhor desempenho desses caminhos para celular e desktop.

Você tem alguma ideia para aproveitar as vantagens do wp_is_mobile()? Compartilhe sua ideia conosco nos comentários abaixo.

Steve Bonisteel Kinsta

Steve Bonisteel é um Editor Técnico na Kinsta que começou sua carreira de escritor como jornalista impresso, cobrindo ambulâncias e caminhões de bombeiros. Ele tem coberto tecnologia relacionada à Internet desde o final dos anos 1990.