La parte de atrás de Joomla! – Plantillas I

Joomla! da la opción de que en cualquier momento puedas darle a tu web un aspecto de Web Corporativa y en sólo un clic darle aspecto de portafolio, de eso se trata el sistema de plantillas de Joomla!

Ya que Joomla! se trata de un sistema modular, si hablamos de plantillas también funciona de la misma manera y es que puedes usar una plantilla para una parte de la web y una plantilla distinta para otra parte de la misma.

Como véis son todo facilidades, pero vamos a entender un poco los aspectos básicos de una plantilla en Joomla!.

Estructura de las plantillas Joomla!

Una plantilla en joomla! tiene una serie de archivos básicos que tenemos que conocer:

• Index.html: Añade seguridad a las carpetas. Es un archivo vacío.
• Index.php: Contiene el HTML que define la estructura de la plantilla y las llamadas PHP a la API de Joomla!.
• params.ini: Guarda los parámetros personalizables desde el administrador.
• template.css: Hoja de estilo para manipular la visualización de los datos.
• templateDetails.xml: Es un archivo esencial, donde hay información de instalación y datos de backend.
• template_thumbnail.png: Imagen en minuatura de la plantilla que nos servirá para previsualizarla en el «Gestor de plantillas» dentro de la parte de administración.
• images: Carpeta con las imágenes que utilizamos en la plantilla.
• html: Vistas personalizadas para distintos módulos y componentes.

Por lo tanto la estructura física de una plantilla Joomla! quedaría de la siguiente manera:

El archivo templateDetails.xml en Joomla!

Es el archivo «instalador» de una plantilla en Joomla! además de utilizarlo para mostrarla en el «Gestor de Plantillas» de la parte de administración donde finalmente podremos activarla. Es importante que se respete el nombre del archivo para que funcione correctamente la plantilla, es decir, todo en minúsculas y la «D» de en medio en mayusculas.

El archivo tiene varias partes en su código que me gustaría comentar y están divididos en 4 partes:

• Datos
• Archivos
• Posiciones
• Parámetros

Vamos a detallar cada uma de las partes.

DATOS: Cabecera del documento. Tipo de documento

Es importante especificar el tipo de docuemento al igual que lo hacemos para nuestros archivos HTML.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

Línea 1: Versión de XML y tipo de codificación que emplearemos
Línea 2: Tipo de documento y donde se localiza el DTD que es la definición de tipo de documento que define la estructura y las restricción de este XML y así mantener una misma estructura con los documentos del mismo tipo.

DATOS 2: Información de la plantilla

Vamos a dotar a la plantilla de información tanto de contacto con el autor como de su versión o fecha de creación:

<extension version="2.5" type="template" client="site">
	<name>beez_20</name>
	<creationDate>25 November 2009</creationDate>
	<author>Angie Radtke</author>
	<authorEmail>a.radtke@derauftritt.de</authorEmail>
	<authorUrl>http://www.der-auftritt.de</authorUrl>
	<copyright>Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.</copyright>
	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
	<version>2.5.0</version>
	<description>TPL_BEEZ2_XML_DESCRIPTION</description>

Name: El nombre de la plantilla
creationDate: La fecha de creación
author: El autor de la plantilla
authorEmail: Correo electrónico del autor
authorURL: Página web del autor
copyright: Esto es un poco libre, por ejemplo podriamos poner 2012 Colorate Blog».
license: Que podria ser GNU/GPL por ejemplo.
version: Versión de la plantilla.
description: Una breve descrpción.

ARCHIVOS: Detallamos los archivos que contiene la plantilla

Una parte, muy importante, del archivo es la etiqueta «files» que informará a Joomla! donde se encuentran nuestros archivos (Archivos PHP, Css, imágenes, etc..) y cada uno de ellos hay que englobarlo entre las etiquetas «filename«. En caso de estar en carpetas o subcarpetas, tendremos que indicarle la ruta relativa. Aquí un ejemplo:

	<files>
		<folder>css</folder>
		<folder>html</folder>
		<folder>images</folder>
		<folder>javascript</folder>
		<folder>fonts</folder>
		<folder>language</folder>
		<filename>index.html</filename>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_preview.png</filename>
		<filename>template_thumbnail.png</filename>
		<filename>favicon.ico</filename>
		<filename>component.php</filename>
		<filename>error.php</filename>
	</files>

Nota: Si nos olvidamos de incluir algún archivo, aunque lo incluyamos en un ZIP para subirlo a nuestro sitio web, no los utilizaría.

Como véis en el código de ejemplo tenemos dos etiquetas que seguro reconocéis perfectamente. Folder, para informar las carpetas y File, para informar archivos.

POSICIONES en Joomla!

Hay que decirle a Joomla! de alguna manera las posiciones que va a tener la plantilla para mostrar el contenido.

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

Para ver donde aparece esa información de posiciones, vamos a: «administración de Joomla! / Gestor de Módulos / Ruta donde y veremos que hay un campo llamado «posición» con un valor. En el caso del ejemplo el valor es «position-1»

PARAMS en Joomla!

Para lograr que una plantilla sea lo más versátil posible, es una buena idea configurar parámetros en Joomla! como por ejemplo el color. Esta parte está muy ligada al archivo params.ini en Joomla!.

<params>
	<param name="bg" type="list" default="gris" label="Color del background" description="Color del sitio">
		<option value="rojo">Rojo</option>
		<option value="gris">Gris</option>
		<option value="celeste">Celeste</option>
	</param>
</params>

Espero que o shaya servido de ayuda este manual de Joomla! para ver un poco por dentro el entramado de este estupendo CMS.

Más adelante hablaremos del archivo Index.php donde nos encontramos con la API de Joomla! y mostraremos las partes del código para saber donde tenemos que tocar, lo que tenemos que añadir o lo que tenemos que eliminar en una plantilla.

En k3bone tenemos un plan Joomla! específico con el que te instalamos Joomla! con todo lo necesario para empezar. Así mismo, te ayudamos a elegir e instalar cualquier plantilla de diseño para vestir tu sitio web. Desde sólo 5,45€/mes

Índice de nuestro monográfico sobre Joomla!:

1. Joomla! – Introducción e historia
2. ¿Cómo instalar Joomla!?
3. La parte de atrás de Joomla! – Componentes y módulos
4. La parte de atrás de Joomla! – Plugins
5. La parte de atrás de Joomla! –Plantillas I
6. La parte de atrás de Joomla! –Plantillas II
   

Información Relacionada: Tu web basada en Joomla! desde 5,45€/mes!