Nesta lição do tutorial do tema WordPress para iniciantes, aprendemos sobre modelos de página, o que são, como criá-los e as melhores práticas. Faremos um modelo de largura total como exemplo. Ao longo do caminho, também adicionamos uma classe ao corpo perguntando se a página está usando um modelo de página específico.
O que são modelos de página
Os modelos de página são úteis para casos em que você deseja um layout ou configuração diferente para uma página específica. Exemplos comuns de uso de modelos de página são listar postagens em um tipo de postagem personalizado (por exemplo, portfólio, livros ou serviços), ter um conteúdo ou layout completamente diferente (por exemplo, dentro de colunas) ou até mesmo simplesmente fazer uma página de largura total (sem barra lateral).
A usabilidade dos modelos de página diminuiu após a versão 5.x do WordPress (Gutenberg). O novo editor Gutenberg permite grande flexibilidade para construir tais páginas sem a necessidade de templates de página. Independentemente disso, aprenderemos como adicionar um modelo de página personalizado ao nosso tema.
Dentro da metabox “Page Attributes" para páginas é onde aparece a opção de template de página. Mas a opção de template só aparecerá se o tema ativo tiver pelo menos um template de página.
Os modelos de página também podem ser usados para postagens e tipos de postagem personalizados. Após o WordPress 4.7 e superior, você pode definir para quais tipos de postagem deseja que o modelo esteja disponível. O WordPress adicionará automaticamente a metabox “Page Attributes” necessária para esses tipos de postagem.
Nomenclatura e posicionamento do modelo de página
Para começar, você normalmente faria uma cópia de qualquer arquivo de modelo mais próximo do que deseja alcançar com o modelo de página. Na maioria dos casos é page.php. Quanto ao nome do seu modelo de página, depende de você. Mas existem algumas regras e algum bom senso.
É tentador simplesmente nomear seu modelo de página, por exemplo, page-books.phppara um modelo listando livros de tipo de postagem personalizados. Nunca prefixe seu modelo de página com ‘ page-‘! Se você se lembrar da hierarquia de modelos do WordPress, o WordPress procurará page-<slug>.phpantes de tentar page.php, e os usuários do seu tema podem encontrar um comportamento inesperado.
Uma boa prática é prefixar seu modelo de página com algo que não faz parte dos nomes dos modelos de página do WordPress. Por exemplo ‘ pagetemplate-', ‘ pt-‘, ou simplesmente o nome completo ‘ fullwidth-template.php‘. Também é uma boa prática mantê-los em uma subpasta; /page-templates/no entanto, isso não é bom se você quiser que seu tema esteja disponível para estender com um tema filho. Um tema filho não pode substituir modelos de página que são colocados em uma subpasta no tema pai.
Depois de decidir por um padrão de nomenclatura, vamos em frente e criar um modelo de página.
Criando um modelo de página
Faça uma cópia page.phpe renomeie para pagetemplate-fullwidth.php. Para transformá-lo em um modelo de página, você precisa apenas adicionar um comentário no início, informando ao WordPress que este é um modelo de página:
<?php
/*
Template Name: Fullwidth
*/
get_header(); ?>
<?php
if (have_posts()) {
...Tudo o que você precisa é de um comentário no início do arquivo, com “Nome do modelo: ” e o nome do seu modelo depois. É isso! Entre no admin, edite uma página e você verá a opção de escolher “Fullwidth” como modelo.
Eu mencionei que no WordPress 4.7 você pode definir para quais tipos de postagem você deseja que o modelo de página esteja disponível. No momento, está disponível apenas para páginas, mas digamos que você queira a opção de fazer postagens de largura total também? Nesse caso, adicione “Template Post Type:” dentro do mesmo bloco de comentários e defina seus tipos de postagem separados por vírgula. Por exemplo, para disponibilizá-lo para postagens e páginas;
<?php
/*
Template Name: Fullwidth
Template Post Type: post, page
*/
get_header(); ?>
<?php
if (have_posts()) {
...Edite uma postagem e você deverá ver uma nova metabox “Atributos da postagem”, onde você pode escolher o modelo Fullwidth. Agradável!
Alterando o código em nosso modelo de página
Agora vamos editar o modelo de página para que ele realmente faça algo diferente da visualização de página única. Vamos remover o pedido de template da barra lateral: (eu comentei para torná-lo mais visível, mas você pode simplesmente deletar a linha).
...
?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
}
//get_sidebar();
get_footer(); ?>Vamos fazer mais uma coisa para tornar nosso modelo de página mais fácil de estilizar. Quando você adiciona CSS, muitas vezes você precisa saber se a página tem uma barra lateral ou não, para ajustar as colunas/layout. Lembre -se body_classque fornece um monte de classes úteis para o elemento body? E se adicionássemos uma classe personalizada ao corpo que nos informasse se a página atual tem uma barra lateral ou não?
Filtrar embody_class
Observação: você deve ter notado que qualquer página ou postagem que usa um modelo de página já recebe uma classe de corpo específica; “page-template-” – em nosso exemplo "page-template-pagetemplate-fullwidth". É uma classe bastante longa e, além disso, queremos tornar nosso tema mais flexível – e permitir largura total em outros modelos além dos que usam modelo de página. Por exemplo, você geralmente não quer uma barra lateral na primeira página, certo?
Nota: Isso apenas adiciona uma classe ao corpo para que o estilo fique mais fácil, na verdade não desativa a saída da barra lateral. Você tem que se lembrar de excluir get_sidebar()onde não quiser.
Vamos adicionar um filtro para body_classadicionar uma classe de barra lateral personalizada em nosso functions.php, para que você possa adicionar mais posteriormente em outros casos em que não deseja a barra lateral. O WordPress tem uma boa tag condicional para verificar se um template de página está em uso; is_page_template()onde você coloca o nome do seu modelo de página como parâmetro. Queremos adicionar uma classe se isso não for verdade, então adicionamos o inverso com “!”:
add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
if (!is_page_template('pagetemplate-fullwidth.php')) {
$classes[] = 'has-sidebar';
}
return $classes;
}Provavelmente, enquanto estiver desenvolvendo os modelos, você ocasionalmente encontrará modelos aos quais não deseja adicionar a classe da barra lateral e, à medida que for adicionando esses casos dentro deste arquivo if. Por exemplo, se você não quiser a classe da barra lateral na página inicial, poderá adicionar !is_front_page(). Isso adicionará a classe ‘has-sidebar’ em todas as páginas, exceto na página inicial e no modelo de página:
if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))Cabe a você quantos modelos de página você deseja e o que eles devem conter. Esta foi apenas uma simples introdução. Se você estiver interessado em como consultar outras postagens dentro de modelos de página, dê uma olhada na próxima etapa.