# Criar template Joomla: Tutorial passo a passo

Para **modificar a aparência do seu site**, você pode utilizar os templates de front-end já disponibilizados pelo seu CMS. Contudo, para obter o máximo de originalidade, que tal criar, você mesmo, seu próprio template? Aprenda como criar um template Joomla.

## Pré-requisitos para criar template Joomla

Não é difícil fazer com que seu site Joomla tenha uma aparência exclusiva. Basicamente, você só precisa de três coisas para criar seu próprio template neste CMS:

- **Instalação Joomla** (versão mínima 3.9): Somente as versões mais atuais do Joomla suportam a criação de novos templates. Certifique-se de usar versões a partir do Joomla 3.9x, de 2018.
- **Conhecimentos básicos de HTML e PHP**: Para seguir o passo a passo deste tutorial, é preciso que você saiba mexer com HTML e PHP.
- **Conhecimento de CSS:** CSS é a linguagem utilizada no design de sites Joomla. Nosso tutorial de CSS introduz você às folhas de estilo em cascata. Também é preciso que você domine os comandos CSS mais importantes para criar um template Joomla.

## Passo a passo para criar template Joomla

Atendidos os pré-requisitos para criar um template Joomla, é hora de começar! Primeiramente, faça login na sua conta Joomla. Agora, basta seguir o nosso passo a passo.

### Passo 1: Crie uma nova pasta na estrutura de pastas

No primeiro passo do processo, você deve criar uma nova pasta na estrutura de pastas, para que ela **armazene seu template**. Bastam alguns cliques: navegue até o diretório “templates”, que deverá estar localizado na estrutura de pastas da sua instalação Joomla. Lá estarão armazenados todos os templates que você possui. **Crie uma nova pasta** e nomeie-a. A nossa se chamará “test”. É lá que criaremos nosso novo template Joomla.

[![Imagem: Estrutura de arquivos Joomla no painel da IONOS](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/a/5/csm_ionos-folder-structure_7313651bd9.webp "Estrutura de arquivos Joomla no painel da IONOS")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/ionos-folder-structure.png) Para criar um template Joomla você deve, primeiramente, criar uma nova pasta na estrutura de arquivos Dentro da nova pasta, você terá de criar, ainda, todos os arquivos necessários para o novo template. Seu código pode se orientar neste [exemplo de template](https://github.com/coolcat-creations/hello "GitHub"):

#### *templateDetails.xml*

Para começar, crie o arquivo que permitirá que seu template Joomla seja instalado: o **arquivo manifest *templateDetails.xml***. Ele deve conter todas as informações básicas sobre o seu template, como, por exemplo, nome e autoria.

Você não precisa ser expert em *Extensive Markup Language* (XML) para entender as linhas de código do arquivo. As **marcações mais importantes** são:

- `<name>`: Nome do template
- `<creationDate>`: Data de criação do template
- `<author>`: Autoria do template, ou seja, seu nome
- `<authorEmail>`: Endereço de e-mail do autor do template, ou seja, seu e-mail
- `<authorUrl>`: URL do seu site
- `<copyright>`: Conteúdo de *copyright* do seu template
- `<license>`: Informações sobre licenças
- `<version>`: Versão atual do template
- `<description>`: Descrição do template
- `<files>`: Todos os arquivos que devem ser instalados com o Template
- `<positions>`: Posições dos módulos presentes no template

```xml
<?xml version="1.0" encoding="utf-8"?> 
 
<extension version="3.1" type="template" client="site"> 
<name>test</name> 
<version>1.0</version> 
<creationDate>19.10.2023</creationDate> 
<author>IONOS</author> 
<description>IONOS Joomla Test Template</description> 
<files> 
<filename>index.php</filename> 
<filename>templateDetails.xml</filename> 
<filename>template_preview.png</filename> 
<filename>template_thumbnail.png</filename> 
<filename>favicon.ico</filename> 
<folder>css</folder> 
</files> 
<positions> 
<position>menu</position> 
<position>aside</position> 
<position>footer</position> 
</positions> 
</extension>
```

#### *index.php*

O arquivo *index.php* armazenará as informações relativas ao ***layout* principal do seu site**. Num primeiro momento é suficiente usar uma **estrutura HTML simples e básica**:

```html
 
<html lang="pt-br" dir="ltr"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<!—Informações sobre o cabeçalho--> 
</head> 
<body> 
<div id="navbar"> 
          <nav> 
<ul> 
<li><a href="#">Categoria 1</a></li> 
<li><a href="#">Categoria 2</a></li> 
<li><a href="#">Categoria 3</a></li> 
<li><a href="#">Categoria 4</a></li> 
</ul> 
          </nav> 
      </div> 
      <div id="content"> 
<h1 id="heading">Test Template</h1> 
<img class="image" src="https://picsum.photos/900/500" alt="Image"/> 
<p>É fácil e rápido criar um template Joomla. Basta seguir as instruções do tutorial passo a passo da IONOS. 
</p> 
      </div> 
      
       
    <footer id="copyright"> 
      <div id="footercontent"> 
<p>Copyright by IONOS</p> 
      </div> 
</footer> 
<div class="hash d-none" hidden>hash_cbdfbaae183dbf4e8f71e9633c94d847842fe630</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body> 
</html>
```

#### Pasta css e *template.css*

Agora, crie uma pasta chamada “css”, que armazenará **todos os arquivos que influenciam o design do seu template**. Dentro dela, crie o arquivo *template.css*, que especificará o código do seu *layout*.

```css
body { 
font-family: "Arial", serif; 
color: black; 
line-height: 150%; 
} 
 
#navbar ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  background-color: #003399; 
} 
 
#navbar li { 
  float: left; 
} 
 
#navbar li a { 
  display: block; 
  font-size: 26px; 
  color: white; 
  text-align: center; 
  padding: 16px 18px; 
  text-decoration: none; 
} 
 
#navbar li a:hover { 
  background-color: white; 
  color: #003399; 
} 
 
#heading { 
  font-size: 48px; 
  color:  #003399; 
  text-shadow: 0 0 5px #000099; 
} 
 
#footercontent { 
  float: right; 
  padding-right: 10%; 
}
```

[![Imagem: Estrutura de pastas do novo template Joomla](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/0/a/csm_joomla-template-folder-structure_0e42d041e9.webp "Estrutura de pastas do novo template Joomla")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-template-folder-structure.png) Na nova pasta, criada para o seu template, você deverá criar diferentes arquivos de configuração ### Passo 2: Instale o template

Finda a primeira parte do processo de criar um template Joomla, é hora de partir para a instalação. No back-end do CMS, navegue para **“System” &gt; “Install” &gt; “Discover”**. Encontre, no local, o template criado por você e clique na caixa à esquerda do nome do template. É assim que você começará a [instalar o template Joomla](https://www.ionos.com/digitalguide/hosting/cms/install-a-joomla-template/).

[![Imagem: Back-end do Joomla](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/2/6/csm_joomla-install-discover-template_761606a63d.webp "Back-end do Joomla")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-install-discover-template.png) Você pode instalar seu template Joomla pelo back-end do sistema, com apenas alguns cliques [![Imagem: Menu de extensões no back-end do Joomla](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/6/3/csm_joomla-install-custom-template_9636556712.webp "Menu de extensões no back-end do Joomla")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-install-custom-template.png) Ao marcar a caixa ao lado do nome do seu template, você poderá iniciar o processo de instalação ### Passo 3: Habilite o template

Concluída a instalação do seu template, você só precisará **habilitá-lo**, o que também pode ser feito em poucos cliques, pelo back-end. Vá para **“System” &gt; “Templates” &gt; “Site Template Style”** e clique no botão de estrela à direita do nome do seu modelo para defini-lo como padrão.

[![Imagem: Menu de templates no back-end do Joomla](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/8/0/csm_joomla-template-default_2d51966179.webp "Menu de templates no back-end do Joomla")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-template-default.png) Clique na estrela à direita do nome do seu template para defini-lo como padrão do seu site Joomla ### Passo 4: Vincule o template ao Joomla

Este passo é importante para que o seu template exiba o *layout* de forma correta no seu site. Estabeleça este vínculo **editando o arquivo *index.php***. Use o código abaixo para integrar sua**folha de estilo CSS**à parte superior do*index.php*:

```php
<?php defined('_JEXEC') or die; 
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
?>
```

### Passo 5: Insira as informações do *header*

Nesta etapa, inclua as **informações de cabeçalho (*header*) no arquivo *index.php***. Para isso, você também pode usar PHP. Em*index.php*, substitua o comentário &lt;!—Informações sobre o cabeçalho--&gt; pelo seguinte código:

```html
<jdoc:include type="head" />
```

Você deve fazer isso para solicitar ao CMS o carregamento das informações de cabeçalho relevantes, contidas pelo arquivo *index.php*.

Depois disso, já será possível pré-visualizar seu site Joomla com o novo template.

[![Imagem: Pré-visualização do template de teste IONOS Joomla](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/e/4/csm_joomla-test-template-frontend_d2b8152f80.webp "Pré-visualização do template de teste IONOS Joomla")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-test-template-frontend.png) O resultado final do template de teste da IONOS para Joomla já pode ser visualizado ### Passo 6: Conecte os módulos

O último passo do nosso tutorial sobre como criar um template Joomla tem foco em **transmitir todo o conteúdo do seu site Joomla** ao seu novo template. Para tanto, você terá de criar vários novos itens de menu no back-end do sistema. Navegue para “Menu” &gt; “New”.

[![Imagem: Você pode criar itens de menu no back-end do Joomla com facilidade](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/9/0/csm_joomla-create-menus_a3934d2e7c.webp "Você pode criar itens de menu no back-end do Joomla com facilidade")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-create-menus.png) Visualização de itens de menu recém-criados Agora, vá para **“System” &gt; “Extensions” &gt; “Side Modules”** e selecione o menu que você acabou de criar. Nas configurações avançadas, você poderá definir as *tags* dos seus módulos. Selecione a opção “nav”.

[![Imagem: Selecione a tag nav para que seu menu seja exibido](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/3/0/csm_joomla-set-module-tag-nav_5a380b5906.webp "Selecione a tag nav para que seu menu seja exibido")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-set-module-tag-nav.png) Tags de módulos nas configurações avançadas de módulos Agora, substitua a tag “nav”, no *index.php*, pela seguinte linha de código, para adaptar seu template adequadamente:

```html
<jdoc:include type="modules" name="menu" style="xhtml" />
```

Dica Ainda não tem seu próprio site? É fácil criar um site Joomla com o [Joomla Hosting](https://www.ionos.com/hosting/joomla-hosting "Joomla Hosting — IONOS"). Sem contar que, com a IONOS, você consegue [registrar o domínio dos seus sonhos](https://www.ionos.com/domains/domain-names "Domain Name Registration — IONOS") de forma econômica.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/hospedagem/cms/criar-template-joomla/](https://www.ionos.com/pt-br/digitalguide/hospedagem/cms/criar-template-joomla/) for AI/LLM consumption.