Trabalhando com Templates de Páginas no seu Tema

Trabalhando com Templates de Páginas no seu Tema

Nesta lição, você vai aprender a deixar o seu tema mais dinâmico, de modo a colocar os links do seu menu para funcionar, criar novas páginas, e mostrar seus posts para dentro do seu tema.

Então apertem o cintos, curtam a jornada, que nesta lição temos muuuuitas coisas legais para aprender 🤩

O que é o LOOP no WordPress?

No mundo da programação, um loop refere-se a uma estrutura de laço, cujo objetivo é repetir a execução de determinadas linhas de código durante um número determinado (ou indeterminado) de vezes.

Já no universo do WordPress, quando nos referimos ao loop, estamos falando de um comando interno, que tem por objetivo mostrar o conteúdo dos seus posts dentro das páginas do seu site.

E quando eu falo de posts, não estou me referindo a apenas os artigos que você publica pelo painel administrativo da plataforma, como também as páginas estáticas (Lembra as páginas Home, Serviços e Sobre que criamos na lição passada?)

De acordo com a documentação do loop, este comando não só mostra os conteúdos dos seus posts, como também te dá a possibilidade, de formatar o modo em que eles serão mostrados dentro do conteúdo HTML da sua página.

Dentro desse loop, nós temos acesso a diversas informações do posts, desde o título, descrição, categorias, tags e muitas outras.

Agora chega de teoria, e vamos direto ao arquivo index.php 😄

Carregando seus posts dentro do index.php

Como você já sabe, o index.php é a página principal do seu tema, e será dentro dela que vamos adicionar o suporte ao carregamento de posts 🤓

Só que, ainda não temos nenhuma estrutura HTML que comporte esse tipo de coisa, sendo assim, vamos editar o index.php um pouquinho:

<?php get_header(); ?>

<div class="site-area">
 <main class="main-area">
 <section class="init-block">
 <div class="information-block">
 <h2>Tema feito com WP-Micilini</h2>
 <p>Este tema é muito legal para ser verdade!</p>
 </div>
 <div class="image-block">
 <img src="./wp-micilini-image.png" />
 </div>
 </section>
 <section class="my-articles">
 .....
 </section>
 </main>
</div>

<?php get_footer(); ?>

Observe que eu adicionei uma nova section chamada my-articles na estrutura HTML do tema, e vai ser ali dentro que iremos inserir a lógica de carregamento dos nossos posts 🤗

A lógica de carregamento, é feita em PHP (obviamente) da seguinte forma:

<section class="my-articles">
 <?php
 if(have_posts()):
 while(have_posts()) : the_post();
 ?>
 <article>
 <h2><?php the_title(); ?></h2>
 <p>Postado em: <?php echo get_the_date(); ?> por: <?php the_author_posts_link(); ?></p>
 <p>Categorias: <?php the_category(' ');//categorias serão separadas por espaços em branco ?></p>
 <p>Tags: <?php the_tags('', ', ');//tags serão separadas por uma vírgula e espaço em branco ?></p>
 <?php the_content(); ?>
 </article>
 <?php
 endwhile;
 else: 
 ?>
 <p>Nada para ser mostrado aqui...</p>
 <?php endif; ?>
</section>

Tudo começa com a condicional (if) que chama a função have_posts(), ela por sua vez, é responsável por retornar o total de posts publicados no painel do wordpress. Se existem 5 posts, ele retorna o valor 5, se existem 10, ele retorna o valor 10, e assim por diante.

Caso houver posts, é retornado true, caso não, será retornado false.

Se houver pelo menos um único post publicado, nós iremos executar uma série de comandos dentro do while, caso contrário, será mostrada a seguinte mensagem ao usuário: "Nada para ser mostrado aqui...".

Caso houver posts, já iniciaremos o processo do loop por meio do while, dentro do while estamos usando a função have_posts(), que diz que o loop que ele deve ser repetido de acordo com a quantidade de posts retornada por esta função.

Já o comando the_post(), ela é responsável por verificar se o loop já foi iniciado, e caso positivo, ela define a postagem atual de forma a mover para a próxima postagem da fila.

Exemplo: "Existem 3 posts publicado, e o while está no primeiro loop... então deixa eu carregar as informações relacionadas ao primeiro post dentro das template tags... epa! o while já está no segundo loop... então vou carregar as informações do segundo post para as template tags...".

Opa! Acabamos de nos deparar com uma nomenclatura nova... TEMPLATE TAGS! O que elas são?

Template Tags, nada mais são do que funções disponibilizadas pelo wordpress, que nos ajudam a acessar algumas informações de uma determinada postagem que está sendo realizada por meio de um loop.

No comando acima, você pode perceber que entre os comandos while(have_posts()) : the_post(); e endwhile;, tem bastante código HTML e PHP, não é verdade?

De acordo com a documentação do wordpress, é lá dentro que nós devemos montar toda a estrutura dos nossos posts em HTML, em conjunto com as template tags do wordpress (PHP).

Template Tags

Existe uma lista enorme de funções que o wordpress nos disponibiliza para recuperar algumas informações de um post, são elas:

next_post_link(): gera um link para a postagem publicada cronologicamente após a postagem atual.

previous_post_link(): gera um link para a postagem publicada cronologicamente antes da postagem atual.

the_category(): retorna todas as categorias que estão relacionadas à postagem atual ou com a página que está sendo visualizada.

the_author(): retorna o autor da postagem ou da página.

the_content(): retorna o conteúdo principal de uma postagem ou página.

the_excerpt(): retorna as primeiras 55 palavras do conteúdo principal de uma postagem seguidas por reticências (…), ou um link [leia mais] que leva para postagem completa.

the_ID(): retorna o ID da postagem ou página.

the_meta(): retorna os campos personalizados associados à postagem ou a página.

the_shortlink(): gera um link para a página ou postagem usando a URL do site, e o ID da postagem ou da página.

the_tags(): retorna todas as tags associadas à postagem.

the_title(): retorna o título da postagem ou da página.

the_time(): retorna a hora ou data da postagem ou da página. Isso pode ser personalizado usando a formatação padrão da função de data do PHP.

get_the_post_thumbnail(): retorna a marcação HTML (<img>) da imagem do seu post. 

É importante ressaltar que algumas das funções acima, recebem parâmetros adicionais que modificam o seu retorno.

Acesse a documentação para conhecer as milhares de outras tags que você pode usar no seu tema 🤪

Entendendo o LOOP mais a fundo

A primeira vista, o loop do wordpress, parece uma estrutura de laço bem simples feita exclusivamente com PHP.

Onde a gente começa fazendo uma checagem por meio da função have_posts(), e termina fazendo um grande loop com while(have_posts()) : the_post(); junto com o uso das templates tags.

Só que, você sabia que o comportamento do loop, depende exclusivamente da configuração de leitura definida no painel administrativo do WordPress?

Se você acessar o seu painel administrativo, e ir em Configurações > Leitura:

Lá você vai perceber que na seção Sua página inicial exibe, está marcada a opção seus posts recentes.

Isso significa que a página inicial do seu tema - que é a index.php -, exibirá todos os seus posts mais recentes.

Por de baixo dos panos, sempre quando um usuário abre a URL inicial do seu site, ele vai cair diretamente na index.php, e lá dentro, ela está configurada para retornar todos os posts cadastrados no seu wordpress, até aí tudo bem 👍

O problema, acontece quando você tenta acessar as outras páginas que você criou (Sobre e Serviços), e se depara com a mesma página inicial de antes, ou seja, uma página que só mostra a lista de posts.

Isso aconteceu, porque primeiro, só temos a index.php, e segundo, que nas configurações de leitura, ela está configurada para mostrar somente nossos posts mais recentes.

Então não adianta tentar acessar:

O usuário sempre vai cair na index.php, e a lista de posts sempre será mostrada, e é por esse motivo que a nossa index.php só exibe nossos posts quando executamos o loop, uma vez que ela foi configurada justamente para retornar isso.

Só que... em outros temas do wordpress, quando a gente cria uma nova página, e acessa ela como um usuário comum, nós somos direcionados a uma página que contém as informações daquela página que acabamos de criar.

Por exemplo, experimente ativar o tema Twenty Twenty-Four, e acessar uma das páginas que você criou:

Veja que ela carregou somente as informações referente a aquela página.

Beleza, e como faço para que o tema que estou criando se comporte desta maneira?

A primeira coisa é voltar a ativar o seu tema, isto é, caso você tenha ativado o tema Twenty Twenty-Four  😅

Em seguida, você precisa selecionar a segunda opção nas configurações de leitura, chamada de Uma Página Estática.

Automaticamente duas novas opções ficarão disponíveis, na primeira delas (Página Inicial), você deve selecionar qual será a página inicial que o wordpress irá carregar sempre que um usuário entrar no seu site.

No meu caso, eu deixei selecionado a página de Home.

Já a segunda opção (Página de Posts), como o próprio nome já nos diz, será a página em que o wordpress irá carregar os nossos posts, e isso quer dizer, que o comando loop irá carregar os seus posts somente dentro dessa página.

Nesse caso, quando entrarmos em Home, Serviços ou Sobre, o conteúdo carregado pelo loop será o conteúdo da página, e não o conteúdo dos posts.

Por fim, não se esqueça de clicar no botão Salvar Alterações no final da página, para que nossas modificações surtam efeito.

Criando designs diferentes para nossas páginas

Nem todas as páginas de um tema do wordpress possuem designs diferentes, não é verdade?

E conosco isso não será diferente 😌

Portanto, chegou o grande momento de aprendermos a criar layouts (designs) diferentes para cada uma de nossas páginas do nosso tema.

Criando modelos de página

Atualmente, existem duas formas principais de se criar nossos modelos de páginas, a primeira delas, consiste em criar arquivos PHP que representam essas páginas.

Por exemplo, como nós temos 4 páginas diferentes (Home, Serviços, Sobre e Blog), poderíamos criar arquivos específicos para cada uma dessas páginas (home.php, servicos.php, sobre.php e blog.php).

O segundo método, trabalha com o conceito de páginas reutilizáveis, ou seja, um único arquivo (template-um.php) que atende uma ou mais páginas distintas (Sobre e Serviços), mantendo o mesmo visual.

Abaixo veremos como criar nossas páginas customizadas.

Método 1) Criando arquivos específicos

Para que isso seja possível, precisamos criar um novo arquivo PHP seguindo a nomenclatura: page-{slug}.php dentro da pasta raíz do seu tema.

No local onde está escrito {slug}, você deve alterar para o nome da sua página, por exemplo:

O wordpress já conta com funcionalidades específicas, que são capazes de reconhecer cada um desses arquivos de maneira automática, para que assim que o usuário clique em algum dos links do seu menu, seja aberto o conteúdo de um desses arquivos.

Para que você possa entender como isso funciona mais a fundo, se lembra quando você criou uma nova página pelo painel administrativo?

Lembra que o wordpress criou automaticamente o link permanente da URL daquela página?

Basicamente, o wordpress conecta o nome da URL das páginas que você criou no painel administrativo, com o {slug} dos arquivos existentes, e é dessa forma que ele consegue abrir o arquivo PHP da página 🙂

Por fim, basta que você use as mesmas técnicas que usamos dentro do arquivo index.php para estilizar as suas páginas da forma como quiser, ou seja, use a abuse da sua criatividade.

O único problema de se fazer modelos de páginas desse jeito, é que elas não são reutilizáveis, ou seja, cada um dos arquivos criados, só poderão controlar um único tipo de página.

Nesse caso, se quisermos utilizar o mesmo visual da página serviços na página sobre, deveríamos criar dois arquivos (page-servicos.php & page-sobre.php) com a mesma estrutura HTML.

Mas será que é possível criar um único arquivo que possa atender um ou mais páginas diferentes? Sim, é o que veremos a seguir 😉

Método 2) Criando arquivos reutilizáveis

Para que possamos fazer com que uma ou mais páginas utilizem o mesmo arquivo do tema, precisamos aplicar o conceito de modelos de tema reutilizáveis.

Diferente do método anterior, aqui não iremos seguir a estrutura anterior (page-{slug}.php), sendo assim, você está livre para criar o nome de arquivo que quiser.

No meu caso eu criei dentro da pasta raíz do meu tema, um arquivo chamado default-template.php.

É importante ressaltar que na hora em que você for criar esses arquivos, preste muita atenção se o nome do seu arquivo não é reconhecido como um templates do wordpress, pois isso pode ocasionar alguns conflitos.

Abaixo estão a lista de alguns modelos de temas e arquivos reconhecidos pelo WordPress dentro da pasta do seu tema:

Para mais informações do funcionamento de cada um desses arquivos, consulte a documentação.

Pois bem, agora que você já sabe quais arquivos de template você não deve nomear, vamos continuar na jornada 🤓

Dentro do arquivo default-template.php, vamos começar criando uma pequena estrutura de chave-valor dentro de um comentário, para que esse arquivo seja reconhecido pelo WordPress:

<?php
/*
Template Name: Default Template (Micilini)
*/
?>

Só com essa pequena modificação, esse arquivo já será reconhecido como uma possível página de template do seu tema do wordpress.

Isso aconteceu porque a própria plataforma fica de olho em cada um dos arquivos ali existentes, e quando ele identifica um arquivo cujo comentário começa com o texto Template Name, ele já sabe que se trata de um possível arquivo de template.

Tanto é que se você abrir as páginas que você criou usando o painel administrativo, você verá que é possível atribuir a página, um modelo (template) específico:

Note que o arquivo default-template.php, foi reconhecido como Default Template (Micilini), legal, não acha?

Para que a sua página faça o uso deste template, basta selecioná-lo na opção de Modelo (como na ilustração acima), e clicar no botão atualizar.

Faça isso em todas as páginas em que você deseja usar o mesmo template, ok?

Observação: Quando a opção é marcada como Modelo Padrão (Default Template), ele irá passar a responsabilidade para o wordpress, que sua vez, ou irá direcionar para páginas específicas (como no método 1), ou irá jogar tudo para o index.php.

E é claro, seguindo o método 2, você pode criar quantos modelos de página você quiser 🤩

Por fim, basta que no arquivo default-template.php, estilize ele da maneira como quiser, no meu caso eu copiei todo o conteúdo do index.php para dentro dele:

<?php
/*
Template Name: Default Template (Micilini)
*/
?>
<?php get_header(); ?>

<div class="site-area">
 <main class="main-area">
 <section class="init-block">
 <div class="information-block">
 <h2>Tema feito com WP-Micilini</h2>
 <p>Este tema é muito legal para ser verdade!</p>
 </div>
 <div class="image-block">
 <img src="./wp-micilini-image.png" />
 </div>
 </section>
 <section class="my-articles">
 <?php
 echo 'check: '.have_posts();
 if(have_posts()):
 while(have_posts()) : the_post();
 ?>
 <article>
 <h2><?php the_title(); ?></h2>
 <p>Postado em: <?php echo get_the_date(); ?> por: <?php the_author_posts_link(); ?></p>
 <p>Categorias: <?php the_category(' '); ?></p>
 <p>Tags: <?php the_tags('', ', '); ?></p>
 <?php the_content(); ?>
 </article>
 <?php
 endwhile;
 else: 
 ?>
 <p>Nada para ser mostrado aqui...</p>
 <?php endif; ?>
 </section>
 </main>
</div>

<?php get_footer(); ?>

Outros métodos de reconhecimento de páginas

Será que existem outras formas do wordpress associar uma página a um layout específico? Sim, existem atualmente 6 grades hierarquicas (contando com aquelas que já vimos) em que o wordpress segue para carregar um layout específico.

1) Arquivo customizado

Em primeiro lugar, o wordpress verifica se aquela página está relacionada com algum modelo customizado (como aprendemos no método 2) associado a página.

Se existir, ele usa esse arquivo como padrão, caso não existir...

2) Arquivo de slug

Em um segundo momento, o wordpress verifica se dentro da pasta do seu tema, não existe algum arquivo cuja o {slug} seja se conecte com alguma URL de página.

Aqui ele busca pelos arquivos page-{slug}.php, como aprendemos no método 1.

Se existir, ele usa esse arquivo como padrão, caso não existir...

3) Arquivo de ID

Em um terceiro momento, o wordpress verifica se dentro da pasta do seu tema, não existe algum arquivo cujo {id} seja o mesmo ID da página.

É importante ressaltar que por de baixo dos panos, sempre quando criamos uma nova página (ou um novo post), no banco de dados ele está associado a um ID.

De modo que toda página, post, categoria e etc, está associado a um ID único.

Nesses casos, é possível criar um arquivo seguindo essa nomenclatura: page-{id}.php, onde no lugar do {id}, você colocaria o ID da página, por exemplo:

Como encontrar o ID da minha página ou post no wordpress?

O processo é bem simples, no painel administrativo, vá em Páginas > Todas as Páginas ou Posts > Todos os Posts:

Em seguida, selecione a página ou o post, na qual você deseja descobrir o seu ID:

Na tela de edição, você verá o ID da página/post na URL do seu navegador:

No caso da ilustração acima, o ID da minha página Serviços é 10.

Se existir, ele usa esse arquivo como padrão, caso não existir...

4) Arquivo page.php ou singular.php

Na quarta tentativa, o wordpress sairá a procura pelos arquivos page.php ou singular.php, que poderão existir na pasta do seu tema.

Esses arquivos atuam como uma penúltima barreira em caso da não existência dos arquivos anteriores.

Se existir, ele usa um desses dois arquivos, caso não existir...

5) O famoso index.php

Por último - antes de ocasionar um erro no wordpress -, a plataforma vai em busca do arquivo index.php para servir de layout.

É por esse motivo que esse arquivo é conhecido como fallback file, pois é o último arquivo a ser buscado pelo wordpress.

Os assuntos discursados aqui, estão detalhados dentro da documentação da hierarquia do WordPress, vale a pena dar uma conferida 🤓

Criando o arquivo Page.php

Como vimos anteriormente, o index.php é o último recursos que o wordpress utiliza para carregar uma página por meio do seu tema.

Se você analisar o index.php da maioria dos temas padrão que vem instalado no wordpress, você verá que em cada um deles, este arquivo está... VAZIO!

Isso está acontecendo devido ao aparecimento dos arquivos page.php e singular.php, que foram feitos justamente para carregar o layout de uma página padrão.

Pode perceber, que existe até uma discussão com o intuito da não obrigatoriedade do index.php 🤔

Para que o nosso tema siga a padronização do mercado, chegou a hora de aposentar o index.php, e transferir a sua responsabilidade para o page.php.

Portanto, crie um novo arquivo dentro da página do seu tema chamado de page.php com o mesmo conteúdo do index.php:

<?php get_header(); ?>

<div class="site-area">
 <main class="main-area">
 <section class="init-block">
 <div class="information-block">
 <h2>Tema feito com WP-Micilini</h2>
 <p>Este tema é muito legal para ser verdade!</p>
 </div>
 <div class="image-block">
 <img src="./wp-micilini-image.png" />
 </div>
 </section>
 <section class="my-page">
 <?php
 while(have_posts()) : the_post();
 ?>
 <article>
 <h1><?php the_title(); ?></h1>
 <?php the_content(); ?>
 </article>
 <?php
 endwhile;
 ?>
 </section>
 </main>
</div>

<?php get_footer(); ?>

Já no index.php, já podemos tirar todo código ali existente, de modo a deixar o seguinte comentário:

<?php
//Não se usa mais o index.php =)
?>

Atenção: Novamente, isso é uma questão de escolha pessoal, caso desejar, você pode continuar usando o index.php normalmente como vínhamos fazendo até então 😄

Perceba que no código do page.php eu fiz algumas modificações, tanto nos códigos, como no layout em si.

Uma delas foi a retirada do comando if(have_posts()):, uma vez que agora ele não se faz necessário, pois estamos carregando o próprio conteúdo de uma página que já sabemos que existe, e não de diversos posts que podem ou não existir.

Como recuperar uma imagem relacionada a postagem?

Existe uma forma de recuperar uma imagem que está relacionada a postagem junto com o alt text da mesma, observe:

<?php 
while(have_posts()) : the_post();
 if (has_post_thumbnail()) { 
 $thumbnail_id = get_post_thumbnail_id();
 $alt_text = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
?>
 <img class="mb-5" src="<?php echo get_the_post_thumbnail_url() ?>" class="img-fluid" alt="<?php if($alt_text){ echo $alt_text; } ?>" />
<?php 
 } 
endwhile;
?>

Observe que estamos recuperando o caminho absoluto da imagem usando a função get_the_post_thumbnail_url(), e o alt text usando get_post_meta() junto ao get_post_thumbnail_id().

Fique tranquilo pois futuramente vamos entender o funcionamento de cada uma dessas funções.

Como recuperar a data da postagem?

Você pode recuperar a data da postagem, em um formato específico como este: 04 de janeiro de 2023:

<p class="mb-5">Publicado em: <?php echo date_i18n('d \d\e F \d\e Y', strtotime(get_the_date())); ?></p>

Com relação ás funções date_i18n() e get_the_date() veremos com mais detalhes o funcionamento delas em lições posteriores.

Conclusão

Chegamos ao fim de mais uma seção, e creio que você conseguiu aprender técnicas super importantes na criação de páginas para o seu tema do wordpress.

Com os conhecimentos adquiridos até aqui, você já consegue criar páginas com layouts diferentes para URLs diferentes 🥳

Até a próxima.