Criando template para Joomla 3

Com o lançamento da série 3 do Joomla, muitas pessoas estão se perguntando o que mudou na hora de criar um template. Nesse tutorial vou mostrar como criar um template Joomla 3 básico.

Siga os passos a seguir.

1. Crie uma pasta e a identifique com o nome do template que será desenvolvido

  • Se o projeto se chama Template Joomla, a pasta pode ser nomeada como templatejoomla.
  • Crie um arquivo index.html em branco e salve dentro dessa pasta.
  • Dentro da pasta templatejoomla crie outra chamadas css.
  • Dentro dela coloque um arquivo index.html em branco.
  • Dentro da pasta css, crie um arquivo chamado template.css

2. O arquivo templateDetails.xml

Para que o Joomla consiga ver seu template, é necessário criar um arquivo templateDetails.xml dentro da pasta templatejoomla. Repare que nome do arquivo tem um D maiúsculo.

Copie e cole o código abaixo para esse arquivo.

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.1" type="template" client="site">
        <name>Meu Template</name>
        <creationDate>dd-mm-aaaa</creationDate>
        <author>Helvecio da Silva</author>
        <authorEmail>helvecio@blog.com</authorEmail>
        <authorUrl>http://blog.helvecio.com</authorUrl>
        <copyright>Helvecio da Silva da Silva - 2014</copyright>
        <license>GNU/GPL</license>
        <version>1.0.2</version>
        <description>Template criado com o tutorial do blog design+ de Helvecio da Silva</description>
        <files>
                <filename>index.php</filename>
                <filename>templateDetails.xml</filename>
                <folder>imagens</folder>
                <folder>css</folder>
        </files>
        <positions>
                <position>breadcrumb</position>
                <position>left</position>
                <position>right</position>
                <position>top</position>
                <position>user1</position>
                <position>user2</position>
                <position>user3</position>
                <position>user4</position>
                <position>footer</position>
        </positions>
</extension>

Nesse arquivo, as informações que podem ser personalizadas são:

  • name – nome do template que está sendo criado
  • creationdate – data da criação do template
  • author – nome do criador do template. Pode ser o nome da empresa também.
  • authorEmail – e-mail do criador do template. Pode ser o e-mail da empresa também.
  • authorUrl – endereço do site do autor
  • copyright – direitos autorais do tempalte
  • description – informações sobre o template

Agora que você está aprendendo, não é necessário mudar nada.

Na área <files> você informará todos os arquivos que estão na raiz do seu template utilizando a tag <filename> e as pastas, utilizando a tag <folder>. Geralmente essa área é preenchida por último, quando já se está com o template pronto, antes de instalá-lo.

As posições <position> podem ser deixadas como no exemplo. Essas são padrão, então fica mais fácil quando mudar do template padrão do sistema.

3. O arquivo index.php

Basicamente, o arquivo index.php é um HTML com códigos PHP que permitirão ao Joomla exibir o conteúdo de forma correta. Esses códigos são o ponto de inserção para conteúdo e módulos. Qualquer conteúdo que for inserido nesse arquivo, aparecerá em todas as páginas do site, a não ser que seja inserido via Joomla.

O começo do arquivo é o seguinte:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

A primeira linha impede que pessoas má intencionadas vejam seu código e façam alterações indevidas.

A segunda linha é a declaração da versão do HTML desse arquivo. No caso, usamos HTML5. É importante lembrar que o IE 8 e anteriores tem problemas com essa nova versão. Antes de iniciar seu projeto, verifique se há demanda de uso por essa versão do navegador.

A terceira linha inicia o HTML e informa o idioma no qual está o site.

4. A área HEAD

Um documento HTML é dividido em duas partes: cabeçalho (head) e corpo (body).

O head guarda a informação sobre o documento. A seguir o código que deverá ser inserido no head do seu index.php.

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

Na primeira linha temos a variável que informa ao Joomla onde ele deve inserir as informações do head, como o título da página, meta-informações e JavaScript do sistema.

As demais linhas criam links para as folhas de estilo do sistema e para os arquivos CSS que seu template usa. Esses arquivos devem estar dentro da pasta css. Neles você poderá declarar os estilos que formatarão sua página.

5. A área BODY

No body encontramos o código que controla o layout da página do site. Vamos colocar o código abaixo agora:

<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

Com esse layout básico já podemos começar.  Nessa linhas vemos as declarações jdoc, que dizem ao Joomla para inserir conteúdo de certas partes do sistema.

Na linha com a declaração contendo name=”top”, serão adicionados todos os módulos que forem atribuídos a posição top. Na linha onde está a declaração type=”component”, serão inseridos os artigos e conteúdo principal.

É possível criar novas posições ao seu template e elas devem ser sempre informadas no arquivo templateDetails.xml.

Posteriormente, lembre de atribuir a posição top para o menu do site, quando o template for ativado.

Em volta dessa marcação é onde se coloca o HTML que montará sua página. Quando houver necessidade de inserir uma imagem dentro do template, use a seguinte marcação:

<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/imagens/arquivo.jpg">

6. Chegamos ao Fim

Feche a página com uma tag </html> e salve seu index.php.

Verifique se os arquivos estão organizados dessa maneira:

- meutemplatejoomla
- - css
  | - index.html
  | - template.css
  - index.html
  - index.php
  - templateDetails.xml

7. Testando o template

  1. Suba a pasta meutemplatejoomla para dentro da pasta templates na raiz de sua instalação Joomla;
  2. No administrador vá para Extensões > Gerenciador de Extensões > aba Descobrir;
  3. Clique no botão Descobrir e o Joomla encontrará seu template. Na listagem aparecerá Meu Template;
  4. Selecione somente o seu template na lista que aparece e clique no botão Instalar
    1. Se tudo estiver correto, você verá uma mensagem de sucesso do sistema:
      Descobrimento da instalação realizada com sucesso
    2. Caso contrário, analise com cuidado o que pode estar errado.
      Na maioria dos casos falta algum arquivo, pasta ou há um erro de digitação no código.
  5. Vá para Extensões > Gerenciador de Extensões > Gerenciador de Temas e você verá seu template na listagem;
  6. Ative seu template clicando sobre a estrela para torná-lo padrão do sistema;
  7. Vá para Extensões > Gerenciador de Módulos;
  8. Modifique a posição do módulo Main Menu (Menu Principal) para top;
  9. Abra seu site e verifique os resultados.

Caso não tenha acesso FTP, faça o seguinte:

  1. Compacte em um arquivo ZIP a pasta meutemplatejoomla;
  2. Vá para Extensões > Gerenciar > Instalar;
  3. Clique na aba Enviar Pacote de Arquivos;
  4. Arraste e solte o arquivo e aguarde a instalação;
  5. Siga os passos 6 a 9 das instruções acima.

Esse é o esqueleto de um template, por isso você verá a sua página com uma formatação básica, sem colunas.

Clique aqui para baixar os arquivos desse tutorial compactados em um ZIP.

Caso encontre algum problema ou erro, escreva uma mensagem nos comentários abaixo.

SalvarSalvar

SalvarSalvar

Related Posts with Thumbnails

22 comentários em “Criando template para Joomla 3

  • 04/12/2017 em 14:40
    Permalink

    Oi Helvécio! Veja que legal: depois de 3 anos seu artigo ainda dá frutos, parabéns!

    Eu gostaria de saber como fazer esse passo-a-passo mas subir o template direto para o ambiente de desenvolvimento on line. Dá pra fazer isso?

    Obrigado desde já!

    Resposta
    • 04/12/2017 em 16:19
      Permalink

      Oi Rafael. Acabei de atualizar o post com essa informação. Boa sorte!

      Resposta
  • 24/01/2017 em 18:40
    Permalink

    Tudo bem Helvecio. É possível criar um trecho de um artigo que eu possa atualizar sempre, sem ter ficar abrindo artigo por artigo.
    Obrigado

    Resposta
    • 24/01/2017 em 20:19
      Permalink

      Heymar, não entendi o por que você gostaria de fazer isso, mas se você quer colocar um conteúdo que se repete em váias páginas do seu site, utilize um módulo HTML Personalizado. Crie o módulo no Gerenciador e atribua ele a uma posição aleatória. Basta escrever o nome no campo apropriado. Depois, atribua a todos os ítens de menu. Se quer que ele apareça dentro do artigo, utilize {loadposition nomedaposicaoaleatoria}. Boa sorte!

      Resposta
  • 17/08/2016 em 07:32
    Permalink

    Olá Helvetio. Sou desenvolvedor wordpress, e recentemente meus chefes resolveram migrar alguns conteúdos estáticos para o CMS Joomla. Ao me chamarem, achei que a migração seria difícil, mas seu artigo me esclareceu muito.

    Minha dúvida está nas configurações específicas de categoria, título, tags, resumo… Que variáveis ou funções tenho que destacar no template e onde as usarei para pode trabalhar mais livremente? A partir de módulos?

    No aguardo amigo, e ótimo tutorial.

    Resposta
    • 21/08/2016 em 12:04
      Permalink

      Rodrigo, fico feliz em saber que o artigo te ajudou nesse processo. Ao contrário do WordPress, o Joomla usa uma única declaração – – para inserção de conteúdo, categoria, título, tags e resumo. Leia essa página da documentação do Joomla para entender melhor. Não ficou muito claro pra mim o que você quer dizer com “configurações específicas”. Se forem formatação do texto, utilize CSS. Qualquer dúvida, basta perguntar.

      Resposta
  • 20/04/2016 em 09:07
    Permalink

    Só gostaria de saber como colocar o menu horizontal, Joomla 3.5.1 – Tá complicado.

    Obrigado!

    Resposta
    • 29/04/2016 em 16:27
      Permalink

      Dependendo do seu projeto, procure um módulo de gerenciamento de menus. Existem alguns que vão te ajudar.

      Resposta
  • 07/04/2016 em 22:03
    Permalink

    Boa noite Helvecio Com este template consigo acrescentar menu através do joomla?

    Resposta
    • 19/04/2016 em 15:33
      Permalink

      Sim, desde que você atribua o módulo de menu a posição correta.

      Resposta
  • 06/04/2016 em 15:47
    Permalink

    Grande Texto, Helvecio! A pergunta que não quer calar: Na sua opinião porque o Joomla não tomou o mercado, ou pelo menos não competiu de igual pra igual com WordPress, já que é um CMS de código aberto

    Resposta
    • 19/04/2016 em 15:33
      Permalink

      Obrigado Taylor. Bem, o Joomla é desenvolvido por uma comunidade de voluntários mundial e é o único CMS que não tem uma empresa por trás, mas uma instituição sem fins lucrativos, a OSM. O WP tem a Automattic e o Drupal tem a Acquia. Se prestar atenção, estamos bem na fita até o momento.

      Resposta
  • 06/02/2016 em 15:57
    Permalink

    Para criar templates para distribuição gratuita o caminho é esse, certo?

    Resposta
  • 21/01/2016 em 20:09
    Permalink

    Helvecio, amigo muito obrigado por sua dica, vou tentar criar meu template e depois vou divulgar aqui para verem o resultado, obrigado mesmo

    Resposta
    • 24/01/2016 em 14:59
      Permalink

      Fico feliz em saber que tenha ajudado Alessandro. Boa sorte e boa criação!!

      Resposta
  • 18/08/2015 em 18:17
    Permalink

    Vlw cara, eu estava sem saber oque mudou rsrs. Isso vai me ajudar demais.

    Resposta
  • 14/08/2015 em 01:31
    Permalink

    Olá Helvecio,
    me quebrou um baita galho
    tava aqui esquentando a cabeça com o template
    muito obrigado!
    abração 🙂

    Resposta
    • 14/08/2015 em 18:49
      Permalink

      Obrigado a você pelo seu comentário. Fico feliz em saber que ajudei.

      Resposta
  • 17/10/2014 em 13:38
    Permalink

    Há uns meses atrás, achei aqui o tutorial de como criar um template para o J2.5 e agora este para o J3!
    Vlw!!
    😉

    Resposta
    • 18/10/2014 em 16:21
      Permalink

      Sim, Marcelo, o tutorial foi atualizado para a versão atual do Joomla. Aproveite e divulgue!!!

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *