✅ Crie um template para Joomla | Desenvolvimento 2024

Índice

Antes de desenvolver nosso modelo, precisamos conhecer alguns conceitos da estrutura de arquivos e diretórios do Joomla. Alguns diretórios, itens e arquivos principais são:
ModeloÉ um conjunto de diretórios e arquivos que especificam a estrutura e o design que o site adotará. Podemos ter vários templates instalados para selecionar e assim alterar o design de acordo com o desenvolvimento que estamos realizando.
Um arquivo de modelo geralmente combina código HTML e php onde os blocos ou camadas div da web são definidos, nos quais o conteúdo da web será exibido de acordo com a página ou seção.
Além disso, outros blocos podem ser definidos no template HTML para inserir plugins ou código de funcionalidades que precisamos executar. Em geral, os blocos que definimos blocos são o cabeçalho da web, a barra de navegação ou menu, as colunas laterais se houver, a área de conteúdo, se precisarmos podemos criar todos os blocos que quisermos, tudo depende do requisitos para desenvolver. Esses blocos ou áreas são chamados de posições.
MóduloUm módulo joomla é um objeto com código HTML, PHP, CSS ou JavaScript que pode ser exibido em certas posições ou blocos designados no modelo da web. Por exemplo, podemos colocar um acesso de usuário no cabeçalho, um seletor de idioma, um formulário de contato, etc.
PlugarUm plugin Joomla é um objeto com código HTML, PHP, CSS ou JavaScript que pode ser embutido no conteúdo da web. A diferença do módulo é onde o plugin aparece na página. O plugin geralmente não pode indicar em que posição ele está indo, pois eles são executados para produzir um evento, por exemplo, para validar um e-mail,
ComponenteUm componente é uma coleção de módulos e plug-ins. Por exemplo, um componente pode ser uma loja virtual como o Virtuemart, todos os objetos do componente têm suas próprias configurações e podem ser exibidos em uma página separada.
Estrutura de um template Joomla
Um modelo é um conjunto de arquivos que definem a estrutura da web e os blocos ou posições onde podemos atribuir os diferentes elementos. Um modelo para Joomla consiste nos seguintes arquivos:
index.php: é o arquivo principal que descreve a estrutura e o design da página da web
error.php: é o arquivo que conterá as diretivas em caso de erro de página não encontrada, erro 404.
Imagens de visualização: são aqueles chamados template_preview.png.webp e template_thumbnail.png.webp, o que permitirá que você tenha uma visualização do modelo em miniatura do administrador.
Components.php: Este arquivo se precisarmos de uma versão para impressão da web então configuramos as folhas de estilo para apresentar o artigo a ser impresso.
Imagens: é o diretório onde salvaremos todas as imagens do design para imagens.
js: neste diretório colocaremos os scripts javascript ou Jquery ou o que usarmos.
língua: neste diretório podemos encontrar os arquivos necessários para traduções em diferentes idiomas.
Um aspecto importante é que por razões de segurança cada diretório deve ter um arquivo index.html vazio para evitar que sejam lidos de fora, de forma que quem quiser acessar o diretório verá apenas um documento vazio.
Depois de instalar o Joomla para nosso exemplo, não indicaremos agora como instalá-lo, ele pode simplesmente ser baixado de http://www.joomlaspanish.org/

Depois de instalar o Joomla, vamos criar em outro lugar um diretório diferente do diretório Joomla e vamos chamá-lo Demo para criar nosso modelo. Neste diretório, primeiro criaremos o arquivo templateDetails.xml, que é o que contém a configuração do template, dentro nós escrevemos o seguinte código xml.

 Demo Template 1.0 26/02/2015 Sergio [email protected] Copyright (C) 2015 Demo Template demo para Joomla 3.0 index.php css imagens debug position-0 position-1 position-2 position-3 position-4 position-5 position -6 posição-7 posição-8 posição-9 posição-10

Nós definimos o nome do modelo que o chamamos Demonstração de modeloQuando instalamos o template no Joomla, o gerenciador usará esse nome para criar um diretório e salvar os arquivos do template, também será o nome que será visto no painel do administrador, o autor, os diretórios que o template contém e o que tivermos, podemos definir várias, mesmo que não as utilizemos todas.
Então vamos criar o arquivo index.php onde definiremos a estrutura da web e as posições correspondentes.

 
 .container {largura: 980px; margem esquerda: automático; / * centralizamos a web * / margin-right: auto; borda: sólido 1px preto; } .container {margin: 20px 0px; / * aplicamos uma margem de 20px ao conteúdo * / border: solid 1px green; } .content {float: left; largura: 750px; borda: sólido 1px vermelho; } .colder {float: right; largura: 270px; } .colder, .pie, .head {border: 1px solid blue; }

As classes css são fáceis de determinar quais blocos temos e quais posições. Por fim, criamos um arquivo zip com o diretório que contém o modelo e o instalamos do administrador do joomla. Acessamos o painel de administração do Joomla.

De lá vamos para o menu Extensões> Gerenciador de extensões e passamos a instalar o modelo que temos em formato zip.
LembrarLembre-se que cada template difere de acordo com a versão do Joomla, nesse caso é compatível com 2.5 a 3.x. Além disso, para instalar todos os diretórios deve ter permissões para fazer upload de arquivos.

PROLONGAR

Clique na imagem para ampliá-la

O template instalado e tendo as informações padrão do Joomla neste caso versão 2.5 em espanhol, vemos como o módulo de acesso do usuário foi localizado na posição 3 automaticamente porque é designado dessa forma por padrão, enquanto o conteúdo da web é colocado na posição 1 que é o que atribuímos no conteúdo da web. Do administrador, podemos mudar a posição dos diferentes elementos que gerenciamos.
Depois de instalar o modelo, se quisermos atualizá-lo ou modificá-lo, podemos agir sobre o código do modelo instalado no joomla no diretório templetes ou trabalhar fora do Joomla em outro diretório, recriar o arquivo zip e, em seguida, excluir o modelo do joomla e reinstalá-lo.