Joomla

Criar modelo joomla

Introdução

Para quem precisa de criar um template no Joomla, aqui pode ver quais os arquivos essenciais e o código necessário para criar um modelo básico. O código é apresentado para que possa ser recortado e colado, e saber quais as modificações necessárias.

1º Passo - Criar uma estrutura de directório

Para tornar o modelo mais básico, crie uma nova pasta na pasta "templates". Nomeie essa pasta com o nome "mynewtemplate"

Usando um editor de texto (ou editor dedicado como o Adobe Dreamweaver ) criar os arquivos "index.php" e "templateDetails.xml"

Para manter as coisas organizadas, crie duas novas pastas com os seguintes nomes "imagens" e "css". Dentro da pasta "css" crie um arquivo com o nome "style.css".

Embora seja bom colocar todo o seu código CSS diretamente no seu "index.php", muitos desenvolvedores web preferem colocar o seu código CSS em um arquivo separado que pode ser ligado a partir de várias páginas usando o "link" tag.

Esboço da estrutura de pastas e arquivos:

  • mynewtemplate
    • css/
      • style.css
    • images/
    • index.php
    • component.php
    • templateDetails.xml 

2º Passo - Criar um arquivo básico templateDetails.xml

O arquivo templateDetails.xml é essencial. Sem ele, o modelo não será apresentado no Joomla!. O arquivo contém "metadados" chave sobre o modelo.

veja o exemplo do ficheiro  

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
        <name>mynewtemplate</name>
        <creationDate>2008-05-01</creationDate>
        <author>John Doe</author>
        <authorEmail>john@example.com</authorEmail>
        <authorUrl>http://www.example.com</authorUrl>
        <copyright>John Doe 2008</copyright>
        <license>GNU/GPL</license>
        <version>1.0.2</version>
        <description>My New Template</description>
        <files>
                <filename>index.php</filename>
                <filename>component.php</filename>
                <filename>templateDetails.xml</filename>
                <filename>template_thumbnail.png</filename>
                <filename>images/background.png</filename>
                <filename>css/style.css</filename>
        </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>
</install>
 
A melhor opção é copiar e colar no seu arquivo "templateDetails.xml" e 
alterar os campos relevantes (como <name> <author>).
 
A parte <arquivos> deve conter todos os arquivos que você utiliza. 
De início não sabe todos os arquivos que vai usar, mas não se preocupe pode actualizar o ficheiro mais tarde.
 

3º Passo - Criar um arquivo básico index.php

O arquivo index.php é o centro de todas as páginas que o Joomla integra. Basicamente, você faz uma página como qualquer página html, mas também é o local do código PHP onde é feita a ligação com a base de dados e onde o conteúdo do seu site deve estar.

Aqui está o código do esqueleto pronto a ser copiado e colado no seu ficheiro.

Vamos começar pelo topo:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > 
  
A primeira linha determina o acesso ás páginas. 
A segunda diz ao navegador (e webbots) qual é o tipo de página.  
A terceira linha diz qual é a linguagem utilizada noo site.
 
Agora o cabeçalho:


<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/style.css" type="text/css" />
</head> 
 
A primeira linha serve para o joomla colocar as informações do cabeçalho correctamente, 
por isso inclui o título da página, meta-informação, bem como o sistema JavaScript.
O restante código cria os links para as duas folhas de estilo do sistema e para a sua própria 
folha de estilos que é chamada de style.css e está localizada na pasta css.
 
Agora o código para o corpo 


<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
 
Surpreendentemente, isto será suficiente! 
Sim, é uma base muito básica, mas vai fazer o seu trabalho. 
Tudo o resto será feito por Joomla!  
Nota: é preciso garantir que o seu menu está programado para entrar no "top" module position.
 
Para finalizar
 
</html>
 
O código do modelo da fonte completo:
 
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/style.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>
 
DICA: 
Há várias formas de se poder visualizar a página do índice como coloca-la em conjunto e 
inserir os estilos no cabeçalho da página do índice ou ligar diretamente à folha de estilo 
que será utilizada temporariamente. 
Você pode remover esses links antes de compactar em arquivo.
 
 
Criar o modelo para instalação
 
Um diretório com vários arquivos soltos não é um pacote conveniente para a distribuição. 
Portanto, o passo final é fazer um pacote. Este é um arquivo compactado contendo a estrutura de diretório e todos os arquivos.
O pacote pode ser em formato ZIP (com extensão zip.), em formato gzip-TAR (com uma extensão Tar.gz), ou no formato bz2 TAR (com uma extensão Tar.bz2).
 
Se o modelo está num directório mytemplate/ depois de fazer o pacote, pode-se conectar a este e usar os comandos de directório como:
 
  • tar cvvzf ../mytemplate.tar.gz *
    • 

  • zip -a -r ..\mytemplate.zip *.* 
    • 

Nota para usuários do Mac OS X
Nota  para os desenvolvedores do modelo que usam os sistemas Mac OS X: o Finder do  item de menu "comprimir" produz um pacote em formato ZIP utilizável, mas  com um senão. Ele armazena os arquivos em AppleDouble formato, adicionar arquivos extras com nomes começando com ". _".
Assim, ele adiciona um arquivo chamado "_templateDetails.xml., o que por vezes o Joomla 1.5.x pode interpretam mal. O sintoma é uma mensagem de erro,"XML Parsing Error at 1:1. Error 4: Empty document". The workaround is  to compress from the command line, and set a shell environment variable  "COPYFILE_DISABLE" to "true" before using "compress" or "tar". See the AppleDouble article for more information.
A solução é compactar a partir da linha de comandos, e definir uma shell de ambiente AppleDouble. 
Para definir uma variável de ambiente em um Mac, abra uma janela terminal e digite:
export COPYFILE_DISABLE=true
 
Em seguida, na janela com o mesmo terminal, altere os diretórios para onde 
os arquivos do seu modelo de residência para emitir o comando zip.
Por exemplo, se os seus arquivos do modelo tiverem sido construído em uma pasta no 
seu diretório pessoal chamada de mytemplate, então terá de fazer o seguinte: 
 
cd myTemplate
zip -r myTemplate.zip *
 
Conclusão
 
Agora já deve ter criado um modelo que funciona. Não vai aparecer muito ainda.
A melhor coisa a fazer agora é começar a experimentar com o layout.  
 




















































        

      









Subscrever:
Mensagens (Atom)