Como criar um modelo de página personalizada em um tema WordPress

Um dos pontos de venda mais importantes do WordPress é seu potencial infinito de personalização. Como usuário do WordPress, você quer mais controle sobre o design e a funcionalidade do seu site.

O WordPress é ótimo nisso. Sua flexibilidade permite que basicamente qualquer um altere qualquer coisa em seu site. Falando nisso, os modelos de página no WordPress permitem que você personalize o design do seu site, do jeito que você gosta.

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

Basicamente, se você quiser que uma página específica pareça diferente do resto do seu site, você terá que usar modelos de página. Muitos sites WordPress usam layouts de página personalizados para suas landing pages e páginas de vendas.

Então… se você quer atingir o mesmo para seu site, este guia é para você. Neste blog, daremos uma olhada em vários métodos para criar uma página personalizada no WordPress.

Vamos começar.

Por que usar um modelo de página personalizado no WordPress?

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

Infelizmente, vários temas do WordPress impedem que os usuários alterem layouts e funcionalidades de uma página diferente na hierarquia.

Um modelo de página personalizado do WordPress permite que os usuários integrem requisitos personalizados, como uma barra lateral direita/esquerda em uma página específica, funcionalidade adicional de chamada para ação ou um cabeçalho exclusivo para uma página de destino específica.

Um modelo de página WordPress personalizado pode ser usado para vários propósitos. Por exemplo, para:

• Mostrar postagens recentes de cada categoria
• Incorpore o Google Maps ou qualquer script
• Mostrar uma lista de todos os autores
• Mostrar imagens carregadas recentemente
• Para criar uma página de portfólio personalizada
• etc…

Um arquivo de modelo chamado page.php manipula 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 conhecimento básico de HTML , CSS e PHP .

Acelere o tempo de carregamento do WordPress em 70% com o complemento Cloudflare da Cloudways!

Melhore o desempenho do seu site e pontue mais alto no Core Web Vitals com o Edge Page Caching da Cloudflare para WordPress!

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

Agora, para as coisas boas. Agora, vamos dar uma olhada em quatro métodos diferentes para criar um modelo de página personalizado no WordPress.

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

Para este método, você precisará de:

• Editor de texto – vou usar apenas o bloco de notas
• Cliente FTP ou painel de controle de hospedagem – usarei o FileZilla
• Acesso ao painel de administração do WordPress
• Conhecimento básico de PHP e estrutura de arquivos do WordPress

Vamos começar…

Etapa 1: adicione o código do modelo

• Basta abrir qualquer editor de texto e colar o seguinte código nele.

<?php /* Nome do modelo: PageWithoutSidebar */ ?>

1. <?php /* Nome do modelo: PageWithoutSidebar */ ?>

<?php /* Nome do modelo: PageWithoutSidebar */ ?>

• A linha de código dirá ao WordPress que este é um arquivo de modelo chamado PageWithoutSidebar – quando o usarmos. Você pode usar qualquer nome que quiser. Agora salve este arquivo como PageWithoutSidebar.php . Novamente, você pode usar qualquer outro nome para o arquivo. Mas não se esqueça de manter a extensão como .php .

Etapa 2: Carregue o arquivo de modelo

• Agora, vamos testar nosso arquivo de modelo recém-criado.
• Entre no seu painel de hospedagem . Neste exemplo, estamos usando a hospedagem WordPress da Cloudways .
• Em seguida, usaramos o FileZilla para estabelecer uma conexão SFTP com nosso servidor para navegar até a pasta /wp-content/themes .
• Abra sua pasta de tema atual e carregue o arquivo PageWithoutSidebar.php lá. No nosso caso, o tema é twenty-twenty-two .

Etapa 3: Selecione o modelo no WordPress

• Vá para Painel de Administração do WordPress > Páginas > Adicionar Novo . Em seguida, na seção de atributos de página, você deve ver o novo modelo de página personalizado listado.

• Crie uma nova página e defina seu modelo como PageWithoutSidebar. Uma vez feito, publique- o.

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

• Isso mostra que o modelo de página personalizado no WordPress foi implementado com sucesso. Portanto, agora você pode criar um tema WordPress responsivo personalizado .

Etapa 4: Adicionar conteúdo ao seu modelo personalizado

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

<?php /* Nome do modelo: CustomLoginPage */ obter_cabeçalho(); ?> <div id=”primário” classe=”área-de-conteúdo”> <id principal=”principal” classe=”site-principal” função=”principal”> <?php // Inicia o loop. enquanto ( have_posts() ) : the_post(); ?> <div class=”introdução-da-página-de-login”> <h2>Bem-vindo ao nosso site</h2> <p>Faça login para acessar sua conta. Se você não tem uma conta, você pode se registrar para se tornar parte de nossa comunidade.</p> </div> <div class=”login-form-container”> <?php // Formulário de login do WordPress wp_login_form(matriz( ‘redirect’ => home_url(), // Redirecionar após login ‘label_username’ => __(‘Nome de usuário’), ‘label_password’ => __(‘Senha’), ‘label_remember’ => __(‘Lembre-se de mim’), ‘label_log_in’ => __(‘Entrar’), ‘lembrar’ => verdadeiro )); ?> </div> <?php // Finalizar o loop. enquanto isso; ?> </main><!– .site-main –> <aside id=”barra lateral personalizada” class=”área da barra lateral”> <?php if ( is_active_sidebar( ‘barra lateral personalizada’ ) ) : ?> <ul class=”menu-da-barra-lateral”> <?php dynamic_sidebar( ‘barra lateral personalizada’ ); ?> </ul> <?php else : ?> <ul class=”menu-da-barra-lateral”> <li><a href=”#”>Páginas</a></li> <li><a href=”#”>Conta</a></li> <li><a href=”#”>Modelo de página personalizado</a></li> <li><a href=”#”>Entrar</a></li> <li><a href=”#”>Redefinição de senha</a></li> <li><a href=”#”>Preços</a></li> <li><a href=”#”>Registrar</a></li> <li><a href=”#”>Conteúdo restrito</a></li> </ul> <?php fimif; ?> </à parte> </div><!– .content-area –> <?php get_footer(); ?>

1. <?php
2. /* Nome do modelo: CustomLoginPage */
3. obter_cabeçalho ( ) ;
4. ?>
5. <div id= “primário” class= “área-de-conteúdo” >
6. <id principal = “principal” classe = “site-principal” função = “principal” >
7. <?php
8. // Inicia o loop.
9. enquanto ( tem_postagens ( ) ) : a_postagem ( ) ; ?>
10. <div class= “introdução-da-página-de-login” >
11. <h2>Bem-vindo ao nosso site</h2>
12. <p>Faça login para acessar sua conta. Se você não tem uma conta, você pode se registrar para se tornar parte de nossa comunidade.</p>
13. </div>
14. <div class= “container-de-formulário-de-login” >
15. <?php
16. // Formulário de login do WordPress
17. wp_login_form ( matriz (
18. ‘redirect’ => home_url ( ) , // Redirecionar após login
19. ‘label_username’ => __ ( ‘Nome de usuário’ ) ,
20. ‘label_password’ => __ ( ‘Senha’ ) ,
21. ‘label_remember’ => __ ( ‘Lembrar de mim’ ) ,
22. ‘label_log_in’ => __ ( ‘Entrar’ ) ,
23. ‘lembrar’ => verdadeiro
24. ) ) ;
25. ?>
26. </div>
27. <?php
28. // Finalizar o loop.
29. enquanto isso;
30. ?>
31. </main><!– .site-main –>
32. <aside id= “barra lateral personalizada” class= “área da barra lateral” >
33. <?php if ( is_active_sidebar ( ‘barra lateral personalizada’ ) ) : ?>
34. <ul class= “menu da barra lateral” >
35. <?php dynamic_sidebar ( ‘barra lateral personalizada’ ) ; ?>
36. </ul>
37. <?php else : ?>
38. <ul class= “menu da barra lateral” >
39. <li> <a href= “#” > Páginas</a></li>
40. <li> <a href= “#” > Conta</a></li>
41. <li> <a href= “#” > Modelo de página personalizado</a></li>
42. <li> <a href= “#” > Entrar</a></li>
43. <li> <a href= “#” > Redefinição de senha</a></li>
44. <li> <a href= “#” > Preços</a></li>
45. <li> <a href= “#” > Registrar</a></li>
46. <li> <a href= “#” > Conteúdo Restrito</a></li>
47. </ul>
48. <?php fimif; ?>
49. </à parte>
50. </div><!– .content-area –>
51. <?php obter_rodapé ( ) ; ?>

<?php /* Nome do modelo: CustomLoginPage */ obter_cabeçalho(); ?> <div id=”primário” classe=”área-de-conteúdo”> <id principal=”principal” classe=”site-principal” função=”principal”> <?php // Inicia o loop. enquanto ( have_posts() ) : the_post(); ?> <div class=”introdução-da-página-de-login”> <h2>Bem-vindo ao nosso site</h2> <p>Faça login para acessar sua conta. Se você não tem uma conta, você pode se registrar para se tornar parte de nossa comunidade.</p> </div> <div class=”login-form-container”> <?php // Formulário de login do WordPress wp_login_form(matriz( ‘redirect’ => home_url(), // Redirecionar após login ‘label_username’ => __(‘Nome de usuário’), ‘label_password’ => __(‘Senha’), ‘label_remember’ => __(‘Lembre-se de mim’), ‘label_log_in’ => __(‘Entrar’), ‘lembrar’ => verdadeiro )); ?> </div> <?php // Finalizar o loop. enquanto isso; ?> </main><!– .site-main –> <aside id=”barra lateral personalizada” class=”área da barra lateral”> <?php if ( is_active_sidebar( ‘barra lateral personalizada’ ) ) : ?> <ul class=”menu-da-barra-lateral”> <?php dynamic_sidebar( ‘barra lateral personalizada’ ); ?> </ul> <?php else : ?> <ul class=”menu-da-barra-lateral”> <li><a href=”#”>Páginas</a></li> <li><a href=”#”>Conta</a></li> <li><a href=”#”>Modelo de página personalizado</a></li> <li><a href=”#”>Entrar</a></li> <li><a href=”#”>Redefinição de senha</a></li> <li><a href=”#”>Preços</a></li> <li><a href=”#”>Registrar</a></li> <li><a href=”#”>Conteúdo restrito</a></li> </ul> <?php fimif; ?> </à parte> </div><!– .content-area –> <?php get_footer(); ?>

• Cole este código em PageWithoutSidebar.php logo abaixo desta linha de código e salve -o: <?php /* Nome do modelo: PageWithoutSidebar */ ?>
• Seu arquivo PageWithoutSidebar.php completo ficará como abaixo.

<?php /* Nome do modelo: PageWithoutSidebar */ ?> <?php /* Nome do modelo: CustomLoginPage */ obter_cabeçalho(); ?> <div id=”primário” classe=”área-de-conteúdo”> <id principal=”principal” classe=”site-principal” função=”principal”> <?php // Inicia o loop. enquanto ( have_posts() ) : the_post(); ?> <div class=”introdução-da-página-de-login”> <h2>Bem-vindo ao nosso site</h2> <p>Faça login para acessar sua conta. Se você não tem uma conta, você pode se registrar para se tornar parte de nossa comunidade.</p> </div> <div class=”login-form-container”> <?php // Formulário de login do WordPress wp_login_form(matriz( ‘redirect’ => home_url(), // Redirecionar após login ‘label_username’ => __(‘Nome de usuário’), ‘label_password’ => __(‘Senha’), ‘label_remember’ => __(‘Lembre-se de mim’), ‘label_log_in’ => __(‘Entrar’), ‘lembrar’ => verdadeiro )); ?> </div> <?php // Finalizar o loop. enquanto isso; ?> </main><!– .site-main –> <aside id=”barra lateral personalizada” class=”área da barra lateral”> <?php if ( is_active_sidebar( ‘barra lateral personalizada’ ) ) : ?> <ul class=”menu-da-barra-lateral”> <?php dynamic_sidebar( ‘barra lateral personalizada’ ); ?> </ul> <?php else : ?> <ul class=”menu-da-barra-lateral”> <li><a href=”#”>Páginas</a></li> <li><a href=”#”>Conta</a></li> <li><a href=”#”>Modelo de página personalizado</a></li> <li><a href=”#”>Entrar</a></li> <li><a href=”#”>Redefinição de senha</a></li> <li><a href=”#”>Preços</a></li> <li><a href=”#”>Registrar</a></li> <li><a href=”#”>Conteúdo restrito</a></li> </ul> <?php fimif; ?> </à parte> </div><!– .content-area –> <?php get_footer(); ?>

1. <?php /* Nome do modelo: PageWithoutSidebar */ ?>
2. <?php
3. /* Nome do modelo: CustomLoginPage */
4. obter_cabeçalho ( ) ;
5. ?>
6. <div id= “primário” class= “área-de-conteúdo” >
7. <id principal = “principal” classe = “site-principal” função = “principal” >
8. <?php
9. // Inicia o loop.
10. enquanto ( tem_postagens ( ) ) : a_postagem ( ) ; ?>
11. <div class= “introdução-da-página-de-login” >
12. <h2>Bem-vindo ao nosso site</h2>
13. <p>Faça login para acessar sua conta. Se você não tem uma conta, você pode se registrar para se tornar parte de nossa comunidade.</p>
14. </div>
15. <div class= “container-de-formulário-de-login” >
16. <?php
17. // Formulário de login do WordPress
18. wp_login_form ( matriz (
19. ‘redirect’ => home_url ( ) , // Redirecionar após login
20. ‘label_username’ => __ ( ‘Nome de usuário’ ) ,
21. ‘label_password’ => __ ( ‘Senha’ ) ,
22. ‘label_remember’ => __ ( ‘Lembrar de mim’ ) ,
23. ‘label_log_in’ => __ ( ‘Entrar’ ) ,
24. ‘lembrar’ => verdadeiro
25. ) ) ;
26. ?>
27. </div>
28. <?php
29. // Finalizar o loop.
30. enquanto isso;
31. ?>
32. </main><!– .site-main –>
33. <aside id= “barra lateral personalizada” class= “área da barra lateral” >
34. <?php if ( is_active_sidebar ( ‘barra lateral personalizada’ ) ) : ?>
35. <ul class= “menu da barra lateral” >
36. <?php dynamic_sidebar ( ‘barra lateral personalizada’ ) ; ?>
37. </ul>
38. <?php else : ?>
39. <ul class= “menu da barra lateral” >
40. <li> <a href= “#” > Páginas</a></li>
41. <li> <a href= “#” > Conta</a></li>
42. <li> <a href= “#” > Modelo de página personalizado</a></li>
43. <li> <a href= “#” > Entrar</a></li>
44. <li> <a href= “#” > Redefinição de senha</a></li>
45. <li> <a href= “#” > Preços</a></li>
46. <li> <a href= “#” > Registrar</a></li>
47. <li> <a href= “#” > Conteúdo Restrito</a></li>
48. </ul>
49. <?php fimif; ?>
50. </à parte>
51. </div><!– .content-area –>
52. <?php obter_rodapé ( ) ; ?>

<?php /* Nome do modelo: PageWithoutSidebar */ ?> <?php /* Nome do modelo: CustomLoginPage */ obter_cabeçalho(); ?> <div id=”primário” classe=”área-de-conteúdo”> <id principal=”principal” classe=”site-principal” função=”principal”> <?php // Inicia o loop. enquanto ( have_posts() ) : the_post(); ?> <div class=”introdução-da-página-de-login”> <h2>Bem-vindo ao nosso site</h2> <p>Faça login para acessar sua conta. Se você não tem uma conta, você pode se registrar para se tornar parte de nossa comunidade.</p> </div> <div class=”login-form-container”> <?php // Formulário de login do WordPress wp_login_form(matriz( ‘redirect’ => home_url(), // Redirecionar após login ‘label_username’ => __(‘Nome de usuário’), ‘label_password’ => __(‘Senha’), ‘label_remember’ => __(‘Lembre-se de mim’), ‘label_log_in’ => __(‘Entrar’), ‘lembrar’ => verdadeiro )); ?> </div> <?php // Finalizar o loop. enquanto isso; ?> </main><!– .site-main –> <aside id=”barra lateral personalizada” class=”área da barra lateral”> <?php if ( is_active_sidebar( ‘barra lateral personalizada’ ) ) : ?> <ul class=”menu-da-barra-lateral”> <?php dynamic_sidebar( ‘barra lateral personalizada’ ); ?> </ul> <?php else : ?> <ul class=”menu-da-barra-lateral”> <li><a href=”#”>Páginas</a></li> <li><a href=”#”>Conta</a></li> <li><a href=”#”>Modelo de página personalizado</a></li> <li><a href=”#”>Entrar</a></li> <li><a href=”#”>Redefinição de senha</a></li> <li><a href=”#”>Preços</a></li> <li><a href=”#”>Registrar</a></li> <li><a href=”#”>Conteúdo restrito</a></li> </ul> <?php fimif; ?> </à parte> </div><!– .content-area –> <?php get_footer(); ?>

• Volte para sua página e atualize-a. Agora você deve 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, você, meu amigo, acabou de criar um modelo de página personalizado. Agora, eu sei que não parece o melhor agora. Mas acredite em mim, quando você personalizá-lo ao seu gosto, sua página ficará ótima.

Método nº 2. Como criar uma página personalizada usando o editor de blocos

Este método é uma alternativa mais simples e otimizada para criar um modelo personalizado com acesso SFTP. Aqui, você usará o editor de blocos integrado do WordPress para criar um modelo de página personalizado sem precisar de nenhuma ferramenta externa. Isso é ideal se você quiser um layout rápido e reutilizável para várias páginas.

• Comece abrindo qualquer página ou post no editor. No menu à direita, vá até a aba ‘Página’ e procure pela opção ‘Modelo’

• Clique no texto ao lado de ‘Modelo ‘. No pop-up que aparece, selecione a opção ‘Criar novo modelo’

• No pop-up, dê ao seu modelo um nome que seja fácil de reconhecer, como “Modelo de página personalizado”, e clique em ” Criar “

• Agora, você entrará no editor de modelos , onde poderá adicionar blocos de conteúdo clicando no botão azul ‘ + ‘. Arraste e solte blocos como títulos, texto, imagens ou outros elementos que você precisa

• Vamos adicionar o widget de calendário como exemplo

• Quando estiver satisfeito com o design, clique em “Salvar”

• Para usar seu modelo, abra a página onde você quer aplicá-lo. Clique em próximo a ‘Modelo’ e depois na opção Trocar modelo

• Em seguida, escolha o modelo que você acabou de criar

Método nº 3. Como criar uma página personalizada usando um plugin (Elemantor)

Criar modelos de página personalizados no WordPress pode melhorar significativamente a funcionalidade e a aparência do seu site. O Elemantor , com sua funcionalidade de construtor de temas, fornece uma maneira eficiente de criar e gerenciar esses modelos personalizados.

Veja como você pode criar um modelo de página personalizado usando o Elemantor:

• Depois de instalar o Elementor no seu site, vá para Modelos no painel do WordPress e clique em Adicionar novo .

• Agora, o Elementor pedirá para você escolher um tipo de modelo: Container, Page, Section. Se você estiver usando a versão pro, terá mais opções para escolher. Vou escolher apenas page para este exemplo. Em seguida, também terei que nomear meu modelo.

• Clique em Create Template quando terminar. Isso abre o editor Elementor onde você pode começar a construir seu template.
• Para usar um modelo pré-concebido, clique no ícone Pasta .

• Se estiver começando do zero, arraste e solte os elementos que você precisa na página. Usarei apenas um modelo pré-desenhado para simplificar. Para isso, escolha qualquer modelo e clique em “Inserir”.

• Clique em Apply quando um pop-up aparecer. Isso substituirá o design, o layout e outras configurações da Página em que você está trabalhando.

• Personalize o modelo arrastando e soltando widgets como títulos, imagens, botões ou formulários na página. Nós simplesmente fizemos alguns ajustes adicionando algumas imagens ao meu modelo.

• Quando estiver satisfeito com o design, clique na seta para baixo ao lado do botão Publicar e selecione Salvar como modelo .

• Dê um nome ao seu modelo e clique em Salvar . Agora seu modelo está salvo e você pode usá-lo onde quiser.

• Para usar o modelo que você acabou de criar, vá para Páginas > Adicionar novo e clique em Editar com Elementor .

• Clique no ícone Pasta , encontre seu modelo salvo em Meus Modelos e clique em Inserir .

• Depois de inserido, veja como meu modelo ficará quando eu visualizá-lo.

• É isso. É assim que é fácil criar modelos de página personalizados no WordPress com um plugin de construção de site como o Elementor.

Conclusão

Criar um modelo de página personalizado no WordPress é uma ótima maneira de criar páginas específicas que parecem únicas e diferentes do resto do design do seu site. Outro benefício de criar modelos de página é que eles podem ser reutilizados. Você pode criar uma página uma vez com a funcionalidade desejada e, então, aplicar esse modelo a quantas páginas precisar.

Perguntas frequentes

P) É possível personalizar um template do WordPress? R) Sim, os templates do WordPress podem ser personalizados usando o editor de temas, o personalizador ou modificando o código (HTML, CSS, PHP) para alterações avançadas.

P) O WordPress tem modelos de página? R) Sim, o WordPress oferece modelos de página pré-construídos e permite modelos personalizados para layouts de página específicos.

P) Você pode carregar seu próprio modelo no WordPress? R) Sim, você pode carregar seu próprio modelo colocando-o no diretório /wp-content/themes/ via FTP ou diretamente no painel do WordPress.

P) Como criar uma página personalizada no WordPress? A) Crie uma página personalizada projetando um modelo de página em PHP, carregue-o na pasta do seu tema e atribua-o na seção Atributos da página ao criar uma nova página.

P) Como eu crio um layout de página no WordPress? Você pode criar um layout de página usando o WordPress Block Editor, um plugin de construtor de páginas ou personalizando seu tema.

P) O WordPress tem um construtor de páginas? Sim, o WordPress suporta construtores de páginas como Elementor, Divi e WPBakery para criar layouts personalizados facilmente