Modelos de Temas: Date.php

Modelos de Temas: Date.php

Este modelo de temas é conhecido como date.php, e como o nome já nos diz, é um modelo de template do próprio WordPress, que é usado no seu tema para carregar e exibir as postagens relacionadas a datas específicas. 

Como você já sabe, cada postagem que você publica na plataforma do WordPress é acompanhada por uma data e hora.

E nós como meros desenvolvedores de temas da plataforma, podemos criar modelos de template que carregam postagens relacionadas a essas datas e horas.

É importante ressaltar que este arquivo conta com variações como: day.php (para dias), month.php (para meses) e year.php (para anos).

Pronto para seguir com a criação deste arquivo?

Criando o date.php

Dentro da pasta raiz do seu tema, você precisa criar um arquivo chamado date.php:

<?php
/**
 * O template para exibir páginas de datas
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WPMicilini
 * @since 1.0
 */

get_header(); 

?>

<!-- Insira aqui os códigos para mostrar as postagens relacionadas as datas -->

<?php
get_footer();
?>

Como podemos ver, o conteúdo inicial sempre começa com a abertura das tags PHP, onde inserimos algumas informações relevantes sobre o arquivo em formato de comentários, e é claro, importamos o cabeçalho e o rodapé por meio das funções get_header() e get_footer().

No local onde está escrito <!-- Insira aqui os códigos para mostrar as postagens relacionadas as datas -->, é onde faremos a mágica acontecer, inserindo um punhado de código, como estes que estamos vendo abaixo:

<div class="data-div">

<?php if ( have_posts() ) : ?>

 <!-- Início Título das Datas --> 
 <header class="page-header">
 <h1 class="page-title">
 <?php
 if( is_day() ) :
 echo "Dia: ".get_the_date();
 elseif ( is_month() ) :
 echo "Mês: ".get_the_date(_x( 'F Y', 'wpmicilini'));
 elseif ( is_year() ) :
 echo "Ano: ".get_the_date(_x( 'Y', 'wpmicilini'));
 else :
 echo 'Datas';
 endif;
 ?>
 </h1>
 </header>
 <!-- Fim Título das Datas --> 

 <!-- Início Conteúdos das Datas --> 
 <?php while ( have_posts() ) : the_post(); ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="dados-cabecalho">
 <?php the_title( '<h2 class="dados-titulo">', '</h2>' ); ?>
 </header>

 <div class="dados-conteudo">
 <?php the_content(); ?>
 </div>

 <footer class="dados-rodape">
 <?php if ( 'post' === get_post_type() ) : ?>
 <div class="dados-info">
 <?php echo 'Publicado em: ' . get_the_date() . ' por ' . get_the_author(); ?>
 </div>
 <?php endif; ?>
 </footer>
 </article>
 
 <?php endwhile; ?>
 <!-- Fim Conteúdos das Datas --> 

 <!-- Início Navegação de Conteúdos --> 
 <?php the_posts_navigation(); ?>
 <!-- Início Navegação de Conteúdos --> 

<?php else : ?>
<p>Datas não encontradas.</p>
<?php endif;?>

</div>

No comando acima, começamos definindo uma div que vai encapsular todo o conteúdo que será mostrado dali em diante.

Começamos fazendo a validação com a função have_posts(), para checar se existem postagens a serem mostradas relacionadas a aquela data, caso negativo, a execução do código pula para o else, que por sua vez, mostra a mensagem: Datas não encontradas.

No bloco [Título das Datas], criamos um <header> que ficará responsável por armazenar as informações da página que será mostrada.

Note que o date.php estará abrindo os conteúdos de todas das datas possíveis, e isso inclui dias, meses e anos.

is_day(): Verifica se a página atual se trata de um dia.

is_month(): Verifica se a página atual se trata de um mês.

is_year(): Verifica se a página atual se trata de um ano.

No bloco [Conteúdos das Datas], estamos carregando o conteúdo específico da página que foi aberta, onde o WordPress já sabe que tipo de conteúdo será carregado dentro do loop.

Se a página atual for somente um ano, o loop carrega as informações relacionadas a aquele ano.

Se a página atual for um ano e um mês, o loop carrega informações relacionadas a aquele ano e mês, e assim por diante.

Alguns códigos ali presentes já foram debatidos em lições anteriores, sendo assim, focarei naqueles que ainda não conhecemos.

the_ID(): Retorna o ID daquela post.

post_class(): Retorna o formato de conteúdo daquela postagem, aqui ele vai adicionar automaticamente classes como "post", "type-post" (para postagens padrão), "category-nome-da-categoria" (para a categoria da postagem), "tag-nome-da-tag" (para cada tag da postagem) e outras classes relevantes.

É utilizada para adicionar classes CSS a um elemento que exibe uma postagem no loop de postagens, permitindo a flexibilização e estilização da tag HTML.

the_title( '<h2 class="dados-titulo">', '</h2>' ): Função que retorna o título daquela postagem, onde neste exemplo, estamos encapsulando o título em si dentro da tag <h2>.

As explicações do loop já foram debatidas em lições anteriores, caso ainda tenha alguma dúvida basta acessar este link.    

Por fim, no bloco [Navegação de Conteúdos], estamos fazendo o uso do comando the_posts_navigation(), que é usada para exibir a navegação entre as páginas de postagens, quando há mais de uma página de resultados em um conjunto de postagens.

Veja como ficou o resultado final do arquivo date.php:

<?php
/**
 * O template para exibir páginas de datas
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WPMicilini
 * @since 1.0
 */

get_header(); 

?>

<div class="data-div">

<?php if ( have_posts() ) : ?>

 <!-- Início Título das Datas --> 
 <header class="page-header">
 <h1 class="page-title">
 <?php
 if( is_day() ) :
 echo "Dia: ".get_the_date();
 elseif ( is_month() ) :
 echo "Mês: ".get_the_date(_x( 'F Y', 'wpmicilini'));
 elseif ( is_year() ) :
 echo "Ano: ".get_the_date(_x( 'Y', 'wpmicilini'));
 else :
 echo 'Datas';
 endif;
 ?>
 </h1>
 </header>
 <!-- Fim Título das Datas --> 

 <!-- Início Conteúdos do Archive --> 
 <?php while ( have_posts() ) : the_post(); ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="dados-cabecalho">
 <?php the_title( '<h2 class="dados-titulo">', '</h2>' ); ?>
 </header>

 <div class="dados-conteudo">
 <?php the_content(); ?>
 </div>

 <footer class="dados-rodape">
 <?php if ( 'post' === get_post_type() ) : ?>
 <div class="dados-info">
 <?php echo 'Publicado em: ' . get_the_date() . ' por ' . get_the_author(); ?>
 </div>
 <?php endif; ?>
 </footer>
 </article>
 
 <?php endwhile; ?>
 <!-- Fim Conteúdos do Archive --> 

 <!-- Início Navegação de Conteúdos --> 
 <?php the_posts_navigation(); ?>
 <!-- Início Navegação de Conteúdos --> 

<?php else : ?>
<p>Datas não encontradas.</p>
<?php endif;?>

</div>

<?php
get_footer();
?>

Como abrir a página de date.php no seu tema?

O processo é bem simples, basta digitar na URL o formato /ano/mes/dia, exemplo:

Variações do date.php

Como vimos no início deste conteúdo, o date.php conta com algumas variações:

day.php: Template usado para carregar o layout de todos os dias.

month.php:Template usado para carregar o layout de todos os meses.

year.php: Template usado para carregar o layout de todos os anos.

É importante ressaltar que ao usar as variações ditas acima, o WordPress automaticamente vai reconhecer esses modelos específicos ao exibir postagens em datas correspondentes.

Caso não exista tais arquivos, o wordpress seguirá a hierarquia de modo a abrir o arquivo mais genérico que é o date.php.

E caso ele não exista, o wordpress vai procurar pelos arquivos archive.php até chegar no index.php.

Conclusão

Nesta lição você aprendeu sobre o modelo de tema date.php e suas variações.

Até a próxima 😁