Como crear un plantilla para Joomla! 3.2.2 desde cero

Esta es una nueva versión de mi post anterior “Como crear una plantilla para Joomla 1.6” y estará basada en la plantilla “protostar” que incluye el nuevo Joomla! Por defecto. En esta guía detallo como crear una plantilla y he trato de incluir solo las partes más elementales de modo que no importa si ya tenías experiencia o apenas vas empezando con Joomla, 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_PlantillaPrueba322). Dentro de esta carpeta debemos de crear un archivo llamado templateDetails.xml con un contenido más o menos como el siguiente (adecuándolo a las necesidades de cada quien). Por cierto el DOCTYPE dice 2.5, no se preocupen de eso por ahorita.

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

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

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

<name>jplan_PlantillaPrueba322</name>

<version>1.0</version>

<creationDate>20 Febrero 2014</creationDate>

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

<authorEmail></authorEmail>

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

<copyright>Copyright (C) 2014 www.miviaweb.com, Inc. All rights reserved.</copyright>

<description>TPL_PLANTILLAPRUEBA322_XML_DESCRIPTION</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_preview.png</filename>

<filename>template_thumbnail.png</filename>

<folder>css</folder>

<folder>images</folder>

<folder>js</folder>

<folder>language</folder>

</files>

<positions>

<position>banner</position>

<position>debug</position>

<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>

<position>footer</position>

</positions>

<languages folder="language">

<language tag="es-ES">es-ES/es-ES.tpl_jplan_PlantillaPrueba322.ini</language>

<language tag="es-ES">es-ES/es-ES.tpl_jplan_PlantillaPrueba322.sys.ini</language>

</languages>

</extension>

Si desean ir un poco más avanzado, en <files> pueden incluir los archivos component.php, error.php, favicon.ico y obviamente copiar estos archivos de la carpeta public_html/ templates/protestar. No olviden incluir los créditos necesarios si copian contenido de otros.

Nuevamente omití  toda la parte de configuración y parámetros para simplificar la creación de nuestra primer plantilla. Sin embargo esta ocasión si incluyo la parte de idiomas para irnos acostumbrando a usarlos.

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, DESCRIPTION pues no son esenciales, 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. Aquí les dejo la descripción de cada position:

POSITION-0 = "Search"

POSITION-1 = "Navigation"

POSITION-2 = "Breadcrumbs"

POSITION-3 = "Top center"

POSITION-4 = "Unused"

POSITION-5 = "Unused"

POSITION-6 = "Unused"

POSITION-7 = "Right"

POSITION-8 = "Left"

POSITION-9 = "Unused"

POSITION-10 = "Unused"

POSITION-11 = "Unused"

POSITION-12 = "Unused"

POSITION-13 = "Unused"

POSITION-14 = "Unused"

Es recomendable usar el mismo position para cada cosa, así cuando cambiemos de template no hay que estar configurando nuevamente cada módulo.

Ahora debemos agregar los archivos template_thumbnail.png y template_preview.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). La primera es una imagen PNG de 206x150px, puede ser su logotipo o una imagen en miniatura de la página principal. La segunda puede ser una imagen PNG de 640x388px, también es una impresión de pantalla reducida de como se ve tu plantilla.

<?php

// No direct access.

defined('_JEXEC') or die;

?>

<!DOCTYPE html>

<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>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<jdoc:include type="head" />

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

    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/ejemplo.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

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

        </div>

        <div class='menu_tab'>

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

        </div>

<div id='main_content'>

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

            <jdoc:include type="modules" name="position-3" /><!--Top center-->

            

            <!-- Left Content -->

            <div id='left_content'>

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

                <jdoc:include type="message" />

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

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

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

            </div>

            <!-- Right Content -->

            <div id='right_content'>

                <jdoc:include type="modules" name="position-7" /><!--Right-->

                <jdoc:include type="modules" name="position-8" /><!--Left-->

            </div>

            <!-- Footer -->

            <div class='footer'>

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

                Contenido del Footer

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

            </div>

            

            <jdoc:include type="modules" name="debug" style="none" />

</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 módulos en la página. Si se fijan el atributo NAME corresponde con los POSITION del archivo templateDetails.xml

El diseño de index.php 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 protostar que viene con Joomla 3.2.2.

No olviden crear un archivo llamado “index.html” dentro de cada carpeta que creen, esto es para evitar que usuarios o robots mal intencionados puedan listar el contenido de nuestras carpetas. Para el contenido de este archivo basta con poner simplemente “<!DOCTYPE html><title></title>”. La carpeta principal de nuestro template no requiere este archivo porque ya contiene el archivo “index.php” y este hace el mismo trabajo.

A continuación creamos la carpeta “language” (no olvidar el archivo index.html) y dentro de esta a su vez la carpeta “es-ES” (no olvidar el archivo index.html) o el código de idioma que deseen. Dentro de esta última carpeta crear los archivos “es-ES.tpl_jplan_PlantillaPrueba322.ini” y “es-ES.tpl_jplan_PlantillaPrueba322.sys.ini” el contenido de ambos archivos puede ser el mismo:

TPL_PLANTILLAPRUEBA322_XML_DESCRIPTION="Esta es la plantilla de prueba para Joomla! 3.2.2 creada por www.miviaweb.com"

También creamos la carpeta “js” y dentro los archivos “index.html” y “ejemplo.js”, el archivo JavaScript estará vacío en este ejemplo. También creamos la carpeta “images” y dentro solo el archivo “index.html”. Finalmente creamos la carpeta “css” y dentro los archivos “index.html” y “estilo.css”, el archivo CSS estará vacío en este ejemplo.

Listo ya podemos comprimir la carpeta de nuestro template en un ZIP e instalarla en Joomla!