WordPress Logo

Criando um tema para WordPress – Parte 3

No último artigo nós começamos a criar o HTML da página inicial, e agora vamos continuar o trabalho criando o topo do site e listando os posts.

Deixando o título mais… dinâmico

Uma boa prática é mostrar o título do post dentro da tag title, no head do site… Pra isso vamos usar a função wp_title() e fazer a seguinte mudança:

Com isso, sempre que estivermos dentro de um post ou página, o título do postwp_title() virá antes do título do sitebloginfo(), separado por um hífen. :)

Montando o topo do site

Não vou fazer nada mirabolante nem inserir um menu ainda, vamos só colocar o título e o subtítulo do site… Além disso, usaremos a função body_class() na tab body para inserir algumas classes que o WordPress gera automaticamente.

Se você estiver acessando a home do blog, a função body_class() irá gerar as seguintes classes: <body class="home blog">, mas se você estiver visualizando um post ela trará muito mais informações como o ID do post ou nome da categoria: <body class="page page-id-2 page-template page-template-default logged-in">. Você pode usar essas classes para estilizar (CSS) as diferentes áreas/páginas/posts do seu blog.

Listando os posts

Para listar os posts usaremos as seguintes funções que são chamadas de “The Loop“:

  • have_posts() – Determina se existem posts à serem exibidos
  • the_post() – Carrega um post da lista à ser exibida

A forma mais minimalista do The Loop funciona de forma bem simples:

Então.. enquanto (while) existirem posts (have_posts) à serem exibidos, carrega o post e exibe as informações do mesmo.

Exibindo dados do post

Agora vamos começar a mostrar os dados do post, para isso usaremos as seguintes funções:

Atenção: Essas funções só vão funcionar corretamente se você carregar o post antes, com o the_post(), por isso usamos isso tudo dentro do The Loop.

Vamos juntar tudo e exibir todos os dados do post, like a boss:

O resultado do código acima vai ser mais ou menos esse:

Finalizando

Nosso blog está tomando forma, na próxima parte iremos começar a falar do single.php (o template pra mostrar um post) e – talvez – vamos ver sobre menus dinâmicos.

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

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

Abraços e até a próxima!

20 thoughts on “Criando um tema para WordPress – Parte 3

  1. Eduardo FP

    Obrigado Tiago!

    Cara, vou confessar: Quando terminei o TUTO e testei, numa boa, caiu até uma lágrima no canto do olho direito. kkkkkkkkk’

    Quando eu criava meus sites, sempre tinha que fazer um “CMS-Gambiarra” foda e sempre dava uns bug’s nervoso. Triste antiga realidade. E hoje me deparo com essa facilidade.
    Ô Glôria!

    Agora com WordPress e com este belo tutorial, isso vai me ajudar e muito. E economizar tempo.

    De novo -> Obrigado mesmo Thiago!

    Fique com Deus! Abraços.

  2. Danilo

    Olá, obrigado pelos tutoriais.

    Estou seguindo seus post, mas estou com um probleminha aqui. O wp não encontra o index.php, ele está dentro da pastas de temas, na url “http://localhost/wordpress/” era pra aparecer a index certo? e está dando página não encontrada! Help me, please. :/

  3. Thadeu Esteves

    Pows TB, se chegar até o final do thema te mando um presente hehe… isso ajuda muito agente que ainda tem 6 meses de php e quer montar um thema proprio pro wp..

    grande abraço..que Jeová te ilumine.

  4. janse

    Gostaria de saber em qual site fica a documentação do wordpress (funções e estrutura) para eu pesquisar caso precise. Assim a gente já se adiante um pouco. Obrigado.

  5. Vitor

    Legal a iniciativa, fiquei procurando por isto muito tempo, aí desisti e encontrei o Wolf CMS que para criar temas é necessário apenas (X)HTML, CSS e pouquíssimas “tags wolf” :)

  6. Tânia

    Olá thiago, fiz tudo até agora… Fiz questão de digitar cada linha para aprender de verdade… ótimo viu… Só tem um problema: Não vejo a hora de sair a próxima parte rsrs… como faz?? rsrs… super empolgada… Obrigada, seus artigos estão fazendo uma grande diferença na minha vida…

  7. Richard

    parabéns de novo, sua aula ta bem direta e fácil.
    Baixei seu template e vi umas funções que eu gostaria de saber o que é:
    DNS Prefetching ?

  8. Jonatas Emidio

    Parabéns pelo post!!

    Ele está bem organizado e os exemplos são claros e objetivos, dessa forma fica simples trabalhar com templates no wordpress.

Comments are closed.