Detalhes

Categoria: Joomla

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

Autor: vovó Vicki

Acessos: 28903

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 :smile:). 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

:atencao: 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:

:atencao: 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.

:atencao: 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.

O arquivo index.php

Este é o arquivo mais importante de um template. É ele que informa ao Joomla onde colocar os diferentes componentes e módulos da página. Este arquivo é uma combinação de PHP e (X)HTML.

Antes de mais nada, vamos dar uma olhada em DOCTYPE por que esta é uma parte crítica para se criar templates válidos. Esta parte precisa estar logo no início do arquivo index.php:

As três primeiras linhas são apenas para se assegurar que este arquivo está sendo acessado através do Joomla - é uma questão de segurança. A linha seguinte eu sei que parece coisa de maluco, e na verdade é mesmo. Foi feita por geeks para ser entendida apenas por geeks, mas nem por isto vamos desistir :smile:

O DOCTYPE de uma página web é um dos componentes fundamentais do modo como a página é mostrada pelo browser - mais especificamente, como este browser interpreta CSS. É muita areia pro seu caminhãozinho? Então esquece este papo de maluco e acredite em mim: coloque esta linha de código e esqueça o resto; deixe de colocar e prepare-se para surpresas desagradáveis relacionadas ao IE (ele é o culpado desta história porque a Microsoft insiste em criar padrões nem sempre aceitos e a fugir dos padrões já estabelecidos, motivo pelo qual uso qualquer outro navegador, contanto que não seja o IE).

Logo depois desta declaração complicada, vem uma declaração XML, outra insanidade que também não vale a pena discutir agora (se a maioria prefere o IE, quem sou eu para discordar?):

Bão, chega de sandice e vamos ao cabeçalho do nosso arquivo index.php que começa na linha 6 e termina na linha 11:

Basicamente, o que fizemos foi usar uma declaração jdoc:include (que faz parte do conjunto de declarações do sistema de templates do Joomla) e criar três links para arquivos CSS. Existem diversas declarações jdoc:include, mas na área do cabeçalho a única que nos interessa é a do tipo head. Quando o Joomla encontra este tipo de declaração, substitui a linha <jdoc:include type="head" /> por uma porção de marcadores HTML definidos no sistema. Nesta página, se você der uma olhada no código fonte, vai encontrar o seguinte:

:blush: Taí um segredo: o jdoc:include do tipo head é coisa de preguiçoso. Ao invés de escrever uma porção de linhas de cabeçalho como as mostradas acima, chamei um jdoc:include tipo head e deixei isto por conta do sistema de templates do Joomla.

Quanto à inclusão de arquivos CSS, que vêm logo depois do jdoc "dos preguiçosos", tenho duas observações a fazer. As duas primeiras inclusões são padrão porque os arquivos system.css e general.css contêm estilos genéricos do Joomla. A terceira é apenas a inclusão do arquivo CSS do nosso template. Neste caso podemos indicar o caminho para este arquivo com <link rel="stylesheet" href="/templates/meuTemplate/css/template.css" type="text/css" /> (ou qualquer outro diretório e/ou nome de arquivo que você tenha criado) ou deixar que o próprio Joomla encontre o caminho correto com <link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />.

Você lembra que no arquivo templatesDetails.xml criamos um parâmetro chamado "cor" cuja descrição era "Cor de fundo do template"? Pois bem, digamos que criamos arquivos CSS especiais para atender este parâmetro, o azul.css e o vermelho.css. Se quisermos que este parâmetro seja levado em consideração, podemos adicionar mais uma linha para incluir o arquivo de estilo que corresponda ao valor do parâmetro:

Bem, por enquanto isto é tudo o que tenho a dizer sobre o cabeçalho. Como nem só de cabeçalho "vive" uma página, vamos ter que criar o corpo (body). É aqui que entra o exemplo do "template pelado", ou seja, o mínimo que podemos fazer para colocar algum conteúdo nas páginas que usarem este template:

Para inserir um módulo numa determinada posição, usa-se a declaração jdoc:include type="module" seguida pelo nome do módulo. Para inserir todos os módulos que foram designados para ocuparem uma área nominada (como top, left, right, etc), existe a declaração jdoc:include type"modules" seguida do nome da área. Para incluir um componente, usa-se a declaração jdoc:include type="component".

O que são folhas de estilo (arquivos CSS)?

A melhor maneira de mostrar para que serve uma folha de estilo (ou arquivos CSS) é mostrando a diferença entre uma página SEM uma folha de estilo e a mesma página COM um folha de estilo. A página que você está vendo no seu monitor tem uma folha de estilo que define a cor do fundo, a cor do texto, o aspecto dos links e mais uma porção de particularidades. Se aplicarmos o nosso "template pelado" a esta mesma página, o resultado é o seguinte:

A diferença é tão gritante que dispensa explicações. Já deu para perceber que um modelo sem seu template.css (e eventualmente outros arquivos CSS adicionais) é tão elegante quanto um paquiderme em crise depressiva.

Para poder alterar as propriedades de elementos de uma página é preciso identificá-los com uma id ou class. Uma das formas mais práticas (veremos adiante que também é uma das formas mais vantajosas) é criar divisórias que tenham estes atributos. Por exemplo, no nosso arquivo index.php podemos colocar o cabeçalho numa divisória que contém o nome do site:

Agora podemos criar o estilo desta div. Queremos que o fundo seja preto e que as letras sejam brancas. Para obter este resultado, vamos editar o arquivo /templates/meuTemplate/css/template.css (ou criá-lo se ele ainda não existir) e adicionar o seguinte:

:info: No meio do código HTML, a linha 15 do arquivo index.php aciona o PHP com <?php e chama a função echo, que serve para colocar strings na tela. Indicamos como string o nome do site (sitename), que está no arquivo de configuração do Joomla (configuration.php). Para obter esta string acionamos o método getCfg da variável global do Joomla $mainframe. Esta variável global possui uma porção de métodos, entre eles o getCfg, que permite buscar valores definidos no arquivo configuration.php. Para indicar que o PHP termina depois desta chamada, usamos o marcador ?>.

Vamos salvar os arquivos index.php e template.css com as modificações feitas e chamar novamente esta página com o novo template. O resultado será:

Eu sei que a letra ainda está feia e muito pequena para um cabeçalho, mas vamos com calma, uma coisa depois da outra. O mais importante no momento é entender como uma página é gerada no Joomla.

Agora que já sabemos como podemos especificar áreas no nosso template usando divisórias, nada impede que coloquemos os módulos da esquerda no lado esquerdo da página, o componente com o texto do artigo no centro e os módulos da direita no lado direito da página. Isto significa que estaremos criando um template com três colunas - esquerda, central e direita. Também podemos criar um rodapé que, assim como o cabeçalho, ocupa toda a largura da página. Então, vamos lá! O arquivo index.php vai ficar assim:

Xiiiii... não aconteceu nada do que estávamos querendo. Nada de três colunas, nada de arrumação. O motivo é que não levamos em consideração o que as divisórias são na verdade.

Pilotando divisórias

Para os browsers, por padrão, as divisórias são "caixas" que ocupam toda a largura da página. No exemplo acima, o browser fez tudo direitinho: como não havia nenhuma indicação do que fazer com as divisórias, ele colocou uma debaixo da outra na sequência indicada. Se quisermos modificar esta disposição, primeiramente é preciso conhecer a width (largura) das divisórias. Para entender melhor o que as diversas propriedades representam vamos determinar uma cor de fundo diferente para cada uma das divisórias: vermelho para a da esquerda, branco para a do centro, azul para a da direita e preto para o rodapé. Como fazer isto? Usando o arquivo de estilo!

Por enquanto não mudou muita coisa por que só mudamos a cor de fundo das divisórias, mas ainda não alteramos a propriedade largura das mesmas. A largura das divisórias pode ser definida em pixels ou porcentagem. Se fixarmos a largura em pixels teremos alguns problemas. Por que? Porque se o usuário tiver definido uma resolução de 800x600 pixels para a sua tela, a aparência da página será uma (cerca de 17% dos visitantes ainda usam esta resolução); se tiver definido 1024x768 pixels (mais de 70% dos usuários já optaram por esta resolução), o aspecto da página será totalmente diferente porque vão sobrar muitos espaços vazios. Só por este motivo fica claro que a melhor opção é definir a largura das divisórias em porcentagem. Considerando que a largura da tela é de 100% e que teremos três colunas, a soma da largura destas três coluna também deverá ser 100%.

Se quisermos que a largura das colunas da esquerda e da direita sejam menores que a da coluna do centro, podemos optar por alguma coisa como 20% - 60% - 20%. Neste caso, o CSS precisa fornecer estas informações:

Atualizando o arquivo template.css e chamando novamente a página, o resultado é o seguinte:

Tá tudo muito bom, dá até para ver que a coluna da esquerda ocupa apenas 20% da largura da tela, mas não é bem este o resultado que esperávamos. Na verdade, queremos que a coluna da esquerda fique à esquerda, a coluna do meio fique no meio, que a coluna da direita fique à direita (parece tão óbvio!) e não que uma fique embaixo da outra. Para resolver esta pendência vamos ter que usar a propriedade de flutuação (float) das divisórias.

Para pedir que uma divisória "flutue" à esquerda precisamos informar float: left; para que flutue à direita, usamos float: right. A flutuação de divisórias funciona da seguinte maneira: se pedirmos que uma divisória flutue à esquerda, ela é colocada na parte esquerda da tela ocupando uma determinada largura. As divisórias que vierem a seguir mantêm a propriedade float: left e também serão posicionadas à esquerda até que a propriedade float seja desativada com um clear: left ou clear: both. Se a largura da divisória não tiver sido definida, o padrão é que ela ocupe 100% do espaço disponível. Se a largura tiver sido definida e ainda restar espaço na tela, a próxima divisória é colocada ao lado da primeira e assim sucessivamente até que a largura da tela tenha sido preenchida ou quando uma divisória "estourar" o espaço disponível. Veja o que acontece quando usamos este princípio (nas divisórias miolo e colDireita não precisaríamos indicar float: left, mas incluí a propriedade para deixar o exemplo mais explícito):

Mais uma vez, atualize e salve o arquivo de estilos template.css. Verifique os resultados:

Conseguimos colocar uma coluna ao lado da outra, só que tem um porém - o rodapé acabou ficando na coluna da direita. O que aconteceu foi o seguinte: a coluna da esquerda (fundo vermelho) está corretamente posicionada e mostra o menu; a coluna central (fundo branco) também está na posição correta; a coluna da direita, que deveria ter fundo azul e conter os módulos da direita está vazia porque não há módulos definidos para ocupar a posição right nesta página. Isto significa que 20% da largura da página estão sobrando, espaço este que é ocupado pela próxima divisória - a divisória do rodapé.

Para interromper a sequência de divisórias colocadas lado a lado é preciso interromper a sequência de float, ou seja, é preciso limpar (clear) esta sequência. Experimente colocar um clear: both na divisória rodape:

Ah, agora sim! A divisória "pulou" para o fim da página e, como sua largura não foi especificada, atravessa a página inteira.

Escondendo divisórias vazias

A cada nova etapa descobrimos mais alguma coisa para arrumar. No ponto em que estamos agora, a coluna da direita está ocupando 20% da página sem conteúdo algum, ou seja, está "comendo" espaço" à toa. Para que a coluna só seja mostrada caso existam módulos à direita, vamos dar uma ajeitada no arquivo index.php usando a função countModules:

Fazendo esta alteração e visualizando novamente a página, o resultado é decepcionante :sad: Se não incluímos a divisória da direita, porque continuamos com o espaço em branco à direita da página? A resposta é muito simples: foi por que definimos a largura da coluna esquerda em 20% e a da coluna do meio em 60%. Para sair desta sinuca precisamos descobrir se a coluna da esquerda e a da direita possuem conteúdo e ajustar a largura da coluna do meio de acordo. A mesma função countModules vai quebrar o galho:

Observe que enviamos os parâmetros 'left and right' e 'left or right'. Se a coluna coluna esquerda E a coluna direita (left and right) não tiverem conteúdo (==0), então a largura deve ser 100. Se uma das colunas tiver conteúdo (esquerda OU direita, left or right == 1), a largura deve ser 80 e, se as duas tiverem conteúdo (esquerda E direita, left and right == 1), a largura deve ser 60. Usamos este resultado para definir o estilo da coluna do meio no arquivo index.php:

A linha <div id="miolo<?php echo $largura; ?>">, na verdade, vai colocar na página id="miolo100", id="miolo80" ou id="miolo60". Estas ids precisam estar contempladas no arquivo CSS para que as propriedades das divisórias possam entrar em vigor:

O resultado desta nova mexida, finalmente, é o esperado. Sei que o template que criamos ainda está uma droga: falta dar uma separadinha entre as colunas, a fonte está horrorosa, os itens do menu estão invadindo o texto do conteúdo e o próprio menu está deplorável, mas... o caminho das pedras foi mostrado. Todas as restrições que apontei são perfeitamente contornáveis se capricharmos na folha de estilos. O mais complicado, que é "domar" as divisórias para criar um template "elástico" sem o uso de tabelas, foi explicado. Vou mostrar o resultado final desta nossa jornada que deve ser apenas o começo para aqueles que querem enfrentar a criação seus próprios templates:

Num próximo tutorial vou explicar como dar um trato mais caprichado em templates e até como conseguir alguns efeitos especiais. Me aguardem.

Abraço da :vovo: vó