Detalhes

Categoria: Joomla

Atualização: Segunda, 02 Julho 2012 19:33

Autor: vovó Vicki

Acessos: 28546

Para muitos novatos o sistema de templates (ou modelos) do Joomla é uma verdadeira incógnita. Por não conhecerem sua estrutura básica e o mecanismo de funcionamento do sistema, acabam sendo obrigados a usar os templates instalados junto com o Joomla ou a instalar e usar templates disponibilizados pela comunidade de usuários. Para os webmasters com uma forte inclinação para o design, isto é um verdadeiro castigo porque ficam de mãos atadas.

Neste tutorial veremos como funciona o sistema de templates do Joomla. Veremos também como criar um template "pelado", bem basicão, que vai ajudar quem estiver começando.

O que é um template?

Simplificando ao máximo, um template é uma máscara que indica como e onde o conteúdo de uma página deve ser apresentado. Nesta máscara geralmente existe um local reservado para o texto que queremos apresentar, para o cabeçalho, para o rodapé e para módulos que mostrem menus, artigos mais lidos, um pequeno formulário para fazer login, etc e tal.

Componentes de um template Joomla

Um template, para atender as necessidades do framework do Joomla, precisa de diversas partes, ou seja, vários arquivos colocados em diretórios (pastas) específicos. Vamos começar com os diretórios. Todos os templates disponíveis devem ser colocados num sub-diretório do diretório /templates (não poderia ser diferente ). Se observarmos a instalação padrão do Joomla 1.5, este diretório mostra o seguinte:

templates |
          |- beez
          |- ja_purity
          |- rhuk_milkyway
          |- system

Isto quer dizer que os templates disponíveis são beez, ja_purity, rhuk_milkyway e system. O mínimo que o Joomla espera encontrar num diretório de um template são os arquivos templateDetails.xml e index.php. Eles precisam ter exatamente estes nomes por que é assim que o core do Joomla os chama. Se quisermos criar um novo template a estrutura mínima precisa ser a seguinte:

templates |
          |- meuTemplate |
                         |- index.php
                         |- templateDetails.xml

Observe o "D" maiúsculo no nome do arquivo templateDetails.xml. Se você criar um arquivo chamado templatedetails.xml ou TemplateDetails.xml não vai funcionar!

A maioria do templates possui outros arquivos além dos dois citados. Convencionou-se denominá-los (apesar destes nomes não serem exigidos pelo core do Joomla) como mostrado a seguir. A localização destes arquivos também é a convencionada, mas nada impede de colocar todos no diretório do template ou em sub-diretórios com nomes que você escolher.

templates |
          |- meuTemplate |
                         |- index.php
                         |- templateDetails.xml
                         |- template_thumbnail.png 
                         |- css |
                                |- template.css
                         |- images |
                                   |- logo.png

O template_thumbnail.png é uma imagem reduzida (geralmente de 140 pixels de largura e 90 pixels de altura) mostrando a aparência de uma página neste template. Esta imagem é usada para mostrar a aparência do modelo na interface administrativa se a opção "Preview Image" estiver habilitada na tela de gerenciamento de templates e também no frontend (interface do usuário, entenda-se site) se o módulo que permite selecionar templates estiver presente.

O arquivo template.css é o CSS do template. Como já disse, a localização no diretório /css/ e o nome do arquivo é opcional. Caso você decida colocá-lo em outro diretório ou usar outro nome, estes precisam ser referenciados no arquivo index.php. Tem mais uma coisa: pode-se usar mais de um arquivo CSS, o que, dependendo da complexidade do template, pode ser vantajoso.

O diretório /images/ (ou /imagens/, como quiser) também foi convencionado por uma questão de ordem. Contém todas as imagens usadas no template e o arquivo logo.png foi citado apenas como um exemplo.

A esta altura, a estrutura de um template já se tornou um pouco mais complexa, mas isto não altera o fato de que apenas dois arquivos são absolutamente necessários. São estes que veremos a seguir em maiores detalhes.

O arquivo templateDetails.xml

Este é um arquivo de metadados no formato XML que informa ao Joomla quais são os arquivos necessários quando uma página que usar este template for carregada. Ele também informa o autor, o copyright e quais arquivos e imagens compõem o template. Finalmente, este arquivo também é necessário para que o template possa ser instalado através da área administrativa.

Veja um exemplo:

Vamos por partes para descobrir o que este arquivo XML contém, mas antes de começar, dois avisos:

NÃO USE ACENTOS, o XML odeia letras acentuadas porque indicamos a codificação utf-8! Foi por isto que na linha 6 coloquei vovo Vicki ao invés de vovó Vicki.

NÃO MUDE A SEQÜÊNCIA dos marcadores. Se fizer isto, o XML se embanana todo, dá erro na hora de instalar o template e a gente fica procurando que nem doido onde o erro pode estar e dificilmente o encontra.

• Linha 1: indica que este é um arquivo XML versão 1.0 com codificação utf-8.
• Linha 2: diz que se trata de um arquivo de instalação (install) para a versão 1.5 do Joomla e que se trata da instalação de um template. Observe que o marcador <install...> possui no fim do arquivo um marcador de fechamento </install>.
• Linha 3: nome do template.
• Linha 4: versão do template.
• Linha 5: data da criação do template.
• Linha 6: autor do template.
• Linha 7: endereço de email do autor.
• Linha 8: endereço do site do autor.
• Linha 9: tipo de copyright.
• Linha 10: versão do tipo de copyright.
• Linha 11: descrição do template.
• Linha 12: abre uma área para definir os arquivos que compõem o template com o marcador <files>.
• Linhas 13 a 17: entre os marcadores <filename> e </filename> indicamos os nomes dos arquivos e seus diretórios.
• Linha 18: fim da área dos arquivos indicada pelo marcador </files>.
• Linha 19: início da área de posições com o marcador <positions>.
• Linhas 20 a 24: entre os marcadores <position> e </position>, indicação de que left (esquerda), right (direita), top (topo), etc são nomes de posições que devem ser aceitos no template.
• Linha 25: fim da área de posições.
• Linha 26: início da área de parâmetros que podem ser passados para o template.
• Linha 27: parâmetro "cor", do tipo lista.
• Linhas 28 e 29: duas opções de cor - Azul e Vermelho.
• Linha 30: fim da área do parâmetro.
• Linha 31: fim da área de parâmetros.
• Linha 32: fim da área de instalação.