Crie um modelo de página personalizada em um tema WordPress

Um dos pontos de venda mais importantes do WordPress é a ideia de temas. Um único tema agrega grande valor ao design e à funcionalidade do site. No entanto, existem sites que possuem designs diferentes em páginas diferentes.

Infelizmente, vários temas do WordPress impedem os usuários de alterar layouts e funcionalidades para uma página diferente na hierarquia. O modelo de página personalizado do WordPress permite que os usuários integrem requisitos personalizados, como barra lateral direita / esquerda em uma página específica, uma funcionalidade adicional de call to action ou talvez um cabeçalho exclusivo para uma página de destino específica. Vamos mergulhar mais fundo para ver como o modelo de página personalizado do WordPress exibe diferentes tipos de conteúdo.

Um modelo de página WordPress personalizado pode ser usado para vários fins. Algumas ideias incluem:

• Mostrar postagens recentes de cada categoria
• Incorpore o Google Map ou qualquer script
• Lista de todos os autores.
• Imagens enviadas recentemente
• Página de design personalizado para o portfólio
• Página de contato

A aparência de todas as páginas e postagens criadas em um site WordPress é tratada por um arquivo de modelo denominado page.php . Criar ou editar um modelo de página personalizado no WordPress requer conhecimento básico de HTML, CSS e PHP.

Basta abrir qualquer editor de texto e colar o código a seguir nele.

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

A linha de código acima informa ao WordPress que é um arquivo de modelo chamado PageWithoutSidebar . Você pode usar o 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

Agora, vamos testar nosso arquivo de modelo recém-criado.

Faça login no painel de hospedagem. Neste exemplo, estou usando Cloudways - uma hospedagem WordPress gerenciada mais rápida. Cloudways oferece suporte a aplicativos WordPress com as opções de provedor para AWS, DigitalOcean, GCP, Linode e Vultr. Navegue até a pasta / wp-content / themes . Abra sua pasta de tema atual e carregue o arquivo PageWithoutSidebar.php lá.

Vá para Painel de administração do WordPress > Páginas> Adicionar novo . Você pode ver o novo modelo de página personalizada listado no lado direito.

Crie uma nova página e defina seu modelo para PageWithoutSidebar. Uma vez feito isso, 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 é exibida.

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

Agora é hora de adicionar algumas linhas de código para exibir o conteúdo da página.

Para esta demonstração, discutirei como você pode personalizar o modelo padrão de vinte e dezesseis páginas.

A aparência padrão das páginas é gerada pelo arquivo page.php localizado na pasta / wp-contents / themes / YOUR THEME / . Abra page.php e copie este código.

 <? php get_header (); ?>

<div class = "content-area">
                <main class = "site-main" role = "main">
                                <? php
                                // Inicie o loop.
                                while (have_posts ()): the_post ();

                                                // Inclui o modelo de conteúdo da página.
                                                get_template_part ('template-parts / content', 'page');

                                                // Se os comentários estão abertos ou temos pelo menos um comentário, carregue o modelo de comentário.
                                                if (comments_open () || get_comments_number ()) {
                                                                comments_template ();
                                                }

                                                // Fim do loop.
                                fim;
                                ?>

                </main> <! - .site-main ->

                <? php get_sidebar ('content-bottom'); ?>

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

<? php get_sidebar (); ?>
<? php get_footer (); ?>

Cole este código em PageWithoutSidebar.php logo abaixo desta linha de código.

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

Salve isso!

Seu arquivo PageWithoutSidebar.php completo terá a aparência abaixo.

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

<? php get_header (); ?>

<div class = "content-area">

                <main class = "site-main" role = "main">

                                <? php

                                // Inicie o loop.
                                while (have_posts ()): the_post ();

                                                // Inclui o modelo de conteúdo da página.
                                                get_template_part ('template-parts / content', 'page');

                                                // Se os comentários estão abertos ou temos pelo menos um comentário, carregue o modelo de comentário.
                                                if (comments_open () || get_comments_number ()) {

                                                                comments_template ();

                                                }

                                                // Fim do loop.
                                fim;

                                ?>

                </main> <! - .site-main ->

                <? php get_sidebar ('content-bottom'); ?>

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

<? php get_sidebar (); ?>

<? php get_footer (); ?>

Volte para sua página e atualize-a. Você observará que tudo está funcionando da maneira que funciona no tema padrão do WordPress Twenty Sixteen.

Agora vamos personalizá-lo. Como você pode ver, há uma barra lateral do lado direito. Vou removê-lo apenas desta página. Todas as outras páginas terão a aparência padrão do tema Twenty Sixteen.

Abra o arquivo PageWithoutSidebar.php . Role para baixo até o final do arquivo e remova :

 <? php get_sidebar (); ?>

Esta é a linha de código que obtém a barra lateral da página. Após remover a linha, salve-a . Abra o URL da página e a barra lateral não existe mais!

Como você pode ver, a barra lateral foi removida com sucesso desta página. No entanto, o alinhamento do texto não é bom. Existe um espaço em branco do lado direito. A correção é justificar e estender o texto para preencher a tela.

Volte para PageWithoutSidebar.php e encontre:

 <div class = "content-area">

Basta alterar “ área de conteúdo ” para “ largura total do conteúdo do site ” e pronto. Atualize a página e o conteúdo terá largura total.

Ainda está curioso para saber por que criei um modelo de página personalizado quando poderia facilmente editar o arquivo page.php ? É bastante óbvio que, se o arquivo page.php for editado, todas as páginas do site mostrarão as alterações. Para aplicar a aparência personalizada em páginas específicas, o modelo de página personalizado no WordPress é útil. Você também pode definir uma função de usuário personalizada no WordPress para atribuir diferentes privilégios aos usuários.

Se você tiver alguma dúvida, fique à vontade para perguntar postando na seção de comentários abaixo.