Como Criar Modelo de Página no WordPress

Criar modelo de página no WordPress (page template) pode parecer difícil de se fazer, mas é, na verdade, algo bem fácil. Você está pronto? Segue o tutorial e se liga!

Por que criar modelo de página?

Você já deve ter percebido que alguns temas de WordPress oferecem diferentes modelos ou templates pra homepage ou outra página qualquer, como a de contato, por exemplo.Você escolhe o modelo enquanto está editando a página e depois que salva, a página está com um layout diferente (full screen, boxed) ou um header diferente (posição da logo, botões e links que aparecem) ou até mesmo cheia de conteúdo (no frontend) como banners ou call-to-actions que você não colocou lá.. Se você está desenvolvendo um tema ou plugin para WordPress, pode ser que você tenha necessidade de rodar códigos PHP em uma determinada página para processar seja lá o que for que seu plugin processa. E aí, como você faria isso?

Exemplo real de quando utilizar um modelo de página (page template)

Para este exemplo, utilizaremos apenas PHP e HTML. CSS fica por sua conta e Javascript, apesar de ser uma ótima solução para estes casos, não será utilizado.

Digamos que você está desenvolvendo um plugin que registra funcionários da área de vendas e fornece um novo painel para eles registrarem as vendas realizadas. Para registrar vendas, o usuário deve ter uma conta de vendedor em seu sistema. Alguns dos dados que você quer cadastrar no banco de dados vinculados ao usuário são: id_vendedor e telefone. Você pode fazer isso de duas formas:

  1. Pedir os dados durante o registro no WordPress; ou
  2. Pedir os dados em uma página separada após o registro normal no WordPress.

Independente de qual você escolher, você vai precisar pedir os dados por meio de <input>e terá de processá-los através da variável $_POST.

Como criar modelo de página no WordPress?

Para criar nosso primeiro modelo de página, vamos precisar completar os seguintes passos:

  1. Criar arquivo do modelo na pasta do tema filho (não sabe o que é tema filho? Clica aqui);
  2. Adicionar conteúdo ao modelo;
  3. Selecionar o modelo de página.

Siga adiante e complete todos os passos para terminar o tutorial.

PRÁTICA: criar modelo de página no WordPress

Criar aquivo do modelo de página

Se você ainda não está utilizando um tema filho, não prossiga. Antes de você adicionar um modelo de página ao seu tema, você deve criar um tema filho. Saiba como.

Para completar este passo, você precisa navegar até a pasta do seu tema no seu servidor web via FTP, por exemplo. Se você utiliza o tema Twenty Seventeen, o caminho é /wp-content/themes/twentyseventeen-child.

Lá, você deve criar um arquivo que pode ter qualquer nome, mas sugiro algo sugestivo como modelo-registra-vendedor.php, por exemplo. Pronto! Passo 1 finalizado.

Adicionar conteúdo ao modelo

Seu arquivo de modelo só precisa de 3 itens para funcionar. Veja:

<?php 
/*
 * Template Name: Modelo Login RC01
 */
get_header();
// Seu código aqui
get_footer();
  • A primeira parte é o nome do modelo comentado. Este é o nome que vai aparecer como uma das opções de modelo quando estiver editando uma página. Você pode dar qualquer nome ao modelo.
  • A segunda parte é o get_header(); para chamar o cabeçalho do site.
  • A terceira parte é o get_footer(); para chamar o rodapé do site.

Salve o arquivo e pronto! Passo 2 está completo.

Selecionar o modelo de página

No backend do seu site WordPress clilque em Páginas > Adicionar nova. Lá no canto da direita, tem uma seção chamada Atributos da página. Procure por modelo e clique na caixa de dropbox. Encontre o nome que você digitou para o nome do modelo em ‘Template Name’ e salve a página. Se você for ver o resultado no frontend, vai reparar que não tem nada além de um cabeçalho e rodapé do seu tema atual. Se foi só isso que colocamos no modelo, faz sentido só vermos isso mesmo.

Tá, mas como vou saber se funcionou mesmo, de verdade?

Pra ter certeza que a página foi montada em cima do seu modelo, adicione o seguinte código na linha 6 do arquivo modelo-registro-vendedor.php:

$x = 2 + 3;
echo 'a resposta é ' $x;

Se não estiver vendo de primeira, a provável causa é que normalmente seu tema tem outras divs entres o header e o footer e nós não colocamos nada lá. Aperte Ctrl + F e digite ‘a resposta é 5’. Você agora deve ver o texto na página.

Não se desespere pequeno gafanhoto! Tudo que te ensinei até agora foi pra você ter um entendimento básico, porém profundo. Agora que você entende como e porque criamos um modelo de página no WordPress, podemos aprender a fazer isso melhor. Vem comigo e leia o próximo post que chamei de Criar Modelo de Página no WordPress: Avançado, que vou te ensinar a copiar o modelo do seu tema para seu output aparecer no lugar certo.

Conclusão

Nesta lição você aprendeu a o que é um modelo de página no WordPress e quando usá-lo. Você também aprendeu que o mínimo necessário para se ter um modelo é o template name, e as funções de cabeçalho e rodapé em um arquivo .php dentro da pasta raiz do seu tema filho. Depois disso, você pode usar o modelo em qualquer página selecionando o modelo na página de edição da página.

 

Rafa é Programador Web especializado em WordPress + WooCommerce e escritor nos tempos livres. Criação de sites, otimizações de velocidade e SEO, e criação de plugins são algumas de suas funções rotineiras que lhe permitem falar com propriedade quando o assunto é WordPress.

Seja o primeiro a comentar: O que você acha?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *