Your SlideShare is downloading. ×
Temas Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Temas Drupal

2,424
views

Published on

Todo lo necesario para entender el desarrollo de Temas en Drupal

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
2,424
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
68
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Temas Drupal 7Osvaldo Villarroel MarañonDesarrollador Drupalvacho@koala-soft.comwww.koala-soft.com
  • 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. 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. 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. 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. 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. 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. ● $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. 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. ● $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. 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. 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. 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. 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. 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. 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. Referenciashttp://drupal.org/documentation/themeEsquema de archivoshttp://drupal.org/node/171194http://www.drupal.org