Menu Principal
Categorias Articulos
Quien esta en linea?
Hay 2 invitados en línea
Publicidad
12 Mar
Creación de templates en Joomla PDF Imprimir E-Mail
Escrito por Matias Aguirre   
12 03 07

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> Esta dirección de correo electrónico está protegida contra los robots de spam, necesita tener Javascript activado para poder verla </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.

Template de este articulo

 

 
 
< Anterior   Siguiente >

Ultimos Post

Popular

Contenidos al azar

01 Sep
20 Jun
17 Jun
30 May
29 May
  • Desde el oeste - Hermetica
    Blog >> Musica
    Caída la noche en la ciudad,
    con mi cuerpo en soledad,
    caminando por los barrios del oeste.

    El insomnio de un amor,
    con su futuro de ilusión,
    revivió a un joven muerto civilmente.

    La gente ya fue,
    duerme junto a la TV.
    El digestivo incendio es su Dios.
    Es su Dios.

    Gatas y gatos buscan luz,
    los perros oscuridad,
    intuídos por la ansiedad de su instinto.

    Elementales del montón,
    intoxicados de pasión,
    sienten miedo al verme lejos de su niebla.

    Y la soledad,
    los invita a escapar,
    por la gran puerta del mundo de hoy.

    Donde nadie ve,
    y pocos temen perder
    el hilo de su conmoción idiota.

    Esquivando el temor
    de la ficticia ficción,
    la ciudad se ha derretido en mi cabeza.

    Todo es oscuridad,
    alguien se aproxima a mi,
    no puedo ver si es evangelista o policia.

    Busco comprender,
    pero no me deja ver
    por la burocracia de su historia.

    Donde nadie ve,
    y pocos temen perder
    el hilo de su conmoción idiota hoy.

    Digestivos conformados,
    pecadores falsamente perdonados.
  • Estados Unidos, Europa y los derechos humanos
    Blog >> Reflexiones

    La desprestigiada forma de suspender las sanciones a Cuba que acaba de adoptar la Unión Europea el 19 de junio ha sido abordada por 16 despachos internacionales de prensa. No implica en lo absoluto consecuencia económica alguna para nuestro país. Por el contrario, las leyes extraterritoriales de Estados Unidos y, por lo tanto, su bloqueo económico y financiero continúan plenamente vigentes.

     

    A mi edad y en mi estado de salud, uno no sabe qué tiempo va a vivir, pero desde ahora deseo consignar mi desprecio por la enorme hipocresía que encierra tal decisión. Esto se hace aún más evidente cuando coincide con la brutal medida europea de expulsar a los inmigrantes no autorizados procedentes de los países latinoamericanos, en algunos de los cuales la población en su mayoría es de origen europeo. Los emigrantes son además fruto de la explotación colonial, semicolonial y capitalista.

  • Como crear subdirectorios en Thunderbird usando IMAP
    Blog >> Thunderbird

    Hace poco pase de usar POP3 a usar IMAP en mi servidor de mail. Fue un gran cambio ya que IMAP me permite alojar mis mails en el servidor centralizando mis lecturas de mail a una sola desde cualquier computadora.

    El problema que encontre con IMAP era que no se podia crear subdirectorios pero por suerte encontre una manera de hacerlo en Thunderbird. Simplemente al crear un directorio le agregamos al final una barra / , esto hara que se puedan seguir creando directorios dentro de este. La mala noticia es que no se puede usar este directorio para alojar mails.

  • ¿Los psicópatas usan Slackware?
    Blog >> Linux

    Uy... mi distribucion favorita es Slackware....Money mouth

    http://www.vivalinux.com.ar/eventos/psicopatas-usan-slackware.html  
  • [PATCH] Ver los nombres en los comentarios de RSGallery2
    Blog >> Joomla

    Hay un problema para ver los nombres en la ultima versión estable de RSGallery2 (1.14.3 Alpha - SVN 649). Este patch arregla ese problema.

     $ diff rsgcomments.class.php.old rsgcomments.class.php
    --- rsgcomments.class.php.old   2008-05-29 14:38:49.000000000 -0300
    +++ rsgcomments.class.php       2008-05-29 14:39:04.000000000 -0300
    @@ -384,7 +384,7 @@
                                    <td colspan="2" class="title"><span class='posttitle'><?php echo $comment['subject'];?></span></td>
                            </tr>
                            <tr>
    -                               <td valign="top" width="100"><span class="postusername"><?php echo galleryUtils::genericGetUsername( $comment['user_id'] );?></span></td>
    +                               <td valign="top" width="100"><span class="postusername"><?php echo $comment['user_name'] ;?></span></td>
                                    <td valign="top" class="content_area">
                                    <?php echo mosFormatDate($comment['datetime']);?>
                                    <hr />