Joomla 3: Layout distinto na página principal

É comum ouvir pedidos sobre como ter ou tirar módulos ou textos apresentados de forma diferente na página inicial (ou frontpage) de um site em Joomla. Por exemplo, seu site pode ter três colunas, mas na página principal você quer apareçam somente duas.

Essa é uma atualização do post Joomla 2.5.x: uma página principal diferente.

Repare nas ilustrações a seguir: a primeira mostra o layout da página principal, onde o corpo é constituido de uma coluna mais larga a esquerda e uma coluna a direita.

Layout da front

A segunda mostra o layout o das páginas internas. Aqui o corpo é composto de três colunas, duas menores a esquerda e a direita e uma mais larga ao centro. A área em vermelho mostra o que fica diferente da página principal.

Layout interno

Como realizar essa façanha? É muito simples!

Basicamente, temos que pensar que a página principal exibe um pedaço de código HTML diferente das páginas internas.

No arquivo index.php, que está dentro de /templates/{seu-template} localize o pedaço de código a modificar.

Vamos dar uma olhada no código do template baseado no exemplo das ilustrações acima.

<body>
 <div id="cabecalho">
   <h1><span>Título da Página</span></h1>
 </div>
<?php If (JRequest::getVar('view') == 'featured') { ?>
 <div id="paginaprincipal">
 <jdoc:include type="modules" name="paginaprincipal" />
 </div>
<?php } else { ?>
 <div id="colunaesquerda">
 <jdoc:include type="modules" name="esquerda" />
 <jdoc:include type="modules" name="apoio1" />
 </div>
 <div id="colunacentro">
 <jdoc:include type="component" />
 </div> 
<?php } ?>
 <div id="colunadireita">
   <span>Conteúdo da direita</span>
 </div>
 <div id="rodape">
   <span>Créditos da página</span>
 </div>
</body>

Em vermelho temos o código PHP.

Em verde, o código HTML que será exibido na frontpage. Repare que criei uma DIV e uma posição nomeadas paginaprincipal. Assim, fica mais fácil criar o CSS a ser aplicado nessa área e a inserção do módulo desejado.

Em azul, o código HTML que será exibido nas páginas internas. Assim como no pedaço de código anterior, criei uma DIV para cada coluna (colunaesquerda e colunacentro) e dentro de cada uma coloquei as posições que quero presentes dentro da minha página.

O que está em verde e azul pode ser modificado conforme a necessidade do seu layout.

Qualquer dúvida, utilizem o formulário de comentários abaixo.

Related Posts with Thumbnails
Seja Sociável! Compartilhe!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *