Matware

Creación de templates en Joomla

Monday, 12 March 2007 15:45

Matias Aguirre

Este artículo pretende explicar el funcionamiento de los templates (plantillas) en Joomla! 1.0.x. Se supone que el lector tiene sólidos conocimientos de HTML, CSS y algo de PHP.

Se aceptan comentarios, dudas, puteadas, críticas y correcciones para lograr el objetivo de un artículo entendible para la mayoría de diseñadores y/o programadores web.

Conceptos básicos

Todos los templates que instalamos están en el directório templates/ de nuestra instalación de Joomla!.

Árbol de archivos del template

Los templates de Joomla! no son mas que varios archivos comprimidos en formato zip o gzip. Para que Joomla! pueda verificar que este archivo comprimido sea un template valido, se necesita establecer ciertos parámetros predefinidos, como por ejemplo, debe incluir un archivo XML con el nombre de templateDetails.xml (ya vamos a explicar en detalle este archivo).

Aunque el árbol de archivos puede modificarse a gusto en el archivo templateDetails.xml la manéra mas común de hacerlo es de la siguiente:

index.php
templateDetails.xml
template_thumbnail.png
css/template_css.css
css/links.css
css/joomla.css
images/logo.png

index.php

Este es el archivo principal del template, donde irían todos los códigos HTML y PHP.

Vamos a ir paso por paso en el archivo explicando características, funciones y demases.

<?php
    defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
    $iso = split( '=', _ISO );
    echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>

Las primeras líneas representan la forma con la cual cuidamos que no se pueda ingresar a este archivo al menos que estemos usando Joomla!. Cuestiones de seguridad.

Después van algunos tags de XML para declarar que tipo de documento estamos usando. Si quieren saber mas sobre esto pueden ingresar a este link.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
    <?php mosShowHead(); ?>
    <link href="<?php echo $mosConfig_live_site; ?>/templates/mtwTemplateExample/css/template_css.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo $mosConfig_live_site; ?>/templates/mtwTemplateExample/css/links.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo $mosConfig_live_site; ?>/templates/mtwTemplateExample/css/joomla.css" rel="stylesheet" type="text/css" />
</head>

Aca arrancamos nuestro HTML con los tags html y head. La funcion mosShowHead es la funcion que tiene Joomla! para pegar los datos del header que configuramos desde la administración del Joomla.

Después agregamos nuestros archivos de CSS (que estan en el directorio css/ de nuestro template). La variable $mosConfig_live_site representa la dirección de nuestra web. Si bien podemos poner directamente esta dirección, es preferible usarlo asi para poder después instalar nuestro template en cualquier otro Joomla!.

<body>
### Codigo HTML
</body>
</html>

Y aca terminamos este archivo con nuestro código HTML.

Las funciones de Joomla para introducir dentro del código HTML son las siguientes:

<?php mosLoadModules ( 'top', -1); ?>

Esta función imprime los módulos configurados en la administración del Joomla. En el ejemplo se puede ver que deseamos cargar todos los módulos que esten en la sección 'top', asi podremos tener varias secciones de módulos en nuestro HTML (como por ejemplo left, right, banner, user1, user2, etc).

<? mosMainBody(); ?>

La función mosMainBody es la encargada de cargar los componentes. Para cargar estos componentes se va a guiar por la variable option que viene en la url (Se va a ver siempre y cuando no usemos SEF).

templateDetails.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template">
    <name>mtwTemplateExample</name>
    <creationDate>12/03/2007</creationDate>
    <author>Matias Aguirre</author>
    <copyright>This template is released under the GNU/GPL License</copyright>
    <authorEmail> This e-mail address is being protected from spambots. You need JavaScript enabled to view it </authorEmail>
    <authorUrl>http://www.matware.com.ar/</authorUrl>
    <version>0.1</version>
    <description>Este template pretende ser un ejemplo de un template para Joomla!.</description>
    <files>
        <filename>index.php</filename>
        <filename>template_thumbnail.png</filename>
    </files>
    <images>
        <filename>images/logo.png</filename>
    </images>
    <css>
        <filename>css/template_css.css</filename>
        <filename>css/links.css</filename>
        <filename>css/joomla.css</filename>
    </css>
</mosinstall>

template_thumbnail.png

Esta es una imagen chica (aproximadamente de 230px de ancho) de nuestro template funcionando que aparece en la administración del Joomla. Nada del otro mundo.

css/template_css.css

Este es el CSS principal. (Ver ejemplo)

css/links.css

En este CSS vamos a configuramos los parámetros de todos los links del Joomla. (Ver ejemplo)

css/joomla.css

En este ponemos todas las características de los divs y las tablas de los componentes internos de Joomla. (Ver ejemplo)

Creación del template

Lo unico que nos restaría hacer es comprimir nuestros archivos dentro de un directorio con el nombre que queramos y ya tendríamos listo nuestro template para instalar en cualquier instalación de Joomla.