Uno de los mayores problemas de los temas visuales de WordPress es la mezcla de código PHP y código HTML. Esto genera archivos difíciles de entender en muchas ocasiones y con potenciales problemas de seguridad en otras. La dificultad que supone manejar estos archivos a muchos diseñadores web, les lleva a usar plugins visuales para la construcción de temas, que solo añaden complejidad a las instalaciones: cargan el sistema consumiendo recursos; los fallos son indescifrables; las posibilidades de perder la configuración de un tema son muy altas ante cualquier bug del plugin o error humano...
Separar la lógica de la presentación mediante el uso de un sistema de plantillas es una buena práctica en el desarrollo de aplicaciones web. En Estudio Nexos llevamos aplicando este paradigma desde un primer momento, poniéndolo en práctica en nuestro sistema de gestión de contenidos SKA!CMS donde el núcleo de la funcionalidad está desarrollado en Python usando el framework Django y las plantillas se construyen usando Django template language.
El uso de Timber para WordPress permite aplicar este paradigma lo que da un nuevo impulso al desarrollo profesional de temas visuales.
¿Qué es Twig?
Twig es un lenguaje de plantillas para PHP. No solo para plantillas de Wordpress, sirve para cualquier proyecto desarrollado sobre PHP. Ofrece una sintaxis conscisa y accesible con la que trabajar.
Por ejemplo, para llamar a una variable, simplemente hay que usar dobles llaves {{ var }}. También se puede acceder a los atributos de la variable de la misma forma: {{ var.attr }}
Las estructuras de control se definen en bloques con {% ... %}. Por ejemplo:
{% for post in posts %}
{{ post.title }}
{% endfor %}
Con Twig es muy sencillo realizar loops, includes y condicionales en las plantillas.
¿Qué es Timber?
Es el plugin que relaciona WordPress y Twig. Permite separar la lógica (PHP) de la presentación (HTML) en las plantillas, lo que ofrece un entorno más manejable para el desarrollo de los temas visuales.
Por ejemplo, el código para mostrar un post sería así:
single.php
$context = Timber::get_context();
$context['post'] = new TimberPost(); // Es un objeto TimberPost nuevo, pero un post preexistente en WordPress
Timber::render('single.twig', $context);
Lo primero que se hace es definir el contexto del tema con Timber::get_context();. Este objeto contendrá cosas como los menús, en encabezado (wp_head) o el pie (wp_footer). Añadiremos a este objeto lo que sea necesario manipular en nuestras plantillas.
En el ejemplo necesitamos obtener el post que queremos mostrar en la plantilla. Usando TimberPost(); podremos buscar el post.
Finalmente, queremos mostrar algo. La función Timber::render('single.twig', $context); invocará nuestro archivo de plantilla Twig y le pasará los datos que hemos recolectado.
single.twig
<article>
<h1 class="headline">{{post.post_title}}</h1>
<div class="body">
{{post.content}}
</div>
</article>
Instalación y puesta en marcha
Podemos instalar el plugin Timber como cualquier otro, lo más sencillo es ir a la sección de plugins, buscar por "Timber" instalar y activar.
Una vez esté el plugin instalado tendremos que añadir el tema básico. Iremos al directorio de temas y añadiremos el código del tema wp-content/themes/timber-starter-theme.
El tema tiene dos partes. Los archivos .php (en wp-content/themes/timber-starter-theme). Estos archivos contienen la lógica PHP que usa WordPress y es donde:
- Elegir qué datos están disponibles para las plantillas,
- Crear tipos de contenido a medida,
- Crear páginas especiales, como páginas de categorías.
El archivo principal es functions.php donde se declaran los tipos de contenido especiales y/o las funciones específicas para nuestro tema. Lo que añadamos a este archivo será accesible desde cualquier plantilla del tema.
Podemos añadir funciones específicas a los diferentes archivos php que solo estarán disponibles para sus plantillas homónimas. Por ejemplo, si creamos una función especial en single.php, solo podremos acceder a su contenido desde single.twig.
Y la segunda parte del tema son los archivos .twig (en wp-content/themes/timber-starter-theme/templates) que son las plantillas propiamente dichas, donde no hay nada de PHP, solamente HTML escrito con Twig. Las plantillas básicas serían:
base.twig-> la plantilla principal que sirve de base para las demáshtml-header.twig-> básicamente la apertura de html y la etiqueta<head>single.twig-> la plantilla de postindex.twig-> el índice principal que sirve para los listados de posts
En general las plantillas son muy fáciles de entender y ubicar su función con echarles un vistazo.
Conclusión
La separación de la lógica de la presentación en las plantillas de WordPress que introduce Timber, permite el desarrollo de temas visuales optimizados, limpios, legibles y fácilmente manejables. Unido a una buena documentación disponible tanto de las funciones nativas de WordPress, como de Timber y Twig permite superar la dificultad de lidiar con los temas "frankestein" o los constructores visuales dando un nuevo impulso al desarrollo web sobre WordPress.
