Desenvolvendo Um Novo Tema Para o Drupal 7

Desenvolva e implementeseu prximo aplicativo naplataforma de cloud do

IBM Bluemix.

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 umtema do Drupal e como determinar quais componentes so necessrios ou quais so elementos opcionais, e aprendaa 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 cominteresse na web e em aplicativos mveis. Tambm o autor de trs livros sobre o Drupal, entre vrios outros. possvel entrar em contatocom Timi pelo email [email protected].

26/Mai/2014

Uma conta do tema para a interface com o usurio (UI) de um website doDrupal. Mesmo que a estrutura do tema no tenha mudadoconsideravelmente, o Drupal verso 7 vem com uma nova metodologia deimplementao de tema. Este artigo mostra como criar um tema do novoDrupal 7.

O objetivo de um tema Drupal separar a lgica de processamento daestrutura a partir do elemento de design. Para isso, o Drupal emprega umsistema de tema complexo, que consiste em temas, mecanismos temticos eganchos. Os componentes do tema trabalham em conjunto com os sistemas centrais do Drupal e comelementos de design de mdulos para criar a aparncia distinta da interface com o usurioa pgina e osformulrios individuais do Drupal. Ao separar a lgica de negcio do Drupal de sua lgica deapresentao, o cdigo mais fcil de ser mantido e possvel trocar a implementao da camada detema sem precisar reescrever a camada de cdigo e vice-versa. A Figura 1 ilustra a arquitetura daestrutura 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 ummecanismo do tema subjacente, que atua como uma interface entre o ncleo do Drupal e os modelos detema.

O mecanismo de temaMecanismos de tema so os meios pelos quais os temas interagem com o ncleo do Drupal. H vriosmecanismos de tema que podem ser usados com o Drupal. Os mais populares so:

PHPTemplate

XTemplate

developerWorks BrasildeveloperWorks Brasil Itens TcnicosItens Tcnicos Software livreSoftware livre Biblioteca tcnicaBiblioteca tcnica

Crie uma aparncia customizada para o seu site Drupal

Desenvolvendo um Novo Tema para o Drupal 7 https://www.ibm.com/developerworks/br/library/os-new-drupal-theme/

1 de 11 05/02/2015 19:23

Outros mecanismos de tema doDrupalVrios outros mecanismos de tema sousados geralmentecom o Drupal. Elesincluem PHPTAL, wgSmarty, Zengine,Awesomengine, ETS, Haml, XSLengine ePeroxide. No entanto, este artigo usa omecanismo PHPTemplate , porque omecanismo de tema padro e o nicoenviado com o Drupal 7.

Plain PHP

Smarty Engine

Tambm possvel usar seu prprio mecanismo customizado, sedesejar.

O mecanismo de tema PHPTemplate , que o padro domecanismo do Drupal e o mais usado neste artigo, usa arquivos detema individuais com nomes como filename.tpl.php para ser o temadas funes theme_filename() do Drupal. Cada um dessesarquivos contm um esqueleto HTML, bem como instrues PHPpara os dados dinmicos. Assim, com um conhecimento bsico dePHP, fcil criar temas avanados com PHPTemplate , pois estoenvolvidos apenas pequenos bits de cdigo.

Planejando o temaO tema constitudo por vrios arquivos. Assim como muitos arquivos dependem da complexidade dotema. Um tema pode ter apenas trs arquivos ou centenas deles, incluindo elementos grficos e vriosscripts colocados em vrias pastas dentro do diretrio do tema. A Figura 2 mostra as descries dearquivos tpicos (cores, imagens, logotipo, modelos, folhas de estilo e arquivos PHP) que podem serencontradas 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 defolha de estilo em cascata (CSS), que muitos pensam ser absolutamente necessrio. Ao compreendercomo esses arquivos de tema so usados, a estrutura de um tema e como ele funciona se tornam maisclaros. Vamos olhar novamente em algum dos arquivos no diretrio do tema e examinar sua funo dentrodo tema geral.

O arquivo .infoO 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 oJavaScript, 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


2 de 11 05/02/2015 19:23

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 = Bartikdescription = Um tema flexvel e tangvel novamente com muitas regies.package = Coreversion = VERSIONcore = 7.x

stylesheets[all][] = css/layout.cssstylesheets[all][] = css/style.cssstylesheets[all][] = css/colors.cssstylesheets[print][] = css/print.css

regions[header] = Headerregions[help] = Helpregions[page_top] = Page topregions[page_bottom] = Page bottomregions[highlighted] = Highlighted

regions[featured] = Featuredregions[content] = Contentregions[sidebar_first] = Sidebar firstregions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych firstregions[triptych_middle] = Triptych middleregions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first columnregions[footer_secondcolumn] = Footer second columnregions[footer_thirdcolumn] = Footer third columnregions[footer_fourthcolumn] = Footer fourth columnregions[footer] = Footer

settings[shortcut_module_link] = 0

; Informaes includas pelo script do pacote do drupal.org em 05-01-2011version = "7.0"project = "drupal"datestamp = "1294208756"

Os arquivos de modelo .tpl.phpO diretrio do tema contm vrios arquivos de modelo com nomes como xxx.tpl.php. Eles so arquivos demodelo que contm a marcao Extensible HTML (XHTML) e variveis PHP para o tema. Em certoscasos, possvel codific-los para entregar os outros tipos de sada de dados, como RSS. De um modogeral, 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 issopode torn-los difceis de serem mantidos. O cenrio desejvel que eles contenham nada mais que astags 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 temaprincipal Garland.

Listagem 2. Contedos do arquivo node.tpl.php de tema Garland

O arquivo template.phpO arquivo template.php normalmente tem toda a lgica condicional e o processamento de dados para asada de um tema. Tambm possvel usar o arquivo template.php para manter os arquivos .tpl.php parao tema organizado. Como esse um arquivo PHP, obrigatrio iniciar o contedo com uma tag

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 esquemade cores do tema sem ter de trabalhar manualmente nas folhas de estilo. Se o tema requer apoio domdulo de cor, preciso incluir um diretrio color com um arquivo color.inc juntamente com os vriosarquivos de suporte.

Desenvolvendo o temaExistem dois mtodos bsicos para o desenvolvimento de um tema: possvel desenvolv-lo a partir dozero ou modificar um tema j existente. Neste artigo, voc desenvolve um novo tema a partir do zero. Ditoisto, porm, voc manter o contedo de temas teis existentes para o propsito de ver como a estruturafica.

Criando a estrutura de diretrioPrimeiro, crie um diretrio para conter os arquivos do tema. O melhor lugar para colocar esse diretrio nodiretrio sites/all/themes. D ao diretrio um nome nico que descreva o tema: Esse nome no deve terespaos.

Embora no seja obrigatrio, ele ajuda a criar subdiretrios para a folha de estilo (arquivos CSS), imagense scripts (se o seu tema us-los). Fazer isso ajudar a manter as coisas organizadas.

Desenvolvendo o arquivo .infoO arquivo .info apenas um arquivo de texto contendo dadosgeralmente, os parmetros necessriospara 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 deigual (=). 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 = Garlanddescription = A multi-column theme that can be configured to modify colors and switch between fixed- and fluid-width layoutspackage = Coreversion = VERSIONcore = 7.xstylesheets[all][] = style.css


5 de 11 05/02/2015 19:23

stylesheets[print][] = print.csssettings[garland_width] = fluid

; Informaes includas no script de pacote no drupal.org em 05-01-2011version = "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 ([]), quandousados, so para a criao de matrizes de valores associados. Vamos percorrer os elementos que devemou podem ser includos em um arquivo .info.

NomeO valor name necessrio. Deve ser um nome legvel, que comece com um caractere alfabtico. O nometem a mesma limitao para a formao de funes em PHP, porque o Drupal usa-o para o mesmopropsito. Portanto, o nome pode conter nmeros sublinhados (_) mas no hfens (-), espaos oupontuao. Segue a sintaxe:name = Garland

DescrioA chave description recomendada e deve ser apenas uma breve descrio do tema. A descrioinserida 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

ScreenshotA chave screenshot opcional. Sua funo informar ao Drupal onde encontrar a imagem miniatura doseu novo tema. A imagem miniatura ser exibida na pgina Aparncia . Se voc no incluir essa tecla noarquivo .info, o Drupal chamar um arquivo screenshot.png padro do diretrio do tema padro. Se vocdecidir chamar o seu arquivo miniatura com um nome diferente de screenshot.png ou colocar o arquivoem 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. Emseguida, corte e redimensione a imagem para uma dimenso de 294 x 219 pixels e salve-a comoscreenshot.png. Coloque esse arquivo na mesma pasta em seu arquivo .info.

VersionEmbora muitos dos temas populares incluam a chave version , seu uso no incentivado. Se vocpretende 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 sequnciade verso. Caso contrrio, possvel incluir qualquer sequncia de verso que desejar. Segue a sintaxe:version = 1.0

NcleoA chave core um valor necessrio. Em todas as verses atualmente suportadas pelo Drupal, precisoindicar a verso do Drupal com a qual seus mdulos e temas so compatveis. O valor definido aqui sercomparado constante de Compatibilidade do Ncleo do Drupal (encontrada no arquivoinclude/bootstrap.inc); se nenhuma correspondncia for encontrada, o Drupal desativar o tema. Segue asintaxe para a constante:

Os scripts de empacotamento drupal.org definem automaticamente este valor com base na configuraode compatibilidade do ncleo do Drupal em cada n de release (se voc estiver contribuindo com seutema).

Mecanismo


6 de 11 05/02/2015 19:23

Criando novas regies de temaQualquer parte de sua pgina que desejaser capaz de editar na pgina deadministrao dos Blocos sernecessria para se tornar uma regio.Normalmente, essa regio inclui ocabealho, barra lateral direita, rea decontedo e rodap. preciso apresentartodas as suas regies no arquivo .info;caso contrrio, eles no existiro para oDrupal.

A chave engine indica o tipo de mecanismo que o seu tema usa. necessrio na maioria dos casos. Sevoc no fornecer o engine no arquivo .info, o Drupal assume que o tema independente, implementadocom um arquivo .theme. A maioria dos temas encontrados no repositrio Drupal.org usa o mecanismoPHPTemplate padro, que fornecido com o ncleo do Drupal. Segue a sintaxe:engine = phptemplate

Base themeSe o tema for um subtema para outro, certifique-se de declarar o seu base theme para ativar a herana detema. Em outras palavras, os recursos do arquivo do tema de base estaro disponveis para uso nosubtema. Ser necessrio inserir o nome legvel por mquina interno do tema de base. Segue a sintaxe:base theme = garland

RegionsA chave regions define as regies de bloco disponveis para otema. preciso definir especificamente a chave regions e, emseguida, o nome legvel por mquina interno entre colchetes retos.Ento, preciso definir o nome legvel como o valor aplicvel. Seguea sintaxe:

regions[highlighted] =Mission Statement

Se voc optou por no definir nenhuma regio, os seguintes valores sero assumidos para um tema doDrupal 7:regions[header] = Headerregions[highlighted] = Highlightedregions[help] = Helpregions[content] = Contentregions[sidebar_first] = Left sidebarregions[sidebar_second] = Right sidebarregions[footer] = Footer

possvel substituir esses valores para suas necessidades especficas. Se voc fizer isso, dever declarara linha. Segue a sintaxe:regions[highlighted] =Mission Statement

Recursos possvel alternar vrios elementos da pgina na pgina de configurao do tema. As caixas deverificao exibidas na pgina de configurao do tema so controladas pela chave features (consulte aFigura 5). Assim, possvel suprimir caixas de seleo para os elementos que no so definidos nemusados por um tema. A omisso de uma entrada suprime uma caixa de seleo para esse recurso. Sevoc no definir todas as caractersticas, ento, todas as caixas de seleo sero exibidas como padresassumidos.

Figura 5. O tema apresenta a pgina de configurao


7 de 11 05/02/2015 19:23

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

Listagem 5. Entrada de recursos temticos no arquivo .infofeatures[ ] = logofeatures[ ] = namefeatures[ ] = sloganfeatures[ ] = node_user_picturefeatures[ ] = comment_user_picturefeatures[ ] = faviconfeatures[ ] = main_menufeatures[ ] = secondary_menu

StylesheetsOs temas do Drupal usados como padro para o uso do style.css. No entanto, nas verses atuais, ostemas 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.cssstylesheets[print][] = css/print.css

ScriptsCostumava ser comum para incluir arquivos JavaScript apenas chamando uma funo, comodrupal_add_js() no arquivo template.php do tema. No entanto, no Drupal 7, o script.js includoapenas se voc especific-lo no arquivo .info. Segue a sintaxe:scripts[] = scripts/myscript.js

PHPA sequncia definida aqui ser a verso PHP mnima que suporta o tema. O valor padro deriva daconstante DRUPAL MINIMUM PHP (localizada no arquivo includes/bootstrap.inc):

possvel alterar esse valor, mas no necessrio incluir a sequncia. Segue a sintaxe:php = 5.2.4

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

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


8 de 11 05/02/2015 19:23

tambm se aplica a stylesheets. Embora a chave stylesheets no esteja definida tecnicamente em umgrupo, se voc definir uma outra stylesheet no arquivo .info, dever redefinir novamente o style.css; casocontrrio, no ser includo.

As chaves e valores na Listagem 6 so os padres para um tema do Drupal 7.

Listagem 6. Valores padro do .inforegions[sidebar_first] = Left sidebarregions[sidebar_second] = Right sidebarregions[content] = Contentregions[header] = Headerregions[footer] = Footerregions[highlighted] = Highlightedregions[help] = Helpregions[page_top] = Page Topregions[page_bottom] = Page Bottom

engine = phptemplate

features[ ] = logofeatures[ ] = namefeatures[ ] = sloganfeatures[ ] = node_user_picturefeatures[ ] = comment_user_picturefeatures[ ] = faviconfeatures[ ] = main_menufeatures[ ] = secondary_menu

screenshot = screenshot.png

Desenvolvendo o arquivo page.tpl.phpAgora, examine o contedo de um tpico arquivo page.tpl.php. A imagem na Figura 6 a partir do temaGarland 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 grandepitada de instrues PHP. Muito convenientemente, a maioria dos elementos do PHP j foi definida para oDrupal 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 devariveisdisponveis para o modelo page.tpl.php.

Incluso de variveis aos elementos bsicos da pginaVrias variveis esto disponveis para o desenvolvimento de um page.tpl.php. O que voc escolheu paraincluir depende da funcionalidade que deseja alcanar em seu tema. Por exemplo, se voc optar por tertrilhas 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 orecurso de tema do logotipo)

$title (o ttulo da pgina)


9 de 11 05/02/2015 19:23

Imprimir ou renderizarAlgumas variveis precisam ser exibidasusando a funo render() , enquantooutras podem simplesmente serimpressas. Se uma matriz contiver umavarivel, conforme listado na pgina dereferncia page.tpl.php (consulteRecursos para um link), necessriousar render(). Caso negativo, possvelimprimir a varivel ().

$main_menu

$secondary_menu

$breadcrumbs (um auxlio navegao que deixa um rastro de links de referncia quando um usuriose 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; muitasvezes, 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:

Se suas qualificaes em PHP e HTML estiverem acima da mdia, evidentemente ser possvel criar umtema campeo, observando como o exemplo foi desenvolvido e, em seguida, usando as variveispermitidas para criar a sua prpria.

Desenvolvendo outros arquivos de modeloOs modelos padro para outros arquivos de tema esto disponveis evm com o ncleo do Drupal. possvel localizar uma lista deles nosite do Drupal (consulte Recursos para obter um link). Assim comopara o arquivo page.tpl.php, a melhor maneira de desenvolverfacilmente o seu prprio site encontrar um arquivo principal,observar como ele foi elaborado e, em seguida, desenvolver o seuprprio. Uma viagem para o site Drupal apontar para as variveispermitidas para uso em qualquer arquivo de tema.

O arquivo style.cssEm uma pgina esttica HTML normal, preciso incluir um ponteiro dentro do cabealho da pgina paramostrar a localizao da folha de estilo a ser usada para a exibio da pgina. Um ponteiro se parece com:

Conforme j foi discutido, possvel incluir novos estilos a um tema e sobrescrever estilos padro. Emambos os casos, preciso inserir o tema na folha de estilo no arquivo .info. O que h na folha de estilo? Omesmo tipo de abordagem modular usado para classes CSS que o ncleo do Drupal usa para elementosde pgina padro da estrutura. Mesmo que os desenvolvedores criem seu prprio tema, ocorrem diversasclasses em todo o site Drupal. Para obter uma lista completa de classes no ncleo do Drupal 7, consulteRecursos.


10 de 11 05/02/2015 19:23

RecursosAprender

Visite a Site do Drupal para encontrar os modelos padro para outros temasincludos ao ncleo do Drupal.

Confira pgina de referncia page.tpl.php para obter uma lista de variveispara usar em seu tema.

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

Um mtodo zona de software livre do developerWorks fornece diversasinformaes sobre ferramentas de software livre e tecnologias de software livreutilizadas.

especializadas em artigos que cobrem diversas solues baseada na web.

Fique por dentro dos eventos tcnicos e webcasts do developerWorks comnfase em uma variedade de produtos IBM e assuntos do segmento demercado de TI.

Participe de um briefing gratuito do developerWorks Live! para inteirar-se sobreos produtos e ferramentas IBM, alm das tendncias do mercado de TI.

Acompanhe as Demos on demand do developerWorks , que abrangem desdedemos de instalao e configurao de produtos para iniciantes atfuncionalidades avanadas para desenvolvedores experientes.

Siga o developerWorks no Twitter, ou inscreva-se em um feed de tweets doLinux 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 daverso de teste de um produto, avalie um produto on-line, use-o em umambiente de nuvem ou passe algumas horas na SOA Sandbox para saber maissobre como implementar arquitetura orientada a servio (SOA) de maneiraeficiente.

Discutir

Confira Blogs do developerWorks e participe da comunidade dodeveloperWorks.

Participe dos comunidade do developerWorks. Conecte-se com outros usuriosdo developerWorks ao mesmo tempo que explora blogs, fruns, grupos e wikisorientados a desenvolvedor.

Guias de capacitaoSe capacite atravs de diversosrecursos de treinamento.

Programa IBM ChampionO programa reconhececontribuidores que estoajudando a construir um PlanetaMais Inteligente.

Programa Global deEmpreendedorismo da IBMFaa parte do programa quebusca por empreendedores queajudam a modificar a maneiracomo o mundo funciona.

ConclusoEste artigo forneceu uma viso geral de como funciona o sistema de temas no Drupal 7. Ele explicou osvrios componentes de um tema do Drupal e como proceder com a construo de um novo tema a partirdo zero usando o mecanismo de tema padro PHPTemplate . Voc viu a estrutura tpica de cada arquivode tema do componente. necessrio ter o que precisa para criar o seu prprio tema customizado.Aproveite!


11 de 11 05/02/2015 19:23

Desenvolvendo Um Novo Tema Para o Drupal 7

Documents

Transcript of Desenvolvendo Um Novo Tema Para o Drupal 7