blog
Artículos Desarrollo Drupal

Maquetar en Drupal 7

Si te ha tocado un proyecto en Drupal 7, es muy probable que hayas tenido que maquetar,o crear algún tema para la plataforma.

La verdad es que la API de plantillas de Drupal es muy potente, pero un mal uso puede ser causa de muchos problemas para el site. Ya sabes que Drupal es PHP, has desarrollado en PHP, te animas, saltas etapas y llegan los problemas de rendimiento, por ejemplo.

Me parece buena idea repasar de forma básica como desarrollar un theme personalizado de Drupal 7 y también su estructura. En futuros artículos entraremos en detalles más avanzados, como las funciones del tema, los hooks de los temas, las funciones de preprocesamiento y las funciones de procesamiento. ¿Te parece?

No hace falta decir que necesitas tener una instalación de Drupal 7 en algún servidor. El tema que vamos a desarrollar se llamará Inusual.

Ficheros .info

Lo primero que tienes que hacer es crear una carpeta con el nombre inusual.info dentro de la carpeta sites/all/themes. Si no tienes la carpeta la puedes crear.

Dentro de esta carpeta debes crear un fichero con el nombre inusual.info y añadir la siguiente información en el fichero:

  • name = Inusual Theme
  • description = Un tema desarrollado para Inusual.
  • core = 7.x

Estas son las propiedades básicas para que el Drupal 7 reconozca tu nuevo tema.

name es obligatorio y como el nombre indica es el nombre de tu tema, que aparecerá en el listado de temas.

description no es obligatorio y la idea es utilizar esta propiedad para describir el tema en pocas palabras.

core también es obligatorio y sirve para definir la versión principal de Drupal que estamos utilizando. En este caso la 7.x. Si tu versión principal de Drupal es la 6.x y les ha dado el valor 7.x a core, el tema no funcionará.

Si quieres, también puedes añadir la propiedad screenshot  y que esta tenga el valor screenshot.png. screenshot.png será una imagen en miniatura que represente tu tema.

Después de guardar, puedes visitar admin/appearance y si todo está correcto, podrás ver la información de tu tema. Lo único que tienes que hacer, es activarlo y si quieres, establecerlo como predeterminado.

Muchas veces, visitando admin/appearance, es posible que nuestro tema no aparezca en el listado. Es muy probable que sea un problema de caché. Para que el Drupal 7 pueda reconocer los cambios que hayas realizado en los ficheros .info tienes que limpiar las cachés de tu sitio web. Lo puedes hacer visitando admin/config/development/performance.

Subtemas

A veces se da la situación en que hayas comprado un tema que te gusta mucho, o lo hayas bajado desde el repositorio de temas de Drupal. Lo único que quieres es añadir algunos estilos, pero mantener la estructura inicial del tema base. En el Drupal 7, a partir de ahora D7, lo único que tienes que hacer es aprovechar tu fichero inusual.info y añadir la propiedad:

  • base theme = garland

Garland es un tema que viene por defecto en D7 (ya no estará en el Drupal 8).

Regiones y Bloques

Utilices un tema original, o un subtema es muy probable que necesites asignar contenido a determinadas regiones, en tu página web. Las regiones de D7 son espacios donde puedes añadir Bloques de contenido o Widgets con trozos de información, dinámica, o no.

D7 ya viene con nueve regiones predefinidas, pero es buena práctica definirlas nuevamente en tu fichero inusual.info, si las vas a utilizar. Entre otras cosas, porque puedes controlar mejor lo que estás desarrollando.

Además de las regiones ya existentes, puedes definir, declarar tu propia región, personalizada.

  • ; REGIONES CORE
  • regions[page_top] = Page Top
  • regions[header] = Header
  • regions[highlighted] = Highlighted
  • regions[help] = Help
  • regions[content] = Content
  • regions[sidebar_first] = Sidebar First
  • regions[sidebar_second] = Sidebar Second
  • regions[footer] = Footer
  • regions[page_bottom] = Page Bottom
  • ; REGIONES PERSONALIZADAS
  • regions[mi_region_personalizada] = Mi Region Personalizada

Es importante recordar que en D7, “Content” es una región. Esto significa que además del bloque de contenido de la página principal, también se podrá añadir otros bloques en esta región.

Obviamente es necesario definir antes las necesidades de diseño, además de saber como irán trabajar con los bloques los administradores del sitio, o qué tipo de contenido tendrán las mismas. A lo mejor para alguna región queremos algo estático, pero para otra necesitaremos contenido dinámico que posteriormente puede ser cambiado de forma fácil de región. Tendrás que decidir que si te es suficiente imprimir este contenido utilizado alguna variable hardcoded o la región personalizada que acabas de declarar.

Bloques

En Drupal, los Bloques (Blocks en inglés) son cajas que pueden aparecer en diferentes Regiones del sitio web. Los bloques se parecen a los widgets y pueden ser utilizados para presentar a los usuarios cualquier tipo de contenido. Por defecto cada bloque solo puede aparecer en una región de tu tema.

Ficheros de plantilla

Una vez hayas definido las regiones, tienes que imprimirlas en algún fichero de plantilla. D7 tiene, en su núcleo seis ficheros de plantilla que son los más importantes en la creación de tu tema personalizado. Estos ficheros serán tus aliados si quieres empezar a hacer que tu tema sea totalmente diferentes de los temas de Drupal existentes.

html.tpl.php

Este fichero es responsable por la estructura del documento HTML. En él puedes encontrar todo el contenido que normalmente se incluye dentro de la etiqueta <head>. Aquí encontrarás las variables de Drupal “$scripts” y “$styles” que son las responsables por cargar todos los CSS y JavaScripts definidos por los diferentes temas y módulos que existen en tu instalación. Este fichero también es responsable por abrir y cerrar la etiqueta <body>.

Es también en html.tpl.php que tienes que imprimir (print $page_top;) las regiones “$page_top”, “$page” y “$page_bottom” que has declarado en inusual.info.

A no ser que quieras cambiar algo realmente crítico a nivel de la etiqueta <head>, o cambiar el DOCTYPE, la experiencia me dice que no es muy buena idea sustituir este fichero por uno personalizado.

page.tpl.php

Este fichero de plantilla imprime las regiones a nivel de página, o sea, todo el contenido que quieres que el usuario vea en la pagina estará aquí. En este fichero puedes imprimir las regiones que has definido en inusual.info pero que no están en html.tpl.php. Además puedes imprimir otras variables globales , hardcorded de D7, como $logo, $site_name, o $main_menu.

Drupal te permite sustituir estos ficheros de plantilla a nivel de tema. Esto significa, por honor a la creatividad, que puedes copiar el fichero page.tpl.php de la carpeta modules/system, o de la carpeta del tema base que estás utilizando en tu subtema, cambiar el diseño según tus necesidades e imprimir las regiones y/o variables globales donde sea necesario.

Los demás ficheros, de los más importantes, que te permiten imprimir el marcado HTML son, region.tpl.php, block.tpl.php, node.tpl.php, comment.tpl.php, field.tpl.php, para las regiones, los bloques, los nodos (todo el contenido del Drupal), comentarios, y campos, respectivamente.

Una vez hayas creado, o alterado alguno de estos ficheros de plantilla, no te olvides de limpiar las cachés de tu sitio web. Si no lo haces, no verás los cambios reflejados inmediatamente.

Fuentes

drupal.org

¿Cómo se hace con un PC?

Artículo anterior

Enterprise DevOps Day Barcelona

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

Drupal 9

¿Por qué debo mantener mi sitio web?

¿Qué problema hay en utilizar TDD?

Cambiar de Tema según URL o Rol de usuario en Drupal 8