Faça sites incríveis em Joomla

Insira aqui o seu email para receber gratuitamente as dicas por e-mail!

Como fazer template personalizado em Joomla?

Rate this item
(22 votes)
Como fazer template personalizado em Joomla? - 3.9 out of 5 based on 22 votes

[Atualizado 23/07/2014]

Olá amigos, criar um template Joomla é uma tarefa relativamente simples, basta saber estruturar um site em XHTML + CSS normal e conhecer alguns códigos da estrutura do Joomla, mais uns macetes básicos.

Primeiro Passo

  1. Vamos fazer o download do template EM BRANCO chamado Blank Template ou Blank Template + Bootstrap;
  2. Ao fazer o download teremos toda a estrutura de arquivos necessária para fazer seu próprio template;

Personalizando o back-end do Template Joomla

Agora que fizemos o download da nossa base para o desenvolvimento do nosso template, vamos personalizá-lo.

Abra o arquivo templateDetails.xml que está dentro da pasta do Blank Template e vamos editar as informações usando um editor HTML.

  1. <name> Nome do Template.
  2. <creationDate> Data de criação do template.
  3. <author> Autor.
  4. <copyright> Direitos do template.
  5. <authorEmail> Email de contato.
  6. <authorUrl> Site onde está sendo usado.
  7. <version> Pode dar um número para versão do template.
  8. <description> São os dados que descrevem o template no painel, coloque em h1 o nome do template e edite o html com mais informações.
  9. <files> São as pastas utilizadas pelo template, não modifique caso não saiba o que está fazendo.
  10. <languages> São as chamadas dos arquivos de tradução do template, não precisa mexer se não quiser, mas pode personalizar.
  11. <positions> Muito importante, aqui iremos informar o nome das posições do template para aparecer quando ativarmos algum módulo.
  12. <config> Não modifique, aqui são as configurações do template para integrar com bibliotecas CSS como o Bootstrap.

Thumbnail do template

Na pasta do template tem 2 arquivos: template_preview.png e template_thumbnail.png edite essas imagens no seu editor de imagem preferido para ter uma miniatura que represente o site no painel do Joomla. Assim quando passar o mouse em cima do nome do template terá essa imagem exibindo.

Favicon do template

Dentro da pasta do template tem o arquivo favicon.ico, você pode criar um ícone personalizado para ser o ícone do seu site no navegador.

Se não sabe o que é Favicon, clique aqui que falo mais a respeito.

Instalando o template no Joomla para começar a modificar o front-end

Depois de fazer essas personalizações, salve tudo óbvio para não perder, copie a pasta do template (se quiser renomeie para o nome que quiser, mas não esqueça de informar no item 1 do XML.

Agora vá até sua instalação Joomla, na pasta templates e cole o seu template.

Exemplo: /www/templates/MEUTEMPLATE

Ativando o template no painel

  1. Agora entre no painel administrativo do seu Joomla (exemplo: www.meusite.com/administrator)
  2. Vá no menu Extensões > Gerenciar extensões;
  3. Clique em Descobrir;
  4. E depois no botão Descobrir;
  5. Vai aparecer na lista o seu template com o nome e dados personalizados;
  6. Selecione o template e depois clique em INSTALAR.

Vai aparecer mensagem de instalado com sucesso, agora vamos editar o visual do template!

Personalizando o visual front-end do template Joomla

  1. Abra o arquivo index.php da pasta do seu template que está na sua instalação Joomla;
  2. Note que basta você editar o conteúdo HTML dentro do <body> para chamar os módulos do Joomla;
  3. Na pasta CSS tem um arquivo chamado template.css que é onde você edita o estilo do seu HTML;

Códigos para integração do seu template Joomla com extensões instaladas no painel:

  1. <jdoc:include type=”head” /> carregará dinamicamente o título da página, scripts, tags meta entre outros.

  2. <jdoc:include type=”modules” name=”nav” /> carregará o módulo da posição "nav"

  3. <jdoc:include type=”component” /> carregará o conteúdo dos artigos

  4. As declarações (jdoc:include) do tipo módulos (type=”modules”) podem ter qualquer nome (name). No caso, eles são relacionados com a posição real da declaração. Evite acentos, maiúsculas e espaços.

Sabendo esses códigos básicos, basta por um nome para cada posição no seu template e por o código pra carregar nele um módulo, exemplo:

< div class="topo" > <jdoc:include type=”modules” name=”topo” /> </ div>

Nesse caso nessa div vai carregar o módulo instalado e configurado para exibir na posição topo.

Usando a biblioteca CSS do Bootstrap no meu template Joomla

IMPORTANTE! Para ter essa opção você tem que ter usado o Blank Template + Bootstrap, se usou apenas o Blank Template vazio ele não vem mais com várias opções de frameworks integrados. (Atualizado 23/07/2014)

Olha que legal, se você chegou até aqui vai ter uma bela surpresa, pois esse template que usamos como base faz integração automática com o Boostrap e outras bibliotecas CSS e JS bastando ativarmos para utilizá-las.

----- A partir da versão 3.1.0 do Blank Template essa parte não existe mais -----

Acesse seu painel, e vá em gerenciar templates e localiza por seu template. Feito isso clique para editar.

Veja que o template tem as opções para você selecionar e usar, bastando ticar a opção e salvar para o template carregar no HEAD do seu template os arquivos.

Opções disponíveis:

  • Modernizr
  • Métodos CSS de minificação
  • Less.js
  • Foundation (Made by ZURB)
  • Bootstrap (incl. jQuery)
  • Opções de fontes e mais umas funções.

----- Pule a parte acima se está usando Blank Template 3.1.0 ou superior -----

Bom, então ative o template.

Volte ao index.php do template, no espaço do corpo do site (body) você vai colar o grid utilizado pelo Bootstrap, acesse: http://getbootstrap.com/css/#grid para pegar os códigos HTML e definir seu grid.

Copie e cole dentro do <body>, feito isso você terá uma estrutura do Bootstrap rodando, basta personalizar colocando na sidebar por exemplo uma chamada de um módulo etc.

E aí, gostou?

Com certeza tem muita informação valiosa neste artigo, espero mesmo que tenha te ajudado e gostaria que comentasse abaixo a respeito!

Grande Abs!

Renato Moreira

P.S: Caso não queira desenvolver do zero o template e sim usar templates prontos, veja este artigo que informo onde encontrar Templates Joomla.

Dicas GRÁTIS!
Receba novidades por e-mail.