[Tutorial] Como Criar um Tema Para Drupal 6 – Parte 01

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

Neste sequência de tutoriais vamos criar um tema para um site em Drupal 6 e entender várias questões relacionadas à tema.

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 versão 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 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 "EXTENDA" os recursos da mesma; nunca modifique!

E no Drupal encontrei muita flexibilidade considerando isto. Até mesmo os recursos usados pelos temas podem ser extendidos 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: uma 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 distribuitos 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 do 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 colunas, ou 2 colunas em alguma página ou seção do site, então é preciso projetar o site com suporte à 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 compoem 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 TAG’s tanto podem ser usadas para auxiliar no Layout de seu site, como também podem ser utilizados 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

Camadas de um site de 3 colunas

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 por enquanto.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title></title>

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

</head>

<body>

<div id="externo">

<div id="cabecalho"></div>

<div id="esquerda"></div>

<div id="direita"></div>

<div id="centro"></div>

<div id="rodape"></div>

</div>

</body>

Nota: O DIV com o id "direita" foi colocado antes do centro, pois assim é possivel 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 baixo da outra dentro do DIV com id "externo".

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

Layout sem larguras

Possibilidades de Layouts

Podemos ter várias possibilidades de Layouts, não vou colocar um print para cada senão seria perca 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 seu 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 em si têm padrões para nomenclatura em seu código CSS, JavaScript, etc, por isto, este padrão se adapta bem à 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 extendendo 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 posicionamentos das camadas ESQUERDA, CENTRO E DIREITA em nosso Layout.

/**

* Para o layout com uma coluna à ESQUERDA e CENTRO à direita

*/

.lateral-esquerda #esquerda {}

.lateral-esquerda #centro {}

.lateral-esquerda #direita {}

/**

* Para o layout com uma coluna à DIREITA e CENTRO à direita

*/

.lateral-direita #esquerda {}

.lateral-direita #centro {}

.lateral-direita #direita {}

/**

* Para o layout de 3 colunas

*/

.laterais #esquerda {}

.laterais #centro {}

.laterais #direita {}

A princípio parece muito código, mas o resultado final é mais do que o desejado.

Abaixo as modificações no arquivo estilo.css já com os posicionamentos para todos os casos acima:

/**

* Zera a margem e o espaçamento em todos os elementos HTML

*/

* { margin: 0; padding: 0; }

/**

* Conjunto de propriedades para dar uma estética visual inicial

*/

#externo, #cabecalho, #esquerda, #direita, #centro, #direita, #rodape { text-align: left; border: solid 1px #000; padding: 10px; }

/**

* Margem padrão para esquerda, centro e direita

*/

#esquerda, #centro, #direita { margin: 10px 0; }

/**

* Externo

*/

#externo { position: relative; margin: 0 auto; width: 1000px; }

/**

* Cabeçalho

*/

#cabecalho { width: 978px; height: 150px; }

/**

* Para o layout com uma coluna à ESQUERDA e CENTRO à direita

*/

.lateral-esquerda #esquerda { width: 170px; float: left; }

.lateral-esquerda #centro { width: 776px; float: left; margin-left: 10px; }

.lateral-esquerda #direita { display:none; }

/**

* Para o layout com uma coluna à DIREITA e CENTRO à direita

*/

.lateral-direita #centro { width: 776px; float: right; margin-right: 10px; }

.lateral-direita #direita { width: 170px; float: right; }

.lateral-direita #esquerda { display:none; }

/**

* Para o layout de 3 colunas

*/

.laterais #esquerda { width: 170px; float: left; }

.laterais #direita { width: 170px; float: right; }

.laterais #centro { width: 572px; margin-left: 203px; }

/**

* Rodapé

*/

#rodape { width: 978px; height: 150px; clear: both; }

Testando Os Seletores

Para testar agora é facil!

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

<body class="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 isto podem apresentar problemas e perca 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. Apartir da versão 6 do Drupal algumas modificações foram feitas e a forma como o tema processa o PHPTemplate foi melhorado 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 tranformada 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:

Anatomia de um tema no drupal 6

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

Entendendo esta estrutura, temo:

.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 é responsavel 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 adminsitraçã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 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] = Content
regions[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 ultimos 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

description = Tema em tableless utilizado no tutorial.

core = 6.x

engine = phptemplate

stylesheets[all][] = style.css

version = "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 contem:

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

e

<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 nosso 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-chaves 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 (multiplas 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 ai 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-chaves usadas n a 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Acrescentamos aqui o idioma da pagina e a direção do texto do idioma -->
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php print $language->language ?>"

lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<!-- Removemos a tag meta contendo o tipo do documento e o charset
-- para inserir estas informações de acordo com as configurações
-- informadas ou obtidas pelo Drupal
-->
<?php print $head ?>
<!-- Inserimos o título da página que varia dinamicamento -->
<title><?php print $head_title ?></title>
<!-- Inserimos a importação de folhas de estilos -->
<?php print $styles ?>
<!-- Carregamos os arquivos javascript necessários -->
<?php print $scripts ?>
</head>
<!-- Colocamos uma função na tag BODY
-- que irá criar um atributo class na mesma
-- e controlar o valor deste atributo de acordo
-- com as configurações dos Blocks em uso
-- Esta função foi herdada do tema padrão Garlando
-- no arquivo "template.php"
-->
<body<?php print phptemplate_body_class($left, $right); ?>>
<!-- Layout -->
<div id="externo">
<div id="cabecalho">
<?php /* Imprime o conteudo definido nos Blocks para o Header (cabeçalho) */ ?>
<?php print $header; ?>
<!-- Herdado do Garland -->
<div id="logotipo">
<?php
// Prepara o cabeçalho criando um array com algumas informações do site
$site_fields = array();
// se o nome do site existe
if ($site_name) {
/**
* Codifica caracteres especiais num string de texto puro para exibir o nome do site como HTML.
*/
$site_fields[] = check_plain($site_name);
}
if ($site_slogan) {
/**
* O mesmo que ocorre com o nome do site ocorre com o slogan
*/
$site_fields[] = check_plain($site_slogan);
}
/*
* Une as chaves de $site_fields com espaços para criar o title
*/
$site_title = implode(' ', $site_fields);
/**
* Se todas as informações foram passadas
*/
if ($site_fields) {
// coloca o nome do site entre tags SPAN
$site_fields[0] = '<span>'. $site_fields[0] .'</span>';
}
/*
* Une as chaves de $site_fields com espaços para criar o HTML
*/
$site_html = implode(' ', $site_fields);
// Testa se $logo ou $site_title possuem valor
if ($logo || $site_title) {
// Cria um cabeçalho com o um link para a pagina inicial filtrando-o contra protocolos indesejáveis (XSS)
print '<h1><a href="'. check_url($front_page) .'" title="'. $site_title .'">';
// se o logo existir
if ($logo) {
print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';
}
// Imprime o HTML com o nome do site final
print $site_html .'</a></h1>';
}
?>
<?php /* Imprime os links primarios se eles existirem */ ?>
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php /* Imprime os links secundários se eles existirem */ ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>
</div>
</div><!-- /cabecalho -->

<?php /* Se existir algum Block a ser exibido na esquerda, então esta coluna será montada com o respectivo conteúdo */ ?>
<?php if ($left): ?>
<div id="esquerda">
<?php /* Se a caixa de busca estiver ativada e esta coluna exista, ela aparecerá na esquerda */ ?>
<?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
<?php print $left ?>
</div><!-- /esquerda -->
<?php endif; ?>

<?php /* Se existir algum Block a ser exibido na esquerda, então esta coluna será montada com o respectivo conteúdo */ ?>
<?php if ($right): ?>
<div id="direita">
<?php /* Se a caixa de busca estiver ativada e a coluna esquerda não exista, ela aparecerá na direita */ ?>
<?php if (!$left && $search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
<?php print $right ?>
</div><!-- /direita -->
<?php endif; ?>
<div id="centro">
<?php /* Imprime o breadcrum do site */ ?>
<?php print $breadcrumb; ?>
<?php /* Imprime a missão do site caso ela exista */ ?>
<?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
<?php /* Imprime as tabs das páginas que as usem */ ?>
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php /* Imprime o título do node */ ?>
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
<?php /* Imprime tabs secundarias */ ?>
<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
<?php /* Imprime informações relevantes ao usuário */ ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>

<?php /* Imprime ajuda caso esteja disponível */ ?>
<?php print $help; ?>

<?php /* Imprime todo o conteúdo especificado no Block Content */ ?>
<?php print $content ?>

<?php /* Imprime os feeds da página */ ?>
<?php print $feed_icons ?>
</div><!-- /centro -->
<div id="rodape">
<?php /* Imprime a mensagem do rodapé, e os Blocks selecionados como Footer */ ?>
<?php print $footer_message . $footer ?>
</div><!-- /rodape -->
</div><!-- /externo -->
<?php /* Marcação final de fechamentos diversos */ ?>
<?php print $closure ?>
</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 a 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 à incluir o arquivo "style.css" no tema em uso, neste caso tutorial.info.

Caso você queira adicionar novas Folhas de Estilo à seu tema, bastaria 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 coloados em sites/allt/themes/tutorial.

Por curiosidade e conhecimento, após copiar estes arquivos, abra-os e veja o conteudo deles. Você vai encontrar $variáveis-chaves 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 considerados isoladamente em cada arquivo que as contem.

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:

/**

* Define o valor do atributo "class" da tag body

*

* Adicionar as barras laterais quando preciso

*/

function phptemplate_body_class($left, $right) {

if ($left != '' && $right != '') {

$class = 'laterais';

}

else {

if ($left != '') {

$class = 'lateral-esquerda';

}

if ($right != '') {

$class = 'lateral-direita';

}

}

if (isset($class)) {

print ' class="'. $class .'"';

}

}

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".

CASO QUEIRA SER NOTIFICADO POR EMAIL QUANDO A PRÓXIMA PARTE DESTE TUTORIAL ESTIVER DISPONÍVEL, COLOQUE JUNTO COM SEU COMENTÁRIO A PALAVRA "NOTIFICAR" NO INÍCIO DO COMENTÁRIO.

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
  • Muito chá mate leão
  • Paciência para aturar minha gata miando :p

9 comentários sobre “[Tutorial] Como Criar um Tema Para Drupal 6 – Parte 01”

  1. Cara to a 3 meses tentando fazer um template e gra?as ao in?cio desse tuto consegui fazer um theme!
    Muito bom!!!

    Agora to tentando fazer um template fluido 100%!!

    Quero receber um email quando a pr?xima parte do tuto sair! 😀

  2. Que bom Anderson que este tutorial lhe foi ?til!
    Devo admitir que tive muita dificuldade quando comecei com o Drupal, eu praticamente comecei no Drupal 6 e me foi muito complicado achar respostas de uma vers?o que embora ja tenha sido lan?ado h? algum tempinho, ainda care?a de alguns tutoriais em portugu?s, principalmente.

    Eu pude perceber seu potencial criativo ao citar:
    “Agora to tentando fazer um template flu?do 100%”.

    ? isto a? Anderson! Manda brasa, porque n?o h? limites para quem busca!

  3. Gilberto parabens pela iniciativa.
    Excelente.

    Gostaria que voc? me tirasse uma d?vida:

    Posso aplicar o seu conceito, por?m, para criar um tema para o Drupal 5x?

    Meus sinceros agradecimentos.

  4. Ol? caro Cass?o,
    Antes de mais nada, obrigado por acessar meu blog.
    Atualmente, foram encontrados muitas falhas de seguran?a
    nas vers?es 5.x do Drupal e quase todas foram corrigidas nas vers?es 6.x.
    Por este s?rio motivo n?o recomendo ? voc? estar usando as vers?es 5.x.
    Entretanto, caso voc? n?o possa migrar para o Drupal 6 ou n?o tenha o tempo para isto agora,
    na comunidade do Drupal no Brasil, al?m deste tutorial que voc? acessou em meu blog,
    voc? encontra tamb?m um tutorial similar para Drupal 5 no link abaixo:
    http://drupal-br.org/tutoriais/criando-um-tema-para-o-drupal

  5. Obrigado Nilton, eu troquei de servidor, e n?o sei como a pastar com as imagens para os tutoriais n?o foi enviada.
    Mas j? coloquei novamente.
    Desculpe pelo inconveniente.
    Abra?os!

  6. Ol? Gilberto,

    Parab?ns pelo tutorial que, inclusive, est? devidamente “bookmarkeado” para futuras refer?ncias ;-). Vou come?ar um projeto com Drupal e devo voltar aqui algumas vezes.

    Est? muito interessante. Sem coisa de mais, nem de menos.

    Um abra?o,
    Leandro

  7. Muito bom esse foi meu primeiro tutorial de drupal,
    estou curtindo, tenho bastante conhecimento em wordpress, mas não podemos parar, avante e além.

    No aguardo de um proximo tutorial.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *