Criando sites incríveis para Joomla

por Francisco Gomes
Acessos: 853

Você leu diversas informações sobre o Joomla e ficou tão empolgado que resolveu criar o seu próprio site e se deparou com uma questão:

Por onde começar mesmo?

Olá, os seus problemas acabaram, pois se você tiver um pouquinho de paciência, controlar a sua empolgação e diminuir a sua ansiedade, iremos construir juntos o seu primeiro template para joomla.

Template, o que isso ?

Calma, calma, um template é um modelo a ser seguido, com uma estrutura predefinida que facilita o desenvolvimento e criação do conteúdo a partir de algo construído a priori. Ao instalar o Joomla! em sua versão mais básica, alguns modelos já são trazidos e podem ser usados e modificados livremente, mas dependendo do que se deseja construir ou modificar, existem outros modelos que melhor se adaptam à nossa necessidade.
Fonte: PORTAL EDUCAÇÃO

Bem, dado esta primeira pincelada, vamos saciar esta vontade incontrolável e começar a colocar as mãos na massa e a cabeça para funcionar.

Parto do princípio que você já está com joomla instalado e conhece um pouquinho de como estruturar um site em XHTML e CSS, em especial da estruturação do joomla.

Para tornar a coisa mais rápida e mais fácil, vamos utilizar um modelo leve, potente e livre para o Joomla, onde teremos toda a estrutura de arquivos prontos e necessários para que possamos começar a criar o nosso template.

Faça o download do template em branco chamado Blank Template.
Você deve ter percebido que fez o download de um arquivo com nome Blank-3.3.0.zip (este nome vai depender da versão que você baixou)
Descompacte o arquivo Blank-3.3.0.zip para uma pasta chamada meutemplate.
Vixi! quantos arquivos eu tenho agora. Calma, calma.
Vamos começar a personalizar o seu template joomla.
Abra o arquivo templateDetails.xml que está dentro da pasta meutemplate e vamos editar as informações usando um editor HTML.
name = meutemplate
creationDate = Data de criação do Template
author = Seu Nome
copyright>Copyright © Meu Template
authorEmail>Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.
authorUrl>http://www. meutemplate.com.br
version>Versão do template 1.0.0
description>Descreva o template, coloque em h1 o nome do template coloque informações que achar relevante.
files> neste local são informadas as pastas e arquivos utilizados pelo template, não altere sem conhecimento
folder>css
folder>images
folder>js
filename>component.php
filename>error.php
filename>index.php
filename>logic.php
filename>offline.php
filename>template_preview.png
filename>template_thumbnail.png
filename>favicon.ico
filename>templateDetails.xml
/files> Positions> Aqui é onde definimos as posições do template e é onde aparecerá os módulos que criamos ou ativamos indicando a posição
position>debug
position>top
position>header
position>navigation
position>breadcrumbs
position>showcase
position>feature
position>maintop
position>content-top
Bem, você ainda vai ver algumas outras pastas e arquivos dentro da pasta meutemplate
Favicon -> este é o ícone do teu site no navegar, você pode criar um ícone personalizado e substituir.
Thumbnail -> os arquivos template_preview.png e template_thumbnail.png são imagens do seu site, você pode edita-las da forma que quiser para que se possa ter uma imagem mais fidedigna do teu site.
E ai, cansou?, que nada, relaxa que agora vai acontecer a verdadeira magia, vamos instalar o template no joomla para que possamos efetuar as devidas alterações no front-end.
Pintou dúvida, não se estresse, faça uma revisão para verificar se você não esqueceu de nada e vamos em frente.
Salve tudo, copie a pasta meutemplate
Vá para a sua instalação joomla
Encontre a paste chamada Templates
Cole a pasta que você acabou de copiar
Ufaa, calma calma, agora precisamos ativar o seu template no painel do joomla
• Vá para o painel administrativo do seu Joomla
• Vá para a aba Extensões > Gerenciar extensões;
• Clique em Descobrir;
• E depois no botão Descobrir;
• Vai aparecer na lista o seu template com o nome e dados personalizados;
• Selecione o template e depois clique em INSTALAR.
Se tudo correr bem, vai aparecer mensagem de instalado com sucesso.<
br> O próximo passo é editar o visual do template. Lembra das posições citadas um pouquinho acima?, pois é, agora precisaremos trabalhar com elas.
• Abra o arquivo index.php da pasta do seu template que está na sua instalação Joomla;
• Note que basta você editar o conteúdo HTML dentro dopara chamar os módulos do Joomla;
• Na pasta CSS tem um arquivo chamado template.css que é onde você edita o estilo do seu HTML;
Exemplo:
• jdoc:include type=”head” /> carregará dinamicamente o título da página, scripts, tags meta entre outros.
• jdoc:include type=”component” /> carregará o conteúdo dos artigos
• 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.
• jdoc:include type=”modules” name=”nav” /> carregará o módulo da posição "nav" normalmente o menu principal
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="top" style="themeHtml5" /> div class=”header”>jdoc:include type="modules" name="header" style="themeHtml5" />
Feito isso, você tem alguns bônus neste template que utilizamos, pois este template que usamos como base faz integração automática com o Boostrap e outras bibliotecas CSS e JS bastando ativarmos para utilizá-las.
Acesse seu painel, e vá em gerenciar templates e localiza o 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.
Ative o bootstrap e salve.
Vamos colocar o grid do bootstrap, vamos?
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 no topo por exemplo uma chamada de um módulo etc.
Sucessooooo!

 

Francisco Gomes / Dezembro de 2015

Veja também:

Criando formulário com ChronoForms
Como criar meu site?, etapas
Como divulgar meu site, 10 dicas
Otimizando o Joomla 3