Criando um site do zero em WordPress - Aula 09 - Fatiando o layout I

Na 9ª vídeo-aula do curso Criando um site em WordPress do Zero vamos iniciar a dar cara ao nosso Layout, habilitando também funções para estilização do nosso usuário no painel WP.

Habilitando customização da logomarca no painel do WordPress

Para habilitar o suporte a customização da logomarca no dashboard do WordPress, iremos inserir no nosso arquivo functions.php o seguinte código:

add_theme_support( 'custom-logo', array(
    'height'      => 200,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
    'header-text' => array( 'site-title', 'site-description' ),
));

A função acima habilitará na opção de Aparência >> Identidade do site, a opção de alteração da logomarca do Tema.

Para que a logo apareça no layout, vamos inserir no arquivo header.php o seguinte código:

<div class="Logomarca">
    <?php the_custom_logo(); ?>
</div>

Habilitando customização do fundo do site WP

Para liberar que o próprio usuário altere a cor de fundo ou insira alguma imagem no fundo do website, iremos inserir no nosso arquivo functions.php a seguinte função:

add_theme_support( 'custom-background' );

A função habilitará o link Aparência >> Fundo, onde o usuário poderá determinar o background da sua página.

Adicionando o CSS no tema WordPress

Outro detalhe que passou batido na última aula foi a inclusão da nossa folha de estilos no nosso tema. Essa inclusão ocorre através da função abaixo:

wp_enqueue_style( 'style', get_stylesheet_uri() );

Por fim, exportamos a imagem da logomarca, dividimos o CSS em media-queries para WordPress e criamos nossas duas primeiras divs. O código CSS segue abaixo:

* , *:before , *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

body{margin: 0; padding:0; border:0;}

@media only screen and (max-width: 480px){
    .TopFaixa{float:left; width:100%; height: 80px; background: #000; opacity: 0.7; filter: alpha(opacity=70);}
}

@media only screen and (min-width: 481px) and (max-width: 768px){
    .TopFaixa{float:left; width:100%; height: 120px; background: #000; opacity: 0.7; filter: alpha(opacity=70);}
}

@media only screen and (min-width: 769px) and (max-width: 1199px){
    .TopFaixa{float:left; width:100%; height: 120px; background: #000; opacity: 0.7; filter: alpha(opacity=70);}
}

@media only screen and (min-width: 1200px){
    .TopFaixa{float:left; width:100%; height: 120px; background: #000; opacity: 0.7; filter: alpha(opacity=70);}

    .Logomarca{position:absolute; top:10px; left: 5%; z-index: 2;}
        .Logomarca img{width: auto; max-height: 100px;}
}

No código acima, as duas primeiras linhas tratam-se do box-sizing para que consigamos pegar somente as larguras e alturas precisas e retiramos todas as paddings, margins e borders do nosso body.

Resultado do início da implementação do layout no WordPress

Nossa primeira aula de fatiar o layout no WP ficou com o resultado abaixo: