WordPress Mobile para celular e tablet

WordPress Mobile para celular e tablet

Wordpress Mobile para celular e tablet
Wordpress Mobile para celular e tablet

Os dispositivos móveis hoje são uma realidade incontestável e o WordPress vem acompanhando essa evolução.

A possibilidade de usar o WordPress de qualquer lugar do mundo torna-o mais eficiente ainda.

Para que seu site atenda todos os dispositivos que acessam a internet – seja dispositivo móvel ou não – é possível optar por duas alternativas:

  • criar um domínio ou um subdomínio exclusivo para a versão mobile;
  • adaptar o site para que o mesmo tenha a flexibilidade de ser visualizado em qualquer dispositivo de acesso à internet

Domínio e/ou Subdomínio exclusivo para a versão mobile do site

Essa opção é a mais utilizada pelos grandes portais e sites mundo afora. Para exemplificar algumas práticas desta solução, podemos citar os portais iG, Terra e UOL respectivamente. Estes portais possuem uma versão mobile além da versão padrão que é projetada para computadores de mesa e notbook´s/netbook´s.

O UOL por exemplo tem a url principal com o seguinte endereço: http://www.uol.com.br. Enquanto que a versão mobile está no endereço: http://m.uol.com.br/.

Neste caso, quando o UOL é acessado por um dispositivo móvel, é realizado um redirecionamento para a versão projetada para aparelhos mobile(celular, tablet, ipod, smartphone).

Para fazer o redirecionamento é necessário identificar o dispositivo que está sendo utilizado pelo usuário que acessa o site.

Vamos mostrar um exemplo com a linguagem PHP com o código abaixo:

<?php

//identificando o dispositivo que acessa o site com a linguagem PHP
if($_SERVER['HTTP_USER_AGENT'] == 'Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10') {
    header("Location: http://www.versao-mobile.com");
}

?>

A condição acima verifica o dispositivo, versão do browser e sistema operacional do usuário e em seguida faz o redirecionamento para a versão móvel do site.

Há mais formas de fazer a checagem do dispositivo usado pelo usuário.

Abaixo o código de exemplo que checa se o dispositivo do usuário é um Apple iPhone:

<?php

$deviceIphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');

if ($deviceIphone == TRUE)
{
    header("Location: http://www.versao-mobile.com.br");
}

?>

Podemos também criar uma lista contendo vários dispositivos para verificação:

//Aqui definimos a variável que vai receber o tipo de dispositivo. Como a variável super global $_SERVER['HTTP_USER_AGENT'] pega uma string contendo todas as informações sobre o dispositivo que acessao servidor do site, utilizamos a função substr para selecionarmos apenas o dado com o nome do dispositivo.
$deviceMobile = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
//Lista contendo vários dispositivos mobile
$deviceAgents = array(
                        'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
                        'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
                        'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
                        'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
                        'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
                        'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
                        'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
                        'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
                        'wapr','webc','winw','winw','xda','xda-'
                        );

Com o auxílio do código acima você pode criar uma função para redirecionar o usuário para a versão do site que é compatível com seu dispositivo de acesso.

A verificação pode ser feita com Javascript e com o arquivo .htaccess também. No entanto nossos exemplos foram feitos apenas com PHP, que é a linguagem utilizada no desenvolvimento do WordPress.

Todos os códigos de exemplo mostrados aqui podem ser implementados dentro do arquivo “functions.php” do seu tema WordPress. Se você ainda não sabe criar um tema WordPress, acompanhe a série que ensina a criar temas WordPress.

Site flexível para Todos os Dispositivos Através do uso do CSS

Esta solução é válida, porém é a mais complicada para os desenvolvedores. Afinal tornar um site legível para todo e qualquer dispositivo não é uma tarefa tão fácil.

Os aparelhos de telefone celular tem uma enorme diferença ao renderizar páginas da internet. Não espere obter um mesmo resultado visto em um aparelho Nokia comparado a um smartphone da Motorola e vice-versa.

Para chegar o mais próximo possível da compatibilidade universal entre os aparelhos, é necessário definir estilos css tanto para computadores de mesa quanto para dispositivos mobile.

Vamos mostrar um exemplo usando o tema Kubrick que é um tema clássico do WordPress. Baixe o Kubrick no repositório de temas gratuitos do WordPress. Depois de instalar o Kubrick no seu WordPress, vamos criar uma nova folha de estilo chamada “mobile.css”. Salve esta folha de estilo dentro do diretório raíz do Kubrik que geralmente é nomeado como “default” dentro da pasta themes.

Abra o arquivo “header.php” do tema. Abaixo da linha 15 digite o seguinte código:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/mobile.css" type="text/css" media="handheld" />

Nesta linha estamos informando ao documento html que ele irá carregar o arquivo “mobile.css” como folha de estilos.

Abra o arquivo “mobile.css” e digite o seguinte código:

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background:#666666;
color: #333;
text-align: center;
}

#page {

background:none;
border: 1px solid #959596;
text-align: left;
}

#header {
background:none;
}

#headerimg 	{
display:none;
background:none;
margin: 7px 9px 0;
height: 192px;
width:100%;
}

#content {
background:none;
font-size: 1.2em;
}

body {
margin: 0 0 20px 0;
padding: 0;
}

#page {
background:none;
margin: 20px auto;
padding: 0;
width: 98%;
border: 1px solid #959596;
}

#header {
display:none;
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 200px;
width: 100%;
}

#headerimg {
display:none;
margin: 0;
height: 200px;
width: 100%;
}

#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}

#sidebar
{
display:none;
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
}

Agora vamos testar o site com o tema Kubrick no desktop usando o browser Google Chrome:

Exemplo do site no Desktop com Google Chrome
Exemplo do site no Desktop com Google Chrome

A versão mobile foi testada no Nokia C3 com o browser Opera, caso você não tenha um dispositivo móvel para realizar os testes, use a ferramenta de testes que a Opera disponibiliza em seu site. Veja como ficou o resultado no Nokia C3:

Exemplo do site no Nokia C3 com Opera
Exemplo do site no Nokia C3 com Opera

Lembrando que o modo de exibição pode variar bastante em comparação com aparelhos diferentes. Isso acontece porque cada fabricante impõe regras diferentes na renderização do html e ainda não há um padrão 100% definido. Mas a W3C já está providenciando a padronização web para dispositivos mobile.

Outra forma de estabelecer estilização para aparelhos móveis é definindo estilos para cada mídia dentro do código css. Veja o exemplo abaixo:

@media handheld {
  body {
    color: green;
    background:#f00;
    }
  }

Podemos definir estilização exclusiva para iPhone usando o seguinte código:

<link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/iphone.css" media="only screen and (max-device-width:480px)"/>

No código acima definimos que esta folha de estilos será acessada apenas por dispositivos que tenham o display com resolução máxima de 480 pixels. Até o momento a tela do iPhone tem largura de 480 pixels.

Alguns aparelhos com Google Android podem ter folhas de estilos exclusivas. Veja o código:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="<?php bloginfo("template_directory"); ?>/shetland.css" />

Abordaremos mais sobre WordPress Mobile no Blog WordPress. O assunto é muito abrangente e teremos muito conteúdo pela frente.

Até o próximo tutorial!

  • mto bom esse artigo. ainda não sabia dissio, meu amigo que trampa no suporte da Inter.net Hsoting que me contou. achei bem legal. a Inter esta criando meu site. logo mostro pra galera

  • Excelente tutorial, não necessita de fazer nenhuma nova instalação do WordPress. Bastas fazer umas configurações e fica tudo ok!