Timber, ¿por qué escribir Twig en WordPress?

Vamos a explorar Timber para WordPress : un complemento o una dependencia Composer (su elección) para configurar una arquitectura MVC.

Timber separa la plantilla HTML del código lógico PHP utilizando Twig para reemplazar la plantilla PHP clásica de WordPress.

¿Cual es la ventaja de Timber frente al modelo tradicional ?

Al separar la lógica y la plantilla, terminamos con un código que no solo es más limpio sino también más fácil de mantener y de entender.

Tomando el ejemplo a continuación, podemos ver fácilmente que es más fácil leer y comprender Twig que PHP cuando se trata de plantillas.

<?php get_header(); ?>
<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
<article>
  <h1><?php the_title(); ?></h1>
  <div>
    <?php the_content(); ?>
  </div>
</article>
<?php endwhile; endif; ?>
<?php get_footer(); ?>

Con Timber :

{% extends "base.twig" %}
{% block content %}
<article>
  <h1>{{ post.title }}</h1>
  <div>
      {{ post.content }}
  </div>
</article>
{% endblock %}

Además Timber proporciona filtros muy prácticos.

Uso simplificado de códigos cortos:

  <section">
    {{ post.custom_shortcode_field|shortcodes }}
  </section>

Limite el contenido a 30 palabras:

  <p>
    {{ post.post_content|excerpt(30) }}
  </p>

También facilita el uso de imágenes y sus diferentes tamaños.

  <img src="https://www.alsacreations.com/tuto/lire/{{ post.thumbnail.src }}" />

  <img src="https://www.alsacreations.com/tuto/lire/{{ post.thumbnail.src("medium') }}" />

Configurar Timber

La instalación de Timber es realmente muy simple y no necesita realizarse en un WordPress en blanco. Por tanto, es posible añadirlo a un proyecto ya existente sin correr el riesgo de romperlo todo. Convive perfectamente con las plantillas PHP WordPress clásico.

Hay dos soluciones para instalarlo: con Composer o mediante WordPress. El resultado es el mismo pero cabe señalar que la versión de WordPress no siempre es la más reciente.

Con compositor

Todo lo que tiene que hacer es ingresar el siguiente comando, en la raíz de su proyecto de WordPress o en la raíz de su tema.

composer require timber/timber

Luego, si este no es el caso, tendrá que cargar las dependencias de Composer en el proyecto. Simplemente incluya el código a continuación en su archivo functions.php.

<?php
// Dépendances composer.
require_once __DIR__ . '/vendor/autoload.php';

// Initialisation de Timber.
new TimberTimber();

Y eso es todo, Timber ahora está instalado en el proyecto y listo para usar. ✔️

Con el complemento oficial de WordPress

Simplemente vaya a la página del complemento Timber e instálelo como de costumbre en el administrador de WordPress. Una vez descargado y activado, Timber está listo para usar. ✔️

Uso concreto

Como se dijo antes, Timber configura una arquitectura MVC (Modelo, Vista, Controlador).

En WordPress, la plantilla es administrada por Template Hierachy y WP Query. Entonces solo tenemos que lidiar con la Vista y el Controlador.

La vista será administrada por Timber y Twig, y el controlador por código PHP.

Ver una publicación

Básicamente, WordPress buscará el archivo. single-post.php, con Timber, ¡eso no cambia!

Sin embargo single-post.php solo contendrá el código PHP y no la plantilla HTML.

<?php
$context = Timber::context();
$context['post'] = Timber::get_post();

Timber::render('templates/single-post.twig', $context);

En este ejemplo, el $context es una matriz PHP que Timber genera para nosotros y que contiene mucha información útil en la mayoría de las plantillas. Por ejemplo, tendremos acceso al nombre del sitio, la descripción del sitio, etc.

Luego agregamos la clave post en esta tabla que contendrá los datos del puesto en cuestión. Timber nos ofrece su propio método para recuperarlo.

Finalmente, le decimos a Timber que renderice la plantilla. single-post.twig pasándole la información que necesita.

Dentro single-post.twig accedemos al post con la clave post, como se define en el archivo PHP. Luego solo tenemos que acceder a las diferentes propiedades como el título, descripción, etc.

{% extends "base.twig" %}
{% block content %}

<h1>{{ post.title }}</h1>

{% endblock %}

Este ejemplo tiene todo lo que necesitará en la mayoría de los casos.

No es tan complicado, ¿verdad?

Usando funciones PHP

En un archivo Twig todavía es posible utilizar funciones nativas de PHP y WordPress. Por ejemplo get_header() y get_footer().

{{ function('get_header') }}

Corte de bloque

En los ejemplos anteriores, es posible que haya notado las palabras extends y block. De hecho, Timber y Twig no solo permiten administrar las plantillas en un solo archivo.

Supongamos que tenemos un archivo base.twig agrupando elementos HTML que estará presente en todas partes del sitio, como el encabezado y el pie de página.

{{ function('get_header') }}
  {% block content %}
  {% endblock %}
{{ function('get_footer') }}

Tomando el ejemplo anterior, le decimos a Timber que queremos «completar» el archivo base.twig. Luego solo tenemos que definir el bloque en el que queremos inyectar el contenido. Aqui esta el bloque content.

{% extends "base.twig" %}
{% block content %}

<h1>{{ post.title }}</h1>

{% endblock %}

Por tanto, nuestro resultado será:

{{ function('get_header') }}
  <h1>{{ post.title }}</h1>
{{ function('get_footer') }}

El bucle for

La mayor simplificación hecha por Timber es el bucle. for.

De hecho, ya no es necesario abrir y cerrar etiquetas. <?php y ?> por todas partes, hasta el punto de perderse en ella.

Terminamos con un bucle similar con lo que tenemos en Vue.js por ejemplo.

{% for post in posts %}
<article>
  <h1>{{ post.title }}</h1>
  <div>
      {{ post.content }}
  </div>
</article>
{% enfor %}

El tema base para iniciarse

Al instalar Timber en un proyecto en blanco, es fuertemente Se recomienda utilizar el tema de inicio oficial.

Le proporcionará directamente la arquitectura de carpetas correcta para el mantenimiento del tema. Facilitará enormemente todo el trabajo a realizar para renderizar un archivo Twig con la información correspondiente, etc.

Una vez descargado, simplemente colóquelo en la carpeta themes de WordPress. Entonces terminamos con:

Para el resto del desarrollo, será suficiente modificar los archivos Twig según nuestras necesidades. Los archivos PHP también se puede modificar, para agregar los campos ACF por ejemplo.

Conclusión

¡Bravo! ¡Ahora sabes para qué sirve Twig, y especialmente por qué es súper práctico!

• Timber ofrece un enfoque de WordPress más limpio y «preparado para el futuro» que el método tradicional. Además, funciona perfectamente en un flujo de trabajo. Wordplate y hace que el desarrollo de WordPress sea mucho más moderno y agradable.
• Finalmente, si eres desarrollador JavaScript, y sobre todo Vue, La sintaxis de Twig será muy sencillo, será algo natural para ti.

¿Qué opinas de Timber y el modelo-vista-controlador en WordPress?