[ CSS ]

Home » CSS » Como criar um template responsivo para WordPress usando queries de CSS3
Inscreva-se em nosso canal no Youtube Daviwp


Como criar um template responsivo para WordPress usando queries de CSS3

23/01/2013 CSS (8) comentários

Olá Pessoal 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.

Na pasta ‘themes’ do seu WordPress, crie um novo arquivo chamado ‘multiplescreen’;
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 ‘Daviwp’. Substitua o nome ‘Daviwp‘ pelo nome do seu Template.

banner1

/*
Theme Name: Daviwp
Theme URI: https://www.daviwp.com/
Description: Thema Oficial
Author: Davi Alves
Author URI: https://www.daviwp.com
Template: Daviwp
Version: 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 DaviWP 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:

SmartPhones- Menos de 320px;
Tablets – Entre 321px e 768px;
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.

Post: Paulo Faustino

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.

  • Jana Vale

    Como tornar um tema ja pronto no worpress para responsivo?

    • daviwp

      Olá Jana, é preciso colocar no grid e bootstrap framework .

  • Tony

    Tenho a mesma duvida de Jana Davi se possivel cria um post de como fazemos isso ficariamos muitos gratos

    • daviwp

      Olá Tony,

      Vou fazer um post ainda essa semana.

  • daviwp

    Olá Iori,

    Legal, posta sua dia para o pessoal acompanhar.

    Att;
    Davi.

    • Iori Yagami

      rapido por aqui mesmo.. nao faça o import porque é um metodo falido, o site perde desempenho… crir um documento functions.php
      jogue dentro:

      add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
      function theme_enqueue_styles() {
      wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
      wp_enqueue_style( ‘child-style’, get_stylesheet_uri(), array( ‘parent-style’ ) );
      }

      • daviwp

        Parabéns Iori,

        Desta forma temos só um problema, bloqueio de renderização do css, caso precisamos otimizar nosso site no google speed por exemplo. Vou criar um post para mostrar como resolver esse problema nesse tipo de função, desde já agradeço Iori valeu!

  • daviwp

    Show Iori,

    Parabéns! so tenta resolver o bloqueio de renderização 😉

    Abraço.

Facebook

Publicidade