El sistema de Themes en Drupal

Para aquellos que hayan leído algún otro artículo de este sitio, esto les va a parecer extraño.

Resulta que este texto surge de una serie de preguntas que me han planteado en estos dos años de usar Drupal, y que yo les he planteado a otros por supuesto. Redactar este artículo en forma amena tal vez requería de un método más cercano a la dinámica de preguntas y respuestas. Por tal motivo me contacté con unos compañeros de Drupal Perú para pedirles prestados a dos de sus integrantes de Drupalandia, a fin de que nos ayuden a explicar mejor el tema de hoy.

Sin más preámbulos, les presento a Diniño y a D-Diez. Diniño esta interesado en aprender como funcionan los Themes de Drupal y D-Diez se ha ofrecido gentilmente a explicarle algunas cosas. Veamos que dicen....

Los Themes o temas visuales son la forma que utiliza Drupal para darle un aspecto más agradable, aunque a veces no logremos este cometido, para los contenidos de una página web creada con este CMS.

Construir un Theme desde cero tiene una complejidad elevada. Cuando hacemos referencia a “desde cero” quiero decir, desde un archivo de texto en blanco. Drupal posee cientos de reglas y mecanismos que son difíciles de comprender en su totalidad, y que son necesarios para crear un tema desde cero.

Entonces…

Algunas personas decidieron construir Themes de propósito general. La mayoría de ellos se caracterizan por, ser horribles visualmente, y ser muy fáciles de entender por los diseñadores.

Un momento, que recién llego... Puede repetir, ¿qué es un Theme? ¿Cómo está constituido un Theme?

Como dijimos al principio, un Theme es un conjunto de archivos entre estos podemos encontrar:

Las plantillas son matrices que definen como estará organizado el contenido del sitio. Por ejemplo, la plantilla page.tpl.php se encarga de definir la estructura HTML de cualquier página del sitio.

Pará pará!, eso de las plantillas, archivos HTML no entiendo nada!!!

Retrocedamos un poco para entender mejor como funciona todo esto.

En la antigüedad de la Internet, las páginas webs se caracterizaban por estar constituidas por una inmensa cantidad de archivos .html que definían la estructura de la web.

Estructura de directorios de un sitio web

Todos esos archivos HTML son los que definían las paginas de Inicio, Contáctenos, Quienes somos, etc.

Con la adopción de los administradores de contenidos todas estas páginas ahora son guardadas en una base de datos, Drupal busca el contenido dependiendo de la página que deseamos visitar y la muestra, es claro que no puede mostrar todos esos textos como algo plano y sin formato, entonces… para organizar la estructura del contenido hace uso de las plantillas.

Ahhh, ahora lo veo, las plantillas organizan el contenido que antes era estructurado en los archivos HTML. O sea que… no hacen falta más archivos HTML…

Exacto, las plantillas son interesantes pues con un único archivo .tpl.php se le puede dar estilo a muchas paginas HTML.

Volviendo a la plantilla page.tpl.php, en ella se definen todos los divs que se estructurarán con css para darle el formato al encabezado, al pie de pagina, a la barra lateral izquierda, derecha, etc, etc.

Por otro lado los archivos css son los que definen que estilo tomará cada valor de la plantilla. El lenguaje CSS (Cascade Style Sheets - hojas de estilo en cascada) es uno de los métodos más utilizados en los sitios webs para definir los aspectos visuales.

El proyecto Zen ya define muchas de las plantillas que se utilizarían para un sitio web y define también los archivos CSS que le darán el aspecto gráfico. Por esta razón usted no necesita definir que el tema tiene que tener dos columnas y el encabezado.

También mencionamos el archivo .info, este archivo se encarga de definir una serie de aspectos entre los que se destacan:

Las regiones del tema, y los archivos de css.

Un momento, ya de nuevo con los conceptos técnicos, ¿Qué son las regiones?

Las regiones son la forma en que Drupal define donde se podrá colocar contenido. Por ejemplo, si alguien quisiera colocar contenido en el pie de página como una por ejemplo “Este sitio está construido con Drupal” elegiría la región Footer, que es dibujada generalmente en la parte inferior del sitio. ¿Y como se posiciona en el inferior del sitio? Porque así lo indica el HTML y el CSS del sitio.

Ahhh, entendido, pero… Yo en Drupal no he visto nunca eso de las regiones, ¿Dónde puedo encontrarlas?

Las regiones se pueden observar a la hora de posicionar los bloques en el sitio, en la página de administración de los bloques las resalta de esta forma.

Posicionamiento de bloques

Las regiones generalmente se dibujan en las plantillas page.tpl.php pero otras plantillas como node.tpl.php pueden también incluirlas.

Siguiendo un poco con el asunto de las plantillas, así como Drupal define la plantilla page.tpl.php, también permite definir la plantilla page-front.tpl.php. En este caso la plantilla page-front.tpl.php solo será procesada cuando se esté visualizando la página principal del sitio.

Por otro lado existen una gran variedad de plantillas. Las node.tpl.php y node-xyz.tpl.php donde xyz puede ser cualquier tipo de contenido, son utilizadas para definir la estructura de un tipo de contenido.

Osea…

Por ejemplo en este sitio, los tipos de contenido artículos y videos fueron modificados para que aparezca el icono de comentarios cada vez que haya comentarios en el contenido. Claramente eso es una unión de HTML y Css, el HTML se definió en la plantilla node.tpl.php y el Css en una hoja de estilo extra que fue cargada con la siguiente línea en el archivo cuenco.info

stylesheets[all][]   = mi_hoja_de_estilos.css

Wow, esta todo conectado… bien voy entendiendo, pero queda el archivo template.php ¿para que sirve?

En todas las plantillas se pueden observar una mezcla de código en PHP con etiquetas HTML. Es interesante preguntarse como sabe Drupal que donde dice $title, tiene que colocarse el titulo de la página, y donde dice $scripts tiene que colocarse todas las etiquetas que cargan los scripts del sitio.

El archivo template.php define una serie de funciones que se encargan de procesar y dejar disponibles para su uso en las plantillas las variables que mencionamos antes.

Por ejemplo, a la hora de hacer el render de la pagina (o sea cuando la plantilla page.tpl.php es procesada y convertida a una pagina web), Drupal ejecuta la función template_preprocess_page() y la funcion mitema_preprocess_page(). En este momento le da la oportunidad de definir al tema que variables estarán disponibles y como se llamarán.

<?php

// Funcion template_preprocess_page() alojada en includes/themes.inc de la raiz de Drupal
function template_preprocess_page(&$variables) {
  // ...
  $variables['head_title']        = implode(' | ', $head_title);
  $variables['base_path']         = base_path();
  $variables['front_page']        = url();
  $variables['breadcrumb']        = theme('breadcrumb', drupal_get_breadcrumb());
  $variables['feed_icons']        = drupal_get_feeds();
  $variables['footer_message']    = filter_xss_admin(variable_get('site_footer', FALSE));
  $variables['head']              = drupal_get_html_head();
  $variables['help']              = theme('help');
  $variables['language']          = $GLOBALS['language'];
  $variables['language']->dir     = $GLOBALS['language']->direction ? 'rtl' : 'ltr';
  $variables['logo']              = theme_get_setting('logo');
  //...

?>

Bueno, entiendo todo esto, pero ¿Como hago un theme en Drupal?

La construcción de un theme en Drupal consiste en gran medida en la definición de las reglas de CSS para darle un aspecto visual al sitio.

Algunos themes multipropositos como Zen o Genesis proveen de plantillas con muchismas clases que varían según la zona del sitio que se esté visitando.

Por ejemplo, si queremos colocar un fondo de la pagina en color azul para la pagina principal en un subtema de zen, podemos colocar la siguiente linea de código en nuestro archivo mitheme.css

body.front {
  background: #FF0;
}

Esta simple linea de código le indica al navegador que coloque el color de fondo de la pagina a un tono Azul, siempre y cuando el body posea la clase .front.

¿Y como sabe Drupal que debe poner solo la clase front en la pagina principal?

Allí es donde entra en juego el tema de las plantillas. Una plantilla bien diseñada contiene todas las instrucciones para determinar si se está visualizando o no la pagina principal del sitio. Esta es una de las principales razones por las cuales los diseñadores web no crean sus propios themes completamente desde cero. La creación de estas variables puede resultar engorrosa y al fin de cuenta se estaría reinventando la rueda.

¿Y como puedo crear mis propias variables? Por ejemplo para mis nodos me gustaría tener una variable que me indique si el nodo fue creado por el usuario que lo esta visualizando. ¿Se puede?

Los archivos template.php definen una serie de funciones que son llamadas a la hora de construir distintas entidades de Drupal.

Por ejemplo, a la hora de construir una página, suponiendo que tenemos instalado un subtema de Zen, Drupal llama a template_preprocess_page(), luego a zen_preprocess_page() y por último a mitheme_preprocess_page(). La cuestión es que mitheme_preprocess_page() no tiene código definido en su interior, asi que puede utilizarse para crear nuestras propias variables.

En el del autor del nodo el código en mitheme_preprocess_node() seria el siguiente:

<?php

function mitema_preprocess_node(&$vars, $hook)
  if ($vars['uid'] == $GLOBALS['user']->uid) {
    $vars['es_autor'] = 'autor_del_nodo';
  }
}

?>

Y el la plantilla node.tpl.php de mi theme escribiría donde corresponda:

<?php<div class =”node php print $es_autor; ?>
”</div>
?>

Mmm, interesante. Veo que las posibilidades son realmente amplias con todo esto...

Así es, Drupal es una herramienta de Desarrollo profesional, y las posibilidades de extensión y diseño a través de este sistema de plantillas son realmente poderosas.

Solo como nota final, es interesante aclarar que muchos módulos proveen sus propias plantillas para modificar el aspecto de las salidas por pantalla.

Por ejemplo las vistas creadas con el modulo Views permiten definir el aspecto visual de un listado definiendo plantillas con nombres especiales.

Otros módulos también pueden definir sus propias plantillas, un caso típico es el del módulo Search de Drupal, que provee una plantilla para el bloque de búsqueda. Un theme podría sobreescribir esa plantilla simplemente creando un archivo search-block.tpl.php en el directorio del Tema, y así agregar elementos HTML o clases a un bloque provisto por un modulo en particular.

Para profundizar el diseño de themes para Drupal recomiendo leer el siguiente artículo: http://cuencodigital.com/articulos/un_sitio_en_drupal_paso_paso_parte_4....


Actualización: Luego de la DrupalCamp Spain, Manuel García ha publicado una excelente presentación sobre plantillas en Drupal. Altamente recomendado para quienes deseen profundizar más sobre este tema.

Agradezco enormemente a Ricardo Chang y a su equipo de Diseñadores por haber prestado sus personajes de Drupalandia para este sitio. Gracias!

Te invito a leer también...

Compartir este material en...

Comentarios

Genial Mariano, muy buena introducción al theming con Drupal, y los dibujos son muy graciosos, no conocía la página de ecosistema Drupal :)

Por cierto, en el preprocess_node quizás deberías restringir por $node->type, a no ser que quieras esa variable en todos los tipos de contenido, claro.

Un saludo!

Wow!! Felicitaciones!!! que excelente articulo muy entendible y de gran apoyo para la comunidad de drupaleros que hablan español :D que gran aportazo!!!

Muy buena esta introducción a los themes. Una cosa que no he conseguido hacer bien es añadir regiones nuevas, he seguido varios manuales (todos dicen que es fácil) pero no lo explican así. Me gustaría que dedicarais un artículo para enseñar a hacerlo y si tiene vídeo mucho mejor. Me parece muy clara y didáctica la forma en la que explicarais todo.
Gracias!!

Para añadir regiones a un theme simplemente hay que:

1) Declararlas en el archivo.info de tu theme.
2) Crear el div que imprima la variable $nueva_region en el page.tpl.php correspondiente.

En este artículo hay un ejemplo sobre como hacer eso: http://cuencodigital.com/articulos/un_sitio_en_drupal_paso_paso_parte_4....

Saludos!

Tus contenidos me inspiran... muchas gracias

Hola Yoent:

Antes que nada, gracias por tu comentario.

La verdad es que no das demasiada información sobre tu problema real. "Muchos errores" y "No encuentra una tabla de datos" no nos permiten ayudarte con tu problema.

Mi recomendación es que leas la parte cuatro de Como hacer un sitio en Drupal en donde se explica como construir tu propio theme.

Además, Drupal provee una serie de Themes gratuitos, si tenes problemas con el que compraste, tal vez podes usar uno de Drupal. Los themes están aca: http://drupal.org/project/Themes

Por último, las consultas no relacionadas con el artículo, recomiendo siempre hacerlas en los foros de Drupal Hispano.

Espero que sea de ayuda.
Saludos

Por fin he llegado a entender bien esto de regiones, nodos, templates, views y demás definiciones propias de Drupal.

Concuerdo contigo de la potencia y versatilidad que Drupal ofrece, pero también deploro el que se tengan que realizar sitios web tan feos, esquemáticos y cuadrados... como si fuesen diseñados en Excel. Por eso tengo como meta meterme tanto en Drupal, para finalmente sacar sitios mejor diseñados, como los que se ven en Wordpress y cuando lo logre, haré un tutorial para compartir con todos esos conocimientos.

Si alguien se apunta al desafío... está bienvenido!

Excelente muy buen aporte man!!

Debería haber mas gente como tu.

FELICIDADES por el POST