Como criar um modelo de página WordPress personalizado

Um site WordPress verdadeiramente profissional quase certamente conterá modelos de página personalizados. Na verdade, muitos dos tipos mais comuns de sites dependem de modelos. Um site de imobiliária precisará de um modelo para suas casas, um site de comércio eletrônico para seus produtos, um site de associação para seus membros e assim por diante.

Um modelo define a aparência das páginas e postagens no front-end. É o blueprint que diz como e onde você exibirá todo o conteúdo de cada postagem. Por exemplo, qualquer alteração feita em seu modelo de receitas em um site de culinária afetará como todas as receitas aparecem no front-end.

Existem dois tipos de modelos de página WordPress personalizados que irei percorrer:

1. Um modelo para páginas regulares
2. Um modelo para páginas de postagem única

Por que você precisará de um modelo WordPress personalizado para páginas regulares

Um modelo é uma maneira fácil de garantir que páginas semelhantes sigam a mesma estrutura. Em vez de criar o layout para cada página individualmente, você pode apenas criar o modelo uma vez e atribuí-lo às páginas que desejar. Essas páginas seguirão o modelo.

Vamos imaginar um exemplo. Em um site de culinária, você pode ter várias páginas com dicas de culinária, como “Como fazer o macarrão perfeito”, “Como cozinhar ovos” e assim por diante.

Tenho um e-book sobre culinária que desejo exibir em todas essas páginas. Em vez de editar cada página com o mesmo conteúdo (o que levaria muito tempo), posso apenas criar um modelo uma vez e atribuir o modelo às páginas. Dessa forma, cada página conterá uma frase de chamariz para fazer o download do meu e-book.

Em ambas as páginas acima, você pode ver minha frase de chamariz no lado direito. Isso porque atribuí o mesmo modelo a ambas as páginas.

As duas maneiras de criar um modelo de página WordPress personalizado

Existem duas maneiras de criar seu modelo de página WordPress personalizado:

• Da maneira mais difícil . Os temas fornecem automaticamente os arquivos PHP que definem os modelos no WordPress. Ao criar um tipo de postagem personalizado (como receitas), você precisará editar esses campos PHP ou criar novos para garantir que seu site exiba suas postagens.
• O caminho fácil. Você pode usar um plugin do WordPress como o conjunto de ferramentas para criar seus modelos. O conjunto de ferramentas cria modelos em minutos e sem qualquer codificação. Além disso, com os blocos do conjunto de ferramentas você pode adicionar blocos ao editor do WordPress Gutenberg com conteúdo dinâmico.

Abaixo vou mostrar a maneira mais fácil.

Primeiro, criarei um modelo para páginas regulares que conterá uma chamada à ação no lado direito.

Em segundo lugar, vou criar um modelo para o meu tipo de postagem personalizada de receitas.

Como criar um modelo de página WordPress personalizado para páginas regulares

Etapa 1: Criação da estrutura do modelo de conteúdo

Primeiro, você precisa criar o modelo de conteúdo para suas páginas. Com o conjunto de ferramentas instalado, você pode abrir um novo modelo de conteúdo e começar a adicionar seus blocos.

Primeiro, organizo a estrutura do modelo. Abaixo você pode ver que adicionei o bloco de grade do próprio conjunto de ferramentas, o que me permite dividir meu modelo em seções. Dividi o modelo em dois e expandi a seção à esquerda para que ocupasse 75% da página.

Etapa 2: adicione conteúdo ao seu modelo

Agora que tenho a estrutura, preciso inserir os blocos com o conteúdo que desejo exibir. À esquerda, adiciono o conteúdo da postagem. Tudo que eu preciso fazer é inserir o bloco de campo único do Toolset que me permite selecionar qualquer fonte que eu gosto para o conteúdo.

Abaixo, seleciono o conteúdo da postagem no lado direito como a fonte do bloco.

Para o lado direito do modelo, adicionarei a frase de chamariz. Tudo o que preciso fazer é selecionar os blocos que desejo, dependendo do conteúdo. Abaixo, usei o bloco de título e o bloco de botões do conjunto de ferramentas. Para o bloco de botões, também incluo um link para o livro.

Etapa 3: estilize os blocos

Ao combinar o WordPress com o conjunto de ferramentas, você pode estilizar os blocos que adiciona ao seu modelo. Se você escolheu criar blocos “da maneira mais difícil”, então você precisaria confiar em suas habilidades de codificação para um bom estilo.

Ao clicar em um bloco, você verá do lado direito uma série de opções para estilizar e aprimorar seu modelo.

Em “Tipografia”, você pode alterar o seguinte:

• Fonte
• Tamanho da fonte
• Espaçamento
• Estilo
• Cor do texto

Isso não é tudo. Em "Configurações de estilo", você também pode alterar o seguinte:

• Cor de fundo
• Margem / preenchimento
• Fronteira
• Sombra da caixa

Abaixo, adicionei uma nova cor de fundo para a frase de chamariz. Observe como você não precisa codificar nenhuma alteração; em vez disso, você simplesmente seleciona as cores e qualquer outro estilo que desejar.

Etapa 4: ajuste o modelo para diferentes tamanhos de tela

Provavelmente, você está construindo seu modelo em um laptop ou desktop, mas é importante lembrar que seus usuários podem não estar visualizando o site no mesmo tamanho de tela. Na verdade, uma maioria crescente usará seu tablet ou dispositivo móvel.

Portanto, pode ser necessário ajustar o modelo para cada tamanho de tela. Isso é bastante fácil de fazer com o conjunto de ferramentas e o WordPress.

Na barra lateral direita ao lado de cada elemento de estilo, há uma opção para alternar entre desktop, tablet e celular.

Como você pode ver, quando eu alterno entre as opções, o modelo se ajusta para que você possa verificar como o modelo ficará em cada dispositivo.

Etapa 5: atribua o modelo às suas páginas

Agora que tenho um modelo, só preciso atribuí-lo às páginas corretas. Depois de fazer isso, cada página exibirá o mesmo modelo.

Tudo que preciso fazer é editar cada página e selecionar o modelo de conteúdo correto.

No front-end, agora verei o modelo em qualquer página que eu atribuí-lo.

Por que você precisará de um modelo de página WordPress personalizado para postagens únicas

Além de criar modelos para postagens regulares, você provavelmente também precisará de modelos para cada uma das postagens em um tipo de postagem personalizada.

Para meu site de culinária, criei um tipo de postagem personalizado para minhas receitas. Abaixo você pode ver uma das minhas receitas no back-end. Observe todos os campos personalizados que criei para ele, como Prep Time, Cook Time e Recipe Image.

Ainda não atribuí um modelo às minhas receitas. Veja o que acontece quando olhamos a receita sem um modelo no front-end.

Como você pode ver, nenhum dos campos personalizados aparece no front-end. Na verdade, tudo o que você pode ver é o conteúdo principal da postagem, como o título e o corpo da postagem. É por isso que um modelo é tão importante para suas postagens individuais, pois permite que você exiba todo o seu conteúdo, incluindo campos personalizados.

Abaixo você pode ver duas das minhas receitas no front-end. Agora você pode ver os campos personalizados porque atribuí um modelo a eles.

Abaixo vou mostrar como criei este template para minhas receitas.

Etapa 1: Criação do modelo

A primeira coisa que preciso fazer é criar o modelo no qual adicionarei meu conteúdo. Posso fazer isso no painel do conjunto de ferramentas no back-end do WordPress.

Selecionando o modelo desta forma, atribuo automaticamente o modelo a todas as receitas que criei. Portanto, não preciso voltar a cada receita e atribuir manualmente o modelo.

Etapa 2: Adicionando o conteúdo ao modelo

Agora, no modelo de conteúdo, posso começar a adicionar e estruturar o conteúdo como fiz no modelo anterior para minhas postagens regulares.

Mais uma vez, posso adicionar o bloco Toolset Grid para criar a estrutura do template.

Agora posso começar a adicionar meus blocos ao meu conteúdo. Por exemplo, nas minhas receitas, tenho uma imagem na coluna da esquerda. Do conjunto de blocos de Gutenberg, posso adicionar o bloco de imagem do Toolset. Eu preciso da versão do bloco do Toolset porque me permite adicionar conteúdo dinâmico.

Conteúdo dinâmico significa que você pode criar um elemento como uma imagem e para cada uma das postagens, ele desenhará o conteúdo correto para aquela postagem em particular. Por exemplo, conteúdo dinâmico significa que minha receita para bolos de banana exibirá, você adivinhou, um bolo de banana. Caso contrário, o conteúdo seria estático e, em vez de um bolo de banana, você veria qualquer imagem que eu inserir ao criá-la no modelo.

Usando o conjunto de ferramentas e o WordPress, posso selecionar a fonte dinâmica de cada um dos meus blocos para informar o que exibir.

Por exemplo, criei um novo bloco para adicionar um dos meus campos personalizados, Tempo de preparação. Depois de adicionar o bloco, posso selecionar o campo Prep Time como a fonte do bloco no lado direito. Este bloco também é dinâmico, pois o tempo de preparação varia de acordo com os requisitos da receita.

Existem vários tipos diferentes de blocos que você pode adicionar, incluindo um bloco de campo de repetição para adicionar vários itens (como várias linhas para uma receita), um bloco deslizante de imagem, bloco do YouTube e muito mais.

Etapa 3: estilize seus blocos

Assim como com o primeiro modelo para postagens regulares, posso estilizar cada um dos meus blocos.

Etapa 4: ajuste o modelo para diferentes tamanhos de tela

Novamente, semelhante ao modelo anterior, posso ajustar a estrutura para diferentes tamanhos de tela.

Etapa 5: verifique a aparência do modelo com cada uma de suas postagens

Por fim, você também pode escolher qual receita deseja ver no seu modelo para ver se ela se encaixa em todas. Use o menu suspenso na parte superior da página para alternar entre as postagens.

Quando estiver pronto, você pode verificar seu modelo no front-end.

E assim, tenho um template para minhas receitas. Agora, quando eu criar uma receita totalmente nova, ela seguirá imediatamente a estrutura do modelo.

Comece a construir seu próprio modelo de página WordPress personalizado hoje

Agora é sua vez de ver como é fácil construir seu próprio modelo de página do WordPress. Tudo o que você precisa fazer é baixar o conjunto de ferramentas e, em seguida, verificar sua documentação para ver com que rapidez você pode criar um modelo para suas postagens sem codificação.