Creando temas visuales para Wordpress con Timber y Twig

Creando temas visuales para Wordpress con Timber y Twig

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ás
  • html-header.twig -> básicamente la apertura de html y la etiqueta <head>
  • single.twig -> la plantilla de post
  • index.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.


Referencias



Historias relacionadas

Respuestas JSON con Timber

Respuestas JSON con Timber

Nuestro enfoque es construir sitios web rápidos y fácilmente mantenibles y actualizables a medio/largo plazo gracias a un reducido número de dependencias.

A pesar de que nuestra plataforma de preferencia es Python/Django, los tiempos cambian y las modas se imponen. Atrás quedaron el PHP-Nuke, Post-Nuke, Xoops, Mambo, Spip, Joomla. Ahora Wordpress está en ...

Mapas interactivos sin usar Google Maps

Mapas interactivos sin usar Google Maps

Leaflet es una librería JavasScript de código abierto para embeber mapas. Es una librería perfecta para sustituir a Google Maps en los sitios en que queremos incluir un mapa de situación de nuestro negocio o una serie de marcadores con direcciones de interés.

Recientemente, hemos utilizado esta librería en el proyecto Podorunners, en el que ...

Creando temas visuales para Wordpress con Timber y Twig

Creando temas visuales para Wordpress con Timber y Twig

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 ...

Solicítanos información

 Tel: (+34) 983 070 900