Escolar Documentos
Profissional Documentos
Cultura Documentos
1 de 11
developerWorks Brasil
Itens Tcnicos
Software livre
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
Biblioteca tcnica
Timi Ogunjobi autor e desenvolvedor de aplicativos da web. CEO da Xceedia Limited, uma empresa de engenharia de software com
interesse na web e em aplicativos mveis. Tambm o autor de trs livros sobre o Drupal, entre vrios outros. possvel entrar em contato
com Timi pelo email timi@xceedia.co.uk.
26/Mai/2014
Desenvolva e implemente
seu prximo aplicativo na
plataforma de cloud do
IBM Bluemix.
Os temas exibem dados que o ncleo do Drupal busca a partir do banco de dados, por meio de um
mecanismo do tema subjacente, que atua como uma interface entre o ncleo do Drupal e os modelos de
tema.
O mecanismo de tema
Mecanismos de tema so os meios pelos quais os temas interagem com o ncleo do Drupal. H vrios
mecanismos de tema que podem ser usados com o Drupal. Os mais populares so:
PHPTemplate
XTemplate
05/02/2015 19:23
2 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
Plain PHP
Smarty Engine
Tambm possvel usar seu prprio mecanismo customizado, se
desejar.
wgSmarty,
Zengine,
XSLengine
Planejando o tema
O tema constitudo por vrios arquivos. Assim como muitos arquivos dependem da complexidade do
tema. Um tema pode ter apenas trs arquivos ou centenas deles, incluindo elementos grficos e vrios
scripts colocados em vrias pastas dentro do diretrio do tema. A Figura 2 mostra as descries de
arquivos tpicos (cores, imagens, logotipo, modelos, folhas de estilo e arquivos PHP) que podem ser
encontradas dentro da pasta principal de um tema.
Figura 2. Contedo tpico de uma pasta de tema
Nem todos esses arquivos so necessrios em um tema e alguns temas no tm sequer o arquivo de
folha de estilo em cascata (CSS), que muitos pensam ser absolutamente necessrio. Ao compreender
como esses arquivos de tema so usados, a estrutura de um tema e como ele funciona se tornam mais
claros. Vamos olhar novamente em algum dos arquivos no diretrio do tema e examinar sua funo dentro
do tema geral.
O arquivo .info
O arquivo .info um arquivo necessrio: Deve ser includo para que o Drupal veja o seu tema. Os arquivos
.info informam ao Drupal o nome interno do tema. Se, por exemplo, o nome do arquivo for ibmtheme.info,
logo, o nome que o Drupal dar a este tema ser ibmtheme. Se o seu tema usa elementos como o
JavaScript, metadados, folhas de estilo ou regies de bloco, ele tambm deve ser definido no arquivo .info.
Todo o resto opcional. O contedo do arquivo .info para o tema Bartik, na Listagem 1, ilustra este
05/02/2015 19:23
3 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
comportamento.
Listagem 1. Contedo do arquivo .info de tema Bartik
; $Id: bartik.info,v 1.5 2010/11/07 00:27:20 dries Exp $
name = Bartik
description = Um tema flexvel e tangvel novamente com muitas regies.
package = Core
version = VERSION
core = 7.x
stylesheets[all][] =
stylesheets[all][] =
stylesheets[all][] =
stylesheets[print][]
css/layout.css
css/style.css
css/colors.css
= css/print.css
regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted
regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last
regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer
settings[shortcut_module_link] = 0
; Informaes includas pelo script do pacote do drupal.org em 05-01-2011
version = "7.0"
project = "drupal"
datestamp = "1294208756"
05/02/2015 19:23
4 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
</div>
O arquivo template.php
O arquivo template.php normalmente tem toda a lgica condicional e o processamento de dados para a
sada de um tema. Tambm possvel usar o arquivo template.php para manter os arquivos .tpl.php para
o tema organizado. Como esse um arquivo PHP, obrigatrio iniciar o contedo com uma tag <?php de
abertura de PHP, mas possvel omitir a tag de fechamento.
Outros arquivos
Vrios outros elementos no so necessrios para o funcionamento do tema, mas podem aparecer em
muitos temas. Esses elementos incluem o logotipo e captura de tela, o arquivo theme-settings.php e os
arquivos color.inc:
O logotipo e a captura de tela. Estes elementos so recomendados, mas no absolutamente
necessrios para o funcionamento do tema. No entanto, caso queira contribuir com o seu tema para o
repositrio do Drupal, uma captura de tela obrigatria. A Figura 3 uma captura de tela para o tema
Garland.
Figura 3. Captura de tela do tema Garland
05/02/2015 19:23
5 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
color.inc. A funo da cor. O mdulo permite aos administradores alterar completamente um esquema
de cores do tema sem ter de trabalhar manualmente nas folhas de estilo. Se o tema requer apoio do
mdulo de cor, preciso incluir um diretrio color com um arquivo color.inc juntamente com os vrios
arquivos de suporte.
Desenvolvendo o tema
Existem dois mtodos bsicos para o desenvolvimento de um tema: possvel desenvolv-lo a partir do
zero ou modificar um tema j existente. Neste artigo, voc desenvolve um novo tema a partir do zero. Dito
isto, porm, voc manter o contedo de temas teis existentes para o propsito de ver como a estrutura
fica.
05/02/2015 19:23
6 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
stylesheets[print][] = print.css
settings[garland_width] = fluid
; Informaes includas no script de pacote no drupal.org em 05-01-2011
version = "7.0"
project = "drupal"
1[ OPEN SOURCE\index.xml 31/05/2012] -
Inclui-se comentrios usando ponto e vrgula (;) no comeo de uma linha. Colchetes retos ([]), quando
usados, so para a criao de matrizes de valores associados. Vamos percorrer os elementos que devem
ou podem ser includos em um arquivo .info.
Nome
O valor name necessrio. Deve ser um nome legvel, que comece com um caractere alfabtico. O nome
tem a mesma limitao para a formao de funes em PHP, porque o Drupal usa-o para o mesmo
propsito. Portanto, o nome pode conter nmeros sublinhados (_) mas no hfens (-), espaos ou
pontuao. Segue a sintaxe:
name = Garland
Descrio
A chave description recomendada e deve ser apenas uma breve descrio do tema. A descrio
inserida aqui aparece no tema selecionado ou na pgina Aparncia . Segue a sintaxe:
description = A multi-column theme that can be configured to modify colors
and switch between fixed- and fluid-width layouts
Screenshot
A chave screenshot opcional. Sua funo informar ao Drupal onde encontrar a imagem miniatura do
seu novo tema. A imagem miniatura ser exibida na pgina Aparncia . Se voc no incluir essa tecla no
arquivo .info, o Drupal chamar um arquivo screenshot.png padro do diretrio do tema padro. Se voc
decidir chamar o seu arquivo miniatura com um nome diferente de screenshot.png ou colocar o arquivo
em um diretrio fora do diretrio principal do seu tema, precisar incluir esta tecla. Segue a sintaxe:
screenshot = /images/screenshot.png
Para criar uma captura de tela, basta capturar uma imagem do seu tema completo em um navegador. Em
seguida, corte e redimensione a imagem para uma dimenso de 294 x 219 pixels e salve-a como
screenshot.png. Coloque esse arquivo na mesma pasta em seu arquivo .info.
Version
Embora muitos dos temas populares incluam a chave version , seu uso no incentivado. Se voc
pretende hospedar o seu tema no repositrio de temas do Drupal, no h necessidade de incluir version,
porque quando um release embalado para download, o drupal.org inclui automaticamente a sequncia
de verso. Caso contrrio, possvel incluir qualquer sequncia de verso que desejar. Segue a sintaxe:
version = 1.0
Ncleo
A chave core um valor necessrio. Em todas as verses atualmente suportadas pelo Drupal, preciso
indicar a verso do Drupal com a qual seus mdulos e temas so compatveis. O valor definido aqui ser
comparado constante de Compatibilidade do Ncleo do Drupal (encontrada no arquivo
include/bootstrap.inc); se nenhuma correspondncia for encontrada, o Drupal desativar o tema. Segue a
sintaxe para a constante:
<?php
define('DRUPAL_CORE_COMPATIBILITY', '7.x')
?>
Os scripts de empacotamento drupal.org definem automaticamente este valor com base na configurao
de compatibilidade do ncleo do Drupal em cada n de release (se voc estiver contribuindo com seu
tema).
Mecanismo
05/02/2015 19:23
7 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
A chave engine indica o tipo de mecanismo que o seu tema usa. necessrio na maioria dos casos. Se
voc no fornecer o engine no arquivo .info, o Drupal assume que o tema independente, implementado
com um arquivo .theme. A maioria dos temas encontrados no repositrio Drupal.org usa o mecanismo
PHPTemplate padro, que fornecido com o ncleo do Drupal. Segue a sintaxe:
engine = phptemplate
Base theme
Se o tema for um subtema para outro, certifique-se de declarar o seu base theme para ativar a herana de
tema. Em outras palavras, os recursos do arquivo do tema de base estaro disponveis para uso no
subtema. Ser necessrio inserir o nome legvel por mquina interno do tema de base. Segue a sintaxe:
base theme = garland
Regions
A chave regions define as regies de bloco disponveis para o
a sintaxe:
Se voc optou por no definir nenhuma regio, os seguintes valores sero assumidos para um tema do
Drupal 7:
regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer
possvel substituir esses valores para suas necessidades especficas. Se voc fizer isso, dever declarar
a linha. Segue a sintaxe:
regions[highlighted] =Mission Statement
Recursos
possvel alternar vrios elementos da pgina na pgina de configurao do tema. As caixas de
verificao exibidas na pgina de configurao do tema so controladas pela chave features (consulte a
Figura 5). Assim, possvel suprimir caixas de seleo para os elementos que no so definidos nem
usados por um tema. A omisso de uma entrada suprime uma caixa de seleo para esse recurso. Se
voc no definir todas as caractersticas, ento, todas as caixas de seleo sero exibidas como padres
assumidos.
Figura 5. O tema apresenta a pgina de configurao
05/02/2015 19:23
8 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
]
]
]
]
]
]
]
]
=
=
=
=
=
=
=
=
logo
name
slogan
node_user_picture
comment_user_picture
favicon
main_menu
secondary_menu
Stylesheets
Os temas do Drupal usados como padro para o uso do style.css. No entanto, nas verses atuais, os
temas no so mais padro do style.css se esse arquivo no for especificado no arquivo .info. Alm disso,
possvel incluir novas folhas de estilo por meio do arquivo .info. Segue a sintaxe:
stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
Scripts
Costumava ser comum para incluir arquivos JavaScript apenas chamando uma funo, como
drupal_add_js() no arquivo template.php do tema. No entanto, no Drupal 7, o script.js includo
PHP
A sequncia definida aqui ser a verso PHP mnima que suporta o tema. O valor padro deriva da
constante DRUPAL MINIMUM PHP (localizada no arquivo includes/bootstrap.inc):
<?php
define('DRUPAL_MINIMUM_PHP', '5.2.4')
?>
possvel alterar esse valor, mas no necessrio incluir a sequncia. Segue a sintaxe:
php = 5.2.4
ser necessrio redefinir o resto das regies padro; caso contrrio, elas sero omitidas. Esta regra
05/02/2015 19:23
9 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
]
]
]
]
]
]
]
]
=
=
=
=
=
=
=
=
logo
name
slogan
node_user_picture
comment_user_picture
favicon
main_menu
secondary_menu
screenshot = screenshot.png
Ao olhar mais de perto, o modelo page.tpl.php apenas uma pgina HTML simples com uma grande
pitada de instrues PHP. Muito convenientemente, a maioria dos elementos do PHP j foi definida para o
Drupal e tudo o que preciso ser feito coloc-los como quiser.
Observao: O link http://drupal.org/node/190815 [Core Templates] leva a uma lista de
variveisdisponveis para o modelo page.tpl.php.
05/02/2015 19:23
10 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
$main_menu
$secondary_menu
$breadcrumbs (um auxlio navegao que deixa um rastro de links de referncia quando um usurio
se aprofunda em um website)
Tambm h as variveis associadas com a administrao do Drupal:
$tabs (menu usado para edio ou visualizao de menus de administrao, entre outras coisas; muitas
possvel inserir variveis usando a interface de programao de aplicativos (API) do Render, como esta:
<?php print render($tabs); ?>
Se suas qualificaes em PHP e HTML estiverem acima da mdia, evidentemente ser possvel criar um
tema campeo, observando como o exemplo foi desenvolvido e, em seguida, usando as variveis
permitidas para criar a sua prpria.
Imprimir ou renderizar
print $variable;
?>).
O arquivo style.css
Em uma pgina esttica HTML normal, preciso incluir um ponteiro dentro do cabealho da pgina para
mostrar a localizao da folha de estilo a ser usada para a exibio da pgina. Um ponteiro se parece com:
<link rel="stylesheet" type="text/css" href="/model.css" />
Conforme j foi discutido, possvel incluir novos estilos a um tema e sobrescrever estilos padro. Em
ambos os casos, preciso inserir o tema na folha de estilo no arquivo .info. O que h na folha de estilo? O
mesmo tipo de abordagem modular usado para classes CSS que o ncleo do Drupal usa para elementos
de pgina padro da estrutura. Mesmo que os desenvolvedores criem seu prprio tema, ocorrem diversas
classes em todo o site Drupal. Para obter uma lista completa de classes no ncleo do Drupal 7, consulte
Recursos.
05/02/2015 19:23
11 de 11
https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/
Concluso
Este artigo forneceu uma viso geral de como funciona o sistema de temas no Drupal 7. Ele explicou os
vrios componentes de um tema do Drupal e como proceder com a construo de um novo tema a partir
do zero usando o mecanismo de tema padro PHPTemplate . Voc viu a estrutura tpica de cada arquivo
de tema do componente. necessrio ter o que precisa para criar o seu prprio tema customizado.
Aproveite!
Recursos
Guias de capacitao
Aprender
Visite a Site do Drupal para encontrar os modelos padro para outros temas
includos ao ncleo do Drupal.
Confira pgina de referncia page.tpl.php para obter uma lista de variveis
para usar em seu tema.
Consulte o site do Drupal para obter uma lista completa das classes CSS.
Programa Global de
Empreendedorismo da IBM
05/02/2015 19:23