Você está na página 1de 11

Desenvolvendo um Novo Tema para o Drupal 7

1 de 11

developerWorks Brasil

Itens Tcnicos

Software livre

https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/

Biblioteca tcnica

Crie uma aparncia customizada para o seu site Drupal


Temas so plug-ins para o Drupal que desenvolvem ou melhoram a aparncia principal do Drupal. Neste artigo,
obtenha uma viso geral de como funciona o tema do sistema no Drupal, incluindo os vrios componentes de um
tema do Drupal e como determinar quais componentes so necessrios ou quais so elementos opcionais, e aprenda
a construir um novo tema do zero usando o mecanismo de tema padro PHPTemplate .

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

Uma conta do tema para a interface com o usurio (UI) de um website do


Drupal. Mesmo que a estrutura do tema no tenha mudado
consideravelmente, o Drupal verso 7 vem com uma nova metodologia de
implementao de tema. Este artigo mostra como criar um tema do novo
Drupal 7.

Desenvolva e implemente
seu prximo aplicativo na
plataforma de cloud do
IBM Bluemix.

O objetivo de um tema Drupal separar a lgica de processamento da


estrutura a partir do elemento de design. Para isso, o Drupal emprega um
sistema de tema complexo, que consiste em temas, mecanismos temticos e
ganchos. Os componentes do tema trabalham em conjunto com os sistemas centrais do Drupal e com
elementos de design de mdulos para criar a aparncia distinta da interface com o usurioa pgina e os
formulrios individuais do Drupal. Ao separar a lgica de negcio do Drupal de sua lgica de
apresentao, o cdigo mais fcil de ser mantido e possvel trocar a implementao da camada de
tema sem precisar reescrever a camada de cdigo e vice-versa. A Figura 1 ilustra a arquitetura da
estrutura do Drupal.
Figura 1. A arquitetura da estrutura do Drupal

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

Desenvolvendo um Novo Tema para o Drupal 7

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.

Outros mecanismos de tema do


Drupal

O mecanismo de tema PHPTemplate , que o padro do

usados geralmentecom o Drupal. Eles

mecanismo do Drupal e o mais usado neste artigo, usa arquivos de


tema individuais com nomes como filename.tpl.php para ser o tema

Vrios outros mecanismos de tema so


incluem PHPTAL,

wgSmarty,

Zengine,

Awesomengine, ETS, Haml,

XSLengine

Peroxide. No entanto, este artigo usa o

das funes theme_filename() do Drupal. Cada um desses

mecanismo PHPTemplate , porque o

arquivos contm um esqueleto HTML, bem como instrues PHP

mecanismo de tema padro e o nico

para os dados dinmicos. Assim, com um conhecimento bsico de

enviado com o Drupal 7.

PHP, fcil criar temas avanados com PHPTemplate , pois esto


envolvidos apenas pequenos bits de cdigo.

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

Desenvolvendo um Novo Tema para o Drupal 7

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"

Os arquivos de modelo .tpl.php


O diretrio do tema contm vrios arquivos de modelo com nomes como xxx.tpl.php. Eles so arquivos de
modelo que contm a marcao Extensible HTML (XHTML) e variveis PHP para o tema. Em certos
casos, possvel codific-los para entregar os outros tipos de sada de dados, como RSS. De um modo
geral, cada arquivo tpl.php de tema do Drupal codificado para lidar com as sadas de dados especficas:
Pode ser confuso e contraproducente incorporar uma lgica complexa em arquivos de modelo, pois isso
pode torn-los difceis de serem mantidos. O cenrio desejvel que eles contenham nada mais que as
tags XHTML lineares e variveisPHP.
A Listagem 2 mostra o contedo do arquivo node.tpl.php, que descreve a sada do n de base para o tema
principal Garland.
Listagem 2. Contedos do arquivo node.tpl.php de tema Garland
<?php
// $Id: node.tpl.php,v 1.24 2010/12/01 00:18:15 webchick Exp $
?>
<div id="node-<?php print $node->nid; ?>"
class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>><a href="<?php
print $node_url; ?>"><?php print $title; ?></a></h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($display_submitted): ?>
<span class="submitted"><?php print $submitted ?></span>
<?php endif; ?>
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
// Oculte os comentrios e links agora para que seja possvel renderiz-los mais tarde.
hide($content['comments']);
hide($content['links']);
print render($content);
?>
</div>
<div class="clearfix">
<?php if (!empty($content['links'])): ?>
<div class="links"><?php print render($content['links']); ?></div>
<?php endif; ?>
<?php print render($content['comments']); ?>
</div>

05/02/2015 19:23

Desenvolvendo um Novo Tema para o Drupal 7

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

theme-settings.php. Este arquivo exibe as configuraes de IU administrativa ou recursos avanados,


alm de configuraes gerais, como as de busca ou o logotipo da misso. Um olhar sobre o contedo
deste arquivo para o tema Garland, mostrado na Listagem 3, proporciona uma indicao do que deveria
finalmente ser exibido.
Listagem 3. Contedo do arquivo theme-settings.php de tema Garland
// $Id: theme-settings.php,v 1.3 2010/09/04 15:21:09 seca Exp $
/**
* @file
* Os retornos de chamada de configurao de tema para o tema Garland.
*/
/**
* Implementa hook_form_FORM_ID_alter().
*
* @param $form
*
The form.
* @param $form_state
*
The form state.
*/
function garland_form_system_theme_settings_alter(&$form, &$form_state) {
$form['garland_width'] = array(
'#type' => 'radios',
'#title' => t('Content width'),
'#options' => array(
'fluid' => t('Fluid width'),
'fixed' => t('Fixed width'),
),
'#default_value' => theme_get_setting('garland_width'),
'#description' => t('Specify whether the content will wrap to a fixed
width or will fluidly expand to the width of the browser window.'),
// Coloque isso acima das opes do esquema de cores.
'#weight' => -2,
);
}

05/02/2015 19:23

Desenvolvendo um Novo Tema para o Drupal 7

5 de 11

https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/

A exibio eventual ser uma forma que se assemelha Figura 4.


Figura 4. A pgina de configuraes de tema

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.

Criando a estrutura de diretrio


Primeiro, crie um diretrio para conter os arquivos do tema. O melhor lugar para colocar esse diretrio no
diretrio sites/all/themes. D ao diretrio um nome nico que descreva o tema: Esse nome no deve ter
espaos.
Embora no seja obrigatrio, ele ajuda a criar subdiretrios para a folha de estilo (arquivos CSS), imagens
e scripts (se o seu tema us-los). Fazer isso ajudar a manter as coisas organizadas.

Desenvolvendo o arquivo .info


O arquivo .info apenas um arquivo de texto contendo dadosgeralmente, os parmetros necessrios
para descrever a estrutura, bem como o contedo e a configurao do tema. Dentro deste arquivo de texto,
cada linha faz par com uma chave para um valor, com o valor direita e a chave esquerda do sinal de
igual (=). Listagem 4 d um exemplo.
Listagem 4. Contedo de amostra do arquivo .info de tema Garland
; $Id: garland.info,v 1.10 2010/11/07 00:27:20 dries Exp $
name = Garland
description = A multi-column theme that can be configured to modify colors and
switch between fixed- and fluid-width layouts
package = Core
version = VERSION
core = 7.x
stylesheets[all][] = style.css

05/02/2015 19:23

Desenvolvendo um Novo Tema para o Drupal 7

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

Desenvolvendo um Novo Tema para o Drupal 7

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

Criando novas regies de tema

tema. preciso definir especificamente a chave regions e, em

Qualquer parte de sua pgina que deseja

seguida, o nome legvel por mquina interno entre colchetes retos.

ser capaz de editar na pgina de


administrao dos Blocos ser

Ento, preciso definir o nome legvel como o valor aplicvel. Segue

necessria para se tornar uma regio.

a sintaxe:

Normalmente, essa regio inclui o


cabealho, barra lateral direita, rea de
contedo e rodap. preciso apresentar
todas as suas regies no arquivo .info;
caso contrrio, eles no existiro para o
Drupal.

regions[highlighted] =Mission Statement

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

Desenvolvendo um Novo Tema para o Drupal 7

8 de 11

https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/

A Listagem 5 mostra todos os elementos disponveis para a chave features .


Listagem 5. Entrada de recursos temticos no arquivo .info
features[
features[
features[
features[
features[
features[
features[
features[

]
]
]
]
]
]
]
]

=
=
=
=
=
=
=
=

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

apenas se voc especific-lo no arquivo .info. Segue a sintaxe:


scripts[] = scripts/myscript.js

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

Valores padro do .info


O arquivo .info contm valores padro que o Drupal assume para cada tema instalado. Se esses valores
no estiverem definidos no arquivo .info, o Drupal fora o tema para usar os valores padro. Observe, no
entanto, que esses valores so aplicveis como um grupo. Isso significa que, se voc substituir uma linha
como:
regions[sub_header] = Sub-header

ser necessrio redefinir o resto das regies padro; caso contrrio, elas sero omitidas. Esta regra

05/02/2015 19:23

Desenvolvendo um Novo Tema para o Drupal 7

9 de 11

https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/

tambm se aplica a stylesheets. Embora a chave stylesheets no esteja definida tecnicamente em um


grupo, se voc definir uma outra stylesheet no arquivo .info, dever redefinir novamente o style.css; caso
contrrio, no ser includo.
As chaves e valores na Listagem 6 so os padres para um tema do Drupal 7.
Listagem 6. Valores padro do .info
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[highlighted] = Highlighted
regions[help] = Help
regions[page_top] = Page Top
regions[page_bottom] = Page Bottom
engine = phptemplate
features[
features[
features[
features[
features[
features[
features[
features[

]
]
]
]
]
]
]
]

=
=
=
=
=
=
=
=

logo
name
slogan
node_user_picture
comment_user_picture
favicon
main_menu
secondary_menu

screenshot = screenshot.png

Desenvolvendo o arquivo page.tpl.php


Agora, examine o contedo de um tpico arquivo page.tpl.php. A imagem na Figura 6 a partir do tema
Garland e mostra como a fonte se parece em um navegador.
Figura 6. O cdigo fonte page.tpl.php um navegador

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.

Incluso de variveis aos elementos bsicos da pgina


Vrias variveis esto disponveis para o desenvolvimento de um page.tpl.php. O que voc escolheu para
incluir depende da funcionalidade que deseja alcanar em seu tema. Por exemplo, se voc optar por ter
trilhas de navegao em suas pginas, inclui a varivel $breadcrumbs .
As variveis mais comuns que voc encontrar no page.tpl.php so:
$site_name
$logo (o logotipo carregado por meio das configuraes de tema; s til quando voc implementa o

recurso de tema do logotipo)


$title (o ttulo da pgina)

05/02/2015 19:23

Desenvolvendo um Novo Tema para o Drupal 7

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

vezes, usado por mdulos)


$messages
$action_links

E algumas outras variveis so teis:


$base_path (o caminho para a raiz do seu site)
$front_page (o caminho para a pgina inicial do site)
$directory (o caminho do seu tema)

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.

Desenvolvendo outros arquivos de modelo


Os modelos padro para outros arquivos de tema esto disponveis e

Imprimir ou renderizar

vm com o ncleo do Drupal. possvel localizar uma lista deles no

Algumas variveis precisam ser exibidas

site do Drupal (consulte Recursos para obter um link). Assim como

usando a funo render() , enquanto


outras podem simplesmente ser

para o arquivo page.tpl.php, a melhor maneira de desenvolver

impressas. Se uma matriz contiver uma

facilmente o seu prprio site encontrar um arquivo principal,

varivel, conforme listado na pgina de

observar como ele foi elaborado e, em seguida, desenvolver o seu


prprio. Uma viagem para o site Drupal apontar para as variveis
permitidas para uso em qualquer arquivo de tema.

referncia page.tpl.php (consulte


Recursos para um link), necessrio
usar render(). Caso negativo, possvel
imprimir a varivel (<?php

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

Desenvolvendo um Novo Tema para o Drupal 7

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

Se capacite atravs de diversos


recursos de treinamento.

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.

Programa IBM Champion


O programa reconhece
contribuidores que esto
ajudando a construir um Planeta
Mais Inteligente.

Consulte o site do Drupal para obter uma lista completa das classes CSS.

Programa Global de
Empreendedorismo da IBM

Um mtodo zona de software livre do developerWorks fornece diversas

Faa parte do programa que


busca por empreendedores que
ajudam a modificar a maneira
como o mundo funciona.

informaes sobre ferramentas de software livre e tecnologias de software livre


utilizadas.
especializadas em artigos que cobrem diversas solues baseada na web.
Fique por dentro dos eventos tcnicos e webcasts do developerWorks com
nfase em uma variedade de produtos IBM e assuntos do segmento de
mercado de TI.
Participe de um briefing gratuito do developerWorks Live! para inteirar-se sobre
os produtos e ferramentas IBM, alm das tendncias do mercado de TI.
Acompanhe as Demos on demand do developerWorks , que abrangem desde
demos de instalao e configurao de produtos para iniciantes at
funcionalidades avanadas para desenvolvedores experientes.
Siga o developerWorks no Twitter, ou inscreva-se em um feed de tweets do
Linux no developerWorks.
Obter produtos e tecnologias
Obtenha mais informaes sobre o Drupal 7.
Avalie os produtos IBM da maneira que for melhor para voc: faa download da
verso de teste de um produto, avalie um produto on-line, use-o em um
ambiente de nuvem ou passe algumas horas na SOA Sandbox para saber mais
sobre como implementar arquitetura orientada a servio (SOA) de maneira
eficiente.
Discutir
Confira Blogs do developerWorks e participe da comunidade do
developerWorks.
Participe dos comunidade do developerWorks. Conecte-se com outros usurios
do developerWorks ao mesmo tempo que explora blogs, fruns, grupos e wikis
orientados a desenvolvedor.

05/02/2015 19:23

Você também pode gostar