Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Themes
Code

Modelos de página dinâmica no WordPress, Parte 1

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 2

Portuguese (Português) translation by Renato Somel (you can also view the original English article)

Os modelos de página do WordPress são uma ótima maneira de alterar completamente a forma como as páginas da Web são exibidas. Você pode usá-los para adicionar uma vasta gama de funcionalidades ao seu site.

No entanto, eles têm uma limitação na medida em que são modelos "estáticos". Você não pode personalizá-los ou afetar seu comportamento de qualquer maneira. Você só pode escolher se deseja ativar um modelo de página ou não. Por padrão, um modelo de página simplesmente executará uma função fixa, e. exiba um sitemap ou remova a barra lateral para exibir uma página de largura total.

Nesta série de tutorial, estarei olhando como você pode estender os modelos de página para serem mais flexíveis, melhorando suas funcionalidades. Vou começar apresentando como criar um modelo de página padrão através de um tema infantil, antes de avançar para uma abordagem mais flexível, onde eu criarei um modelo de página dinâmica de propósito geral.

Finalmente, vou mostrar-lhe três exemplos do mundo real de modelos de páginas dinâmicas totalmente funcionais. Também abordarei tópicos avançados, como como atribuir modelos de página a tipos de postagem personalizados.

Quer seguir em frente?

Para acompanhar esta série tutorial, você precisará de um site WordPress com acesso administrativo. De longe, a maneira mais fácil de fazer isso é usar um ambiente de desenvolvimento local. Um editor de texto dedicado também é útil, mas não é essencial.

Se você estiver desenvolvendo com o WordPress através de um servidor remoto, você precisará editar arquivos de tema através do administrador do WordPress ou editar arquivos localmente e usar o software FTP para transferi-los de volta para o servidor. Por uma questão de simplicidade, vou assumir que você está trabalhando com o WordPress localmente durante o resto deste tutorial.

Para implementar nossos modelos de página, vou usar um tema infantil com base no tema do Vinte e dezessete, que (no momento da escrita) é o último tema padrão do WordPress. Então, se você estiver seguindo, então é uma boa idéia ter isso instalado antes de seguir em frente.

The default Twenty Seventeen Theme

Você pode usar um tema infantil com base em outro tema principal, se preferir, mas você precisará modificar algum código para fazê-lo funcionar perfeitamente com seu tema específico. O método básico, no entanto, é praticamente o mesmo para qualquer tema infantil.

Modelos da página do WordPress

Antes de aprender a tornar os modelos de página mais flexíveis, vejamos alguns detalhes básicos.

WordPress usa uma hierarquia de modelo para decidir qual modelo renderiza a página atual. O modelo usado na maioria dos cenários para páginas é page.php, mas pode ser diferente se você estiver visualizando uma página com uma identificação específica ou slug. No entanto, se você selecionar um modelo de página para uma página específica, isso sempre será usado de preferência, o que torna muito fácil personalizar qualquer página usando um modelo de página.

No entanto, se você selecionar um modelo de página para uma página específica, isso sempre será usado de preferência, o que torna muito fácil personalizar qualquer página usando um modelo de página.

  • Formulário de Contato
  • Portfolios
  • perguntas frequentes
  • Custom 404 Page
  • Página de login personalizada
  • Mapa do site
  • Página de Largura Completa
  • Página de postagens do blog
  • Página Widgetized
  • E muitos mais…

Eu poderia continuar, mas você captou a ideia. Modelos de página são legais! Você pode usá-los para quase tudo.

Se você usou o WordPress por qualquer período de tempo, é bem provável que você já tenha se deparado com um ou mais dos exemplos acima. A maioria dos temas inclui modelos de página para complementar a funcionalidade do tema, e você pode adicionar facilmente seus próprios através de um tema filho. Eu estarei cobrindo como fazer isso em breve.

Os modelos de página são tão úteis porque dão a você controle total sobre a página inteira. Você pode deixar de fora o cabeçalho, rodapé e / ou barras laterais, se desejar. Esta é uma das razões pelas quais os modelos de página de largura total são tão comuns porque é muito fácil manipular as barras laterais por meio de um modelo de página.

Para ver todos os modelos de página disponíveis no momento, acesse o editor de páginas do WordPress e acesse o menu suspenso Modelo por meio da caixa meta Modelos de página. Basta selecionar o modelo de página desejado e, assim que a página for atualizada, ela será visível na próxima vez que a página for visualizada.

Adicionando modelos de página através de um tema infantil

Como mencionado acima, usaremos um tema filho personalizado do WordPress para implementar todos os modelos de página ao longo deste tutorial. Começarei com um tema infantil básico e um modelo de página e, depois, adicionaremos mais complexidade à medida que avançarmos.

Todo o processo será abordado passo a passo, portanto, não se preocupe se você não estiver familiarizado com temas infantis e / ou modelos de página. Você estará no final do tutorial!

A ideia básica por trás dos temas filhos é que eles permitem que você personalize a aparência do seu tema atual (chamado de tema pai) de uma maneira que não será afetada quando o tema pai for atualizado.

Se o código for adicionado diretamente ao tema pai, todas as personalizações serão sobrescritas e perdidas durante uma atualização de tema agendada. Este é um ponto importante, pois qualquer tema bem mantido será atualizado regularmente. Para saber mais sobre temas infantis, recomendo dar uma olhada na documentação oficial.

É interessante notar que é tecnicamente possível usar um plug-in do WordPress para adicionar modelos de página, mas é muito mais simples usar um tema filho. Eu não quero complicar as coisas desnecessariamente com código estranho, então eu vou ficar com temas filhos para a nossa implementação de modelo de página.

Vamos começar!

Ok, teoria suficiente - vamos criar nosso modelo de página inicial! Ele estará localizado em um tema personalizado Twenty Seventeen que funcionará como nosso contêiner de modelo de página. Por isso, precisamos criar o tema filho primeiro.

Abra sua pasta de temas e crie uma nova pasta para seu tema filho. De acordo com as práticas recomendadas do WordPress, recomenda-se que você nomeie a pasta do tema filho da mesma forma que o tema pai em que é baseada, corrigida com '-child'. Como nossa pasta de tema pai é chamadatwentyseventeen, nomeie sua pasta de tema filho twentyseventeen-child. Dentro desta nova pasta, crie um único arquivo chamado style.css e adicione o seguinte bloco de comentários no topo.

Agora precisamos fazer referência a todos os estilos do tema dos vinte e dezessete pais. Se você já trabalhou com temas infantis antes, talvez esteja acostumado a adicionar uma instrução CSS @import diretamente abaixo do bloco de comentários. Isso não é mais considerado uma prática recomendada do WordPress devido a problemas de velocidade. Em vez disso, vamos enfileirar os estilos de tema pai, que serão mais eficientes.

Dentro da pasta raiz do tema filho, crie um arquivo functions.php e adicione o seguinte código para configurar um contêiner de classe vazio. Nós usaremos essa classe para todo o nosso código de configuração.

Nota: O fechamento de instrução PHP não é necessário, mas você pode adicioná-lo se preferir.

Agora adicione um gancho e callback para enfileirar os vinte e dezessete estilos de tema pai, em vez de importá-los diretamente dentro do arquivo style.css. Faça isso adicionando dois novos métodos de classe.

Salve suas alterações e ative o tema filho. Agora você tem um tema infantil em pleno vigor, embora simples, de vinte e dezessete anos. Para testar se está funcionando corretamente, adicione uma linha de CSS personalizado ao style.css.

Se tudo estiver bem, então você deve ver todo o texto do seu site agora colorido de um vermelho berrante bom!

Updated styles as per the child theme

Não se esqueça de excluir o CSS de teste antes de prosseguir. Agora que o tema filho está ativo, podemos começar a implementar nosso primeiro modelo de página.

Adicionando nosso primeiro modelo de página

Uma coisa vale a pena mencionar sobre onde você armazena modelos de página dentro do seu tema filho. Você pode armazenar os modelos de página diretamente dentro da pasta do tema raiz ou em uma pasta de nível superior. Não importa qual você escolher; qualquer local é bom.

No entanto, se você tiver vários modelos de página, poderá decidir armazená-los em uma pasta para fins organizacionais. O nome da pasta não é importante, mas deve estar localizado diretamente dentro da pasta do tema raiz, caso contrário o WordPress não reconhecerá seus modelos de página. Para este tutorial, usarei uma pasta chamada page-templates.

Vamos agora adicionar um novo modelo de página ao tema filho. A maneira padrão de fazer isso é fazer uma cópia do arquivo de modelo de tema page.php do tema pai e adicioná-lo ao seu tema filho. Você pode nomear o arquivo do jeito que quiser, mas eu recomendo incluir algo que o torne reconhecível como um modelo de página. Eu vou com test-page-template.php.

Depois de copiar o arquivo page.php (e renomeá-lo) para a pasta page-templates, a estrutura do tema filho agora deve estar assim:

Adding the first page template

Abra test-page-template.php e substitua o bloco de comentários no topo do arquivo pelo seguinte.

Essa etapa é muito importante, pois o bloco de comentários diz ao WordPress para reconhecer o arquivo como um modelo de página e o adicionará à lista de modelos de página disponíveis na tela do editor de páginas.

O código do modelo de página inteira agora deve ter esta aparência.

Vamos testar nosso modelo de página. Vá para o administrador do WordPress e edite qualquer página existente ou crie uma nova. Na tela do editor de páginas, selecione o menu suspenso Modelo da caixa meta Atributos da página para atribuir nosso modelo de página à página atual.

The Page Attributes

Como simplesmente copiamos o arquivo de modelo page.php do tema pai, nosso modelo de página personalizado não está fazendo nada além de exibir a página atual, o que não é muito útil. Além disso, não precisaremos exibir o conteúdo ou os comentários do editor, portanto, remova-os do modelo de página durante o loop e adicione uma mensagem personalizada. Altere o conteúdo do loop while para o seguinte.

Salve isso e visualize a página no fim

Viewing the page template on the front-end

Nota: Se você não puder ver a mensagem personalizada, certifique-se de ter selecionado o modelo de página personalizado no editor de páginas e salvado para atualizar as configurações.

Vamos agora tornar nosso modelo de página personalizado um pouco mais útil. Substitua a mensagem que adicionamos acima com o seguinte código para gerar um sitemap de todas as páginas publicadas.

Isso resultará na seguinte saída.

Viewing the sitemap

É fácil ver o quão úteis os modelos de página podem ser. Mas nós podemos fazer ainda melhor!

Conclusão

Até agora, criamos um tema filho e o usamos para implementar nosso modelo de página padrão. No próximo tutorial, mostrarei passo a passo como estender isso, demonstrando como os modelos de página podem se tornar mais flexíveis.

Especificamente, criaremos um modelo de página dinâmica de uso geral, adicionando controles personalizados à tela do editor de páginas. A lógica de controle será então adicionada ao modelo de página para nos permitir personalizar diretamente como o modelo de página é renderizado.

WordPress tem uma economia incrivelmente ativa. Existem temas, plugins, bibliotecas e muitos outros produtos que ajudam você a construir seu site e projeto. A natureza de código aberto da plataforma também a torna uma ótima opção a partir da qual você pode aprimorar suas habilidades de programação. Seja qual for o caso, você pode ver o que temos disponível no Envato Marketplace.

Este é o meu primeiro tutorial (seja gentil!) Então sinta-se livre para deixar qualquer comentário que você possa ter no feed de comentários abaixo. Eu farei o meu melhor para responder a todas as perguntas.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.