Como criar templates wordpress – Parte 05

Esse artigo é parte do Curso de criação de templates wordpress, caso ainda não esteja inscrito, por favor confirme sua assinatura agora mesmo, é grátis. No artigo passado criamos o style.css, que é responsável pela estilização de nosso template e também por conter algumas informações relativas ao template, como nome, quem o produziu e outras informações e ainda o index.php que seria a página principal do template. Apesar do conteúdo destes artigos não ser definitivo, já podemos ter uma ideia de como funciona cada um dele, na aula de hoje vamos iniciar a codificação de cabeçalho de nosso template.

Importar o Bootstrap

Antes de começar a codificação de nosso cabeçalho, creio que já é hora de trazer o bootstrap para dentro de nosso template, pois com ele já poderemos utilizar algumas classes para que nosso template seja plenamente responsivo e que também irão poupar um tempo imenso. Falamos sobre o bootstrap no segundo artigo da série. Caso ainda não tenha lido sobre ele, o faça. Depois de realizar o download do Bootstrap, descompacte em um local fácil de localizar e então procure a pasta dist, copie as pastas css e também a pasta js para a pasta de seu template. Vamos fazer isto para que possamos no decorrer do curso possamos utilizar estes arquivos.

Nas pastas relativas ao Bootstrap sempre terão arquivos normais e arquivos com uma extensão .min, significando que estes arquivos estão minificados, técnica usada para reduzir o tamanho dos arquivos e fazer com que o carregamento do site seja mais rápido, usaremos sempre os arquivos normais, porque são mais legíveis e melhor para realizar qualquer alteração. Depois podemos realizar a minificação e tudo estará minificado e com nossas alterações.

Para importar o css do bootstrap, iremos incluir a seguinte linha no arquivo style.css:

@import url("css/bootstrap.css");

Código do header.php

O cabeçalho de um blog ou site, é algo que se repete em todas as páginas, logo não há sentido em realizar a codificação em todas as páginas do template. É mais válido criar um arquivo codificar apenas uma vez e importar em todos os arquivos que forem necessário. Abaixo temos um código prévio do header.php, ele sofrerá algumas alterações durante o curso, mas a sua essência pode ser vista a seguir.

<!DOCTYPE html>
<!--[if IE 7]><html class="no-js ie7 lt-ie9 lt-ie8" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 8]><html class="no-js ie8 lt-ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html class="no-js" <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" rel="shortcut icon" />

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.min.js" type="text/javascript"></script>
<![endif]-->

<?php wp_head(); ?>

</head>
<body <?php body_class(); ?> itemscope="" itemtype="http://schema.org/WebPage">
    <div class="container">
        <header id="header">
            <h1 class="site-title"><a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <nav id="main-navigation" class="navbar navbar-default" role="navigation">
                <a class="assistive-text" href="#content" title="Pular para o conteúdo">Pular para o conteúdo</a>
                    <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-navigation">
                    <span class="sr-only">Alternar navegação</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <?php /*

                    <a class="navbar-brand" href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

                    */ ?>
                </div>
                <div class="collapse navbar-collapse navbar-main-navigation">
                    <?php
                        wp_nav_menu(
                            array(
                                'theme_location' => 'main-menu',
                                'depth'          => 2,
                                'container'      => false,
                                'menu_class'     => 'nav navbar-nav',
                            )
                        );
                    ?>
                    <form method="get" class="navbar-form navbar-right" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
                        <label for="navbar-search" class="sr-only">Pesquisar</label>
                        <div class="form-group">
                            <input type="text" class="form-control" name="s" id="navbar-search" />
                        </div>
                        <button type="submit" class="btn btn-default">Pesquisar</button>
                    </form>
                </div><!-- /.navbar-collapse -->
            </nav><!-- #main-menu -->
        </header><!-- #header -->
        <div id="main" class="row">

A intenção do curso é de esclarecer pontos a cerca do desenvolvimento de templates para WordPress, logo não iremos analisar linha a linha o código do header.php que é basicamente composto de HTML. Vamos destacar alguns aspectos importantes do código:

  • Primeiras linhas: São declaradas metatags default do HTML 5;
  • Linha 13: É realizada a importação do CSS (style.css), que por sua vez importa todos os outros necessários;
  • Linha 20: Chamada da função wp_head (É uma função necessária para o funcionamento correto de plugins e também de alguns aspectos do template);
  • Linhas 42-52: É realizada a chamada do menu wordpress, é esta linha que permite que depois possamos chamar o menu pré-configurado no painel do wordpress;
  • Linhas 53-60: Form de pesquisa que ficará na mesma barra do menu.

Citamos no artigo 2, que uma das principais virtudes do Bootstrap é permitir a construção de templates com um esforço reduzido. Com ele não precisaremos realizar toda a codificação para configurar o tamanho das divs, questões a respeito de responsividade e outros aspectos. Perceba que na linha 24, abrimos uma div com classe container. Utilizando o Bootstrap, podemos apenas setar a classe container que todo o conteúdo ficará dentro de uma caixa com um tamanho, que se ajustará ao tamanho de tela do usuário. Mais tarde iremos definir o tamanho máximo para esta caixa como sendo 960px, que acredito ser um valor adequado para tal, e já se tornou um padrão na web.

Ao fim, na linha 63, perceba que criamos uma div com a class row, com isso estamos informando que criaremos outra “linha” na tabela do layout. Não se confunda não estamos utilizando tabelas para estilização.

Depois de codificar o header.php, precisamos realizar a importação do mesmo em nosso template, para isso cole a seguinte linha no início do arquivo index.php:

<?php get_header(); ?>

Com isso o nosso cabeçalho será exibido em nosso index.php e faremos esta mesma importação em todos os arquivos de template de nosso tema, quando chegarmos lá.

Está foi a quinta aula, espero que todos tenham gostado.

Comente, o curso é seu

Não deixe de deixar seu comentário, seja com opiniões sobre os artigos já publicados, seja com dúvidas e sugestões para a continuidade da série, esperamos que esta série esteja da forma que você espera.

Não deixe de compartilhar estes artigos da série e convidar seus amigos para o curso. Artigos indicando o curso em seus blogs também são bem vindos.

Até já.

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br

  • Jorge

    Muito bom, estou acompanhando as aulas e vejo que esta bem explicado até o momento, espero que continue assim parabens.

    • Jair Rebello

      Jorge, que bom que tem gostado e conseguido acompanhar.

      Abraços.

  • Muito bom… feito os passos. Aguardando próximas aulas. Obrigado

    • Jair Rebello

      Isaias, que bom que você está nos acompanhando. Acabamos de publicar a sexta aula.

  • Carlos

    Show de Bola!

    • Jair Rebello

      Valeu Carlos, continue nos acompanhando.

  • Muito bom esse curso.

    • Jair Rebello

      Christyan, agradecemos o elogio.

  • Marcelo Cardoso

    Estou gostando muito.

    • Jair Rebello

      Marcelo, ficamos imensamente felizes que tem gostado.

  • Gabriel Eufrásio Câmara

    Muito bom o curso, estou acompanhado ..

    obrigado.

    • Jair Rebello

      Gabriel, obrigado por nos acompanhar.

  • Nuno Miguel Batista

    Boa tarde parece ser excelente o curso, mas já coloquei meu email, alais dois email’s e não me chega nada nem no spam ou outro lugar qualquer será que me podem informar se tem algum problema???

    • Jair Rebello

      Valeu Nuno, tente se inscrever novamente.

      Abraços.

  • Carlos

    Ansioso pela parte 06! 😀 o/

    • Jair Rebello

      Carlos, tá publicado.

      Abraços.

  • Oi estou gostando do curso, estou querendo fazer uma sidebar, e estava funcionando, mas agora parou de aparecer, já tentei de tudo e não consegui resolver o problema, tem algum problema se eu colocar o código aqui, para você analisar?

  • Jair to adorando o curso, detalhe que tinha parado na aula 2, mais voltei com força super total.

    Muito obrigado pela sua iniciativa.

    Espero ter novas aulas rsrs to curtindo muito e curto o conteúdo dos e-mails sempre que posso leio tudo, ou arquivo e vou lendo conforme os intervalos de tempo rsrsrs

  • landsfialho

    Olá, Jair!
    Parabéns pelas suas aulas! São realmente muito boas!
    Gostaria de saber onde encontro as aulas 06 em diante.
    Muito obrigado!

  • Alex

    Dê sequência as aulas Jair… Agora que estava ficando interessante vc parou na aula 5…

  • JOSÉ GERALDO

    Olá Jair, parou porque? Todos estavam comentando super bem do curso e já faz um ano sem resposta.
    Abraço.