Temas                       Drupal 7Osvaldo Villarroel MarañonDesarrollador Drupalvacho@koala-soft.comwww.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...
Estructura de archivos   .info (imprescindible)                         Define todo lo que drupal conocerá                ...
Otros archivos● logo.png.- El logo del tema que generalmente será     reemplazado por el logo del sitio.●    screenshot.pn...
Archivos de plantillaConsideraciones● Los archivos de plantilla .tpl.php aportan en el diseño     de algún elemento (capa ...
Plantilla html.tpl.phpEs el archivo encargado de definir la estructura de lapágina html. (Muestra <html>, <head> y <body>)...
Plantilla page.tpl.phpGenera el contenido y envía a html.tpl.php mediante $page● $base_path. Ruta de la instalación de Dru...
● $title. Título de la página.● $messages. Mensajes de error o notificaciones.● $tabs. Enlaces de las pestañas que se mues...
Plantilla node.tpl.phpRepresenta el contenido de un nodo a través de la variable$page[content]● $title. El título del nodo...
●   $comment_count. Número de comentarios del nodo.●   $page. TRUE si se está visualizando el nodo completo.●   $teaser. T...
Plantilla block.tpl.phpRepresenta el contenido de los bloques.●   $block->subject. El título del bloque.●   $content. El c...
Otras Plantillas● region.tpl.php. Presentación de cualquiera de las   regiones del tema.   modules/system/region.tpl.php.●...
Plantillas de módulosLos módulos pueden contener sus propias pantllas.Para modificar una deberemos copiar el archivo .tpl....
Modificaciones de TemasConsideraciones:● Actualizar la caché del navegador Ctrl + F5.● Actualizar la caché del sitio.● Dru...
Subtemas● Son usados cuando se quiere crear un tema con base    en otro.●   Se crean de igual forma que cualquier otro tem...
Temas baseEstán diseñados para ser extendidos.●   Zen http://drupal.org/project/zen●   Fusion http://drupal.org/project/fu...
Referenciashttp://drupal.org/documentation/themeEsquema de archivoshttp://drupal.org/node/171194http://www.drupal.org
Upcoming SlideShare
Loading in …5
×

Temas Drupal

3,257 views

Published on

Todo lo necesario para entender el desarrollo de Temas en Drupal

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,257
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
77
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Temas Drupal

  1. 1. Temas Drupal 7Osvaldo Villarroel MarañonDesarrollador Drupalvacho@koala-soft.comwww.koala-soft.com
  2. 2. 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.phphttp://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ágenesgimp, photoshop, illustrator, etc.● Buen gusto. Si no lo tienes desarrollalo.http://www.elwebmaster.com/general/como-elegir-esquema-colores-sitio-webhttp://www.elwebmaster.com/general/el-efecto-laberinto-y-como-afecta-el-diseno-de-tu-sitio-webhttp://www.elwebmaster.com/general/consejos-errores-comunes-diseno-web
  3. 3. 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.
  4. 4. 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
  5. 5. Archivos de plantillaConsideraciones● 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 ejecutareste en lugar del distribuido con el módulo block del núcleo.
  6. 6. Plantilla html.tpl.phpEs el archivo encargado de definir la estructura de lapá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 usamodules/system/html.tpl.php
  7. 7. Plantilla page.tpl.phpGenera 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
  8. 8. ● $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.Si nuestro Tema no presenta este archivo drupal usamodules/system/page.tpl.php
  9. 9. Plantilla node.tpl.phpRepresenta el contenido de un nodo a través de la variable$page[content]● $title. El título del nodo.● $content. El contenido del nodoEs un vector que contiene todos los elementos del nodo. Se puede utilizar la función render paraimprimir 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).
  10. 10. ● $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.Si nuestro Tema no presenta este archivo drupal usamodules/node/node.tpl.php
  11. 11. Plantilla block.tpl.phpRepresenta 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.Si nuestro Tema no presenta este archivo drupal usamodules/block/block.tpl.php
  12. 12. 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.
  13. 13. Plantillas de módulosLos módulos pueden contener sus propias pantllas.Para modificar una deberemos copiar el archivo .tpl.php ala carpeta del Tema activo.
  14. 14. Modificaciones de TemasConsideraciones:● 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.
  15. 15. 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.
  16. 16. Temas baseEstá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/adaptivethemeLos temas base suelen tener indicaciones para la forma decrear un subtema.
  17. 17. Referenciashttp://drupal.org/documentation/themeEsquema de archivoshttp://drupal.org/node/171194http://www.drupal.org

×