Esta lição do tutorial do tema WordPress para iniciantes será sobre como podemos acessar e produzir informações como link, título e muito mais de cada postagem quando estiver dentro do loop de postagem. Fazemos isso com tags de modelo. No processo, também adicionaremos os modelos de visualização única ao nosso tema.
Na etapa anterior adicionamos o post loop que inclui a the_post()função. Essa função configura variáveis globais e garante que possamos usar chamadas de função simples e intuitivas, chamadas de tags de modelo, enquanto estamos dentro do whileloop.
Tags de modelo mais comuns para uso no loop de postagem
Esta é uma lista das tags de modelo mais comuns que você deseja usar para acessar as informações de uma postagem:
the_title()ecoa o título do post.the_permalink()gera o permalink/URL da postagem.the_content()gera o conteúdo da postagem (do editor)the_excerpt()ecoa o trecho do post. Se o campo de trecho estiver vazio, isso ecoará as primeiras 55 palavras do conteúdo da postagem junto com “…"the_ID()gera o ID da postagem.the_category()ecoa todas as categorias associadas.the_tags()gera todas as tags associadas.the_date()ecoa a data de publicação do post.the_time()gera a hora de publicação da postagem.the_author()ecoa o nome de exibição do autor da postagemthe_post_thumbnail()gera a imagem em destaque da postagem. Aprenderemos como adicionar suporte para miniaturas em destaque posteriormente neste tutorial.
Há muitos mais. Se você estiver interessado, dê uma olhada na documentação do WordPress Codex de todas as tags de postagem. Dê uma olhada fora do título “tags de postagem” também para mais – elas estão um pouco espalhadas nesta página.
Vamos começar a implementar algumas dessas tags em nosso index.php. Também adicionarei um HTML muito básico apenas para formatar melhor a saída. Eu encorajo você a adicionar seu próprio HTML! Adicione divs, spans, seções, cabeçalhos e assim por diante com as classes que desejar.
Confeccionando o loop em index.php
Dentro do loop em nosso index.phpeu gostaria de adicionar um link que vai para o permalink do post. Dentro do link eu gostaria de ecoar o título do post. Então eu também gostaria de ecoar o trecho do post e suas categorias.
<?php get_header(); ?>
<?php
if (have_posts()) {
while (have_posts()): the_post();
<article <?php post_class(); ?>>
<h2>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</h2>
<?php the_excerpt(); ?>
<?php the_category(); ?>
</article>
endwhile;
the_posts_pagination();
} else {
?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>O que o código acima faz é;
- A linha #5 adiciona a
<article>tag HTML com uma chamadapost_class()que gera classes post úteis – exatamente comobody_class()usamos em uma etapa anterior. - Na linha #6-8 adicionamos uma
<h2>tag para o título, com um link que vai para o permalink do post (single view). - A linha #9 ecoa o trecho do post.
- E na linha #10 nós ecoamos as categorias do post. Como não passo nenhum argumento para essa chamada, o padrão é uma
<ul>lista.
Isso resulta na seguinte saída ao atualizar a página inicial:
Estamos chegando a algum lugar! Recomendo que você consulte a documentação de cada função de tag para quais parâmetros eles aceitam. Você pode modificar a saída um pouco! E decida por si mesmo quais tags de modelo usar.
Tente clicar no link de uma postagem e veja que você chega a essa única página de postagem. Agora você pode ver que o loop mostra apenas aquele post. No entanto, como atualmente temos apenas um modelo, index.phpa visualização única também está usando esse modelo. Portanto, a visão única não faz muito sentido. Não precisamos que ele se vincule a si mesmo e queremos ver o conteúdo completo do post! Vamos corrigir isso criando nosso segundo modelo em nosso tema.
Criando modelos de visualização única
Se você se lembra na lição 1 do tutorial do tema WordPress para iniciantes, analisamos a hierarquia de modelos? Quando estamos em um único post ou página, o WordPress procura single.phppor posts e page.phppor páginas. Se um deles não for encontrado, o WordPress retorna ao singular.phpque é compartilhado, independentemente do tipo de postagem. No entanto, os temas geralmente são implementados single.phpe page.phppor causa das diferenças entre posts e páginas. As páginas não possuem categorias e tags e, como as páginas geralmente são usadas para conteúdo estático, elas normalmente não mostram data de publicação nem comentários. Isso é inteiramente até você embora.
Vamos criar single.phpe page.phppara o nosso tema. Vamos começar com as postagens primeiro.
Modelo de postagem única
Na pasta do seu tema, faça uma cópia index.phpe renomeie-a para single.php. Em single.phpremoveremos o permalink (que vincula a si mesmo) e trocaremos o trecho pelo conteúdo completo do post. E, finalmente, não precisamos de navegação de arquivo aqui.
<?php get_header(); ?>
<?php
if (have_posts()) {
while (have_posts()): the_post();
<article <?php post_class(); ?>>
<h2><php the_title(); ?></h2>
<?php the_content(); ?>
<?php the_category(); ?>
</article>
endwhile;
} else {
?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Vamos adicionar mais algumas informações úteis; como a data da postagem e o nome do autor. Novamente, eu encorajo você a adicionar tags HTML para fazer uma estrutura HTML muito melhor.
<?php get_header(); ?>
<?php
if (have_posts()) {
while (have_posts()): the_post();
<article <?php post_class(); ?>>
<h2><php the_title(); ?></h2>
<?php the_content(); ?>
<?php the_category(); ?>
<p>Posted: <?php the_date(); ?> at <?php the_time(); ?></p>
<p>Author: <?php the_author(); ?></p>
</article>
endwhile;
} else {
?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>As funções the_time()e the_date()ecoarão a data e a hora no formato que você definiu no painel de administração > Configurações. No entanto, você pode substituir isso fornecendo um formato de data diferente como parâmetro para esses métodos.
A função the_author()ecoa o “nome de exibição” do autor. Se o usuário não forneceu nenhum outro nome em seu perfil, isso ecoará o nome de usuário.
Recomendo fortemente que você nunca imprima nomes de usuário, pois isso pode representar uma ameaça à segurança. Certifique-se sempre de que todos os autores tenham fornecido um nome próprio ou não use the_author().
É assim que um único post parece para mim agora. Incrível! Vamos fazer o modelo de página única.
Modelo de página única
Faça uma cópia do seu single.phpe renomeie-o para page.php. Tudo o que fiz page.phpfoi remover tudo que não estivesse relacionado às páginas. Ecoar categorias para páginas não funcionará, e também removi a data, hora e autor. Isto é o que entramos page.php:
<?php get_header(); ?>
<?php
if (have_posts()) {
while (have_posts()): the_post();
<article <?php post_class(); ?>>
<h2><php the_title(); ?></h2>
<?php the_content(); ?>
</article>
endwhile;
} else {
?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Estamos finalmente começando a chegar a algum lugar com nossos modelos! No entanto, não posso repetir isso o suficiente; Eu encorajo você a modificar os modelos e os parâmetros para as funções ao seu gosto. Especialmente adicionando mais wrappers HTML para facilitar o estilo mais tarde.
Na próxima etapa, nos afastamos um pouco dos templates e vamos mais para a codificação de back-end dos temas do WordPress.