Mostrando diferentes maquetas en los posts de WordPress

Por Ernesto Jiménez · 15 mayo, 2014
Publicado en Tutoriales

post-templates

Ya sabemos que WordPress es un CMS muy flexible y permite crear diferentes maquetas para páginas (page templates) pero para no para los posts (post templates). Es cierto que podemos crear diferentes archivos single en función del tipo de post pero si queremos usar diferentes maquetas para los posts de un mismo tipo la cosa se complica. Para el nuevo diseño de mi sitio (en su fase final de desarrollo y con lanzamiento previsto para el 27 de mayo) quería usar diferentes maquetas para los artículos. Los nuevos posts abren con una cabecera enorme con una foto de fondo que va al 100%.

El problema está con los posts antiguos de archivo, que no tienen asignada esta imagen. Necesito una maqueta que muestre texto únicamente. Podría evaluar simplemente la fecha del post y mostrar la cabecera con imagen solo para los posts recientes pero me gusta tener más flexibilidad, así en un futuro puedo ir creando estas imágenes para posts antiguos. Además quiero crear otra maqueta que abra con una imagen pero no al 100% sino dentro de la columna de texto.

En resumen, al crear un nuevo post el editor me ofrecerá tres opciones de maqueta. Para conseguir esto hay que hacer una serie de pasos:

1. crear los diferentes archicos con las estructuras HTML que reflejen las maquetas

2. preparar el gestor para que nos permita asignar una u otra maqueta a cada post

3. hacer que nuestro tema cargue el archivo adecuado al visitar cada post

Empecemos:

Necesito crear tres archivos diferentes, cada uno con su estructura HTML particular:
1. con imagen al 100% en la cabecera
2. post sin imagen de cabecera, solo texto.
3. imagen destacada dentro de la columna de texto

Antes de seguir debo decir que existen plugins que trasladan la funcionalidad de las plantillas de página (page templates) a los posts. Están bien pero resulta que si ya usamos Advanced Custom Fields, podemos aprovecharlo y ahorrarnos este código extra. Es muy fácil.

Usando ACF para gestionar las maquetas

Creamos un grupo de campos personalizado que se llame Maquetas, por ejemplo. Lo vamos a ubicar en el lateral para mantener la coherencia con el lugar que ocupa esta funcionalidad en la edición de páginas.
En este grupo crearemos el campo post_template. El tipo de campo que mejor refleja este comportamiento es el desplegable. Creamos los valores: cover para el post que abre con la imagen a todo el ancho, inline para el artículo que tiene imagen destacada integrada en la columna de texto ,y  just-text para el que no tiene imagen destacada.

acf-custom-post-template

Ya tenemos la lógica interna para asignar a cada post una maqueta. Ahora nos toca crear los archivos para cada maqueta. Yo los he llamado:

  • single-cover.php
  • single-inline.php
  • single-just-text.php

Los tres son muy parecidos, cambian en el HTML que muestra una cabecera u otra. Los dos primeros, los que muestran imagen, tienen las llamadas de WordPress a la imagen destacada.
Ya solo nos quedaría hacer que nuestro tema muestre un archivo u otro en función del valor de post_template.
El lugar más apropiado para hacer la distribución es el archivo single.php. Lo primero que hacemos es recuperar la variable:

Con este valor solo nos queda cargar el archivo adecuado:

get_template_part( ‘single’, $post_template);

Este es el proceso a grandes rasgos. Lo ideal es comprobar que $post_template contenga algún valor:
if( isset( $post_template) && !empty( $post_template )){
get_template_part(‘single’, $post_template);
}else{
get_template_part( ‘single-text’ );
}

De este modo si nuestro post no tiene asignado ningún valor nuestra página mostrará la maqueta de single-text.

Tener la opción de asignar diferentes maquetas a los artículos aporta una riqueza visual al sitio muy interesante. Y una vez que tengamos esta estructura funcionando podremos crear más maquetas según las vayamos necesitando. La flexibilidad en la gestión de los contenidos es uno de los objetivos, y una de las motivaciones, que me han llevado a trabajar en la nueva versión de mi sitio web. Tengo muchas ganas de publicarla ya, estoy en esa fase de ajustes que se puede alargar eternamente (uno siempre ve aspectos que mejorar, funcionalidades que añadir…). Por eso me he marcado el 27 de mayo como fecha de publicación, para obligarme a darlo por acabado, algo que realmente no existe en esto de internet.

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de diseño web