Una de las principales ventajas de WordPress es que al contar con ua extensa comunidad de profesionales, casi nunca tendremos que partir de cero en nuestros proyectos. Siempre encontraremos algún plugin o tema que nos pueden servir como punto de partida. Sin embargo, en la mayoría de los casos esto no es suficiente y tenemos que realizar los ajustes necesarios para nuestras necesidades específicas y es aquí donde empiezan los quebraderos de cabezas con las «plantillas» de WordPress. Por ejemplo:
Esta imagen corresponde al archivo «page.php». Es una plantilla simple pero que a su vez incluye el siguiente archivo «page-content.php»
Tenemos mezclados código PHP y markup HTML. No suele ser problema para un programado, al fin y al cabo el objetivo es generar HTML desde PHP, pero para un diseñador no solo se requiere conocimiento de PHP, sino del funcionamiento y funciones de WordPress y posiblemente del tema utilizado. Con plantillas complejas puede llegar a ser un problema grave, ya que hay que añadir las particularidades del tema. Y si es un proyecto complejo se necesitarán tanto profesionales del diseño como de programación
Desde mi punto de vista lo ideal es que cada profesional trabaje libremente, sin afectar al trabajo del otro. Ahí es donde juega su papel un lenguaje de plantillas propiamente dicho, su función es precisamente separar el diseño de la lógica del programa. Existen numerosas variantes: Twig, Timber, Jade-PHP, Mustache, aunque mi preferida es Smarty. Es una decisión basada en mi experiencia personal. Podeis ver mas información sobre las otras opciones aquí y aquí.
Usando Smarty, la plantilla nos quedaría así
Es código html simple, totalmente legible para un diseñador. Todo lo que está ente llaves {...} es texto estático que no se modifica y será proporcionado desde PHP (como el «Lorem ipsum …» que vemos en numerosa plantillas). El proceso inverso es igual de simple, recibimos un archivo HTML y sustituimos el contenido por nuestras variables, respetando el markup del diseño. De esta forma el equipo de diseño no necesita conocimientos de programación, wordpress, tema utilizado y puede trabajar libremente en su área de competencia. Los programadores por su parte no tienen que preocuparse por la visualización del contenido generado. El consumo adicional de recursos se compensa cuando cada profesional puede dedicar todo su esfuerzo a los aspectos en los que es más competente sin interferir en el trabajo del resto del equipo.
Implementando Smarty en nuestro tema
Como es de esperar, tenemos un plugin a nuestra disposición Smarty for WordPress. Personalmente no lo he probado, como desarrollador prefiero siempre que es posible utilizar mi propia implementación. Vamos a ello.
- Primero descargamos Smarty de su repositorio oficial y copiamos el contenido de la carpeta libs a una carpeta de nuestro tema por ejemplo: /includes/smarty. Necesitamos crear las 4 carpetas de trabajo de smarty: templates, templates_c, cache, configs. Las crearemos dentro de la carpeta smarty
- Creamos un archivo «load_smarty.php» con el siguiente contenido:
<?php
require('includes/smarty/Smarty.class.php');
class Smarty_WP extends Smarty {
function __construct() {
parent::__construct();
$basedir = get_stylesheet_directory();
$this->setTemplateDir($basedir.'/includes/smarty/templates');
$this->setCompileDir($basedir.'/includes/smarty/templates_c');
$this->setCacheDir($basedir.'/includes/smarty/cache');
$this->setConfigDir($basedir.'/includes/smarty/configs');
}
function get_header_html() {
ob_start();
wp_head();
$this->assign('header', ob_get_contents());
ob_end_clean();
}
function get_footer_html() {
ob_start();
wp_footer();
$this->assign('header', ob_get_contents());
ob_end_clean();
}
}
El objetivo de tener todo lo relacionado con Smarty en un archivo indpendiente es la flexibilidad qe nos aporta. Podemos incluir el archivo en el functions.php del tema o ser más específico y utilizarlo solo cuando sea necesario. En el archivo además de inicializar Smarty he añadido dos funciones para obtener el header y el footer correspondientes a nuestra instalación de WordPress, es un ejemplo de como pasar variables desde PHP a Smarty. Según nuestras necesidades, extenderemos la clase o agregaremos otras funciones según nuestras necesidades - Modificamos page.php con el siguiente contenido
<?php
require('ruta-hasta/load_smarty.php');
$smarty = new Smarty_WP();
$smarty->get_header();
$smarty->get_footer();
$smarty_post=new stdClass();
$smarty_post->id=get_the_ID();
$c='';
ob_start();
post_class();
$c=ob_get_contents();
ob_end_clean();
$smarty_post->class=$c;
$smarty_post->content_html=get_the_content();
$smarty_post->title=get_the_title();
$c='';
ob_start();
if (comments_open() || get_comments_number()) {$c=ob_get_contents();}
ob_end_clean();
$smarty_post->comments_html=$c;
$smarty->assign('post',$smarty_post);
$smarty->assign('twentyseventeen_edit_link',twentyseventeen_edit_link(get_the_ID()));
$smarty->assign('wp_link_pages',wp_link_pages());
$smarty->display('page.tpl')
Simplemente creamos la instancia de Smarty, asignamos la variables correspondientes y lanzamos nuestra plantilla «page.tpl»
{$header}
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
{if $post->content_html neq ""}
<article id="post-{$post->id}" {$post->class}>
<header class="entry-header">
<h1 class="entry-title">{$post->title}</h1>
{$twentyseventeen_edit_link}
</header><!-- .entry-header -->
<div class="entry-content">
{$post->content_html}
<div class="page-links">{$link_pages}</div>'
</div><!-- .entry-content -->
</article><!-- #post-## -->
{$post->comments_html}
{/if}
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
{$footer}
Finalmente tenemos lo que queríamos un achivo PHP con la lógica de la programación y un archivo HTML con el markup necesario. En mi opinion esta estructura es más fácil de mantener y cuando tenemos muchas plantillas con un markup realmente complicado, nos faciltará mucho la vida.
