Como detectar dispositivos móveis e apresentá-los um tema específico?

31

Gostaria de criar uma nova versão modificada do meu tema (verifique meu perfil se necessário) para apresentar aos visitantes se eu detectar que eles estão visitando o site a partir de um dispositivo portátil, como iPhone, Android etc.

  1. Como detectar se a solicitação está vindo de um dispositivo / navegador móvel?
  2. Como posso carregar e apresentar um tema dedicado?

Mais informações : meu tema não é fluido. Tem uma largura fixa de cerca de 976px (conteúdo 676px + resto é a barra lateral esquerda). Eu não quero revolucionar o tema, mas eu sinto que é grande para 320 x 480 e 800 x 480 telefones. Provavelmente vou remover a barra lateral ou pelo menos movê-la para a direita e fazer outros pequenos ajustes.

    
por Drake 10.11.2010 / 14:23
fonte

6 respostas

19

Como a maioria dos outros, eu recomendo usar o WPTouch. No entanto, ele é mais desenvolvido para suportar blogs do que outros formatos de sites, então sei que não é a panacéia das soluções móveis (eu gerencio meu portfólio no WordPress e no meu blog, e meu portfólio se parece com **** no WPTouch). p>

Então, dei uma olhada no código para encontrar as partes relevantes que você precisaria usar para replicar a detecção do navegador móvel. Em primeiro lugar, como mencionado por Jan Fabry, é uma lista de agentes de usuário do navegador móvel. O WPTouch inclui uma lista padrão, mas também permite adicionar agentes de usuário personalizados com uma configuração ou com um filtro chamado wptouch_user_agents :

function bnc_wptouch_get_user_agents() {
    $useragents = array(           
        "iPhone",                                // Apple iPhone
        "iPod",                                  // Apple iPod touch
        "Android",                               // 1.5+ Android
        "dream",                                 // Pre 1.5 Android
        "CUPCAKE",                               // 1.5+ Android
        "blackberry9500",                        // Storm
        "blackberry9530",                        // Storm
        "blackberry9520",                        // Storm v2
        "blackberry9550",                        // Storm v2
        "blackberry9800",                        // Torch
        "webOS",                                 // Palm Pre Experimental
        "incognito",                             // Other iPhone browser
        "webmate",                               // Other iPhone browser
        "s8000",                                 // Samsung Dolphin browser
        "bada"                                   // Samsung Dolphin browser
    );

    $settings = bnc_wptouch_get_settings();
    if ( isset( $settings['custom-user-agents'] ) ) {
        foreach( $settings['custom-user-agents'] as $agent ) {
            if ( !strlen( $agent ) ) continue;

            $useragents[] = $agent; 
        }       
    }

    asort( $useragents );

    // WPtouch User Agent Filter
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

A carne do plugin, no entanto, é uma classe:

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;

    ...

O construtor do plug-in ( function WPtouchPlugin() ) primeiro adiciona uma ação ao gancho plugins_loaded para detectar o agente do usuário do navegador móvel e definir $applemobile como true. Aqui está a função específica:

function detectAppleMobile($query = '') {
    $container = $_SERVER['HTTP_USER_AGENT'];

    $this->applemobile = false;
    $useragents = bnc_wptouch_get_user_agents();
    $devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
    foreach ( $useragents as $useragent ) {
        if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
            $this->applemobile = true;
        }       
    }
}

Agora, o plug-in sabe que você está usando um navegador para dispositivos móveis (de acordo com o agente do usuário do navegador). A próxima parte importante do plug-in é um conjunto de filtros:

if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
    add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
    add_filter( 'theme_root', array(&$this, 'theme_root') );
    add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
    add_filter( 'template', array(&$this, 'get_template') );       
}

Cada um desses filtros chama um método que verifica se $applemoble está ou não definido como true. Se estiver, o WordPress usará sua folha de estilo para celular, seu tema para celular e um modelo de postagem / página para celular, em vez dos modelos padrão para seu tema. Basicamente, você está sobrescrevendo o comportamento padrão do WordPress com base no fato de o navegador que está sendo usado ter ou não um agente do usuário que corresponda à sua lista de "navegadores móveis".

O WPTouch também inclui a capacidade de desativar o tema para dispositivos móveis - quando você visita um site do WPTouch em um iPhone, há um botão na parte inferior que permite visualizar o site normalmente. Você pode querer considerar isso ao criar sua própria solução.

Aviso: Todo o código acima foi copiado da fonte para WPTouch versão 1.9.19.4 e está protegido sob a GPL. Se você reutilizar o código, seu sistema também deverá cumprir os termos da GPL. Eu não escrevi este código.

    
por EAMann 10.11.2010 / 16:40
fonte
8

Você pode querer ver como o plug-in WPtouch muito popular faz isso. Ele oferece um tema diferente para "iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch e dispositivos móveis BlackBerry Storm / Torch" . Eu vejo uma uma lista de agentes de usuários em seu código-fonte , essa é provavelmente a chave.

Outro plugin, WP-Wurfled , usa o extenso Universal Resource File . Esse banco de dados de dispositivos móveis constantemente atualizado também contém muitas informações de recursos , portanto, você conhece a resolução da tela do lado do servidor dispositivo, se suporta Flash, ...

O template_redirect gancho de ação é usado com frequência para carregar temas personalizados, já que é quase o último momento antes que um arquivo de modelo real seja incluído ( template_include é o último gancho, mas isso é um filtro).

    
por Jan Fabry 10.11.2010 / 15:03
fonte
7

Correndo o risco de não responder a pergunta, eu aconselho a não fazê-lo.

Estou usando dispositivos iOS há meses, e uma das primeiras coisas que fiz quando comprei meu iPad foi tentar criar um layout CSS que alterasse seu comportamento com base no dispositivo usado (e, originalmente, a orientação da tela).

No momento da escrita, ele está sendo executado no meu site de desenvolvimento (http://dev.semiologic.com/). Se você testá-lo em um dispositivo iOS, observará que o layout alterna de uma coluna com barras laterais no iPad para uma com uma única coluna com base no iPhone. (As barras laterais são dispostas em duas colunas e as caixas inferiores são dispostas em duas colunas abaixo.) Você pode reproduzir o efeito usando o Safari, reduzindo a largura do navegador.

De qualquer forma, por mais divertido que fosse programar, eventualmente ocorreu-me que, pelo menos em dispositivos iOS, o layout otimizado para dispositivos móveis piorava as coisas, não melhor. O zoom integrado do Safari Mobile é de tal forma que, desde que sua coluna principal tenha 480 pixels de largura, seu site já esteja otimizado para uso móvel. Adicione uma barra lateral ampla de 240px para um layout de 720px de largura e seu site se encaixa e fica ótimo em todos:

  • 1024x768 (paisagem do iPad)
  • 768x1024 (retrato no iPad)
  • 800 x 600 (usuários com pouca visão)
  • 480x320 (paisagem do iPhone)
  • 320x480 (retrato do iPhone, com o zoom automático ativado)

500px + 250px também funciona se você preferir algo que totalize 750px, se considerar o zoom integrado do celular Safari. O site ainda terá boa aparência e será perfeitamente legível em iPhones nos modos paisagem e retrato.

De qualquer forma, voltando à sua pergunta, o teste revelou que a única coisa que você NÃO deve fazer é usar um layout com uma largura flexível. (Incidentalmente, o WP-touch fará exatamente isso, a menos que eu esteja confundindo.) Fazer isso leva a um zoom abaixo do ideal. No iPad, você pode aumentar o zoom em algo restrito em uma coluna de 480 pixels de largura, permitindo tamanho de texto maior; algo que "se ajusta" à largura da sua tela obriga você a ler texto minúsculo ou rolagem horizontal se for muito pequeno para ler confortavelmente ...

    
por Denis de Bernardy 10.11.2010 / 17:02
fonte
3

Simples: use o wp_is_mobile() para testar - ele acionará true para todos dispositivos móveis (smartphones, tablets, etc.).

Atualizar

Por favor não faça isso. Não funciona de forma confiável.

    
por kaiser 26.03.2012 / 01:00
fonte
2

Este é um script realmente ótimo se você quiser personalizá-lo, fácil de integrar ao wordpress. enlace

Uma coisa a notar é que a maioria dos usuários de iphone, andriod ou telefones celulares com suporte a navegadores nativos não querem ser redirecionados automaticamente!

Essa é uma prática ruim, dar a eles uma opção por meio de um link para uma versão para celular e, na versão para celular, dar a eles a opção de voltar ao site original.

Repito: não redirecione automaticamente seus usuários, a menos que você construa algo muito específico para celular ou tenha tráfego de telefones mais antigos sem suporte nativo a navegadores (improvável).

  • Desejamos adicionar, uma maneira fácil de saber como isso é importante através dos registros do seu servidor.
por Wyck 10.11.2010 / 16:12
fonte
1

Vou adicionar uma abordagem alternativa.

Talvez você queira fazer artesanato e aperfeiçoar todo o estilo e comportamento de acordo com necessidades muito específicas.

Recentemente tive que: se o IE9 uma coisa, se o iPhone um segundo, se o iPad um terceiro e assim por diante ... E usou a classe Browser.php de Chris Schuld com ótimos resultados.

A função que eu criei e exemplos de uso:

require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();

function browser_check($what) {
    global $browser_agent, $browser_version;
    switch ($what) {
        case 'version':
            return $browser_version;
        break;
        case 'ie':
            if ($browser_agent==Browser::BROWSER_IE) return true;
            else return false;
        break;
        case 'mobile':
            if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true;
            else return false;          
        break;
        case 'ipad':
            if ($browser_agent==Browser::BROWSER_IPAD) return true;
            else return false;          
        break;
        default:
            return false;
        break;
    }
}

echo "Browser Version: " . browser_check('version');

if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";

if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";

if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";
    
por brasofilo 26.03.2012 / 05:59
fonte