Joomla! Documentation™

Split Page into Specific Joomla! Versions - J2.5 and 3.x

Introducción

El propósito de este tutorial es servir como una introducción a la creación de plantillas Joomla!. Se cubrirán los archivos esenciales y el código necesario para crear una plantilla básica. El código que se presenta puede ser copiado y pegado con muy pocas modificaciones necesarias.

Configuración de la estructura de directorios

Para hacer una plantilla muy básica, crea una nueva carpeta en la carpeta templates'. El nombre de esta carpeta debe ser el mismo que tu plantilla, es decir, mynewtemplate.

Utilizando tu editor de texto favorito, crea los archivos index.php y templateDetails.xml. Para mantener las cosas organizadas, crea 2 nuevas carpetas llamadaa images y css. Dentro de la carpeta css crea un archivo llamado template.css.

Aunque, para empezar, está bien colocar todos tus códigos CSS directamente en tu archivo index.php, muchos desarrolladores web prefieren colocar su código CSS en un archivo independiente que pueda ser enlazado desde varias páginas con la etiqueta link. Esto también puede acortar el tiempo de carga de tus páginas, ya que el archivo separado se pueden almacenar en caché.

Esta es la configuración de instalación más básica. Esquema de la estructura de carpetas y archivos:

* mynewtemplate/
** css/
*** template.css
** images/
** index.php
** templateDetails.xml

Crear un archivo templateDetails.xml básico

El archivo templateDetails.xml es esencial. Sin el, tu plantilla no será vista por Joomla!. El archivo tiene claves de metadatos acerca de la plantilla.

La sintaxis del archivo es diferente para cada versión de Joomla!.

Para , utiliza el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
	<name>mynewtemplate</name>
	<creationDate>2008-05-01</creationDate>
	<author>John Doe</author>
	<authorEmail>john@example.com</authorEmail>
	<authorUrl>http://www.example.com</authorUrl>
	<copyright>John Doe 2008</copyright>
	<license>GNU/GPL</license>
	<version>1.0.2</version>
	<description>My New Template</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
	</files>
	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
	</positions>
</install>

Para y posteriores, utiliza la siguiente versión. Cambia de version="2.5" a la versión de la instalación de Joomla!.

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
	<name>mynewtemplate</name>
	<creationDate>2008-05-01</creationDate>
	<author>John Doe</author>
	<authorEmail>john@example.com</authorEmail>
	<authorUrl>http://www.example.com</authorUrl>
	<copyright>John Doe 2008</copyright>
	<license>GNU/GPL</license>
	<version>1.0.2</version>
	<description>My New Template</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
	</files>
	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
	</positions>
</extension>

Así que, como puedes ver, tenemos un conjunto de información entre las etiquetas marcadas (el <element>s). Tu mejor opción es copiar y pegar esto en tu archivo templateDetails.xml y modificar los detalles (tales como <name> y <author>).

La sección <files> debe contener todos los archivos que se utilizan -que posiblemente no sabes como se llaman aún- no te preocupes, lo actualizaremos más tarde. El elemento <folder> puede utilizarse para definir una carpeta entera.

Deje las positions como están, se trata de un conjunto común, por lo que serás capaz de cambiarlas fácilmente desde las plantillas estándar.

Crear un archivo index.php básico

El archivo index.php se convierte en el núcleo de cada página que Joomla! entrega. Esencialmente, haces una página (como cualquier página HTML), pero colocas código PHP donde debe ir el contenido de tu sitio. La plantilla funciona mediante la adición de código de Joomla! en las posiciones de los módulos y la sección del componente, de la plantilla. Cualquier cosa añadida a la plantilla aparecerá en todas las páginas, a menos que se agregue a una de estas secciones a través del CMS Joomla! (o código personalizado).

Esta página mostrará un escueto código, listo para cortar y pegar, en tu propio diseño.

Comenzar

Una plantilla de Joomla!, comienza con las siguientes líneas:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

La primera línea detiene gente "traviesa" que busca en tu codificación y quiere hacer cosas malas.

La segunda línea es la Declaración de Tipo de Documento (DOCTYPE), que indica al navegador (y araña web) que gustos de página HTML estás usando. El doctype utiliza HTML5, que es una nueva versión de HTML, que es en gran medida compatible con versiones anteriores, pero contiene muchas características nuevas. Debes ser consciente de que esto no va a funcionar bien en Internet Explorer 8 o versiones anteriores sin un hack. Es posible que desees investigar esta situación y los deseos de tus clientes antes de decidir qué tipo de documento deseas utilizar. Sin embargo, esto es utilizado en Joomla! y superior.

En la tercera línea comienza nuestro documento HTML y se describe el lenguaje de la web. Un documento html se divide en dos partes, el encabezado y el cuerpo. El encabezado contendrá la información sobre el documento y el cuerpo va a contener el código del sitio web que controla el diseño.

Encabezado

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

La primera línea la usa Joomla! para poner la información correcta del encabezado. Esto incluye el título de la página, la información meta, así como la del sistema JavaScript. El resto crea enlaces a dos hojas de estilo del sistema y a tu propia hoja de estilo (si se denomina plantilla.css y se encuentra en la carpeta css del directorio de tu plantilla. Así que si su plantilla está en http://www.misitio.com/templates/mi_plantilla/ entonces los archivos css irán en http://www.misitio.com/templates/mi_plantilla/css/).

Sección del Cuerpo

<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

Sorprendentemente, esto será suficiente! Sí, es un diseño muy básico, pero va a hacer el trabajo. Todo lo demás será realizado por Joomla!. Estas líneas, que generalmente se llaman declaraciones jdoc, le dicen a Joomla! como incluir la salida de ciertas partes del sistema Joomla!. Nota: tendrás que asegurarte que tu menú entra en la posición "top" del módulo.

Posiciones de los Módulos

Por encima, la línea que dice: name="top" añade una posición de módulo llamada top y permite a Joomla! colocar módulos en esta sección de la plantilla. La línea type="component" contiene todos los artículos y contenido principal (en realidad, el componente) y es muy importante. Va en el centro de la plantilla.

Nota: Puedes agregar tus propias líneas de módulos en cualquier lugar que desee en el cuerpo, pero hay que añadir una línea correspondiente al archivo templateDetails.xml que se encuentra junto al index.php de la plantilla.

Final

Esto es todo - una última palabra:

</html>

Imágenes Personalizadas

Si deseas agregar cualquier imagen a la plantilla, puedes hacerlo de esta manera:

<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/myimage.png" alt="Custom image" class="customImage" />

Aquí, la variable template se llenará en el nombre de la plantilla.

CSS Personalizado

Puedes agregar un CSS personalizado, de esta forma:

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

Cada archivo que se agregue debe tener una línea en el archivo templateDetails.xml de la plantilla, a menos que resida en una subcarpeta (que puede ser incluida en un elemento <folder>).

Esto deja el siguiente archivo final:

<?php defined('_JEXEC') or die('Restricted access');?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="footer" />
</body>
</html>

Probar la plantilla

Encuentra la plantilla en el Gestor de plantillas, selecciona y has clic en Predeterminado para hacer la plantilla predeterminada.

En Joomla! 1.5, la nueva plantilla se mostrará inmediatamente en el Gestor de Plantillas, accesible a través de Extensiones -> Gestor de plantillas.

+ En la serie Joomla! 2.5 y posteriores, primero necesitas decirle a Joomla! que has creado una nueva plantilla. Esta característica se llama Extensiones: Descubrir" y se puede acceder a través de Extensiones -> Gestionar -> Descubrir (es decir, clic en el enlace del menú de la izquierda). Has clic en Descubrir"' (es decir, el enlace mencionado) para descubrir tu plantilla, a continuación, selecciónela y has clic en Instalar' para instalarla. Ahora la plantilla se debería mostrar en el Gestor de plantillas (Estilos), accesible a través de Extensiones -> Plantillas.

Nota que puedes crear tu plantilla fuera de Joomla! y simplemente instalarla como cualquier extensión normal.

SUGERENCIA: hay un par de maneras con las que puedes obtener una vista previa de tu página de inicio al juntarlas, insertar los estilos en la cabecera de la página índice o conectarla directamente a la hoja de estilo que vas a usar temporalmente. Puedes eliminar estos enlaces antes de empaquetar el archivo.

Empaquetar la plantilla para la instalación

Un directorio con varios archivos sueltos no es un paquete conveniente para la distribución. De modo que el último paso es hacer un paquete. Este es un archivo comprimido que contiene la estructura de directorio y todos los archivos. El paquete puede estar en formato ZIP (con una extensión .zip), en formato TAR-gzip' (con una extensión .tar.gz), o en formato TAR-bz2 (con una extensión .tar.bz2).

Si la plantilla está en un directorio mytemplate/ entonces para hacer el paquete se puede conectar a ese directorio y usando comandos comandos como:

• tar cvvzf ../mytemplate.tar.gz *
• zip -r ..\mytemplate.zip *.*

Nota para usuarios de Mac OS X

Nota apara los desarrolladores de plantillas que utilizan los sistemas Mac OS X: el Buscador de "comprimir" en el menú produce un paquete en formato ZIP utilizable, pero con un inconveniente. Almacena los archivos en formato AppleDouble, agregando a los archivos al comienzo del nombres "._". Entonces, queda un archivo llamado "._templateDetails.xml" que Joomla 1.5.x a veces puede malinterpretar. El síntoma es un mensaje de error, "Error de Análisis XML en 1:1. Error 4: documento Vacío". La solución es comprimir desde la línea de comandos, y establecer una variable de entorno shell "COPYFILE_DISABLE" a "true" antes de usar "comprimir" o "tar". Ver el artículo AppleDouble para obtener más información.

Para establecer una variable de entorno en un equipo Mac, abre una ventana de terminal y escribe:

export COPYFILE_DISABLE=true

Luego en la misma ventana de terminal, cambia los directorios en donde los archivos de plantilla residen y ejecuta el comando zip. Por ejemplo, si los archivos de plantilla se han construido en una carpeta en tu directorio personal llamado myTemplate, entonces harías lo siguiente:

cd myTemplate
zip -r myTemplate.zip *

Conclusión

Ahora deberías haber creado una plantilla que funciona. No parece gran cosa, aún. Lo mejor que puedes hacer ahora es empezar a experimentar con el diseño.