Depois de termos escrito e publicado uma série de 12 tutoriais sobre Como Criar um Template WordPress, e porque as tecnologias estão constantemente avançando e melhorando, é necessário estar sempre na vanguarda da tecnologia por forma a garantir os melhores resultados possíveis e a melhor experiência de utilização possível para o usuário. A navegabilidade e usabilidade são hoje um aspecto extremamente importante na vida e sucesso de um blog, pelo que não podemos fechar os olhos a 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 ecrã de um computador pessoal, de um smartphone ou de um tablet, ajustando todo o layout e os seus elementos por forma a garantir a melhor experiência de navegação possível para o usuário.

Os colegas do Blissfull Interfaces, lançaram recentemente um tutorial 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.

wordpress responsivo

Para criar um Tema WordPress responsivo, você pode fazê-lo usando queries de CSS3. Para compreender este tutorial, você já deverá saber como criar um template WordPress (leia o tutorial indicado) e ter alguns conhecimentos de CSS.

Neste tutorial 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 ecrã dos vários aparelhos existentes no mercado.

1. Na pasta ‘themes’ do seu WordPress, crie uma nova pasta chamada ‘multiplescreen’.

2. Crie um ficheiro CSS e grave-o com o nome ‘style.css’ dentro da sua nova pasta ‘multiplescreen’.
Um ficheiro de CSS do tipo ‘style.css’ é a única coisa que você necessita para criar uma child theme. Adicione o seguinte código ao seu ficheiro ‘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 ficheiro CSS. A única diferença, é que num ficheiro de CSS para uma Child Theme, o campo Template: é obrigatório, por forma a 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 ficheiro de CSS que temos vindo a trabalhar. A função @import url.. chama o ficheiro 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 a 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á estar vendo o seu template idêntico, mas apenas com os títulos H1 a 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 ficheiro de CSS. Para testar as diferentes medidas, simplesmente abra o seu site num 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.

Até Já!