Como usar un motor de plantillas (Template engine) en Wordpress

Aunque trabajo principalmente con Drupal, de vez en cuando realizo algunas tareas de WordPress. No soy un gran fan de Wordpress, pero a veces hay que hacer lo que hay que hacer.

En este post quiero mostrarte cómo usar Twig como motor de plantillas en Wordpress. No voy a explicar cómo instalar Wordpress, pero te mostraré cómo instalar Twig y usarlo en tu tema.

Crearemos un plugin personalizado que crea plantillas personalizadas que usan Twig como motor de plantillas.

¿Que es un motor de plantillas?

Mas conocido por su version ingles, un template engine es una herramienta que te permite separar tu lógica de tu presentación. Es una forma de mantener tu código limpio y mantenible. También es una forma de hacer tu código más legible y más fácil de entender.

¿Qué es Twig?

Twig es un template engine usado por muchos CMSs populares, como Drupal, también es usado por muchos frameworks populares, como Symfony.

How to use Twig in Wordpress

Usaremos Timber para integrar Twig en Wordpress. Timber en si es otro plugin de Wordpress que nos facilita el uso de Twig en Wordpress, puede leer mas en el enlace anterior.

Paso 1: Crear el plugin

En la carpeta de plugins, crea una nueva carpeta llamada twig-plugin. Dentro de esa carpeta, crea un nuevo archivo llamado twig-plugin.php. Este es el archivo principal de nuestro plugin.

Paso 2: Crea el archivo composer.json

Dentro de la carpeta twig-plugin, crea un nuevo archivo llamado composer.json. Este archivo contendrá todas las dependencias que nuestro plugin necesita. Usaremos composer para instalar estas dependencias.

composer.json

{
  "require": {
    "timber/timber": "^1.23",
  },
  "config": {
    "allow-plugins": {
      "composer/installers": true
    }
  }
}

Paso 3: Instalar las dependencias

Ahora que tenemos creado nuestro archivo composer.json, podemos instalar las dependencias usando composer. Si no tienes composer instalado, puedes descargarlo desde aquí.

composer install

Paso 4: Crear el codigo del plugin

Ahora que tenemos nuestro plugin instalado, podemos activarlo y crear una plantilla. Para activar el plugin, ve a la página de plugins y haz clic en el enlace activar junto al nombre del plugin. Una vez activado el plugin, necesitamos crear el código que nos permitirá registrar plantillas personalizadas y usarlas en nuestro tema.

<?php
/*
Plugin Name: Plugin Twig
Description: Creates Template pages using Twig
Version: 1.0.0
Author: Mohamed Bermaki
Author URI: https://www.bermaki.com/
License: GPLv2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  plugin-twig
*/

require_once ABSPATH . '/vendor/autoload.php';

function my_template_array() {
	$temps = [];

	$temps['my-template.php']         = __( 'My Template Name', 'plugin-twig' );

	return $temps;
}

function my_template_register( $page_templates, $theme, $post ) {
	$templates = my_template_array();

	foreach ( $templates as $tk => $tv ) {
		$page_templates[ $tk ] = $tv;
	}

	return $page_templates;
}

add_filter( 'theme_page_templates', 'my_template_register', 10, 3 );

function my_template_select( $template ) {
	global $post, $wp_query, $wpdb;

	$page_temp_slug  = get_page_template_slug( $post->ID );
	$custom_template = plugin_dir_path( __FILE__ ) . 'templates/' . $page_temp_slug;

	// Check if the custom template exists in the theme directory
	if ( $page_temp_slug && file_exists( $custom_template ) ) {
		return $custom_template;
	}

	return $template;
}

add_filter( 'template_include', 'my_template_select', 99 );

Vamos a desglosar lo que hace cada parte del código:

my_template_array()

Esta funcion crea un array asociativo llamado $temps que contiene los nombres de los archivos de plantilla como claves y los nombres traducidos correspondientes como valores. Estas plantillas se pueden usar en el administrador de WordPress para asignar una plantilla personalizada a una página.

my_template_register()

Esta funcion toma un array de plantillas de pagina existentes ($page_templates), el tema actual ($theme), y un objeto post ($post). Utiliza la funcion my_template_array() para obtener una lista de nombres de archivos de plantilla personalizados y sus nombres traducidos. Luego agrega estas plantillas personalizadas al array $page_templates y devuelve el array modificado.

add_filter( 'theme_page_templates', 'my_template_register', 10, 3 )

Esta linea conecta la funcion my_template_register al filtro theme_page_templates. Cuando Wordpress procesa las plantillas de pagina, este filtro permite que las plantillas personalizadas se agreguen a la lista de plantillas disponibles.

my_template_select()

Esta funcion comprueba si existe un archivo de plantilla personalizado en el directorio del tema. Primero obtiene el slug de la plantilla de pagina actual que se esta utilizando. Luego, construye la ruta al archivo de plantilla personalizado dentro de un directorio templates dentro del plugin. Si el archivo de plantilla personalizado existe, devuelve la ruta a ese archivo. Si no, se vuelve a la plantilla original.

add_filter( 'template_include', 'my_template_select', 99 );

Esta linea conecta la funcion my_template_select al filtro template_include. Este filtro permite que el plugin anule la plantilla utilizada para mostrar una pagina de Wordpress. En este caso, la funcion comprueba la existencia de una plantilla personalizada y la utiliza si esta disponible, o vuelve a la plantilla predeterminada.

Paso 5: Crear una plantilla personalizada

Mis plantillas se encuentran en el directorio twig-plugin/templates/.
Los archivos de plantilla se nombran según el nombre de la plantilla que registramos en la función my_template_array().

Aqui pongo un ejemplo de un archivo de plantilla:

<?php

/**
 * Template Name: My Template Name
 */

get_header();

use Timber\Timber;

$context = Timber::get_context();
$context['myvar'] = 'Hello World';


Timber::render( 'my-template.twig', $context );

get_footer();

Usamos Timber para renderizar la plantilla. Timber::render espera dos parametros, el primero es el nombre del archivo de plantilla y el segundo es el array de contexto. El array de contexto contiene todas las variables que queremos pasar a la plantilla, en nuestro caso estamos pasando una variable llamada myvar que contiene la cadena Hello World.

Paso 6: Crear la plantilla Twig

Mi archivo twig se encuentra en el directorio twig-plugin/templates/views. El nombre del archivo twig es el mismo que el nombre del archivo de plantilla. De esta manera podemos mantener todo organizado.

<h2>{{ myvar }}</h2>

Tan simple como eso, ahora podemos usar Twig en nuestro tema de Wordpress.

Un enfoque más MVC

Piensa en el archivo PHP como un controlador, y el archivo Twig como una vista. El archivo PHP es responsable de obtener los datos y pasarlos a la vista. La vista es responsable de mostrar los datos.

Como ejemplo usare una plantilla php como esta:

get_header();

use Timber\Timber;

$myHelper = new HelperClass();
$context                 = Timber::context();

if ( ! empty( $_POST ) ) {
	$new_date = "";
	if ( ! empty( $_POST['date'] ) ) {
		$new_date = date( 'd/m/Y', strtotime( $_POST['date'] ) );
	}
	// EDITAR
	if ( isset( $_GET['id'] ) ) {
		$myHelper->changeDate( $_POST, $new_date );
	} else {
		$myHelper->createDate( $_POST, $new_date );
	}
}


$context['btnText'] = 'Save';

Timber::render( 'my-tempalte.twig', $context );

get_footer();

Y esto es todo por hoy! Espero que hayas encontrado útil este post. Si tienes alguna pregunta, por favor contáctame en LinkedIn.

Happy coding!