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!
