¿Custom Page Templates en Frontity? Vigentes y muy sencillas

Publicado el
🦑 You can read this post in english. 🐙 Podes ler o post em português.

Las Custom Page Templates son el mecanismo del que disponemos en Wordpress para crear plantillas globales con diseños específicos que se pueden aplicar a una o varias páginas.

Por ejemplo, si en un site necesitamos dos tipos de página: una a una columna y otra con dos (contenido principal y barra lateral), una buena opción es usar la página por defecto, page.php, para la primera y crear un template, sidebar-page.php, para la segunda. De esta forma, para cada nueva página, podemos elegir uno u otro diseño desde el editor.

¿Y en Frontity, donde el front no se genera a partir de los templates en php del theme de Wordpress si no desde una app en React? Pues las Custom Page Templates continuan siendo la mejor opción para trabajar con múltiples diseños de página porque permiten:

  • seleccionar el diseño deseado desde el editor de una página,
  • asignarles grupos de campos ACF, extendiendo las posibilidades de edición,
  • que en la REST API (y en el state de Frontity) se muestre el nombre del archivo del template asignado a una página, lo que facilita a Frontity servir el layout correcto en cada caso.

Veamos a hora el proceso completo con un ejemplo sencillo.

Wordpress

Creamos un archivo php, custom-page-template.php por ejemplo, con un comentario al inicio como el siguiente:

Donde “Template name:” es la marca que indica a Wordpress que ese archivo es un page template y “My Custom Page Template Name” el nombre de nuestro nuevo template, que aparecerá en selector de templates del editor de cada página.

¿Algo más por hacer? no, eso es todo en la parte del Wordpress 😎

Eso sí, para evitar errores (y algún dolor de cabeza) debemos tener en cuenta que:

  • las plantillas personalizadas solo funcionan si tenemos un index.php (puede estar vacío) en la raíz de nuestro theme de Wordpress,
  • no debemos usar nunca page- como prefijo en el nombre del archivo, ya que WordPress lo interpretará como una plantilla especializada destinada a aplicarse solo a una página del sitio.

Frontity

Creamos tres componentes:

  1. Page
  2. PageDefault
  3. PageTemplate

En el primero incluimos un Switch que sirve el segundo, PageDefault, o el tercero, PageTemplate, en función del valor de la propiedad template que aparece en los datos de la página del state de Frontity. Si la página publicada en Wordpress usa la plantilla de página por defecto, este valor llegará vacío y si usa una custom, vendrá con el nombre del archivo de la plantilla, custom-page-template.php en nuestro caso.

Y ya por último, en el segundo y tercero incluimos los layouts propiamente dichos de ambos tipos de página.

Sencillo, ¿no?

Si tenéis alguna duda, consideráis que se puede mejorar algo o simplemente queréis saludar, podéis escribirme a hola@xulioze.com 😋