Como criar modelos de página personalizados do WordPress

Os modelos de página em temas do WordPress ajudam a determinar o layout das páginas em um site. No entanto, ajustar esses modelos pode às vezes ser intimidante, especialmente para iniciantes. Felizmente, o WordPress oferece bastante flexibilidade quando se trata de modelos de página, permitindo que você crie modelos de página personalizados em seu tema.

A criação de modelos de página personalizados para o seu site permite que você ajuste facilmente os layouts e designs do seu site de acordo com sua preferência. Também permite adicionar requisitos personalizados, como utilizar cabeçalhos diferentes para páginas diferentes. Essas alterações podem ser aplicadas em páginas diferentes ou em uma única página.

Neste artigo, veremos quais são os modelos de página personalizados do WordPress, a hierarquia do modelo de página padrão e como criar modelos de página personalizados do WordPress em seu tema.

Índice

O que é um modelo de página personalizado do WordPress

A hierarquia do modelo de página do WordPress

Criando um modelo de página personalizado

• Como criar um modelo personalizado global
• Criando um modelo de página única

Conclusão

O que é um modelo de página personalizado do WordPress

Um modelo de página personalizado do WordPress é um arquivo de modelo que permite que você tenha um design e uma sensação separados do seu site.

Por exemplo, se você tiver um tema de blog em seu site, poderá criar um modelo personalizado para seu site, que não renderize uma barra lateral ou comentários. Você também pode criar um modelo para páginas onde você tem um conteúdo de renderização de modelo em um layout de caixa e outro em um layout de largura total. Não há limitações quanto ao número de modelos de página que você pode criar.

A renderização das páginas é controlada pelo arquivo page.php no WordPress. Este arquivo, portanto, forma uma base padrão para renderizar o conteúdo da sua página e está localizado na raiz dos seus arquivos de tema, conforme ilustrado abaixo.

Se houver modelos de página mais específicos, a hierarquia de modelos será ativada.

A hierarquia do modelo de página do WordPress

A hierarquia do modelo de página determina qual arquivo de modelo o WordPress escolhe ao exibir uma página, dependendo da natureza da solicitação feita, bem como de sua existência dentro do tema.

A hierarquia de modelos padrão do WordPress é a seguinte:

Modelo de página : o WordPress verifica um modelo atribuído à página e usa esse modelo dentro da página

page-{slug}.php : Se nenhum modelo for atribuído à página, o WordPress verifica se há um modelo com o slug na página e o aplica, se encontrado.

Um slug é uma parte dentro do URL da página após o nome do domínio e pode ser editado. Abaixo está uma ilustração de exemplo sobre isso.

page-{id}.php : o WordPress irá então verificar a existência de um template de página com o ID da página que está sendo renderizada se nenhum template com o slug for encontrado.

page.php : Se nenhum modelo com um ID de página for encontrado, o WordPress usará o modelo page.php padrão para renderizar a página.

singular.php : Caso o arquivo page.php não seja encontrado, o WordPress usará o arquivo singular.php independentemente do tipo de postagem.

index.php : Se nenhum dos modelos acima estiver disponível, o padrão do WordPress para renderizar as páginas usando o arquivo index.php.

A renderização de páginas em seu ambiente WordPress pode, portanto, ser realizada por qualquer um dos modelos de página acima. Portanto, cabe a você determinar o nível de precedência que deseja estabelecer.

Criando um modelo de página personalizado

A criação de modelos de página personalizados em seu tema é bastante fácil. No entanto, você precisa determinar se os modelos de página serão para uma única página ou para qualquer página.

Neste guia, veremos como criar manualmente um modelo de página global no tema Stax, bem como um modelo de página única para uma de nossas páginas.

Como criar um modelo personalizado global

Às vezes, você deseja criar um modelo de página que possa ser usado globalmente em qualquer página do seu site.

Para fazer isso, você precisará primeiro identificar um editor de texto para usar como Bloco de Notas, Bloco de Notas ++, texto sublime ou qualquer outro editor de sua preferência.

Feito isso, você pode começar a criar seu arquivo de modelo realizando o seguinte:

Etapa 1: crie um novo arquivo e adicione o seguinte código :

 <?php /* Template Name: PageWithNoFooter */ ?>

Recomendamos usar um nome de modelo que não seja usado em nenhum outro modelo de página que você possa ter em seu site, bem como um nome que você possa identificar e relacionar facilmente às páginas do seu site.

Feito isso, salve seu novo template de página com a extensão .php. No nosso caso aqui, vamos nomear o arquivo de modelo pagewithnofooter.php . Você pode usar qualquer nome de sua preferência, mas é mais recomendável usar um nome semelhante ao nome do seu modelo.

Etapa 2: adicione o código desejado ao arquivo

Nesta etapa, você pode adicionar seu código preferido ao arquivo, seja em PHP ou PHP e HTML.

Para fins de ilustração, em nosso caso aqui, usaremos o conteúdo do arquivo right-sidebar.php padrão dentro do arquivo pagewithnofooter.php, mas o personalizaremos e adicionaremos o código para renderizar um texto de boas-vindas HTML personalizado, bem como desativar o rodapé. Se você estiver usando outro tema do WordPress, também poderá copiar o conteúdo do page.php dentro do tema ou qualquer outro modelo de página definido pelo tema que seu tema possa ter.

Nosso código ficará assim:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

Etapa 3: faça upload do modelo de página para seus arquivos de tema .

Com a ajuda de um programa de FTP como o Filezilla ou através do seu painel de hospedagem, faça o upload do seu arquivo personalizado para a raiz dos seus arquivos de tema. No nosso caso aqui, isso estará dentro dos seguintes caminhos de diretório:

i) wp-content > Temas > Stax

ii) Recomendado: wp-content > Temas > stax-child

Isso é aplicável ao usar um tema filho em seu site, e stax-child é seu tema filho.

Recomendamos usar o tema filho ao personalizar modelos de página ou qualquer outra personalização de arquivo em seu tema para evitar a perda de personalizações durante as atualizações do tema.

Etapa 4: crie uma nova página e atribua o modelo “PageWithNoFooter” a ela

Para conseguir isso, navegue até a seção Páginas > Adicionar novo no painel do WordPress e crie sua página.

Depois de criar a página, atribua o modelo “PageWithNoFooter” a ela e salve suas alterações.

Abaixo está uma ilustração de exemplo disso:

Agora, ao visualizar a página no front-end, nossa página não terá rodapé renderizado em sua página. Você também terá o HTML personalizado que adicionamos.

Abaixo está uma captura de tela sobre isso:

Você pode usar o modelo dentro de qualquer página onde você gostaria de ter seu layout aplicado ou então qualquer página que você não pretenda ter um rodapé.

Criando um modelo de página única

Modelos de página personalizados para páginas únicas são mais específicos da página. Como mencionado anteriormente, esses modelos são considerados para seleção se nenhum “modelo de página” for atribuído a uma página.

Quanto a esses modelos, você pode segmentar a página por slug ou ID de página. Também é importante considerar as perspectivas futuras do seu site ao determinar se deve usar um slug ou ID de página. Por exemplo, se você pretende migrar seu site para outro domínio, usar um ID de página não seria apropriado ao criar seu arquivo de modelo. Em vez disso, usar o slug seria considerado uma opção melhor. Se, por outro lado, seu site estiver sendo gerenciado por várias pessoas e você achar que existe a possibilidade de alterar o slug da página, seria preferível usar um ID de página ao criar o modelo de página.

No nosso caso aqui, vamos criar um template de página personalizado para nossa página de contato e desabilitar o rodapé da página. Para criar esse modelo, você precisará realizar o seguinte:

Passo 1: Copie o conteúdo do page.php

Nesta etapa, você precisará primeiro localizar o page.php dentro de seus arquivos de tema.

Depois de localizar o arquivo, selecione para editá-lo e copiar seu conteúdo.

Etapa 2: criar um novo modelo para a página

Na raiz dos seus arquivos de tema, crie o modelo de página para a página de contato. Você pode usar o arquivo page-{id}.php ou page-{slug}.php. No nosso caso aqui, usaremos o slug, então nomearemos nosso template como page-contact.php já que “contact” é nosso slug de página como visto abaixo:

Abaixo também está uma ilustração sobre o local do arquivo:

Etapa 3: cole o conteúdo do arquivo page.php

Agora você precisará colar o conteúdo do arquivo page.php que copiamos na etapa 1 acima em nosso novo arquivo page-contact.php. Ao fazer isso, você pode personalizar o arquivo para incorporar as alterações de código desejadas e salvá-las. No nosso caso, estaremos desabilitando o rodapé na página de contato para que nosso código final seja lido como:

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

Ao visualizar agora sua página de contato, você perceberá que a página não incorpora um rodapé.

Abaixo está uma comparação de captura de tela na página inicialmente e após a aplicação do novo modelo.

Página de contato com rodapé

Página de contato sem rodapé

Conclusão

Criar modelos de página personalizados para o seu site é relativamente fácil. Neste guia, analisamos especificamente como criar manualmente modelos personalizados dentro do seu tema WordPress. Usamos o tema Stax gratuito como o caso de uso aqui. No entanto, você pode aplicar a mesma técnica em todos os outros temas do WordPress que seguem os padrões de codificação do WordPress. No entanto, existem outras maneiras de criar modelos de página personalizados, como usar construtores de páginas como o Elementor.

Esperamos que este artigo forneça as informações necessárias sobre como você pode criar manualmente modelos de página personalizados. Sinta-se à vontade para comentar abaixo em caso de dúvidas ou sugestões.