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 post - bloginfo(), 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:
- the_ID() - Imprime o ID do post
- body_class()
- the_permalink() - Imprime o permalink (url completa) do post
- the_title() - Imprime o título do post
- the_time() - Imprime a data/hora do post
- the_content() - Imprime o conteúdo (texto) do post
Atenção: Essas funções só vão funcionar corretamente se você carregar o post antes, com o 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.
Gostou? Então comenta, compartilha e recomenda! :)
Abraços e até a próxima!