Temas Drupal

Temas
Drupal 7

Osvaldo Villarroel Marañon
Desarrollador Drupal
vacho@koala-soft.com
www.koala-soft.com

Para empezar a ser un Themer
● Conocer drupal a nivel básico.
http://drupal.org/documentation

● Php a nivel básico.
http://php.net/manual/es/index.php
http://www.desarrolloweb.com/php/

● Html.
http://www.desarrolloweb.com/manuales/21/

● Css a nivel intermedio - avanzado.
http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html

● Herramientas para crear, manipular imágenes
gimp, photoshop, illustrator, etc.

● Buen gusto. Si no lo tienes desarrollalo.
http://www.elwebmaster.com/general/como-elegir-esquema-colores-sitio-web
http://www.elwebmaster.com/general/el-efecto-laberinto-y-como-afecta-el-diseno-de-tu-sitio-web
http://www.elwebmaster.com/general/consejos-errores-comunes-diseno-web

Estructura de archivos .info (imprescindible)
Define todo lo que drupal conocerá
del tema: hojas de estilos, javascripts,
regiones de bloque y más.

Archivos de plantilla (template)
.tpl.php
● Definen la estructura del tema.
● Contienen html y variables php.
● Generan una salida HTML.
● Ejem: comment.tpl.php definirá
como se muestran los
comentarios.
● Pueden estar en la carpeta o en
un subdirectorio "templates"

template.php
Permite preprocesamiento de
variables para mantener limpios de
lógica los archivos de plantilla.

.css
style.css es el archivo principal,
pueden existir varios otros y también
se puede organizar todos en una
carpeta "css"

NOTA: Escribir en sites/all/themes
para separar de los Temas del core.

Otros archivos
● logo.png.- El logo del tema que generalmente será
reemplazado por el logo del sitio.
● screenshot.png.- La pantalla miniatura para el panel
de administración del sitio.
Existe una guía para crearlos en http://drupal.org/node/11637

● theme-settings.php.- Puede ser usado para proveer
opciones de administración al Tema, más allá del logo,
lema, etc.
Guía para construir "advanced features" http://drupal.org/node/177868

● color.inc.- Colocado en una carpeta "color" puede dar
soporte al módulo color (que permite el cambio de color
de un tema)
Integración con el módulo color http://drupal.org/node/108459

Archivos de plantilla
Consideraciones
● Los archivos de plantilla .tpl.php aportan en el diseño
de algún elemento (capa de presentación).
● Drupal tiene sus propios archivos de plantilla para el
caso en que el tema activo no disponga de estos.
Al encontrar drupal un archivo block.tpl.php dentro los archivos del Tema activo procederá a ejecutar
este en lugar del distribuido con el módulo block del núcleo.

Plantilla html.tpl.php
Es el archivo encargado de definir la estructura de la
página html. (Muestra <html>, <head> y <body>)
Variables php usuales en este template:
● $head_title. Título a utilizar en la etiqueta <title>.
● $head. Encabezado completo, incluyendo las etiquetas
meta, keyword, etc.
● $styles. Código para incluir las hojas de estilo CSS.
● $scripts. Código para incluir los archivos javascript.
● $page. Contenido de la página en HTML, ya procesado
y listo para mostrar en el navegador.
Si nuestro Tema no presenta este archivo drupal usa
modules/system/html.tpl.php

Plantilla page.tpl.php
Genera el contenido y envía a html.tpl.php mediante $page
● $base_path. Ruta de la instalación de Drupal.
● $directory. Ruta relativa de la carpeta donde está el
tema del sitio.
Ejemplo :Para referenciar una imagen dentro del tema usamos:
<?php print $base_path.$directory ?>/images/cabecera.jpg

● $breadcrumb. Código HTML que muestra la navegación
de migas de pan del sitio.
● $front_page. Enlace a la página de inicio del sitio.
● $logo. Enlace a la imagen de logo.
● $site_name. El nombre del sitio.
● $site_slogan. Slogan del sitio

● $title. Título de la página.
● $messages. Mensajes de error o notificaciones.
● $tabs. Enlaces de las pestañas que se muestran en la
página (Ejem: ver y editar un nodo).
● $node. El Nodo que se esta cargando.
● $page['content']. Contenido principal en HTML.
● $page['sidebar_first']. Contenido de la primera columna.
● $page['sidebar_second']. La segunda columna.
● $page['header']. El contenido de la cabecera.
● $page['footer']. Elementos del pie de página.

modules/system/page.tpl.php

Plantilla node.tpl.php
Representa el contenido de un nodo a través de la variable
$page['content']
● $title. El título del nodo.
● $content. El contenido del nodo
Es un vector que contiene todos los elementos del nodo. Se puede utilizar la función render para
imprimir estos elementos (con render($content) imprimimos todos los elementos, con render($content
['campo']) imprimimos sólo el campo 'campo'.

● $user_picture. La imagen de usuario del autor del nodo.
● $date. Fecha de creación del nodo.
● $name. El nombre de usuario del autor del nodo.
● $node_url. La URL del nodo.
● $type. El tipo del nodo (por ejemplo page, story, blog).

● $comment_count. Número de comentarios del nodo.
● $page. TRUE si se está visualizando el nodo completo.
● $teaser. TRUE si se está visualizando la vista resumen.
● $promote. TRUE si el nodo está promocionado a la
página de inicio (página /node).
● $sticky. TRUE si el nodo está fijo al comienzo de listas.
● $status. TRUE si el nodo está publicado.

modules/node/node.tpl.php

Plantilla block.tpl.php
Representa el contenido de los bloques.
● $block->subject. El título del bloque.
● $content. El contenido del bloque.
● $block->module. El módulo que ha generado el bloque.
● $block->region. La región en la que está ubicado el
bloque.

modules/block/block.tpl.php

Otras Plantillas
● region.tpl.php. Presentación de cualquiera de las
regiones del tema.
modules/system/region.tpl.php.

● comment.tpl.php. Muestra los comentarios del sitio.
modules/comment/comment.tpl.php.

● comment-wrapper.tpl.php. Contenedor para los
comentarios.
modules/comment/comment-wrapper.tpl.php.

● user-picture.tpl.php. Presentación de la imagen del
usuario.
modules/user/user-picture.tpl.php.

Plantillas de módulos
Los módulos pueden contener sus propias pantllas.
Para modificar una deberemos copiar el archivo .tpl.php a
la carpeta del Tema activo.

Modificaciones de Temas
Consideraciones:
● Actualizar la caché del navegador Ctrl + F5.
● Actualizar la caché del sitio.
● Drupal genera código html y se lo entrega al
navegador.
Proceso:
● Copiar los archivos deseados del Tema
base.
● Modificar los archivos .tpl.php, css, js segun
sea el caso.
● Modificar archivos de imágenes.

Subtemas
● Son usados cuando se quiere crear un tema con base
en otro.
● Se crean de igual forma que cualquier otro tema y
tienen la misma estructura de archivos. Además
heredan los recursos de los temas base.
● Para crear un subtema:
Forma 1. Creando los archivos uno por uno
Forma 2. Crear una copia de la carpeta y renombrar archivos.
Luego ingresar en el .info del subtema el código: base theme = fusion_core
donde "fusion_core" es el nombre del tema base
Nota:.
Guía más detallada: http://drupal.org/node/225125

● Se pueden tener múltiples niveles de herencia. Un
subtema puede declarar otro subtema como base.

Temas base
Están diseñados para ser extendidos.
● Zen http://drupal.org/project/zen
● Fusion http://drupal.org/project/fusion
● Omega http://drupal.org/project/omega
● NineSixty (960 Grid System) http://drupal.
org/project/ninesixty
● Genesis http://drupal.org/project/genesis
● Basic http://drupal.org/project/basic
● AdptiveTheme http://drupal.org/project/adaptivetheme

Los temas base suelen tener indicaciones para la forma de
crear un subtema.

Referencias
http://drupal.org/documentation/theme
Esquema de archivos
http://drupal.org/node/171194
http://www.drupal.org

Temas Drupal

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Temas Drupal

Similaire à Temas Drupal (20)

Plus de Osvaldo Villarroel Marañon

Plus de Osvaldo Villarroel Marañon (11)

Dernier

Dernier (15)

Temas Drupal