Custom Page Templates em Frontity? Vigentes e muito simples

Publicado o

As Custom Page Templates são o mecanismo do que dispomos em Wordpress para criarmos templates globais com designs específicos que podem se aplicar a uma ou mais páginas.

Por exemplo, se num site precisamos de dous tipos de página: uma a uma coluna e outra com duas (conteúdo principal y coluna lateral), uma boa opção é usarmos a página por defeito, page.php, para a primeira e criarmos um template, sidebar-page.php, para a segunda. Deste jeito, para cada nova página, podemos eleger um ou outro layout desde o editor.

E em Frontity, onde o frontend não se gera com os templates em php do theme de Wordpress senão desde uma app em React? Pois as Custom Page Templates continuam a ser a melhor opção para trabalharmos com múltiples designs de página porque permitem:

  • selecionar o design desejado desde o editor duma página,
  • atribuir-lhes grupos de campos ACF, extendendo as posibilidades de edição,
  • que na REST API (e no state de Frontity) apareça o nome do arqivo do template atribuido a uma página, facilitando a Frontity servir o layout correcto em cada caso.

Vejamos agora o processo completo com um exemplo singelo.

Wordpress

Criamos um arquivo php, custom-page-template.php por exemplo, com um comentário ao início como o seguinte:

“Template name:” é quem lhe indica ao Wordpress que esse ficheiro é uma page template e “My Custom Page Template Name” o nome do nosso novo template, que aparecerá no seletor de templates do editor de cada página.

¿Algo mais a fazer? não, isso é tudo na parte do Wordpress 😎

Bom, para evitarmos erros (e alguma dor de cabeça) devemos ter en conta que:

  • As templates personalizadas só funcionan se temos um index.php (pode estar vazio) na raiz do nosso theme de Wordpress,
  • nunca devemos usar page- como prefixo no nome do arquivo, pois o WordPress irá interpretá-lo como uma template especializada destinada a ser aplicada apenas a uma página do site.

Frontity

Criamos três componentes:

  1. Page
  2. PageDefault
  3. PageTemplate

No primeiro incluímos um Switch que chama o segundo, PageDefault, ou o terceiro, PageTemplate, em função do valor da propiedade template que aparece nos dados da página do state do Frontity. Se a página publicada em Wordpress utilizar a template da página padrão, este valor chegará vazio e se utilizar uma custom, virá com o nome do ficheiro da template, custom-page-template.php no nosso caso.

E finalmente, na segunda e terceira, incluímos os layouts de ambos os tipos de página.

Simples, não é?

Se tiverdes alguma pergunta, achais que há margem para melhorias ou quererdes apenas dizer olá, podeis escrever-me para hola@xulioze.com 😋