Temas: uma forma fácil de fazer o seu, a partir de um tema existente

mais de 1500 temas (isso mesmo, mais de mil e quinhentos) temas gratuitos (informação recolhida no momento deste post)." data-share-imageurl="">

Oi pessoal! Alguém aí já teve dificuldade em fazer um tema? Pois hoje vou mostrar uma maneira bem maneira (hã hã... rsrs) de fazer um tema, baseando em um tema já existente. Ou seja, vou fazer um sub-tema.

A grande vantagem de fazer um sub-tema, é que aproveito todas as funções existentes no tema pai. Assim, se o tema pai é responsivo, automaticamente o meu tema também será. Todos sabemos que o Drupal já nos dá, gratuitamente, mais de 1500 temas (isso mesmo, mais de mil e quinhentos) temas gratuitos (informação recolhida no momento deste post). Alguns desses temas foram feitos exatamente para servir de base para outros temas, ou seja, contém funções importantes e comuns, que são usadas pelos sub-temas. Os temas base mais populares são o Zen, o Omega e o AdaptiveTheme (meu preferido, por causa das funções).

Também posso aproveitar todo o layout, imagens, css e javascript contidos em um tema pai. É isso que vou fazer, pensando que o tema que vou escolher como base, atende muitas características funcionais e visuais requeridas no meu projeto. Neste caso, escolho o Best Responsive, por ser um tema responsivo, tem uma boa organização de blocos e regiões, além de uma tipografia bacana e estilos legais nas mensagens de alerta. Mas é muito importante deixar claro: você pode escolher qualquer tema para ser o tema pai, incluindo um tema que já é sub-tema (ou seja, depende de outro para funcionar), que a metodologia para criação de sub-tema é a mesma!

Sendo assim, a primeira coisa que farei é instalar o meu tema pai, seguindo as boas práticas de organização dos arquivos que já foi falado aqui no Drupal de Elite antes. Com o tema pai habilitado, vai aparecer algo assim, na área de administração de temas (aparência):

temas 01

Beleza! Agora posso prosseguir na criação do meu tema.

Criação de um tema baseado em um existente (criação de sub-tema)

É muito fácil criar um sub-tema. Basta eu criar um diretório e um arquivo *.info com as informações corretas. Neste caso, vou chamar meu tema de "Tutorial Xulispa Theme" (xulispa_theme). Então vou criar um diretório sites/all/themes/custom/xulispa_theme e adicionar um arquivo xulispa_theme.info com o seguinte:

; Default information for theme works

name = "Tutorial Xulispa Theme"
description = "Test theme for Tutoriais Xulispa"
core = "7.x"
version = "7.x-1.0"
base theme = "best_responsive"

; Copy regions from top theme

regions[sidebar_first]  = First Sidebar
regions[header]         = Header
regions[preface_first]  = Preface First
regions[preface_middle] = Preface Middle
regions[preface_last]   = Preface Last
regions[content_top]    = Content Top
regions[content]        = Content
regions[help]           = Help
regions[footer]         = Footer
regions[footer_first]   = First Bottom
regions[footer_second]  = Second Bottom
regions[footer_third]   = Third Bottom

As linhas que começam com ponto e vírgula (;) são comentários. Basicamente, o que eu preciso, é das informações de name (é o nome do tema que será exibido na administração), description (descrição do tema, que também será exibida na administração), core (a versão de compatibilidade do Drupal), version (a versão do projeto, no caso, do tema, que também será exibida na administração) e o base theme (que é onde informo o tema pai para ser usado como base). O que vem a seguir, é uma cópia exata das regiões contidas no tema pai, neste caso, o Best Responsive. Essa informação foi copiada do best_resposive.info e é necessária para que o meu tema trabalhe de acordo com as funções do tema pai e reconheça as regiões corretamente. Caso contrário, terei um alerta de erro, dizendo que a região não foi encontrada.

Eu também copiei os arquivos screenshot.png, logo.png e favicon.ico do tema pai para o meu tema. O ideal é criar os meus próprios arquivos de imagem, com os mesmos nomes, mas para este post, a cópia dos arquivos terá o efeito esperado.

Segue a imagem da minha estrutura de arquivos que também mostra o meu xulispa_theme.info:

temas 02

Feito isso, basta limpar todos os caches do Drupal e correr para o abraço! Na área de administração dos temas (aparência), habilitei o meu tema e o defini como padrão. O resultado ficou assim:

temas 03

O mais interessante aqui, é que todas as configurações e funções presentes no tema pai foram todas herdadas para o meu tema, incluindo as configurações feitas via interface do Drupal (no caso desse tema, exibir ou não o slideshow na página inicial e as urls dos ícones de redes sociais são alterados na configuração do tema, pela interface do Drupal). As funções de tema responsivo também foram todas herdadas, então o meu site terá um bom comportamento quando for acessado de smartphones ou tablets. Show, né? :D

Mas não pára por aí. Eu também quero criar as minhas regiões, alterar os estilos e até, usar um ou mais js extras. Agora a brincadeira começa a ficar mais divertida!

Customizando o meu tema (alterando o que foi herdado do tema pai)

Vamos supor que, nesse momento, eu queira colocar mais uma região bem ao topo de tudo (que possivelmente servirá para a publicação de anúncios), criar estilos para o conteúdo que aparecerá na minha nova região, alterar uma série de estilos já existentes e também adicionar um novo javascript (que possivelmente manipulará algumas funções dos anúncios publicados). Atualmente, as regiões herdadas aparecem nessa disposição:

temas 04

A primeira coisa que vou fazer, é criar, dentro do meu tema, as pastas css, images, js e templates, para ficar bem organizado. Logicamente, tudo que for arquivo de estilo entra na pasta css, tudo que for arquivo de imagem vai pra pasta images, tudo que for javascript vai pra js e tudo que for arquivo de template (*.tpl.php) vai pra pasta templates. Seguindo essa lógica, vou criar um arquivo xulispa_style.css, um xulispa_ads.js e copiar o arquivo page.tpl.php que existe no tema pai, o Best Responsive, para o meu tema. Alguma dúvida quanto a organização dos arquivos em suas devidas pastas? :)

Com isso, vou adicionar algumas linhas no meu xulispa_theme.info:

; Custom regions

regions[top_ads] = Top Ads

; Custom styles

stylesheets[all][] = css/xulispa_style.css

; Custom js

scripts[] = js/xulispa_ads.js

Assim, separei a adição de regiões, estilos e javascript adicionais. Segue uma imagem de como ficou a minha estrutura de arquivos e o meu xulispa_theme.info:

temas 05

Agora, vou inserir a região top_ads no arquivo page.tpl.php do meu tema. É importante fazer uma análise do html para saber o lugar certo de onde inserir a região. Lembre-se que esse arquivo page.tpl.php do meu tema foi copiado do tema pai, o Best Responsive e por isso, ele já contém o html que faz a exibição das páginas. Como eu quero adicionar a nova região bem ao topo de tudo, vou colocar bem na primeira linha abaixo da div que tem o id "header-wrap":

<?php if ($page['top_ads']): ?>
  <div id="top-ads">
    <?php print render($page['top_ads']); ?>
  </div>
<?php endif; ?>

Note que eu coloquei a região através da função render(), passando pela variável $page (linha 5 do código acima). Toda nova região que eu inserir no xulispa_theme.info será interpretada como um elemento da variável $page. A função render() cuida de fazer a saída em html. Note também que eu coloquei uma condição: caso exista algo na região, a página carrega o html. Fiz isso para poder colocar estilos na div que eu criei, sem que esses estilos sejam carregados no caso de não haver conteúdo naquela região.

Falando em estilo, vou apoveitar pra colocar uma margem superior na minha nova região, para espaçar um pouco do topo quando houver conteúdo. No meu arquivo xulispa_style.css vou colocar:

/* header ads */

#top-ads {
	margin-top: 30px;
	display: block;
}

Feito isso, é preciso limpar todos os caches do Drupal, para que ele reconheça os novos arquivos e as alterações feitas no xulispa_theme.info (principalmente) e nos demais. Acessando a página de demonstração de regiões, agora tenho o seguinte:

temas 06

Note que existe mais uma região, além das existentes exibidas antes. Ao acessar a administração dos blocos, também vou encontrar a minha região lá, para colocar o que eu quiser. Se eu acessar a página principal do site, por exemplo, ou qualquer outra em que o tema é carregado e analisar o html, verei que os meus arquivos xulispa_style.css e xulispa_ads.js também estão sendo carregados.

É isso galera! Agora é só customizar como quiser. Lembrando que para sobrescrever os estilos existentes, basta adicionar as classes existentes equivalentes ao que deseja mudar no arquivo css do tema. Eu ainda vou fazer outros artigos sobre desenvolvimento de temas e aproveitar o "Tutorial Xulispa Theme" para mostrar como se faz coisas mais avançadas, aproveitando para evoluir o tema. Se você quiser baixar o "Tutorial Xulispa Theme", para testar, modificar, estudar e etc, pode clicar aqui para fazer download. Qualquer coisa, deixe um comentário aí!

Nota: parece que o syntax highlighter está dando algum conflito na exibição de código neste artigo, estou analisando pra ver o que pode ser. Se alguém souber, por favor me avise. :)

{pt: Nós vamos encorajá-lo a desenvolver as três grande virtudes de um programador: preguiça, impaciência e hybris.}

1. Para instalar o git flow no Ubuntu:

{en: For installing git flow on Ubuntu:}

apt-get install git-flow

Dica da Preguiça: Veja instruções para outros sistemas operacionais