WordPress Logo

Criando um tema para WordPress – Parte 4

Fala minha gente! tudo bom?

Peço desculpas pela demora em continuar com essa sequência de posts: eu estava trabalhando em alguns projetos e fiquei sem muito tempo livre.

Hoje vamos continuar com a Parte 4 do nosso tema! :)

Criando um tema para WordPress

Se você ainda não está acompanhando, veja as outras partes dessa sequência de artigos:

Parte 4 – Separando o tema em blocos reutilizáveis

Na Parte 3 criamos o template básico da home (index.php) que ficou mais ou menos assim:

Agora vamos separar as partes do nosso tema!

Header e Footer

É uma prática muito comum (e recomendada) que você separe – pelo menos – o topo e o rodapé do seu template em arquivos separados, assim podemos reutilizar esses “blocos” em todos os templates (páginas) do blog.

Vamos começar separar o header.php que contém todo o código desde o DOCTYPE até o fim do topo do seu site:

Depois precisamos separar o footer.php, fazendo a mesma coisa: partindo do fim do conteúdo (começo do rodapé) até o </body>:

Depois de salvar esses dois arquivos, é só fazer o “include” dentro do nosso index.php, deixando-o muito mais limpo:

Acabamos de usar duas funções novas:

  • get_header() – Incluir o topo padrão do site (header.php)
  • get_footer() – Inclui o rodapé padrão do site (footer.php)

Percebam que eu chamei de “topo padrão” e “rodapé padrão” pois se você fizer uma chamada do tipo: get_header(‘especial’) ele vai incluir o arquivo header-especial.php ao invés de header.php. .. O mesmo vale pro footer :)

Lateral

Por enquanto não temos um conteúdo pra lateral, mas o elemento (sidebar) já existe… então podemos fazer exatamente o que fizemos com o topo e rodapé: separar a lateral em um novo arquivo que pode ser re-utilizado pelos outros templates.

Primeiro criamos um arquivo sidebar.php com a marcação da lateral:

Depois incluímos ele no template usando a função get_sidebar() que funciona exatamente como as funções get_header() e get_footer(), assim:

Com isso nosso template contém só o conteúdo/miolo daquela página e podemos ter páginas com formatos diferentes, que incluam ou não a lateral e que possam usar topos ou rodapés diferentes do padrão (que não vai ser o caso desse blog).

Finalizando

Agora nosso template já tem a estrutura básica (e recomendada) de um template pro WordPress:

  • header.php – Topo do site
  • footer.php – Rodapé do site
  • sidebar.php – Lateral do site
  • index.php – Template da página inicial (listagem de posts)

Na Parte 5 iremos criar o single.php que é justamente o template que mostra todo o conteúdo do post (texto completo).

Acompanhe o template que estou criando pro meu blog, com mais algumas coisinhas (que não coloquei aqui), no GitHub: https://github.com/TiuTalk/blog.thiagobelem.net

Gostou? Então comenta, compartilha e recomenda! :)

Abraços e até a próxima!

18 thoughts on “Criando um tema para WordPress – Parte 4

  1. Pingback: Criando um tema para WordPress – Single - Thiago Belem / Blog

  2. Wallison marra

    Muito bacana o tutorial, já programo em php a um bom tempo e estou indentificando bem não só a estrutura ho theme mas de todo o wordpress. Aguardamos a parte 5!!!

    Parabéns!

  3. Édlon Marcus

    Ao aguardo da parte 5…
    Em português, este foi o único tutorial que realmente cria um template do zero, sem uso de outro para edição, e ainda explica cada parte.
    Obrigado =D

  4. Édlon Marcus

    Ao aguardo da parte 5…
    Em português, este foi o único tutorial que realmente cria um template do zero, sem uso de outro para edição, e ainda explica cada parte.
    Obrigado =D

  5. Fábio Lima

    Cara cadê o single.php? rs

    Muito bom o tutorial, to aprendendo bastante, não pare por ae xD

    Abraços..

  6. Thadeu Esteves

    Thiago, falta pouco parceiro rs.. vou aproveitar este Mini-Curso de WP aqui no teu blog, comprar meu dominio para montar um thema para o meu zenpoo.wordpress.com

    valeu!
    força , fé e alegria..

  7. Ruan

    perfeito o tutorial, estou acompanhando ele criando um tema propio.
    da pra ver que a medida que tu vai se familharizando com o processo, os proximos passos se tornam mais e mais intuitivos.
    obrigado, e continue por favor, é raro ver algum com tamanha qualidade no codigo e pra ensinar^^

  8. Richard

    Pensei que estivesse esquecido de nós. Obrigado por compartilhar seus conhecimentos.
    Essas aulas podem ser pequenas para vc, mas é de muito valor para nós que estamos começando.

Comments are closed.