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