Como criar um modelo de página personalizado num tema WordPress

Um dos pontos de venda mais importantes do WordPress é o seu potencial de personalização infinito. Como utilizador do WordPress, queres ter mais controlo sobre o design e a funcionalidade do teu site.

O WordPress é ótimo neste aspeto. A sua flexibilidade permite que basicamente qualquer pessoa possa alterar qualquer coisa no seu site. Por falar nisso, os modelos de página no WordPress permitem-te personalizar o design do teu site, tal como gostas.

Coisas como adicionar um cabeçalho à tua página inicial ou adicionar/remover barras laterais de uma página de blogue podem ser feitas com modelos de página.

Basicamente, se quiseres que uma página específica tenha um aspeto diferente do resto do teu site, terás de utilizar modelos de página. Muitos sites WordPress utilizam layouts de página personalizados para as suas páginas de destino e páginas de vendas.

Por isso… se queres fazer o mesmo com o teu site, este guia é para ti. Neste blogue, vamos dar uma vista de olhos a vários métodos para criar uma página personalizada no WordPress.

Começa.

Porquê usar um modelo de página personalizado no WordPress?

Ter um único tema coeso acrescenta grande valor ao design e à funcionalidade do sítio Web. No entanto, alguns sítios Web preferem ter designs diferentes para páginas diferentes.

Infelizmente, vários temas WordPress impedem os utilizadores de alterar os layouts e a funcionalidade de uma página diferente na hierarquia.

Um modelo de página personalizada do WordPress permite que os utilizadores integrem requisitos personalizados, como uma barra lateral direita/esquerda numa determinada página, uma funcionalidade adicional de chamada para ação ou um cabeçalho exclusivo para uma determinada página de destino.

Um modelo de página WordPress personalizado pode ser utilizado para vários fins. Por exemplo, para:

• Mostra as mensagens recentes de cada categoria
• Incorpora o Google Maps ou qualquer script
• Mostra uma lista de todos os autores
• Mostra as imagens recentemente carregadas
• Para criar uma página de portfólio com design personalizado
• etc …

Um arquivo de modelo chamado page.php lida com a aparência de todas as páginas e posts criados em um site WordPress. Criar ou editar um modelo de página personalizado no WordPress requer conhecimentos básicos de HTML, CSS e PHP, e essa base torna-se ainda mais importante quando se trabalha com configurações avançadas como o WordPress sem cabeça, onde o front-end e o back-end são desacoplados…

Hierarquia do modelo de página do WordPress

O WordPress determina como uma página é exibida com base nos arquivos de modelo do seu tema. Por padrão, usa page.php para todas as páginas, a menos que um modelo diferente seja especificado.

Quando é feito um pedido de página, o WordPress segue uma hierarquia estruturada para selecionar o modelo mais adequado. A ordem de seleção é:

1. Modelo de página personalizado – Se um modelo específico for atribuído à página no editor, o WordPress utilizá-lo-á.
2. page-{slug}.php – Se não for definido um modelo personalizado, o WordPress procura um modelo que corresponda ao slug da página (por exemplo, page-about.php).
3. page-{id}.php – Se um modelo baseado em slug não estiver disponível, o WordPress procura um modelo com o ID numérico da página (por exemplo, page-10.php).
4. page.php – Se não existir um modelo específico de ID, o WordPress recorre ao ficheiro page.php predefinido no tema.
5. singular.php – Se o page.php estiver ausente, o WordPress usará o singular.php, que é um modelo genérico para páginas e posts individuais.
6. index.php – Se não existirem outros modelos disponíveis, o WordPress usa por defeito o index.php, o modelo principal utilizado para renderizar o conteúdo.

Esta hierarquia garante que o WordPress seleciona o modelo mais específico disponível para cada página, mantendo um sistema de recurso quando não são fornecidos ficheiros específicos.

Acelera os tempos de carregamento do WordPress em 70% com o Cloudways Cloudflare Addon!

Melhora o desempenho do teu site e obtém uma pontuação mais elevada no Core Web Vitals com o Edge Page Caching da Cloudflare para WordPress!

Saber mais

Como criar um modelo básico de página personalizada (3 métodos)

Agora vamos ao que interessa. Agora vamos dar uma olhada em quatro métodos diferentes para criar um modelo de página personalizado no WordPress.

Método#1: Como criar um modelo de página personalizado no WordPress usando código PHP (método manual)

Para este método, vais precisar de:

• Editor de texto – vou usar o bloco de notas
• Cliente FTP ou painel de controlo do alojamento – vou usar o FileZilla
• Acesso ao painel de administração do WordPress
• Conhecimentos básicos de PHP e da estrutura de ficheiros do WordPress

Vamos começar…

Passo 1: Adiciona o código do modelo

• Basta abrires qualquer editor de texto e colares o seguinte código.

<?php /* Nome do modelo: PáginaSemSidebar */ ?>

• A linha de código dirá ao WordPress que este é um ficheiro de modelo chamado PageWithoutSidebar – quandoo usarmos. Podes usar o nome que quiseres. Agora guarda este ficheiro como PageWithoutSidebar.php. Mais uma vez, podes usar qualquer outro nome para o ficheiro. Mas não te esqueças de manter a extensão.php.

Passo 2: Carrega o ficheiro do modelo

• Agora, vamos testar o nosso ficheiro de modelo recém-criado.
• Inicia sessão no teu painel de alojamento. Neste exemplo, estou a utilizar o alojamento WordPress da Cloudways. Se quiseres experimentar a Cloudways, vê este guia sobre como adicionar uma aplicação na plataforma Cloudways.
• A seguir, vou utilizar o FileZilla para estabelecer uma ligação SFTP com o meu servidor e navegar até à pasta /wp-content/themes.
• Abre a pasta do teu tema atual e carrega aí o ficheiro PageWithoutSidebar.php. No meu caso, o tema é twenty-twenty-two.

Passo 3: Seleciona o modelo no WordPress

• Vai ao Painel de administração do WordPress > Páginas > Adicionar nova. Em seguida, na secção de atributos da página, deves ver o novo modelo de página personalizado listado.

• Cria uma nova página e define o seu modelo como PageWithoutSidebar. Quando terminar, publica-a.

• Abre a página recém-criada. Como ainda não existem elementos de design no modelo, aparece uma página em branco como a imagem abaixo.

• Isto mostra que o modelo de página personalizado no WordPress foi implementado com êxito – portanto, podes agora criar um tema personalizado responsivo para o WordPress.

Passo 4: Adicionar conteúdo ao teu modelo personalizado

• Agora é hora de adicionar algumas linhas de código para exibir conteúdo na página.
• Para fazer isso, edita o ficheiro PageWithoutSidebar.php . Vou usar o FileZilla para adicionar o código abaixo ao meu arquivo agora.

<?php
/* Nome do modelo: CustomLoginPage */
get_header();
?>

<div id="primary" class="content-area">

 

  php
  // Inicia o ciclo.
  while ( have_posts() ) : the_post(); ?>

 

Bem-vindo ao nosso site

 

Inicia sessão para acederes à tua conta. Se ainda não tens uma conta, podes registar-te para fazeres parte da nossa comunidade.

 

php // Formulário de login do WordPress wp_login_form(array( ‘redirect’ => home_url(), // Redirecciona após o login ‘label_username’ => __(‘Nome de utilizador’), ‘label_password’ => __(‘Password’), ‘label_remember’ => __(‘Lembra-te de mim’), ‘label_log_in’ => __(‘Log In’), ‘lembra-te’ => verdadeiro )); ?> php // Termina o ciclo. termina; ?>

 

 

 

• Páginas
• Conta
• Modelo de página personalizado
• Acede
• Redefinição da palavra-passe
• Preços
• Regista-te
• Conteúdo restrito

 

</div><!– .content-area –>

<?php get_footer(); ?>

• Cola este código em PageWithoutSidebar.php mesmo por baixo desta linha de código e guarda-a : <?php /* Template Name: PageWithoutSidebar */ ?>
• O teu ficheiro PageWithoutSidebar.php completo terá o seguinte aspeto.

<?php /* Nome do modelo: PáginaSemSidebar */ ?>

<?php
/* Nome do modelo: CustomLoginPage */
get_header();
?>

<div id="primary" class="content-area">

 

  php
  // Inicia o ciclo.
  while ( have_posts() ) : the_post(); ?>

 

Bem-vindo ao nosso site

 

Inicia sessão para acederes à tua conta. Se ainda não tens uma conta, podes registar-te para fazeres parte da nossa comunidade.

 

php // Formulário de login do WordPress wp_login_form(array( ‘redirect’ => home_url(), // Redirecciona após o login ‘label_username’ => __(‘Nome de utilizador’), ‘label_password’ => __(‘Password’), ‘label_remember’ => __(‘Lembra-te de mim’), ‘label_log_in’ => __(‘Log In’), ‘lembra-te’ => verdadeiro )); ?> php // Termina o ciclo. termina; ?>

 

 

 

• Páginas
• Conta
• Modelo de página personalizado
• Acede
• Redefinição da palavra-passe
• Preços
• Regista-te
• Conteúdo restrito

 

</div><!– .content-area –>

<?php get_footer(); ?>

• Volta à tua página e actual iza-a. Agora, deves ver um novo modelo de página personalizado como este:

Então, de uma página em branco para uma página com algum conteúdo, tu, meu amigo, acabaste de criar um modelo de página personalizado. Sei que, neste momento, não tem o melhor aspeto. Mas acredita em mim, quando o personalizares ao teu gosto, a tua página vai ficar fantástica.

Os modelos personalizados estão a estragar o teu tema?

Partilha snippets de código e resolve problemas com os programadores do WordPress na nossa comunidade Reddit.

Junta-te a nós no Reddit

Método#2. Como criar uma página personalizada usando o Editor de Blocos

Este método é uma alternativa mais simples e mais ágil do que criar um modelo personalizado com acesso SFTP. Aqui, usarás o editor de blocos integrado do WordPress para criar um modelo de página personalizado sem precisar de ferramentas externas. Isto é ideal se quiseres um layout rápido e reutilizável para várias páginas.

• Começa por abrir qualquer página ou publicação no editor. No menu do lado direito, vai ao separador “Página” e procura a opção “Modelo

• Clica no texto junto a “Modelo“. Na janela pop-up que aparece, seleciona a opção “Criar novo modelo

• Na janela pop-up, dá ao teu modelo um nome que seja fácil de reconhecer, como “Modelo de página personalizado” e, em seguida, clica em “Criar“

• Agora, vais entrar no editor de modelos, onde podes adicionar blocos de conteúdo, clicando no botão azul ‘+‘. Arrasta e larga blocos como títulos, texto, imagens ou outros elementos de que necessites

• Adiciona o widget de calendário como exemplo

• Quando estiveres satisfeito com o design, clica em ‘Guardar’

• Para utilizar o teu modelo, abre a página onde o queres aplicar. Clica junto a ‘Modelo’ e, em seguida, na opção Trocar modelo

• Depois, escolhe o modelo que acabaste de criar

Alternativa: Usa blocos reutilizáveis

Outra forma de criar um modelo de página personalizado é usar blocos reutilizáveis no WordPress. Isto permite-te guardar e reutilizar um conjunto de blocos em diferentes páginas ou posts, tornando o processo mais eficiente.

Por exemplo, podemos usar os blocos que usámos anteriormente para criar a página com o editor de blocos e guardá-los como um bloco reutilizável. Desta forma, em vez de recriares manualmente o mesmo esquema de cada vez, podes inserir rapidamente o bloco guardado.

Eis como o fazes:

1. Clica no interior de qualquer bloco e prime CTRL + A (ou CMD + A no Mac) para selecionar todos os blocos.
2. Clica em “Adicionar aos blocos reutilizáveis”.
   
   
3. Dá um nome ao bloco reutilizável e clica em Guardar.
   
   

Agora, sempre que precisarmos de aplicar o mesmo esquema a uma nova página, podemos simplesmente procurar o bloco reutilizável no editor de blocos e inseri-lo.

Método#3. Como criar uma página personalizada usando um plug-in (Elemantor)

A criação de modelos de página personalizados no WordPress pode melhorar significativamente a funcionalidade e o aspeto do teu sítio. O Elemantor, com a sua funcionalidade de construtor de temas, fornece uma forma eficiente de criar e gerir estes modelos personalizados.

Eis como podes criar um modelo de página personalizado utilizando o Elemantor:

• Depois de instalares o Elementor no teu sítio Web, vai a Templates no painel de controlo do WordPress e clica em Add New (Adicionar novo).

• Agora, o Elementor pedir-te-á para escolheres um tipo de modelo: Container, Page, Section. Se estiveres a usar a versão profissional, terás mais opções para escolher. Para este exemplo, vou escolher apenas página. De seguida, também tenho de dar um nome ao meu modelo.

• Clica em Create Template (Criar modelo ) quando estiveres pronto. Isto abre o editor Elementor onde podes começar a construir o teu modelo.
• Para utilizar um modelo pré-concebido, clica no ícone Pasta.

• Se começares do zero, arrasta e solta os elementos de que precisas na página. Por uma questão de simplicidade, vou utilizar um modelo pré-desenhado. Para isso, escolhe qualquer modelo e clica em “Inserir”.

• Clica em Aplicar quando aparecer uma janela pop-up. Isto substitui o design, a disposição e outras definições da Página em que estás a trabalhar.

• Personaliza o modelo arrastando e largando widgets como cabeçalhos, imagens, botões ou formulários na página. Fiz apenas alguns ajustes, adicionando algumas imagens ao meu modelo.

• Quando estiveres satisfeito com o design, clica na seta para baixo junto ao botão Publicar e seleciona Guardar como modelo.

• Dá um nome ao teu modelo e clica em Guardar. Agora, o teu modelo está guardado e podes utilizá-lo onde quiseres.

• Para utilizar o modelo que acabaste de criar, vai a Páginas > Adicionar novo e clica em Editar com o Elementor.

• Clica no ícone Pasta, encontra o modelo guardado em Os meus modelos e clica em Inserir.

• Uma vez inserido, vê como fica o meu modelo quando o visualizo.

• É isso mesmo. É assim que é fácil criar modelos de páginas personalizados no WordPress com um plugin de construção de sítios Web como o Elementor.

Problemas comuns e correcções ao utilizar modelos de página personalizados

Abaixo estão alguns dos problemas mais comuns com modelos de página personalizados, mas dependendo do teu tema e configuração, podes encontrar outros.

1. O modelo de página personalizado não aparece no WordPress

Se o teu modelo de página personalizado não aparecer no editor de páginas em “Modelo”, certifica-te de que:

• O ficheiro é guardado na raiz do teu tema ou na pasta “templates”.
• O ficheiro começa com o comentário de cabeçalho correto, como este:

<?php
/*
Nome do modelo: Modelo personalizado
*/
?>

• Actualizaste o painel de administração do WordPress recarregando a página.

2. Alterações ao modelo personalizado não se reflectem na página

Se as actualizações do teu modelo personalizado não forem apresentadas:

• Limpa a cache do teu browser ou utiliza uma janela anónima.
• Elimina e volta a atribuir o modelo à página no editor.
• Certifica-te de que o WordPress não está a servir uma versão em cache de um plugin de cache.

3. Aplicação de um modelo incorreto

Se o WordPress estiver a carregar um modelo diferente do esperado:

• Verifica se outro ficheiro de modelo (como page-{slug}.php ou page.php) o está a substituir.
• Utiliza get_page_template() em modo de depuração para ver qual o modelo que está a ser carregado.

4. Modelo de página personalizado Quebra o layout

Se o teu modelo personalizado causar problemas de layout:

• Certifica-te de que inclui get_header() e get_footer() para que os estilos e scripts sejam carregados corretamente.
• Certifica-te de que a estrutura do teu modelo corresponde ao esquema existente do tema.

5. O modelo personalizado não funciona com etiquetas condicionais

Se as etiquetas condicionais não se comportarem como esperado:

• Certifica-te de que os utilizas dentro do “The Loop” sempre que necessário.
• Verifica novamente as condições; por exemplo, is_page(‘about’) deve estar dentro do gancho wp_head ou do ficheiro de modelo.

O alojamento WordPress gerido mais rápido por apenas $11/mês*

Experimenta velocidades de servidor incrivelmente rápidas com a pilha híbrida Cloudways LAMP + NGINX. Melhora seus Core Web Vitals hoje.

TESTE AGORA

Conclusão

Criar um modelo de página personalizado no WordPress é uma excelente forma de criar páginas específicas com um aspeto único e diferente do resto do design do teu Web site. Outra vantagem de criar modelos de página é que eles podem ser reutilizados. Podes conceber uma página uma vez com a funcionalidade pretendida e depois aplicar esse modelo a todas as páginas que precisares.

Neste blogue, abordei em pormenor os modelos de página personalizados do WordPress, mostrando-te três métodos diferentes para criar modelos personalizados: manual, editor de blocos e baseado em plugin (Elementor).

Se achas que me escapou alguma coisa, estás à vontade para me dizeres nos comentários.