Introdução ao Desenvolvimento de Temas para Drupal
-
Upload
frederick-van-amstel -
Category
Technology
-
view
3.656 -
download
0
description
Transcript of Introdução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para Drupal
por Sheena Donnelly
traduzido por Frederick van Amstel
DrupalCamp AtlantaSeptember 18, 2009
Parte I
Introdução à camada de temas do Drupal
O que é um tema do Drupal?I. HTML, CSS e PHPII.arquivo .info
• Configurações básicas do tema
III.arquivo .tpl.php• Templates
IV. .css e .js• Aparência e
comportamentoV.Template.php
• Para funções avançadas
Onde os temas se encontram
.info
I. Informações básicas sobre o tema • Nome• Versão Drupal• Theme Engine• Regiões• CSS files• JS files
Regiões
I. Elementos principais da página
II.Os blocos são postos nas regiões
III.Gera uma variável de mesmo nome no page.tpl.php
IV.Use o mínimo possível de regiões para evitar problemas de performance
Arquivos CSS
I. Declarado no .info file ou carregado por drupal_add_css()• O core do Drupal organiza a
cascata de arquivos CSS automaticamente
• Drupal comprime os arquivos CSS
II. Style.css é declarado automaticamente para cada tema
Arquivos Javascript
I. Declarado no .info ou adicionado por drupal_add_js()• Drupal pode comprimir
javascript para ficar mais leve
II.Drupal Core inclui a biblioteca JQuery
III. script.js declarado automaticamente para todos os temas
page.tpl.php
I. template básico em HTML para todas as páginas (é como uma casca)
II. Recebe e mostra o conteúdo dos nós, regiões e alguns módulos
III. Requer compreensão básica de PHP para leitura e edição
Outros Templates
I. node.tpl.php• aparece na variável
$content do page.tpl.php
• pode ser específico para um tipo de conteúdo: node-type.tpl.php
II.block.tpl.php, comment.tpl.php, etc.
III.Copie arquivos .tpl.php dos módulos e coloque na pasta theme para configurá-lo
Página de configurações do tema
I. Liga/desliga certas variáveis
II.Opções globais e opções customizáveis
III.Envia o $site_logo e ícones favicon
Página de informações do site
I. Identificação do site• $site_name• $site_slogan• $mission• $footer_message
II.Seleciona que nó aparece na página inicial
Parte II
Do PSD ao Page.tpl.php
Variáveis de página básicas
I. Regiões• $header, $left, $right,
$content, $footerII.Variáveis de
configurações do tema• $site_name,
$site_slogan, $logo, $primary_links, $secondary_links, $mission, $footer_message, $search_box
III. Variáveis importantes do sistema• $head, $head_title,
$styles, $scripts, $title, $tabs, $messages, $feed_icons, $closure
Variáveis adicionais
I. Variáveis úteis• Verificar algo na página• Ex. - $is_front responde
se a página atual é a página inicial
Relacionando elementos de Design às variáveis da páginaI. Isole os elementos
que são únicos para aquela página daqueles que são compartilhados com outras páginas
II.Determine que elementos serão blocos e quais as regiões onde estarão
III. Crie novas regiões no .info se necessário
IV. Finalmente, formate os elementos HTML no page.tpl.php
Isolando os elementos no .PSD
Isolando elementos Regiões e outras variáveis
Arquivo PSD Administração de blocos
Isolando elementos Blocos em regiões
Usando variáveis no page.tpl.php
Parte III
Ferramentas e recomendações
Temas populares básicos
I. Zen - http://drupal.org/project/zen
• O melhor para começar
• Bem documentado• Opções de layout fixo
ou fluido
Temas prontos
I. www.drupal.org/project/Themes
II. www.topnotchthemes.com
III. www.adaptivethemes.com
IV. www.themeforest.com
V. www.templatemoster.com
Módulos essenciais
I. Admin/Development• Admin Menu• Devel• Conditional
StylesheetsII.Menu Help
• Menu Icons• Menu Block• Menu Trails• Pathauto• Nice Menus
III. Taxonomy• Taxonomy Image• Taxonomy Menu
IV. Images• Imagecache• Imagecache Crop• Galleria• Thickbox
V. Other• Block Class• Dynamic Rendering
Referências
I. drupal.org theming guide• http://drupal.org/theme-guide
II.irc.freenode.net• #drupal-themes • #drupal-design• #drupal-support• #drupal-nc
III. http://mustardseedmedia.com/podcastIV. http://boston.design4drupal.org/sessions
Obrigado!
I. Veja mais slides e dicas aqui:• www.coalmarch.com• www.sheenadonnelly.net