Como criar um template responsivo para WordPress

A navegabilidade e usabilidade são hoje um aspecto extremamente importante na vida e no sucesso de um site/blog. E por isso não podemos fechar os olhos para as linguagens como o HTML5, CSS3 e também o Webdesign responsivo, que basicamente significa um layout de site/blog que responde automaticamente às diferentes resoluções de uma tela de um computador pessoal, de um smartphone ou de um tablet, ajustando todo o layout e os seus elementos para garantir a melhor experiência de navegação possível para o usuário.

Os colegas do Blissfull Interfaces lançaram recentemente um artigo interessante sobre a criação de um tema responsivo, que juntamente com o nosso guia completo sobre Como criar um template WordPress, poderá ajudá-lo a tornar o seu template wordpress responsivo ou ajudá-lo na criação dos seus temas WordPress futuros de uma forma mais moderna e adaptada às necessidades de hoje em dia.

Para criar um tema WordPress responsivo, você pode utilizar queries de CSS3. Para compreender este artigo, você já deverá saber como criar um template WordPress e ter alguns conhecimentos de CSS.

Hoje vamos aprender a criar uma child theme e usar queries de media em CSS3, para fazer com que o nosso layout se adapte às diferentes resoluções de telas dos vários aparelhos existentes no mercado.

1. Na pasta ‘themes’ do seu WordPress, crie um novo arquivo chamado ‘multiplescreen’;
2. Crie uma pasta CSS dentro do seu novo arquivo ‘multiplescreen’ e dê o nome de‘style.css’.
   Um arquivo de CSS do tipo ‘style.css’ é a única coisa que você necessita para criar uma child theme. Adicione o seguinte código ao seu arquivo ‘style.css’.
   Importante: Assumimos que o nome do seu template se chama ‘EscolaWP’. Substitua o nome ‘EscolaWP‘ pelo nome do seu Template.

/*
Theme Name: EscolaWP Child
Theme URI: http://www.escolawp.com/
Description: Child theme para EscolaWP
Author: Seu Nome
Author URI: http://www.escolawp.com
Template: EscolaWP
Version:0.1.0
*/

Tal como acontece com qualquer tema WordPress, o cabeçalho de informação tem de estar no topo do arquivo CSS. A única diferença entre um arquivo de CSS e uma Child Theme é o campo Template: é obrigatório, para que o WordPress perceba qual é o Template mãe e filho, respectivamente.

Agora iremos necessitar de chamar a nossa folha de estilos parente para dentro da nossa child theme. Adicione o seguinte código ao seu novo arquivo de CSS. A função @import url.. chama a pasta de CSS do seu Template mãe para dentro do seu CSS do Template filho.

@import url(“../twentyten/style.css”);

Para verificarmos se a nossa child theme está funcionando corretamente, vamos mudar os títulos H1 da child theme para cor-de-laranja. Substitua o código anterior que chama o CSS do Template mãe, por este novo:

@import url(“../twentyten/style.css”);
h1
{
color: #ffb400;
}

Importante: Tenha certeza de que não aparece estilos antes do @import url.. Se isso acontecer, o CSS da nossa child theme não consegue carregar os estilos parentes.

Agora faça login no painel de administração do seu WordPress, active o template EscolaWP Child no menu Aparência –> Templates. Agora verifique como se encontra o seu blog WordPress num browser de Internet. Você deverá ver o seu template idêntico, mas apenas com os títulos H1 na cor-de-laranja.

Agora precisamos definir quais as medidas de media que vamos usar no nosso layout. Eis as três mais comuns:

1. SmartPhones- Menos de 320px;
2. Tablets – Entre 321px e 768px;
3. Desktop – 769px e superiores.

@media screen and (max-width:320px)
{
h1 {
color: #ffb400;
}
}
@media screen and (min-width:321px) and (max-width:768px)
{
h1 {
color:#0096ff;
}
}
@media screen and (min-width:769px)
{
h1 {
color: #693573;
}
}

Grave o seu arquivo de CSS. Para testar as diferentes medidas, simplesmente abra o seu site em um browser de Internet e arraste a janela para diferentes dimensões, para verificar se o layout se adapta automaticamente. Você irá verificar uma mudança de cor no H1 color quando a dimensão reduz. Não esqueça de remover as alterações de cor no H1 caso não pretenda mantê-las.

Bom, é isso, pessoal! Até a próxima.

Fonte: http://imasters.com.br/artigo/24029/wordpress/como-criar-um-template-responsivo-para-wordpress/