Como criar um tema para Drupal 6 – Parte 01

Nota: Vou utilizar termos originais em inglês do Drupal

Nesta sequência de artigos vamos criar um tema para um site em Drupal 6 e entender várias questões relacionadas a temas.

Um tema para Drupal 6 possui algumas diferenças em relação ao Drupal 5.

Como não é o objetivo deste tutorial trabalhar com outra versão do
Drupal que não seja a 6, então vamos focar a criação de temas
para Drupal 6 como se não tivéssemos qualquer conhecimento do assunto e
começaremos do zero.

Vamos iniciar criando um template sem pensar no Drupal ainda, para
termos uma noção de como adaptaremos futuros templates nossos ou de
terceiros.

Por isto, caso você já tenha conhecimento de como o Drupal trabalha
com os temas, e como são feitas as nominações dos arquivos, lembre-se
de que estamos apenas criando o que seria um “template” para o site
primeiro, assim como você encontra nos sites de templates ou como você
pode receber pronto de seu cliente.

Sempre gosto de citar algo importante quando trabalhamos com algo “OPENSOURCE”:

Ao utilizar uma tecnologia OpenSource, sempre que possível “SOBREESCREVA” ou “ESTENDA” os recursos da mesma; nunca modifique!

E no Drupal encontrei muita flexibilidade considerando isto. Até
mesmo os recursos usados pelos temas podem ser estendidos ou
sobreescritos sem precisar mexer no código original do sistema.

O que é um tema?

Um tema é uma coleção de arquivos utilizados para criar uma interface para o usuário final do site ou aplicação. Nele encontramos vários componentes de acordo com as necessidades desta interface.

Num tema para página HTML temos basicamente: um arquivo HTML, um ou
mais arquivos CSS, um ou mais arquivos Javascript e uma ou mais Imagens.

Todo tema possui um Layout que é a forma como os componentes ou
elementos de um tema são distribuídos num espaço limitado e definido
previamente.

Definindo o layout de nosso tema

Todo site precisa de um Layout, é claro! E esta definição pode
poupar em muito o trabalho, pois o fato de o Layout possuir 2 ou 3
colunas, navegação na esquerda ou na direita e assim por diante, torna
mais rápido o desenvolvimento de um projeto.

Com o Drupal é possível ativar ou desativar as colunas esquerda ou
direita , por isto, caso seu Layout precise usar 3 ou 2
colunas em alguma página ou seção do site, então é preciso projetar o
site com suporte a 3 colunas.

Vamos pensar então que nosso site é um blog, e que o mesmo possui
apenas 2 colunas, mas… que futuramente você planeja adicionar mais
recursos ao seu site e precise ativar outra nevegação, então vamos
deixar isto já preparado para que futuras modificações no seu Layout
não se tornem um pesadelo!

Definido o Layout de 3 colunas, vamos pensar na estrutura HTML do mesmo.

Um Layout para uma página HTML possui várias camadas, que já veremos como são definidas.

Todo Layout possui 2 camadas que compõem desde já a estrutura do
site ou aplicação e que fazem parte do documento HTML em si, e são:
“HTML” e “BODY”.

Estas TAGs tanto podem ser usadas para auxiliar no Layout de seu
site, como também podem ser utilizadas para estilizar seu site ou
aplicação.

Em um site de 3 colunas, além delas temos o “CABEÇALHO” e o “RODAPÉ”.

Nosso Layout está retido por um divisor (DIV) no documento que decidi nomear como “EXTERNO”.

Dentro dele vamos então ter a estrutura que desejamos, ou seja “CABEÇALHO, ESQUERDA, CENTRO, DIREITA e RODAPÉ”.

Veja na figura abaixo a estrutura de nosso Layout colorido para fins
de distinção. Note que as tags HTML e BODY estão sendo usadas aqui
também:

Imagem 1

Código HTML

Vale lembrar novamente que estamos criando somente o Layout por
enquanto, independente do Drupal ou preocupados com o visual ou design
do site.

Crie um arquivo chamado index.html e coloque o código abaixo:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br /><title></title><br /><link type="text/css" rel="stylesheet" media="all" href="estilo.css"/><br /></head><br /><body><br /><div id="externo"><br /><div id="cabecalho"></div><br /><div id="esquerda"></div><br /><div id="direita"></div><br /><div id="centro"></div><br /><div id="rodape"></div><br /></div><br /></body>

Nota: O DIV com o id “direita” foi
colocado antes do centro, pois assim é possível trabalhar o
posicionamento com as Folhas de Estilos.

Estruturando o layout com folhas de estilo

Como precisamos criar a estrutura de nosso layout com posicionamentos precisos, vamos utilizar Folhas de Estilos (CSS) .

Crie um arquivo chamado estilo.css e coloque o código abaixo:

#externo, #cabecalho, #esquerda, #direita, #centro, #direita, #rodape { text-align:left; border:solid 1px #000; padding: 10px; }
#esquerda, #centro, #direita { margin: 10px 0; }
#externo { position:relative; margin: 0 auto; width:1000px; }
#cabecalho { width:978px; height:150px; }
#rodape { width:978px; height:150px; clear:both; }

Nota: Para visualizarmos a estrutura inicial de
nosso Layout, colocamos uma borda em todos os DIV’s, posteriormente
vamos retirá-las.

Atualmente, nossas camadas do Layout estão sendo exibidas uma abaixo da outra dentro do DIV com id “externo”.

Veja na imagem como está o resultado de nosso layout:

Possibilidades de layouts

Podemos ter várias possibilidades de Layouts, não vou colocar um
print para cada senão seria perda de tempo, mas vou listar abaixo
algumas da possibilidades. Vou usar o nome das camadas aqui da esquerda
para a direita indicando a movimentação das colunas com o CSS:

ESQUERDA, CENTRO, DIREITA
ESQUERDA, DIREITA, CENTRO
CENTRO, ESQUERDA, DIREITA
ESQUERDA, CENTRO
CENTRO, DIREITA
ETC…

Técnica CSS para adaptar o layout para o Drupal

Vamos usar uma técnica CSS muito boa quando desejamos trabalhar com um mesmo Layout dinâmico, como é o caso do Drupal.

Precisamos criar uma regra para que na ausência de uma coluna o
Layout continue sempre inteiro e as colunas nos seus posicionamentos
corretos.

A técnica é simples!

Colocamos um seletor de classe CSS na tag BODY do documento que irá
fazer com que o CSS posicione os DIV’s de acordo. Continue lendo que
você vai entender.

Como vimos anteriormente, é possível ter várias combinações e obter
vários tipos de Layouts diferentes, por isto vamos decidir usar apenas
os 3 mais comuns na maioria dos sites e blogs. Após terminado este
tutorial você poderá criar outras combinações e fazer a festa!

Vamos então ficar com:

ESQUERDA, CENTRO
ESQUERDA, CENTRO, DIREITA
CENTRO, DIREITA

As classes CSS da tag BODY que vamos utilizar são:

lateral-esquerda Para posicionar a coluna da ESQUERDA à esquerda, o CENTRO no restante do espaço disponível à direita e não mostrar a DIREITA. lateral-direita Para posicionar a coluna da DIREITA à direita, o CENTRO no restante do espaço disponível à esquerda e não mostrar a ESQUERDA. laterais Para posicionar a coluna da ESQUERDA à esquerda, o CENTRO no centro e a DIREITA à direita.

Nota: Algumas empresas ou
profissionais têm padrões para nomenclatura em seu código CSS,
JavaScript, etc, por isto este padrão se adapta bem a este tutorial,
mas se preciso for modifique antes de apresentar à sua empresa ou
cliente.

Por exemplo, quando eu colocar “lateral-esquerda” no atributo “class”
da tag BODY, eu vou ter um conjunto de seletores CSS que já estão
predefinidos para carregar o Layout sem a coluna da DIREITA, e
estendendo o CENTRO; quando eu quiser mostrar a coluna da ESQUERDA e
ocultar a da direita eu coloco “lateral-direita“.

Tudo isto é feito pelo CSS, então você pode mudar isto à vontade
depois, entretanto, vale lembrar que não estamos modificando aqui a
posição da coluna, ou seja, a ESQUERDA é a coluna da esquerda; se
quisermos mudar o conteúdo da ESQUERDA para a DIREITA precisaríamos
criar outros seletores ou usar uma tecnologia dinâmica, e é claro, aqui
entra o Drupal! Veremos isto mais adiante.

Então, para a lógica funcionar, vamos precisar acrescentar alguns
conjuntos de seletores que irão alterar o posicionamento das camadas
ESQUERDA, CENTRO E DIREITA em nosso Layout.

/**<br /> * Para o layout com uma coluna à ESQUERDA e CENTRO à direita<br /> */<br />.lateral-esquerda #esquerda {}<br />.lateral-esquerda #centro {}<br />.lateral-esquerda #direita {}<br /><br />/**<br /> * Para o layout com uma coluna à DIREITA e CENTRO à direita<br /> */<br />.lateral-direita #esquerda {}<br />.lateral-direita #centro {}<br />.lateral-direita #direita {}<br /><br />/**<br /> * Para o layout de 3 colunas<br /> */<br />.laterais #esquerda {}<br />.laterais #centro {}<br />.laterais #direita {}<br /><br />A princípio parece muito código, mas o resultado final é mais do que o desejado.<br /><br />Abaixo as modificações no arquivo estilo.css já com os posicionamentos para todos os casos acima:<br /><br />/**<br /> * Zera a margem e o espaçamento em todos os elementos HTML<br /> */<br />*{ margin: 0; padding: 0; }<br /><br />/**<br /> * Conjunto de propriedades para dar uma estética visual inicial<br /> */<br />#externo, #cabecalho, #esquerda, #direita, #centro, #direita, #rodape { text-align: left; border: solid 1px #000; padding: 10px; }<br /><br />/**<br /> * Margem padrão para esquerda, centro e direita<br /> */<br />#esquerda, #centro, #direita { margin: 10px 0; }<br /><br />/**<br /> * Externo<br /> */<br />#externo { position: relative; margin: 0 auto; width: 1000px; }<br /><br />/**<br /> * Cabeçalho<br /> */<br />#cabecalho { width: 978px; height: 150px; }<br /><br />/**<br /> * Para o layout com uma coluna à ESQUERDA e CENTRO à direita<br /> */<br />.lateral-esquerda #esquerda { width: 170px; float: left; }<br />.lateral-esquerda #centro { width: 776px; float: left; margin-left: 10px; }<br />.lateral-esquerda #direita { display:none; }<br /><br />/**<br /> * Para o layout com uma coluna à DIREITA e CENTRO à direita<br /> */<br />.lateral-direita #centro { width: 776px; float: right; margin-right: 10px; }<br />.lateral-direita #direita { width: 170px; float: right; }<br />.lateral-direita #esquerda { display:none; }<br />/**<br /> * Para o layout de 3 colunas<br /> */<br />.laterais #esquerda { width: 170px; float: left; }<br />.laterais #direita { width: 170px; float: right; }<br />.laterais #centro { width: 572px; margin-left: 203px; }<br /><br />/**<br /> * Rodapé<br /> */<br />#rodape { width: 978px; height: 150px; clear: both; }

Testando os seletores

Para testar agora é fácil!

Crie um atributo “class” na tag BODY do documento e coloque o valor “laterais“:

Você vai ver o layout como já estava antes, com três colunas.

Agora mude o valor do atributo class para “lateral-esquerda“; veja o resultado, e mude para “lateral-direita“.

Se tudo ocorreu corretamente, então você deve ter notado a flexibilidade desta técnica.

Finalizamos aqui esta parte do Layout no formato de template. Vamos
agora ver como o Drupal trabalha com templates e temas e como adaptar
este template que criamos para o Drupal 6 transformando-o em um tema.

Temas no Drupal 6

Primariamente, o Drupal possui um motor de temas interno e uma
ferramenta de templates próprios, chamado PHPTemplate; então quando os
temas precisam ser processados pelo sistema, o motor de temas do Drupal
liga-se ao PHPTemplate e retorna uma interface para o usuário de acordo
com as informações pré-definidas pelo administrador do sistema. Este
processo torna o tempo de execução mais rápido.

No entanto, como o Drupal é um sistema muito flexível, ele pode
utilizar outras ferramentas de templates, tais como: Smarty, PHPTAL,
XTemplate entre outros disponíveis. Para adaptar uma nova ferramenta ao
Drupal, visite http://drupal.org/project/Theme+engines
e baixe os motores para a ferramenta desejada, caso ela exista. Vale
lembrar que estes motores não são parte de qualquer versão oficial do
Drupal e, por isso, podem apresentar problemas e perda no desempenho no
tempo de execução.

Vamos nos reter ao PHPTemplate que por si é muito rápido, prático e fácil de se usar.

PHPTemplate

Historicamente, o PHPTemplate foi criado por Adrian Rossouw. A partir
da versão 6 do Drupal algumas modificações foram feitas e a forma como
o tema processa o PHPTemplate foi melhorada e algumas funções de tema
não existem mais, entretanto são chamadas dinamicamente.

O PHPTemplate utiliza arquivos no formato “alguma-coisa.tpl.php“.

Explicando melhor, “alguma-coisa” é pelo fato de
que quase qualquer coisa na interface do Drupal poder ser transformada
em um arquivo de template pelo mesmo. Ou seja, temos como trabalhar
separadamente no tema com os Blocks, Boxes, Comments, Nodes, Pages, etc…

O complemento ao nome “.tpl” indica o uso de um arquivo template explicitamente.

Todos os arquivos de template atualmente são arquivos com a extensão “.php”.

Anatomia de um tema no Drupal 6

Um tema no Drupal 6 possui uma estrutura padrão e alguns arquivos
padrões deverão estar presentes no diretório onde o tema se encontra,
veja a imagem abaixo:

Fonte da imagem: http://drupal.org/node/171194

Entendendo esta estrutura, temos:

.info Este arquivo com extensão “.info” e com o nome do
tema é necessário para que o Drupal encontre seu tema, e é ele quem vai
gerar o nome interno de seu tema. Mais adiante veremos o que podemos
colocar neste arquivo. .tpl.php São os arquivos de templates processados pelo motor do tema. Cada
arquivo .tpl.php é responsável por aplicar temas a fragmentos de dados. template.php Este é o arquivo onde colocamos a parte lógica de nosso tema, ou
seja o código PHP, para não misturá-lo com a parte de processamento e
controle do layout. Nele podemos sobreescrever as funções usadas nos
temas.

Os demais são bem intuitivos, logo.png é o logotipo usado pelo tema, style.css é a folha de estilos e screenshot.png é uma miniatura para dar uma visualização prévia na área de administração de temas.

Criando um tema para o Drupal 6

Vamos agora ver como um tema é criado.

Primeiramente, vamos criar uma pasta dentro de sites/all/themes. Caso a pasta “themes” não exista, não perca tempo e crie agora mesmo.

Criada esta pasta, vamos criar o arquivo “.info” que vai ser responsável por passar as informações necessárias para o Drupal trabalhar com nosso tema.

Nosso tema será chamado “tutorial“, logo o arquivo “.info” deverá ser nomeado como “tutorial.info“.

Dentro da pasta em sites/all/themes/tutorial, crie o arquivo “tutorial.info“.

Criado este arquivo vamos colocar nele as informações necessárias.

Nota: Seus temas devem ser salvos em “sites/all/themes” e jamais na pasta de temas do drupal.

Estrutura do arquivo .info

Um arquivo .info é um arquivo .ini. Cada linha é um par chave = valor e comentários são precedidos por ponto e vírgula ( ; ).

Encontramos as seguintes chaves em nosso arquivo:

name obrigatório
description recomendado
screenshot
version não aconselhado
core obrigatório
engine obrigatório na maioria dos casos
base theme
regions
features
stylesheets
scripts
php

Vamos ver o que tudo isto significa:

name O nome que lemos na listagem dos temas na administração de temas.
name = Um Nome Qualquer description Uma breve descrição do tema. Aparecerá logo abaixo do nome do tema.
description = Tema de 3 colunas em tableless para meu site screenshot Diz ao Drupal onde encontrar a miniatura de uma imagem para visualização prévia do tema.
screenshot = screenshot.png version A versão do Tema. Se o tema não for hospedado em drupal.org é
aconselhado utilizar, caso contrário não há necessidade pois na criação
de uma versão esta informação é inserida automaticamente em temas
contribuídos.
version = 1.0 core A partir do Drupal 6 e posteriores, todos os arquivos .info para módulos e temas devem indicar com qual versão maior do drupal eles são compatíveis. Este valor é comparado com a constante DRUPAL_CORE_COMPATIBILITY e caso não corresponda, o tema será desabilitado automaticamente.
core = 6.x engine Motor de tema usado. Caso não seja especificado um, o padrão é assumido, ou seja “phptemplate“.
engine = phptemplate base theme Caso seja um subtema, o mesmo pode especificar o tema base.
base theme = garland regions As regiões dos blocos disponíveis são definidas especificando a
chave “region” seguida do nome interno entre colchetes seguido do sinal
de igual com o valor que é um nome legível por humanos. Novas regiões
podem ser criadas, e para tal basta seguir o padrão. Caso não sejam
especificadas as chaves para os blocos padrões, os mesmos são assumidos
automaticamente sem precisar declará-los.
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Contentregions[header] = Header
regions[footer] = Footer features As características ou elementos que são exibidos no tema. Se
nenhuma chave for especificada, todas serão assumidas automaticamente.
features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
; Estes dois últimos foram desabilitados e
; todos os acima habilitados como sendo as características necessárias.
; features[] = primary_links
; features[] = secondary_links stylesheets O padrão de um tema é usar o arquivo “style.css“. Além da chamada da função drupal_add_css()
no arquivo template.php do tema, comum nas versões anteriores ao Drupal
6, agora podemos especificar várias folhas de estilo diretamente no
arquivo “.info” de nosso tema. A chave assume que você especifique qual
o tipo de folha no primeiro colchete.
stylesheets[all][] = outra-folha-qualquer.css scripts Caso similar à stylesheets, além de chamar drupal_add_js(), podemos especificar vários arquivos Javascript diretamente no arquivo “.info” também.
scripts[] = arquivo-javascript-qualquer.js php Define a versão mínima do PHP que o tema suportará. O valor é comparado com a constante DRUPAL_MINIMUM_PHP.
php = 4.3.3

Com toda esta quantidade de informação, vamos criar nosso arquivo “tutorial.info“.

Coloque o código a seguir dentro do arquivo “tutorial.info“:

name = Tutorial<br /><br />description = Tema em tableless utilizado no tutorial.<br /><br />core = 6.x<br /><br />engine = phptemplate<br /><br />stylesheets[all][] = style.css<br /><a href="http://api.drupal.org/api/constant/VERSION/6" target="_blank" rel="noopener noreferrer">version</a> = "6.12"

Omitimos algumas chaves de nosso arquivo, pois não serão necessárias ou serão acrescentadas posteriormente.

Já informamos ao Drupal que temos um tema novo.

Se você acessar agora a administração de temas em “http://seusite/admin/build/themes“, você já verá o tema “Tutorial”
listado mais no final da listagem de temas disponíveis, entretanto sem
uma imagem de pré-vizualização, pois você não a criou ainda.

Criando o template da página – page.tpl.php e template.php

Depois do arquivo “.info“, se não houver um arquivo “page.tpl.php” de pouco vai adiantar um tema, pois é neste arquivo que reproduzimos o Layout desejado.

Crie um arquivo com este nome na pasta do tema, e copie o código de nosso arquivo “index.html” do template que criamos anteriormente para este arquivo.

Remova as linhas que contêm:

<link type=”text/css” rel=”stylesheet” media=”all” href=”estilo.css” />

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Crie um arquivo em branco e salve-o como “template.php“.

Antes de mergulhar de cabeça em nosso tema, vou explicar a lógica de um template.

Uma ferramenta de template é responsável por separar a parte lógica da camada de apresentação do site ou aplicação.

Para que isto seja possível, no arquivo de template existem “chaves”
que variam de ferramenta para ferramenta. O conteúdo do arquivo é
obtido por algum recurso no sistema ou motor de tema e as chaves são
substituídas em um novo arquivo que é gerado dinamicamente.

Para exemplificar melhor, o ELEMENTO “title” entre as tags HEAD do
documento varia de acordo com a página ou seção; esta informação contém
uma fonte de origem que está registrada em algum lugar, que pode ser um
arquivo, um banco de dados, um array, etc… Mas, independente da
origem, nossa ferramenta de template foi criada para processar tal
origem e substituir esta chave a partir de um padrão, que no nosso
exemplo pode ser #nome-da-chave# entre sustenidos, então bastaria colocar #title#
entre as tags title que nossa ferramenta de template iria procurar o
valor para tal chave no local onde ela foi instruída a processar.

No caso do Drupal, e mais especificamente, no PHPTemplate, as chaves
utilizadas são variáveis PHP simples. Existem algumas variáveis-chave
pré-definidas no Drupal, mas você poderá criar as suas variáveis caso
deseje, embora não haja necessidade aparente.

Variáveis disponíveis

Utilidade geral:

$base_path O caminho do URL da instalação do Drupal. Este será pelo menos o padrão “/“. $css Um array de arquivos CSS para a página atual. $directory O diretório no qual o tema está localizado, por exemplo themes/garland ou theme/garland/minelli. $is_front TRUE se a página atual for a front page ou página inicial. Utilizado para alternar a frase da missão do site. $logged_in TRUE se o usuário está registrado e logado. $is_admin TRUE se o usuário tiver permissão para acessar páginas administrativas.

Metadados da página:

$language (objeto) O idioma no qual o site está sendo exibido. $language->language Contém a represantação textual deste. $language->dir Contém a direção do idioma. Este será talvez “ltr” ou “rtl”. $head_title Uma versão modificada do titulo da página, para uso na tag TITLE. $head Marcação para a seção HEAD (incluindo meta tags, palavras-chaves e assim por diante). $styles Tags STYLE necessárias para importar todos os arquivos CSS para a página. $scripts Tags SCRIPT necessárias para carregar os arquivos Javascritp e as configurações para a página. $body_classes Um conjunto de classes CSS para a tag BODY. Esta contém bandeiras
indicando o layout atual (múltiplas colunas, coluna única), o caminho
atual, se o usuário está logado, e assim por diante.

Identidade do site:

$front_page O URL da página inicial. Utilize esta ao invés de $base_path,
quando fazer ligações com a página inicial. Esta inclui a linguagem do
domínio ou prefixo. $logo O caminho para a imagem do logo, como foi definido na configuração do tema. $site_name O nome do site, vazio quando a exibição foi desabilitada nas configurações do tema. $site_slogan O slogan do site, vazio quando a exibição foi desabilitada nas configurações do tema. $mission O texto da missão do site, vazio quando foi desabilitada nas configurações do tema.

Navegação:

$search_box O HTML para exibir a caixa de busca; vazia se a busca foi desabilitada. $primary_links(array) Um array contendo os links da navegação primária para o site, se eles foram configurados. $seconday_links(array) Um array contendo os links da navegação secundária para o site, se eles foram configurados.

Conteúdo da Página (em ordem de ocorrência na padrão page.tpl.php):

$header (Esta variável está deslocada aqui pois não possui definição na documentação do arquivo para ela) A região do cabeçalho. $left O HTML para a barra lateral da esquerda. $breadcrumb O caminho do breadcrumb para a página atual. $title O título da página para uso no conteúdo HTML atual. $help Texto de ajuda dinâmico, na maior parte para páginas administrativas. $messages O HTML para status e mensagens de erro. Deveriam ser exibidas proeminente $tabs Tabs com links para sub-páginas abaixo da página atual (por exemplo, as tabs view e edit quando exibindo um node). $content O conteúdo principal da página atual do Drupal. $right O HTML para a barra lateral da direita.

Rodape/Dados de fechamento:

$feed_icons Um string contendo todos os ícones de feeds para a página atual. $footer_message A mensagem do rodapé como foi definida nas configurações administrativas. $footer A região do rodapé. $closure Marcação final de fechamento de quaisquer módulos que tenham alterado a página.
Esta variável deve sempre ser a última saída, logo após todo conteúdo dinâmico.

NOTA: Algumas variáveis usadas aí são somente
para a área administrativa e o usuário final do site não terá qualquer
acesso visual às mesmas; estão sendo citadas aqui para complementar
estas informações. No arquivo page.tpl.php que estamos criando elas também serão usadas, mas sem muito foco neste tutorial, pois como o título diz “Como Criar um Tema Para Site em Drupal 6“,
estamos trabalhando por enquanto em um tema para o site e não para a
área adminstrativa em si. Em outro tutorial podemos continuar esta
detalhação.

Implementando o Arquivo “page.tpl.php”

Agora que você já conhece todas as variáveis-chave usadas na
página “page.tpl.php”, que é a página principal do tema, podemos
substituir algumas partes em nosso arquivo que somente possui HTML
estático e substituir outras por algumas destas variáveis.

Veja nosso arquivo final. Leia os comentários para entender as alterações:

[ page.tpl.php ]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><!-- Acrescentamos aqui o idioma da pagina e a direção do texto do idioma --><br /><html xmlns="http://www.w3.org/1999/xhtml"<br />xml:lang="<?phpprint$language->language?>"<br />lang="<?phpprint$language->language?>" dir="<?phpprint$language->dir?>"><br /><head><br /><!-- Removemos a tag meta contendo o tipo do documento e o charset<br />-- para inserir estas informações de acordo com as configurações<br />-- informadas ou obtidas pelo Drupal<br />--><br /><?phpprint$head?><br /><!-- Inserimos o título da página que varia dinamicamento --><br /><title><?phpprint$head_title?></title><br /><!-- Inserimos a importação de folhas de estilos --><br /><?phpprint$styles?><br /><!-- Carregamos os arquivos javascript necessários --><br /><?phpprint$scripts?><br /></head><br /><!-- Colocamos uma função na tag BODY<br />-- que irá criar um atributo class na mesma<br />-- e controlar o valor deste atributo de acordo<br />-- com as configurações dos Blocks em uso<br />-- Esta função foi herdada do tema padrão Garlando<br />-- no arquivo "template.php"<br />--><br /><body<?phpprint phptemplate_body_class($left, $right); ?>><br /><!-- Layout --><br /><div id="externo"><br /><div id="cabecalho"><br /><?php/* Imprime o conteudo definido nos Blocks para o Header (cabeçalho) */?><br /><?phpprint$header; ?><br /><!-- Herdado do Garland --><br /><div id="logotipo"><br /><?php<br />// Prepara o cabeçalho criando um array com algumas informações do site<br />$site_fields = array();<br />// se o nome do site existe<br />if($site_name){<br />/**<br />* Codifica caracteres especiais num string de texto puro para exibir o nome do site como HTML.<br />*/<br />$site_fields[] = check_plain($site_name);<br />}<br />if($site_slogan){<br />/**<br />* O mesmo que ocorre com o nome do site ocorre com o slogan<br />*/<br />$site_fields[] = check_plain($site_slogan);<br />}<br />/*<br />* Une as chaves de $site_fields com espaços para criar o title<br />*/<br />$site_title = implode(' ', $site_fields);<br />/**<br />* Se todas as informações foram passadas<br />*/<br />if($site_fields){<br />// coloca o nome do site entre tags SPAN<br />$site_fields[0] = '<span>'. $site_fields[0] .'</span>';<br />}<br />/*<br />* Une as chaves de $site_fields com espaços para criar o HTML<br />*/<br />$site_html = implode(' ', $site_fields);<br />// Testa se $logo ou $site_title possuem valor<br />if($logo||$site_title){<br />// Cria um cabeçalho com o um link para a pagina inicial filtrando-o contra protocolos indesejáveis (XSS)<br />print'<h1><a href="'. check_url($front_page) .'" title="'. $site_title .'">';<br />// se o logo existir<br />if($logo){<br />print'<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';<br />}<br />// Imprime o HTML com o nome do site final<br />print$site_html .'</a></h1>';<br />}<br />?><br /><?php/* Imprime os links primarios se eles existirem */?><br /><?phpif(isset($primary_links)) : ?><br /><?phpprinttheme('links', $primary_links, array('class' =>'links primary-links'))?><br /><?phpendif; ?><br /><?php/* Imprime os links secundários se eles existirem */?><br /><?phpif(isset($secondary_links)) : ?><br /><?phpprinttheme('links', $secondary_links, array('class' =>'links secondary-links'))?><br /><?phpendif; ?><br /></div><br /></div><!-- /cabecalho --><br /><br /><?php/* Se existir algum Block a ser exibido na esquerda, então esta coluna será montada com o respectivo conteúdo */?><br /><?phpif($left): ?><br /><div id="esquerda"><br /><?php/* Se a caixa de busca estiver ativada e esta coluna exista, ela aparecerá na esquerda */?><br /><?phpif($search_box): ?><div class="block block-theme"><?phpprint$search_box?></div><?phpendif; ?><br /><?phpprint$left?><br /></div><!-- /esquerda --><br /><?phpendif; ?><br /><br /><?php/* Se existir algum Block a ser exibido na esquerda, então esta coluna será montada com o respectivo conteúdo */?><br /><?phpif($right): ?><br /><div id="direita"><br /><?php/* Se a caixa de busca estiver ativada e a coluna esquerda não exista, ela aparecerá na direita */?><br /><?phpif(!$left&&$search_box): ?><div class="block block-theme"><?phpprint$search_box?></div><?phpendif; ?><br /><?phpprint$right?><br /></div><!-- /direita --><br /><?phpendif; ?><br /><div id="centro"><br /><?php/* Imprime o breadcrum do site */?><br /><?phpprint$breadcrumb; ?><br /><?php/* Imprime a missão do site caso ela exista */?><br /><?phpif($mission): print'<div id="mission">'. $mission .'</div>'; endif; ?><br /><?php/* Imprime as tabs das páginas que as usem */?><br /><?phpif($tabs): print'<div id="tabs-wrapper" class="clear-block">'; endif; ?><br /><?php/* Imprime o título do node */?><br /><?phpif($title): print'<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?><br /><?phpif($tabs): print'<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?><br /><?php/* Imprime tabs secundarias */?><br /><?phpif($tabs2): print'<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?><br /><?php/* Imprime informações relevantes ao usuário */?><br /><?phpif($show_messages&&$messages): print$messages; endif; ?><br /><br /><?php/* Imprime ajuda caso esteja disponível */?><br /><?phpprint$help; ?><br /><br /><?php/* Imprime todo o conteúdo especificado no Block Content */?><br /><?phpprint$content?><br /><br /><?php/* Imprime os feeds da página */?><br /><?phpprint$feed_icons?><br /></div><!-- /centro --><br /><div id="rodape"><br /><?php/* Imprime a mensagem do rodapé, e os Blocks selecionados como Footer */?><br /><?phpprint$footer_message . $footer?><br /></div><!-- /rodape --><br /></div><!-- /externo --><br /><?php/* Marcação final de fechamentos diversos */?><br /><?phpprint$closure?><br /></body>

Criando o Arquivo style.css

O Arquivo CSS padrão de todo tema para Drupal é o arquivo “style.css“.

Crie um arquivo chamado “style.css” e coloque dentro da pasta do tema “tutorial“.

Coloque o conteúdo de nosso arquivo “estilo.css” dentro de “style.css“.

Estaremos incluindo alguns seletores a mais futuramente devido à colocação de novos DIV’s dentro do Layout.

Se você prestou bem atenção até aqui, você já deve ter associado a linha do arquivo “tutorial.info” que contém:

stylesheets[all][] = style.css

Esta linha instrui o Drupal a incluir o arquivo “style.css” no tema em uso, neste caso tutorial.info.

Caso você queira adicionar novas Folhas de Estilo a seu tema,
basta você acrescentar um linha trocando apenas o nome do arquivo:

stylesheets[all][] = style.css
stylesheets[all][] = arquivo-qualquer.css

Nota: Nosso tema não utilizará
Javascript por enquanto, mas caso for preciso, a lógica seria a mesma;
basta utilizar a chave “scripts”.

E os outros arquivos?

Teoricamente, podemos dizer que nosso tema para Drupal 6 já existe.
Para nosso tema ficar redondinho, vamos adicionar alguns arquivos mais
básicos que vamos “copiar” da pasta do tema Garland,
e que não precisam ser alterados por enquanto. Na próxima parte de
nosso tutorial, vamos abordar estes arquivos e outros templates que
fazem parte do Core (núcleo) do Drupal, e explorar um recurso chamado “suggestions” ou “sugestões”. Os arquivos que vamos usar agora são:

/themes/garland/block.tpl.php
/themes/garland/comment.tpl.php
/themes/garland/maintenance-page.tpl.php
/themes/garland/node.tpl.php

Estes arquivos devem ser copiados e colados em sites/allt/themes/tutorial.

Por curiosidade e conhecimento, após copiar estes arquivos, abra-os e veja o conteúdo deles. Você vai encontrar $variáveis-chave parecidas com as do arquivo “page.tpl.php“,
entretanto, tais variáveis se aplicam ao conteúdo destes tipos de
páginas e devem ser consideradas isoladamente em cada arquivo que as
contém.

Estilizando nosso tema

Nosso tema não possui qualquer aspecto de design, imagens de fundo,
etc… O objetivo deste tutorial não é criar um tema finalizado,
profissional, com estilo visual “detonador”. Por isto, sinta-se à
vontade para criar o visual que desejar.

Após ter definido um visual para o tema, abra seu programa editor gráfico favorito e crie uma imagem de 150px por 90px.
Dê um printscreen da tela com seu tema final sendo exibido, cole no seu
programa de edição gráfica, e vá reduzindo até alcançar as dimensões
acima. Salve este arquivo no formato “.png” com o nome “screenshot.png” dentro da pasta do tema.

Alternando a exibição das colunas dinamicamente

Para seu tema alternar a exibição das colunas, abra o arquivo “template.php” dentro da pasta do tema do nosso tutorial, e coloque a função abaixo dentro dele:

/**<br />
 * Define o valor do atributo &quot;class&quot; da tag body<br />
 *<br />
 * Adicionar as barras laterais quando preciso<br />
 */<br />function phptemplate_body_class($left, $right){<br />if($left!= ''&&$right!= ''){<br />$class = 'laterais';<br />}<br />else{<br />if($left!= ''){<br />$class = 'lateral-esquerda';<br />}<br />if($right!= ''){<br />$class = 'lateral-direita';<br />}<br />}<br /><br />if(<a href="http://www.php.net/isset" target="_blank" rel="noopener noreferrer">isset</a>($class)){<br /><a href="http://www.php.net/print" target="_blank" rel="noopener noreferrer">print</a>' class="'. $class .'"';<br />}<br />}

Esta função, que já chamamos na tag BODY em nosso arquivo “page.tpl.php“, verifica se o conteúdo da esquerda e direita existem ao mesmo, caso exista, define o valor do atributo class para “laterais” exibindo assim ambas as colunas; caso contrário, se o conteúdo da esquerda não estiver vazio, define o valor como “lateral-esquerda” e assim, se o mesmo não existir, define como “lateral-direita“.

Testando o tema

Para testar se o tema está funcionando, defina-o como padrão e veja
o resultado. Ative blocos, na esquerda, depois na direita e em ambas as
regiões e veja o resultado. Caso o CSS apresente problema em algum
navegador, fique à vontade para modificar, afinal, este tutorial não é
um tutorial de CSS, mas fico à disposição para receber possíveis
informações de melhoramento através dos comentários.

Nota: Crie um Logotipo qualquer e salve como “logo.png” dentro da pasta do tema “tutorial“.

Para criar Este tutorial foram utilizados:

Windows Vista
Linux Ubuntu 9.10
Dreamweaver
Gedit
Fireworks
Firefox 3.5
Firebug
Web Developer
Internet Explorer 8
Opera 9.5
Safari 4
IE Tester
Drupal 6.12

*
Publicado por Gilberto Albino em Drupal Brasil

Categorias

Colunistas

Explorar

Newsletter

Ecossistema

Como criar um tema para Drupal 6 – Parte 01

O que é um tema?

Definindo o layout de nosso tema

Código HTML

Estruturando o layout com folhas de estilo

Possibilidades de layouts

Técnica CSS para adaptar o layout para o Drupal

Testando os seletores

Temas no Drupal 6

PHPTemplate

Anatomia de um tema no Drupal 6

Criando um tema para o Drupal 6

Estrutura do arquivo .info

Criando o template da página – page.tpl.php e template.php

Variáveis disponíveis

Implementando o Arquivo “page.tpl.php”

Criando o Arquivo style.css

E os outros arquivos?

Estilizando nosso tema

Alternando a exibição das colunas dinamicamente

Testando o tema

Para criar Este tutorial foram utilizados:

Mais de Drupal Brasil

Fios

O que é um tema?

Definindo o layout de nosso tema

Código HTML

Estruturando o layout com folhas de estilo

Possibilidades de layouts

Técnica CSS para adaptar o layout para o Drupal

Testando os seletores

Temas no Drupal 6

PHPTemplate

Anatomia de um tema no Drupal 6

Criando um tema para o Drupal 6

Estrutura do arquivo .info

Criando o template da página – page.tpl.php e template.php

Variáveis disponíveis

Implementando o Arquivo “page.tpl.php”

Criando o Arquivo style.css

E os outros arquivos?

Estilizando nosso tema

Alternando a exibição das colunas dinamicamente

Testando o tema

Para criar Este tutorial foram utilizados:

Mais de Drupal Brasil

Fios

O melhor do dev brasileiro, no seu e-mail