Criando um site do zero em WordPress - Aula 10 - Fatiando o layout II

Continuamos hoje a fatiar o layout criado em nosso esboço. Vamos nos encarregar de criar a barra do rodapé, os links do rodapé e o campo de busca. Além disso, realizaremos alguns ajustes no layout que passaram batidos na última aula.

Criando a barra do rodapé no WordPress e seus links

Através do código HTML5, criamos nossa barra de rodapé com links fictícios. O código deve ser inserido no arquivo footer.php. Ao fim, será apresentado o código de estilização.

<?php wp_footer(); ?>

<div class="BottomFaixa">
    <a href="link1.php">Link 1</a>
    <a href="link1.php">Link 2</a>
    <a href="link1.php">Link 3</a>
    <a href="link1.php">Link 4</a>
    <a href="link1.php">Link 5</a>
</div>

</body>

</html>

Criando formulário de busca no WordPress 2018

Vamos criar abaixo nosso formulário de busca, conforme padrão do WP. Como a busca estará presente em todas as páginas, vamos inserí-la no header.php.

<div class="Busca">
   <form action="" name="formsearch" id="formsearch">
       <input type="text" id="s" name="s" placeholder="Encontre a sua natureza!">
       <input type="submit" value="Buscar">
   </form>
</div>

Desenvolvendo um botão mobile para WordPress

Criaremos nessa aula também nosso botão mobile que será exibido em smartphones e tablets. O layout do botão deve ser criado em um botão de design como: CorelDraw ou Fireworks. Assim como a busca, esse botão aparecerá em todas as páginas, logo deve ser inserido em nosso arquivo padrão header.php. No CSS ao fim da página, note que definimos display:none; para resoluções maiores, afinal o botão é apenas para telas pequenas.

<div class="BotaoMobile">
    <img src="<?php echo get_template_directory_uri()."/Images/BotaoMobile.png"; ?>" alt="Botão Mobile Tyr" title="Botão Mobile Tyr">
</div>

Nas próximas aulas, criaremos o javascript que dá vida ao botão mobile.

Estilizando os novos elementos

Vamos estilizar nossos novos elementos e fazer algumas correções nos elementos criados na última aula, para tanto alteraremos o style.css. Segue eabaixo o código:

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

    .BottomFaixa{position:absolute; bottom: 0; width:100%; height: 50px; background: #000;}
        .BottomFaixa a{float:left; width: 20%; line-height: 50px; text-align: center; color:#FFF; text-decoration: none;}
        .BottomFaixa a:hover{text-decoration: underline;}

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

    .BotaoMobile{position:absolute; top: 20px; right:30px; cursor:pointer;}
}

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

    .BottomFaixa{position:absolute; bottom: 0; width:100%; height: 50px; background: #000;}
        .BottomFaixa a{float:left; width: 20%; line-height: 50px; text-align: center; color:#FFF; text-decoration: none;}
        .BottomFaixa a:hover{text-decoration: underline;}

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

    .BotaoMobile{position:absolute; top: 20px; right:30px; cursor:pointer;}
}

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

    .BottomFaixa{position:absolute; bottom: 0; width:100%; height: 50px; background: #000;}
        .BottomFaixa a{float:left; width: 20%; line-height: 50px; text-align: center; color:#FFF; text-decoration: none;}
        .BottomFaixa a:hover{text-decoration: underline;}

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

    .BotaoMobile{display:none;}
}

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

    .BottomFaixa{position:absolute; bottom: 0; width:100%; height: 50px; background: #000;}
        .BottomFaixa a{float:left; width: 20%; line-height: 50px; text-align: center; color:#FFF; text-decoration: none;}
        .BottomFaixa a:hover{text-decoration: underline;}

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

    .BotaoMobile{display:none;}

    .Busca{position:absolute; width: 30%; top: 30px; left: 30%;}
        .Busca input[type='text']{float:left; width: 80%; height: 40px; font-size: 17px; color:#444;}
        .Busca input[type='submit']{float:left; width: 20%; height: 40px; font-size: 17px; color:#FFF; font-weight: bold; text-align: center; border:0; cursor:pointer; background: #83AA4B;}
}

Na próxima aula continuamos fatiando nosso layout.