Consejos para crear temas en Drupal 6

Sólo un idiota puede ser totalmente feliz.

Mario Vargas Llosa

Suscríbete al feed

Comentarios recientes

Obtén el máximo provecho del nuevo API de temas

Luego de trabajar en muchos proyectos con Drupal 6 y crear temas con el nuevo API, incluyendo el reciente Woodpig en Ventanazul, he aprendido mucho y decidí reunir algunos consejos que estoy seguro te ayudarán, estimado drupalista, al convertir tu próximo diseño en un sitio corriendo con Drupal. ¿Suena bien? Ok, a sumergirnos en el nuevo API de temas de Drupal 6.

Flowers And Plants

La guía de temas de Drupal 6

Hay muchos cambios en el API de temas de Drupal 6 e incluso después de trabajar por mucho tiempo con temas en Drupal 5 tuve que invertir varios días en comprender los nuevos conceptos y funciones. Es por eso que leer la guía de temas para Drupal 6 debe ser tu primera parada.

Pero no basta con un rápido vistazo, algunos conceptos como las funciones preprocess y el registro de hook themes aún no me quedaban claros luego de mi primera lectura y tuve que releer varias secciones. Te recomiendo leer la guía de temas para Drupal 6 al menos dos veces, en la primera concéntrate en entender las ideas generales y en la segunda puedes empezar a probar el API con una instalación básica de Drupal.

Registra funciones de temas y plantillas

Drupal 6 llama a las funciones de temas y plantillas theme hooks. Un theme hook es contenido que puede ser modificado por un tema y usualmente es el resultado de tus módulos. En Drupal 5 bastaba con escribir un módulo y podías añadir todas las funciones para temas que quisieras, luego estas funciones podían ser reemplazadas por otras en un tema o convertidas en archivos tpl.php usando la función _phptemplate_callback.

En Drupal 6 es necesario definir qué funciones para temas o plantillas utilizarás por anticipado; es decir, debes registrar los theme hooks. Esto permite que Drupal 6 sea más eficiente al evitar descubrir los theme hooks en tiempo de ejecución. Usa el nuevo hook_theme para registrar theme hooks, esta función retorna un array con las funciones de temas o plantillas que tu módulo ofrece y las variables disponibles.

Aquí parte del código que usé en un módulo que escribí para Ventanazul:

function ventanazul_theme() {
return array(
'ventanazul_flickr' => array(
'template' => 'ventanazul-flickr',
'arguments' => array('flickr_user' => NULL, 'attributes' => array()),
),
'ventanazul_google_search' => array(
'arguments' => array('publisher_id' => NULL, 'attributes' => array()),
),
);
}

El primer hook, ventanazul_flickr, usará un archivo llamado ventanazul-flickr.tpl.php como plantilla y ofrecerá las variables $flickr_user y $attributes. Esto es lo que uso para mostrar fotos de mi cuenta en Flickr.

El segundo hook, ventanazul_google_search, no ofrece una plantilla, eso significa que solo usará una función de tema como esta: theme_google_search($publisher_id, $attributes). Nota como las variables pasan directamente a la función.

No olvides borrar el registro de temas

El registro de temas es donde Drupal 6 guarda todo lo que sabe sobre los theme hooks disponibles. Cada vez que modifiques algún theme hook debes borrar el registro de temas o tus cambios no serán vistos por Drupal. Borra el registro de temas de Drupal 6 usando uno de estos métodos:

  • Visita Administer > Site configuration > Performance y haz clic en Clear cached data. Este es mi método preferido e incluso tengo una pestaña de Firefox siempre abierta en esta página.
  • Usa el bloque devel del módulo devel y haz clic en el enlace Empty cache.
  • Llama a la función drupal_rebuild_theme_registry.

Define regiones para bloques en archivos .info

En Drupal 5 las regiones para bloques se agregaban en el archivo template.php, en Drupal 6 basta con añadir unas líneas al archivo .info de tu tema. El siguiente código es parte de un tema llamado Winds of Change, que escribí hace poco para un cliente:

name = Winds of Change
description = Site of Winds of Change Group
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css
regions[left] = left sidebar
regions[right] = right sidebar
regions[content] = content
regions[header] = header
regions[footer] = footer
regions[social] = social

Nota las opciones que empiezan con regions, es texto simple pero la sintaxis es similar a la definición de un array en PHP. Estas líneas le dicen a tu tema que regiones tendrá disponibles para bloques, los nombres entre corchetes serán los nombres de las variables en tus plantillas, regions[left] creará una variable $left, por ejemplo.

Los cambios en los archivos .info requieren que borres el registro de temas como expliqué antes. Yo soy algo maniático con esto y cada vez que no veo algún cambio reflejado en mis sitios lo primero que hago es borrar el registro de temas. He perdido mucho tiempo con código que aparentemente no funcionaba cuando bastaba con borrar el registro de temas.

Caché y uso de temas para usuarios anónimos

Este es un pequeño pero muy importante detalle. Drupal guarda en caché el contenido para usuarios anónimos y puede optimizar tus archivos CSS y Javascript. Revisa la configuración en Administer > Site configuration > Performance para desactivar el caché y la optimización mientras estés probando tu nuevo tema para Drupal 6. También recuerda borrar el registro de temas para hacer pruebas como un usuario anónimo.

Revisa y aprovecha los theme hooks disponibles

En ocasiones te verás tentado a reemplazar una función de tema o plantilla en Drupal 6, o talvez crear tus propios theme hooks. Eso fue lo primero que pensé mientras diseñaba la navegación para Ventanazul pero luego de analizarlo detenidamente noté que podía obtener el mismo resultado con un poco de CSS y PHP. Por ejemplo, para la navegación al pie de página usé:

print theme('links', array_merge($primary_links, $secondary_links), array('id' => 'alternate-menu'))

Woodpig footer

theme_links es parte de Drupal. Nota que simplemente uní los arrays de dos menúes y apliqué el id alternate-menu para decorar luego con una regla CSS.

Siempre revisa el código de los theme hooks disponible para ver si puedes pasar variables que modifiquen su comportamiento de acuerdo a lo que necesitas.

Usa plantillas incluidas con los módulos

Drupal 6 recomienda que todos los desarrolladores de módulos incluyamos plantillas, eso significa que siempre debes revisar los directorios de los módulos que uses para saber que archivos tpl.php están disponibles. Copia aquellos que quieras reemplazar al directorio de tu tema y borra el registro de temas para activarlos. Para mi tema Woodpig usé user-profile.tpl.php, copiado desde modules/user, para algunos cambios en la página de usuario.

Crea theme hooks para módulos que no escribiste

Cuando quise modificar el diseño de los comentarios para Woodpig le di un vistazo a comment.module y encontré una llamada como esta:

drupal_get_form('comment_form', $edit, $title)

Bien, si tenía un formulario en una función comment_form podía modificarlo de acuerdo al Form API de Drupal. Empecé a buscar una función theme_comment_form y noté que no existía.

¿Cómo modificar un theme hook que no existe? Basta con hacer lo mismo que haces con tus módulos, debes conocer el código que interviene y escribir una función hook_theme en el archivo template.php de tu tema. Esto es lo que hice para Woodpig:

function woodpig_theme() {
return array(
'comment_form' => array(
'arguments' => array('form' => array()),
),
);
}

La función empieza con el nombre del tema y toma form como argumento porque eso es lo que drupal_get_form espera. Luego pude escribir mi función woodpig_comment_form($form) para modificar el formulario de acuerdo a mi diseño.

Contempla el poder de las funciones preprocess en Drupal 6

Las funciones preprocess te permiten modificar las variables disponibles en funciones de tema o plantillas. También es posible añadir variables. Es una característica muy útil en Drupal 6 y la uso mucho para modificar breadcrumbs, pasar la ruta del tema a mis plantillas y separar los comentarios del contenido de un nodo. Te sugiero familiarizarte con las funciones preprocess y entender todo su poder pues pronto tendré más artículos sobre cómo usarlas.

Y eso es solo el principio

Quedan aún más lecciones por aprender del API de temas de Drupal 6 y cada proyecto trae algo nuevo. Aún cuando no pretendo que esta sea una guía completa para el desarrollo de temas con Drupal 6 estoy seguro que muchas de estas ideas te servirán en tu próxima aventura.

Cuéntame qué opinas en los comentarios y si tienes más preguntas o sugerencias sobre Drupal visita los foros de Drupal en Ventanazul. ¡Hasta la próxima!

Participa en la discusión

Muy buenos consejos, me han

Muy buenos consejos, me han ayudado a ubicarme mucho más en la creación de temas, ando revisando información para crear uno y pienso que me falta leer mucho aún.
Muchas gracias.

Hola amigo tu explicación la

Hola amigo tu explicación la siento fácil. ¿Dónde puedo encontrar mas información acerca del desarrollo de plantillas?

Carlos, ya mencioné en el

Carlos, ya mencioné en el artículo la guía de temas para Drupal 6. A partir de allí puedes encontrar todo lo que necesitas.

Si necesitas una guía más detallada Ric Shreves ha publicado Drupal 6 Themes en Packt.

Hola, Excelente nota! He

Hola,

Excelente nota!

He estado buscando hace varios días y no encuentro un modulo que llene mi necesidad por lo que pensé que es mucho mejor escribirlo y de paso aprendo.

Necesito un modulo que intercepte los comentarios de los usuarios y los "edite". En otras palabras, reemplace malas palabras por asteriscos, Palabras en mayúsculas a minúsculas. Palabras con números, dejarlas intactas. Primera letra despues de punto, pasarla a mayùscula. Verificar que las comillas abiertas se cierren igual que signos de pregunta, admiraciòn, entre otras cosas.

Me han dicho que tengo que crear un modulo 'filtro' pero no he encontrado nada, ¿me puede ayudar?

Saludos,

En realidad es una pregunta,

En realidad es una pregunta, no si sea este el mejor sitio para hacerla. No soy muy versado con Drupal ni PHP asi que no acabo de entender como operan los theme_hooks, lo que deseo hacer es muy simple.

Estoy creando un sitio para un diario y quiero que cada sección tenga su personalidad propia, esto ya lo conseguí modificando page.tpl.php, sin embargo, las plecas que aparecen en colores azul, quiero que vayan cambiando de color según la sección para darle una ayuda visual al usuario, ahora estoy intentando hacerlo utilizando #node-[id] en la hoja de estilos style.css, sin embargo, esta ya es bastante grande como para seguirle el rastro, entonces quisiera que en su lugar me cargue una hoja personalizada para esa sección igual que lo hago con page-[nombre_pagina].tpl.php

Esto es lo que no acabo de comprender como hacerlo empleando $body_classes, podrías darme un norte. Te lo agradeceré infinito ya que tengo el tiempo encima y debo concluir el proyecto.

El sitio es:

http://voz-e-imagen.com/desarrollo/

Gracias

Alejandro Gómez L.

Publica comentarios relevantes, usa español correcto y no envíes publicidad. Creemos discusiones en las que valga la pena participar. Puedes usar Markdown.

Tu comentario