Ao lado do WordPress, o Joomla! é sem dúvida um dos melhores CMS que existem atualmente. Como o amigo Girlan bem já escreveu noutro artigo, o Joomla! tem se superado muito a cada versão e, desta perspectiva, torna-se mais que vantajoso ao desenvolvedor front-end dominar a criação de temas tanto para o WordPress quanto para o Joomla!.
A boa notícia é que se você já sabe criar temas para o WordPress, você praticamente já sabe criar templates para o Joomla! também. O objetivo deste artigo, portanto, não é embarcar naquela velha discussão formada sobre tudo de qual CMS é o melhor. Estamos mais interessados em criar um template básico (ou sandbox) para o Joomla! observando as relações existentes com o desenvolvimento de temas para o WordPress, despertando, quem sabe, novos joomlers pela comunidade Tableless!
Entendendo o Joomla!
Antes de criar um template para o Joomla!, primeiro precisamos entender, pelo menos superficialmente, como ele funciona. Em suma, podemos dizer que a principal função do Joomla! é reunir o conteúdo armazenado no banco de dados e gerenciado no painel de administração com ACL usando um template para produzir páginas HTML de forma dinâmica via PHP.
O Joomla! se assemelha ao WordPress em muitos aspectos. O conceito de artigo, por exemplo, se assemelha ao de post do WordPress: é a forma concebida ao conteúdo principal armazenado no banco de dados para ser gerenciado no painel de administração. O mesmo vale para os módulos e widgets, templates e temas, plugins, entre outras semelhanças — é claro que cada CMS apresenta as suas próprias especificidades, mas, por hora, vamos deixar assim.
Composto basicamente por um framework e suas extensões — analogamente a um sistema operacional e suas aplicações —, o diferencial do Joomla! está justamente nas extensões chamadas de componentes, que permitem desenvolver sites de todas as formas e tamanhos através de arquitetura MVC. No desenvolvimento de templates, só nos interessa a camada view dos componentes, doravante chamada apenas de “componente”.
Vejamos mais sobre as extensões…
As extensões do Joomla!
Uma extensão é um pacote de programa que estende a instalação do Joomla! de diferentes maneiras. Documentação do Joomla!
Ainda segundo a documentação do Joomla!, as extensões podem ser classificadas basicamente em componentes, módulos, plugins e templates. Também os idiomas do Joomla! e os pacotes de extensões relacionadas, os packages, são consideradas extensões, assim como as bibliotecas que fornecem funções que podem ser usadas por outras extensões.
O Joomla! possui extensões nativas que se mostram suficientes na maioria dos nossos projetos, o que não nos impede de criar as nossas próprias extensões ou usar algumas das 9 mil extensões disponíveis (e aumentando!) no JED, o diretório de extensões do Joomla!.
Para conhecer melhor o CMS, você pode baixar a última versão do Joomla! e instalar localmente ou fazer um test-drive rápido no Joomla.org, que gera instantaneamente uma instalação remota todinha sua por 90 minutos. Aqui, nos referimos à versão 3.4.1 do Joomla! e, para comparação, à versão 4.2.2 do WordPress — as mais recentes até a publicação deste artigo.
Sem mais delongas, vamos ao que interessa!
Criando um template para o Joomla!
Assim como, por padrão, os temas do WordPress ficam localizados no diretório /wp-content/themes/, os templates do Joomla! ficam localizados no diretório /templates/. Para começar, vamos criar um diretório chamado “meunovotemplate” com a seguinte estrutura básica de arquivos de todo template Joomla!:
Adicionamos arquivos index.html em branco no diretório do template e em seus subdiretórios como medida adicional de segurança contra a exposição de informações da instalação por eventuais tentativas de acesso direto aos diretórios com permissões 775 de FTP — equivalente aos arquivos index.php “silence is golden” do WordPress.
Definindo as informações do template
O arquivo templateDetails.xml é equivalente aos comentários iniciais do arquivo style.css dos temas do WordPress (stylesheet header). Através de XML, são marcadas as informações do template para a instalação e, posteriormente, para serem exibidas no Gerenciador de Temas do painel de administração. Veja um exemplo:
Na primeira linha, informamos a versão XML e o tipo de codificação do arquivo (recomenda-se o uso de UTF-8 sem BOM). Na segunda, informamos a versão da instalação do Joomla! e o tipo da extensão. A partir daí, as tags falam por si mesmas: as tags informam o nome do template, as tags informam a data de criação do template e por aí vai…
As tags e informam, respectivamente, os arquivos e os diretórios do template. Vale ressaltar que se já informamos algum diretório do template, não precisamos informar os arquivos e subdiretórios contidos nele (tome como exemplo o diretório para as folhas de estilo, cujos arquivos style.css e index.html contidos nele não informamos diretamente). Assim, os únicos arquivos e diretórios que precisamos informar são os que se encontram imediatamente no diretório que criamos.
Já as tags informam os nomes das posições que os módulos poderão ocupar nas páginas do site — mas ainda não as posições em si, o que definiremos no modelo.
Modelo: a estrutura do template
Ao contrário do que acontece no WordPress, em que a estrutura de um tema é dividida em vários arquivos pela funcionalidade, a estrutura de um template do Joomla! normalmente se concentra em apenas um: o index.php. Com ele, nós criamos uma página genérica para todo o site, isto é, um modelo para todas as páginas específicas do site, incluindo declarações próprias do Joomla! que processarão o conteúdo dinâmico a cada requisição de página.
Entretanto, e como no WordPress, nós podemos implementar a página de erros e a do componente (para impressão) separadamente em arquivos semelhantes chamados de error.php e component.php, respectivamente, mas aqui nos concentraremos no básico, ok?
O conteúdo dinâmico nada mais é do que o código HTML gerado pelo Joomla! para as partes do site que dependem das páginas específicas, ou seja, que podem mudar de uma página para outra. Ele pode ser:
- o componente da página, isto é, o conteúdo principal da página;
- o conteúdo padrão do elemento
da página, como folhas de estilos, scripts e meta elementos; - os módulos, de acordo com suas configurações de visibilidade;
- as possíveis mensagens de sistema e de erros de requisição de página.
Por exemplo: através do Gerenciador de Menus do painel de administração, podemos criar uma página no menu principal para exibir um único artigo selecionando a opção “Artigos > Único Artigo” (componente nativo de conteúdo) como o tipo de item de menu. Ao acessar a página através do item correspondente no menu principal, o Joomla! processará o código HTML daquele componente na parte identificada para o processamento de componente no modelo — através daquelas declarações próprias do Joomla!. É assim que criamos páginas simples com o Joomla!.
Ou ainda, através do Gerenciador de Módulos, podemos criar um módulo para ocupar determinada posição nas páginas do site — também identificada por aquelas declarações próprias do Joomla! no modelo — e configurar sua visibilidade — o que é exclusividade dos módulos — apenas para a página inicial. Assim, ao acessar a página inicial, o Joomla! processará o código HTML daquele módulo naquela determinada posição, mas ao acessar as páginas internas, isso não acontecerá. Em outras palavras, o Joomla! só “carregará” o módulo na página inicial. Simples, não?
Mas afinal, o que são essas “declarações próprias do Joomla!”?
As declarações JDOC
O Joomla! possui seus próprios métodos de processamento de conteúdo dinâmico chamados de declarações JDOC, que possuem mais ou menos essa cara:
Nas declarações JDOC, o uso das aspas duplas e do espaço antes do fechamento /> é obrigatório. Além disso, devemos sempre informar o tipo de conteúdo dinâmico a ser processado através do atributo type. No exemplo acima, o Joomla! processaria o componente das páginas específicas no lugar da declaração. Os possíveis valores para o atributo type são:
Component
Deve ser declarado apenas uma vez no elemento do modelo para processar o conteúdo principal da página.
Head
Deve ser declarado apenas uma vez no elemento do modelo para processar seu respectivo conteúdo padrão da página, como folhas de estilo, scripts e meta elementos.
Message
Deve ser declarado apenas uma vez no elemento do modelo para processar as possíveis mensagens de sistema e de erros de requisição de página.
Module e modules
Pode ser declarado várias vezes no modelo para processar os módulos, de acordo com suas configurações de visibilidade. Aqui, também é obrigatório identificarmos aquelas posições que antecipamos pelo nome no arquivo templateDetails.xml através do atributo name.
O tipo module define uma posição do modelo que poderá ser ocupada por um e apenas um módulo. Nesse caso, o atributo title se refere ao título atribuído para o módulo no Gerenciador de Módulos. Veja o exemplo para o módulo que exibe o menu:
Já o tipo modules define uma posição mais genérica do modelo que poderá ser ocupada por vários módulos — como uma sidebar, por exemplo. Nesse caso, o atributo title não é necessário.
Observe que para criar uma sidebar dinâmica no WordPress, normalmente registramos a posição no arquivo functions.php e adicionamos o seguinte trecho em algum lugar do arquivo sidebar.php:
No Joomla!, para a mesma finalidade, registramos a posição no arquivo templateDetails.xml e adicionamos o seguinte trecho no modelo:
Resumo das declarações JDOC
Podemos, então, esquematizar as declarações JDOC na seguinte tabela:
Função
Carrega o conteúdo principal da página.
Carrega folhas de estilo, scripts e meta elementos padrões da página.
Carrega, não necessariamente, mensagens de sistema e de erros de requisição de página.
Carrega, não necessariamente, um único módulo na posição e de título atribuídos.
Carrega, não necessariamente, um ou vários módulos na posição atribuída.
Modelo básico
Apresentadas as declarações JDOC, já podemos implementar um modelo básico com marcação semântica sugerida:
Proteção contra acesso direto
Na primeira linha, protegemos o arquivo contra o acesso direto. Funciona assim: o Joomla! define uma constante chamada _JEXEC que marca uma entrada segura de acesso aos arquivos através do /index.php na raiz da instalação; se, portanto, o arquivo /templates/meunovotemplate/index.php for acessado diretamente, o Joomla! verificará que a constante não foi definida e não exibirá informações em mensagens de erros que muito provavelmente ocorrerão e que podem expor a instalação para mal-intencionados de plantão — é exibida a mensagem “Acesso restrito!” que definimos.
Com o WordPress é quase a mesma coisa: a diferença é que a constante se chama ABSPATH e é definida mais especificamente no arquivo /wp-load.php (o /index.php inclui o /wp-blog-header.php, que por sua vez inclui o /wp-load.php — todos na raiz da instalação). A nível de curiosidade, aqui no Tableless não exibimos nenhuma mensagem para as tentativas de acesso direto aos arquivos.
Processando mais conteúdo dinâmico
Na terceira linha, definimos o idioma da página dinamicamente com o trecho language; ?>, que retorna via PHP o código HTML do idioma definido para o site no Gerenciador de Idiomas do painel de administração. Também utilizamos essa técnica para informar o endereço da folha de estilo style.css:
Assim, além das declarações JDOC, o Joomla! também processa essas propriedades do site disponíveis a partir do template, o que minimiza a sua manutenção — já que não precisamos ficar editando o modelo toda vez que mudarmos o título do site, ou o domínio, idioma, etc. Os nomes para retornar as propriedades mais importantes são:
- baseurl: o domínio do site (ex.: https://www.tableless.com.br);
- language: o código HTML do idioma definido para o site (ex.: pt-br);
- template: o nome do diretório do template atual do site (ex.: meunovotemplate);
- title: o título do site;
- description: a descrição do site.
Consulte a lista completa das propriedades disponíveis.
Observe que as declarações JDOC somadas a essas propriedades estão para os templates do Joomla! assim como as template tags estão para os temas do WordPress. Bacana, né?
Componente só nas páginas internas
Podemos ainda fazer com que o Joomla! processe apenas o componente das páginas internas com o auxílio de um módulo. O truque é definir sua visibilidade apenas para a página inicial e daí, através de operadores condicionais e do método int countModules( $condition ), que verifica a visibilidade do módulo na página, controlamos manualmente o que carregar na página inicial e o que carregar nas páginas internas. Segue uma sugestão de código:
No exemplo acima, com a configuração de visibilidade do módulo “slideshow” apenas para a página inicial, o componente da página inicial não será processado quando ela for acessada — embora o back-end do Joomla! ainda entenda que a página inicial se refere àquele componente. Mas lembre-se: a página inicial é a principal página do seu site e o componente, seu principal conteúdo. Pelo que você iria substituí-lo? Será que o Google e os seus coleguinhas iriam gostar?
Instalando o template no Joomla!
Existem quatro formas de instalar extensões no Joomla!: pelo JED, enviando um pacote de arquivos, a partir do diretório da instalação ou a partir de um URL. Em nosso caso, optaremos por enviar um pacote de arquivos: é só compactar o conteúdo do diretório do template (.zip, .tar.gz ou tar.bz2) e fazer o upload no Joomla! pelo Gerenciador de Extensões do painel de administração:
Os arquivos e subdiretórios do template serão colocados em um diretório com o mesmo nome do arquivo compactado em /templates/. Além disso, o template será listado no Gerenciador de Temas — com aquelas informações que informamos no arquivo templateDetails.xml —, em que deve ser definido como tema padrão do site.
Após a instalação, você ainda pode continuar editando o seu template sem nenhum problema. Considere, por exemplo, adicionar um script ao site: crie diretamente um diretório para scripts no diretório do template instalado (e não esqueça do index.html em branco), informe-os no respectivo templatesDetails.xml (como boa prática), adicione-os ao modelo e pronto!
Go ahead! Você é livre para editar o template e conferir o resultado em tempo real — inclusive editar a geração do código HTML pelo Joomla! para o conteúdo dinâmico com overrides, mas isso é assunto de outro artigo.
Conclusão
A criação de um template básico para o Joomla!, como se vê, não é nenhuma novidade para quem já desenvolve temas para o WordPress. É claro que esta é apenas uma introdução aos templates do Joomla! e não aborda tudo o que podemos fazer. Podemos, por exemplo, manipular o conteúdo dinâmico do elemento (como retirar scripts padrões desnecessários em alguns casos), definir parâmetros para o template configuráveis pelo painel de administração (como nos temas do WordPress a partir da versão 3.4), permitir a mudança de idioma do próprio modelo (para sites multilíngues) e muito mais! Aqui, porém, nos contentamos com a criação de um template que você poderá usar como base em seus próximos projetos com o Joomla!.
E até a próxima pessoal!
Referências
- Documentação do Joomla!
- Documentação do WordPress