Criando um tema para o Drupal

Esse tutorial mostra como transformar um template HTML em um tema do Drupal.

Como pré-requisito para entender esse tutorial você vai precisar entender um pouco de PHP, HTML e CSS para conseguir acompanhar tudo.

Para esse tutorial também é necessário que você já tenha uma instalação do Drupal na sua máquina. Caso você ainda não tenha ou não saiba como fazer essa instalação pode ver esse tutorial e esse screencast.

Para o melhor entendimento desse tutorial, quando nos referimos a template estaremos falando de um layout feito em HTML e que ainda não tem funcionalidade no Drupal. Quando nos referirmos a tema estamos nos referindo a um template já funcionando no Drupal.

Então, antes de mais nada, precisamos encontrar um template. No nosso tutorial vamos pegar um template já pronto na Internet, no seu caso você mesmo pode fazer um ou pagar um designer para que o faça.
O template escolhido para esse tutorial foi o Standardized disponível em http://www.freecsstemplates.org/preview/standardized. Esse template é grátis, podendo ser baixado gratuitamente. Você precisará manter os créditos do tema, pois ele está licenciado sob a Creative Commons, mas isso não é problema pois estamos em uma comunidade se Software livre não é? :-)

Em seguida precisaremos montar nosso tema propriamente dito. Eu tenho por hábito partir de um tema pré-existente, mas você não precisa fazer isso, é uma questão pessoal. Para esse tutorial, vou usar como base o tema Bluemarine que já vem com toda instalação do Drupal.

Assim, a primeira coisa a fazer é baixar o template (acima você tem o endereço para download). Em seguida entramos na pasta themes da nossa instalação do Drupal e copiamos toda a pasta do tema bluemarine com um nome diferente, no nosso caso o nome do nosso tema será tutorial. O resultado final será algo como mostrado abaixo.

Em seguida copiamos alguns elementos do template para a pasta do nosso novo tema. No caso desse nosso tema, vamos copiar a pasta images e o arquivo default.css que estão na pasta do template para a pasta do nosso tema. Em seguida, apagamos o arquivo style.css que já estava na pasta do nosso tema e renomeamos o arquivo default.css para style.css. Isso é necessário pois o Drupal entende, por padrão, que o nome do arquivo de CSS do nosso tema se chama style.css. Obviamente podemos ter outros aquivos CSS, mas para o nosso tema vamos fazer seguindo o padrão. Uma outra coisa que podemos fazer é baixar um thumbnail para substituir o que já existe do bluemarine. Isso Não é imprescindível mas é importante pois é através desse thumbnail que vamos poder visualizar na área de administração de temas qual é o nosso tema. No caso do template que baixamos, ele já tem um thumbnail em http://www.freecsstemplates.org/download/thumbnail/standardized. Baixe esse arquivo e substitua o arquivo screenshot.png que está na pasta do nosso tema.

Com isso terminamos os preparativos e podemos partir para a construção do tema propriamente dita. Como eu disse me baseio em um tema para construir os meus, então o trabalho aqui é um pouco de copiar e colar, e vou mostrar como estava antes e depois até o resultado final.

Para começar o trabalho, primeiro renomeamos o arquivo page.tpl.php do tema que copiamos para algo como page.tpl.php.old e copiamos o arquivo index.html do template para a pasta do tema com o nome page.tpl.php. No final poderemos apagar o page.tpl.php.old. Em seguida abrimos os dois arquivos para montar o tema. Para facilitar o entendimento, dividi em partes de forma que podemos ir acompanhando pedaço por pedaço da construção do tema.

Começamos com a tag HTML do nosso tema. No tema original ela é assim:

Aqui vemos duas marcações em PHP, com a variável $language que é o código do idioma do site. Isso é usado para formatar o HTML de acordo com os padrões da W3C. No nosso template veio assim:

Perceba que aqui existe um comentário sobre a licença do template, e a tag HTML não tem designação de idioma, então modificamos para que fique assim:

Pronto, temos essa parte terminada. Em seguida vamos para os cabeçalhos. É nessa parte que são declarados os estilos, javascript e várias outras partes importantes do tema do Drupal. Abaixo o original, no tema bluemarine:

E abaixo o original no nosso template:

Por fim temos o resultado final:

Veja que o resultado final é igual ao original do bluemarine. Nem sempre será, no nosso tema vamos usar a estrutura básica, então não precisamos de alterações. Agora uma breve explicação do que é cada uma das variáveis nessa seção:

• $head_title - Essa variável traz o título da página. Poderíamos preencher o título diretamente, mas perderíamos o título que é gerado diretamente para cada página. Se você nunca reparou que cada página tem um título no Drupal, da próxima vez que você acessar um site com o Drupal, dê uma olhada na barra de título do seu navegador.
• $head - Essa variável carrega uma série de informações importantes para o seu site. É por ela que são carregadas as informações de quais os RSS disponíveis no seu site, o ícone que aparece na barra de endereços (conhecido com favicon) além da codificação da página (utf-8, iso-8859-1 e etc).
• $styles - Como o nome mesmo diz, aqui é onde vem as declarações de estilos. O Drupal pode carregar vários arquivos CSS, e de fato ele faz isso. Se você olhar o código fonte de uma página gerada pelo Drupal verá que ele tem várias chamadas de arquivos CSS, uma para cada módulo que implementa isso. Em um futuro tutorial sobre construção de módulo veremos isso. Veja também, no código fonte gerado, que existe uma chamada para um estilo chamado style.css, esse é o style.css do nosso tema, que a gente copiou do template original, lembra?
• $scripts - faz exatamente a mesma coisa que a $styles, mas, ao invés de fazer isso com os estilos, faz com os javascript do site.
• Por último tem uma chamada vazia para um javascript, que não tem função, mas que deixamos apenas para exemplificar que nem tudo precisa tem uma função definida na hora de construir o template. Quando houver casos como esse, você pode remover aqui fica só de exemplo.

Agora vamos ver a parte do cabeçalho do nosso tema. Se você já deu uma olhada no tema que escolhemos como padrão, lembrará que ele tem um cabeçalho com o menu, em uma barra verde, e abaixo um título. Vamos então ver como fazer isso. Primeiro vemos como é no tema original, o bluemarine:

E depois como veio no template:

Por último vemos como ficou:

Vejamos o que é cada uma dessas variáveis:

• $site_name - Contém o nome do site, que preenchemos nas configurações do site.
• $base_path - O caminho até a raiz do nosso site. Suponhamos que nosso site seja http://site.com.br/drupal esse será o $base_path. É muito útil para poder construirmos links como é o caso acima.
• $site_slogan - É o slogan que preenchemos nas configurações do site.
• Vemos no original também a variável $logo que é a URL do logotipo do site. No caso do tema bluemarine é o Drupalicon (gota), no nosso caso não vamos usá-lo. Você, obviamente, pode usar o endereço da imagem diretamente no seu tema, mas é smpre bom utilizar a variável logo pois assim podemos alterar pela interface do Drupal sem precisar mexer no template.

Note ainda que mativemos a estrutura do HTML básico do nosso template. Isso porque podem haver elementos HTML que precisaremos para manter o estilo pretendido. No caso, deixamos o DIV com sua classe header que ele já possui.

Em seguida vamos para a seção que trata do menu. Vejamos como é o original no bluemarine

E como o template escolhido trata essa parte:

Por fim, como ficou com a alteração que fizemos:

Antes de mais nada, veja que cortamos algumas coisas no nosso código. O Drupal vem com dois níveis de menu, prontos para serem usados: o primário e o secundário. No nosso caso, só vamos usar o primário, e o secundário foi excluído. Outra coisa que excluímos foi a caixa de pesquisa, pois vamos usar um bloco para isso. Então vejamos o que significa cada uma dessas variáveis:

• $secondary_links - Essa variável é que montaria o menu secundário, que no nosso caso não irá exisitr.
• $primary_links - Essa é a variável que monta no menu principal. Não confunda com o menu de navegação lateral. O menu primário aqui é o menu que o dono do site irá para disponibilizar os itens para os seus usuários acessarem as várias partes do site. Veremos como inserir um link aqui, logo abaixo
• $search_box - É a caixa de busca do site. Note que essa variável não carrega o bloco que contém a caixa de busca, mas sim monta uma outra caixa de busca, por isso não vamos usá-la, pois faremos isso com o bloco que conteém a caixa de busca.
• Vemos também o uso da função theme com a constante links. Essa função monta um menu com os vários links contidos na variável que é passada para ele. No nosso caso final, temos a montagem do menu primário. Também nos é dada a oportunidade de personalizar a classe e o id utilizado nesse menu. Esse tutorial não cobre o uso dessa função.

Agora vamos para a parte principal do nosso tema. O tema nos permite personalizar a apresentação do conteúdo do site. O Drupal entende que o conteúdo é tudo que é exibido na parte principal do do seu site, assim nem tudo que é exibido nessa seção é de fato conteúdo, mas coisas como os formulários de edição, configuração e etc. também são exibidos nessa área. Vejamos como é o original no bluemarine:

Em seguida como veio no nosso template. Note que não está tudo que há no template, apenas uma parte.

Por último como ficou depois de alterarmos:

Novamente veja que mudamos apenas o que precisamos do Drupal. Parte da formatação original do template ficou. Vejamos o que é cada uma dessas variáveis:

• $breadcrumb - Essa variável carrega o breadcrumb, que nada mais é do que a trilha ou caminho pelo qual você passou até chegar em uma determinada parte d site.
• $title - É o título do conteúdo que você está vendo. Note aqui que não temos apenas o título de tipos de conteúdo, mas de toda página que acessamos.
• $tabs - Quando logado temos algumas abas de edição, e é essa variável que as carrega.
• $help - Mensagens de ajuda são exibidas em algumas partes do site, essa é a variável responsável por isso.
• $messages - Toda vez que você realiza uma ação que é necessária alguma mensagem, seja de sucesso ou erro, é aqui que ela será carregada.
• $content - Aqui é onde vem o conteúdo em si.
• $feed_icons - Toda vez que uma página disponibiliza o conteúdo em RSS, essa variável é preenchida com um link com uma imagem para o RSS dessa página.

Veremos agora a nossa barra lateral da esquerda, que terá a caixa de busca, caixa de login, e, quando logado, o menu de administração (também conhecido como navegação). Vejamos então o original no bluemarine:

Como o template escolhido veio:

E como ficou no final:

Nesse caso temos apenas uma variável, $sidebar_left, que irá carregar todos os blocos que posicionarmos na esquerda. Nesse momento cabe uma explicação sobre como carregar os blocos no Drupal e quais variáveis são usadas para isso.
O Drupal trabalha com um conceito de região. Por padrão ele define 5 regiões onde podemos posicionar blocos. Essas regiões são mostradas no template page.tpl.php em forma de variáveis como abaixo:

• $header - Variável que carrega os blocos posicionados no cabeçalho de um tema
• $sidebar_left - Que já vimos e sabemos que carrega os blocos posicionados na barra lateral da esquerda
• $sidebar_right - Que faz o mesmo que a $sidebar_left, mas ao invés carrega os blocos na barra lateral da direita
• $content - Que carrega, por padrão, os blocos abaixo do conteúdo
• $footer_message - Que carrega os blocos posicionados no rodapé.

É possível que se defina outras regiões, mas esse tutorial não irá cobrir isso. Num futuro tutorial falaremos disso.

Agora veremos a última parte do nosso tema, o rodapé. Abaixo a verão original no bluemarine:

E em seguida o template:

Por fim, a versão alterada no nosso tema:

Novamente, parte do template foi mantida, pois ela é fundamental para a formatação correta do site. Vejamos o que é cada uma dessas variáveis:

• $footer_message - Já vimos essa variável, ela é responsável por carregar os blocos posicionados no rodapé.
• $closure - Essa variável carrega algumas instruções, geralmente javascript, que devem ser executadas após o processamento total da página. Um bom exemplo é o código do Google Analytics. Cada módulo pode definir o que virá nessa variável. Por padrão ela vem vazia.

Pronto, para esse tema que escolhemos, isso é tudo que precisamos mexer com PHP/HTML. Veremos agora como deixar mais próximo do template original, pois ainda são necessários alguns pequenos ajustes de CSS.

Antes de mais nada, precisamos habilitar o nosso novo tema. Assim você deve se logar como administrador, e ir na parte de temas (Adminsitrar -> Construção do site -> Temas) e habilitar o nosso novo tema, e definí-lo como padrão:

Vejamos como ficou o site com essas mudanças que fizemos (clique na imagem para ampliar):

Veja que ainda existem coisas a serem feitas. Precisamos colocar o bloco de login, a caixa de busca e formatar o conteúdo.
Vamos criar um item que apareça no menu superior. Para isso crie uma página (Criar conteúdo -> Página) e preencha os campos que desejar e em opções de menu preencha como abaixo:

Isso fará com que apareça um menu na barra verde. Vejam que, como eu disse antes, o primary links é diferente do menu de navegação.

Agora nós temos um item no menu superior, podemos criar tantos quantos desejarmos.

Agora vamos habilitar a caixa de busca na barra lateral da esquerda, para isso vá até a página de adminstração de blocos (Administrar -> Construção do Site - > Blocos) e habilitamos o bloco da busca na esquerda conforme abaixo:

Para que usuários anônimos acessem a caixa de busca, precisamos dar a permissão correta:

Pronto, temos todos os elementos que precisamos no nosso site.
Nossa caixa de busca ficou assim:

Agora faltam os ajustes de CSS. Precisaremos identificar quais as classes que definem a cor das duas caixas, login e busca além dos botões e caixa de texto.

Olhando o código fonte do template, identifiquei que a caixa de login, no template, tem aplicada a classe boxA e a de busca boxB. Olhando o código gerado pelo site até o momento, pude identificar que o bloco de login possui a classe block-user e o bloco de busca possui a classe block-search.
Assim, tendo mapeado as classes de origem e destino, editamos o arquivo style.css e trocamos todas as ocorrências de uma classe (no caso boxA e boxB) por outra (no caso block-user e block-search). Assim temos o resultado para a caixa de busca:

Mas ainda ainda não está como esperávamos. Nem o botão nem a caixa de texto está como esperávamos, para isso precisaremos trocar mais uma parte do CSS pelas classes corretas.
Vejamos então. A caixa de texto padrão do template utiliza a classe text que vamos ter que trocar pela classe que o Drupal utiliza, chamada form-text. Para isso, editamos novamente o arquivo style.css e procuramos or todas as ocorrências de input.text e trocamos por input.form-text. Igualmente com o botão, que no template tem a classe button e no Drupal a classe é form-submit.

Pronto, com todas as classes trocadas, temos como resultado final:

Então até o momento temos o seguinte com usuário anônimo(clique para ampliar):

E com usuário administrador(clique para ampliar):

No entanto não está 100% igual ao que desejamos, pois acima de cada bloco temos um título, coisa que não há no nosso template original. Assim precisamos desabilitar isso. Para tanto acesse a área de adminstração dos blocos (Administrar -> Construção do site -> Blocos) e escolha a opção "configurar" dos dois blocos que queremos tirar o título e troque o nome do título do bloco para <none>, como abiaxo:

Por fim, precisamos definir o nome do site, o slogan e a mensagem de rodapé. Para isso acesse a área de adminsitração do site na parte de informações (Administrar -> Configuração do site -> Informações do site) e altere os dados como abaixo e depois salve as informacões(clique para ampliar):

Isso por si só fará com que você tenha esses dados configurado. Porém o slogan do site depende do seu tema. Alguns desse elementos são controlados individualmente por cada tema, e o nosso tema está com o slogan desativado, então teremos que ativá-lo. Para isso acesse a área de configuração do tema (Administrar -> Construção do site -> Temas) e clique na opção "Configurar" do nosso tema e, em seguida, marque a caixa de "Slogan do site", conforme abaixo:

Pronto, isso termina com a configuração do nosso site, veja como ficará na versão final, com usuário anônimo(clique para ampliar):

E com o usuário logado(clique para ampliar):

Temos um template aplicado no nosso site. É bom lembrar novamente que esse não é o único método de fazer temas, e para algumas pessoas não é o melhor. Também deve-se lembrar que esse é um exemplo simples e que o Drupal te deixa fazer muito mais coisa do que foi mostrado nesse simples tutorial.

Abaixo você pode baixar o template pronto

Duvidas, sugestões e comentários são bem vindos.

Um abraço e espero que seja útil para você.