HLVC Design - Behancé HLVC Design - Facebook HLVC Design - Twitter HLVC Design - Instagram Helvecio da Silva - LinkedIn
  1. Criando a pasta de desenvolvimento
  2. O arquivo templateDetails.xml
  3. O arquivo index.php
  4. index.php: HEAD
  5. index.php: BODY
  6. Chegamos ao Fim
  7. Testando o template

1. Criando a pasta de desenvolvimento

Crie uma pasta que conterá todos os arquivos do seu template 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, sem maíusculas ou espaços.
  • Dentro dessa pasta crie duas novas pastas: css e imagens.
  • 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>NOME DO TEMPLATE</name>
        <creationDate>DATA DE CRIAÇÃO</creationDate>
        <author>NOME DO AUTOR</author>
        <authorEmail>E-MAIL DO AUTOR</authorEmail>
        <authorUrl>URL DO AUTOR</authorUrl>
        <copyright>DIREITOS DE USO - SE HOUVER</copyright>
        <license>GNU/GPL</license>
        <version>NÚMERO DA VERSÃO</version>
        <description>TEMPLATE-EXEMPLO CRIADO PARA O BLOG HLVC.DESIGN</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

Fiqua a vontade para alterar essas informações com seus dados.

Na área <files> você informará todos os arquivos que estão na raiz do seu template utilizando a tag <filename> e  pastas, utilizando a tag <folder>. Deixe para inserir esses dados por último, quando já se está com o template quase pronto.

Dentro de <position> podem ser deixadas como no exemplo. Essas são posições padrão, então fica mais fácil quando mudar do template padrão do sistema. É possível criar novas posições com qualque nome.

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 por uma extensão.

O código começa assim:

<?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. index.php: HEAD

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

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. index.php: 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. Finalização

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.

Pin It

Sobre este Blog

O foco principal do blog HLVC é compartilhar, de forma descomplicada, dicas sobre o desenvolvimento de sites utilizando o CMS Joomla. Além disso, serão apresentadas idéias e sugestões em marketing com o intuito de estreitar o relacionaemento entre marcas e seus públicos na era digital.

Busca no Blog