Como crear una plantilla para Joomla 1.6

Si ya habías desarrollado sitios web utilizando el manejador de contenidos Joomla en su versión 1 o 1.5 y recién estas empezando a utilizar la versión 1.6 probablemente empieces con dolores de cabeza al darte cuenta de que los Templates no son compatibles. Por esta razón he decidido hacer esta pequeña guía sobre cómo crear una plantilla para Joomla 1.6 desde cero!. De modo que no importa si ya tenías experiencia o apenas vas empezando con Joomla y justo en la versión 1.6, espero que les sirva a todos.


Lo primero es crear una carpeta con el nombre de la plantilla (en este ejemplo el nombre es jplan_ PlantillaPrueba). Dentro de esta carpeta debemos de crear un archivo llamado templateDetails.xml (siempre debemos de usar este nombre) con un contenido más o menos como el siguiente (adecuándolo a las necesidades de cada quien):

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

<extension version="1.6" type="template" client="site">

                <name>jplan_ PlantillaPrueba </name>

                <creationDate>11 Marzo 2011</creationDate>

                <author>José Sotero Vibriezca Venegas</author>

                <authorEmail>jose@miviaweb.com</authorEmail>

                <authorUrl>http://www.miviaweb.com</authorUrl>

                <copyright>Copyright (C) 2011. All rights reserved.</copyright>

                <license>--Aquí va la licencia que cada quien quiera dar--</license>

                <version>1.6.0</version>

                <description>Plantilla para joomla 1.6 desarrollada por www.miviaweb.com</description>

                <files>

                               <folder>style</folder>

                               <folder>images</folder>

                               <folder>script</folder>

                               <filename>index.php</filename>

                               <filename>templateDetails.xml</filename>

                               <filename>template_preview.png</filename>

                               <filename>template_thumbnail.png</filename>

                </files>

                <positions>

                               <position>position-0</position>

                               <position>position-1</position>

                               <position>position-2</position>

                               <position>position-3</position>

                               <position>position-4</position>

                               <position>position-5</position>

                               <position>position-6</position>

                               <position>position-7</position>

                               <position>position-8</position>

                               <position>position-9</position>

                               <position>position-10</position>

                               <position>position-11</position>

                               <position>position-12</position>

                               <position>position-13</position>

                               <position>position-14</position>

                </positions>

</extension>

Bueno creo que cada línea del contenido XML anterior se explica por sí sola, aun así les daré una breve descripción. Lo más importante a cambiar es NAME (nombre de su plantilla) y todo lo de FILES (son libres de agregar o quitar todos los archivos o carpetas que su diseño y plantilla requieran) siempre y cuando mantengan los archivos (index.php, templateDetails.xml, template_preview.png y template_thumbnail.png). Datos personales como AUTHOR, CREATION DATE, LICENCE, DESCRIPTION pues no son esenciales para cambiar aun así es bueno que lo hagan para referencia de ustedes mismo. Para los que no tienen experiencia con el diseño de plantillas para Joomla, es recomendable que los POSITION los mantengan como están, ya que estas son las posiciones que se usaran para desplegar los contenidos en la página.

Si conforme avanza el desarrollo de la plantilla agregan más archivos o posiciones, no se olviden de regresar a templateDetails.xml y agregar los FILE o POSITION correspondientes.

Ahora debemos agregar los archivos template_preview.png y template_thumbnail.png, cada uno es la imagen de como se ve nuestro sitio (si no cuentan con dichas imágenes, este paso lo pueden realizar al final, solo no se les olvide jejeje).

A continuación debemos crear las carpetas especificadas en templateDetails.xml (en este caso: style, images y script) y dentro de cada una agregar los archivos .css, .js y archivos de imagen que requiera nuestro diseño.

Finalmente lo más importante. El archivo index.php

<?php

                // No direct access.

                defined('_JEXEC') or die('Restricted access');

?>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

<head>

    <jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/jplan_PlantillaPrueba/style/estilo.css" type="text/css" />

    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/jplan_PlantillaPrueba/script/archivo.js"></script>

   

                <meta http-equiv='Content-Type' content='text/html; charset=windows-1252' />

                <title>Plantilla de prueba desarrollada por www.miviaweb.com</title>

</head>

<body>

<div>

                <div class='Header'>

                contenido del Header

                </div>

                <div class='menu_tab'>                                    

                               <jdoc:include type="modules" name="position-0" /><!--HORNAV-->

                </div>

    <div id='main_content'>

                               <!-- Left Content -->

                               <div id='left_content'>

            <jdoc:include type="modules" name="position-1" />

            <jdoc:include type="message" />

                                               <jdoc:include type="component" /><!--CONTENT-->

        </div>

   

                               <!-- Right Content -->

        <div id='right_content'>

                <jdoc:include type="modules" name="position-2" /><!--SIDEBAR-->

        </div>

       

                               <!-- Footer -->

                               <div class='footer'>

                                               contenido del Footer

                               </div>

    </div>

</div>

</body>

</html>

En el lugar donde ubiquen la etiqueta jdoc de tipo component (<jdoc:include type="component" />) es donde se desplegaran los artículos que publiquemos. Las etiquetas jdoc de tipo modules (<jdoc:include type="modules" name="position-0" />) sirven para establecer las posiciones donde queramos desplegar diferentes modulos en la página. Si se fijan el atributo NAME corresponde con los POSITION del archivo templateDetails.xml

Como verán es una plantilla muy sencilla (si se fijan no estamos utilizando ni parámetros, ni Idiomas ni Fuentes), no profundizaremos más en esto ya que tratar de cubrir todo sobre este tema resultaría en un post muy largo además de que provocaría que los menos avanzados se pierdan.

El diseño de index.php también es muy sencillo, ustedes lo pueden hacer tan complicado como deseen. Hay más cosas que le pueden agregar a este archivo, para ello échenle un vistazo a la documentación de Joomla y al archivo index.php de alguna plantilla como beez5 que viene con Joomla 1.6