Crear una plantilla Joomla! básica

This tutorial is for Joomla! CMS Version(s)

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="bottom" />
</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.

+ In the Joomla! 2.5 series and later, you first need to tell Joomla! that you have created a new template. This feature is called Discover Extensions and can be accessed via Extensions -> Extension Manager -> Discover (i.e. the Discover tab). Click Discover (i.e. the Discover button) to discover your template, then select it and click Install to install it. Now your template should show up in the Template Manager (Styles), accessible via Extensions -> Template Manager.

Note you can create your template outside of Joomla and simply install it like any regular extension.

HINT: there are a couple of ways you can preview your index page as you put it together, either insert the styles into the head of the index page or directly link it to the style sheet you will be using temporarily. You can remove these links before packaging the file.

Packaging the template for installation

A directory with several loose files is not a convenient package for distribution. So the final step is to make a package. This is a compressed archive containing the directory structure and all the files. The package can be in ZIP format (with a .zip extension), in TAR-gzip format (with a .tar.gz extension), or in TAR-bz2 format (with a .tar.bz2 extension).

If your template is in a directory mytemplate/ then to make the package you can connect to that directory and use commands like:

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

Note to Mac OS X users

Note to template developers using Mac OS X systems: the Finder's "compress" menu item produces a usable ZIP format package, but with one catch. It stores the files in AppleDouble format, adding extra files with names beginning with "._". Thus it adds a file named "._templateDetails.xml", which Joomla 1.5.x can sometimes misinterpret. The symptom is an error message, "XML Parsing Error at 1:1. Error 4: Empty document". The workaround is to compress from the command line, and set a shell environment variable "COPYFILE_DISABLE" to "true" before using "compress" or "tar". See the AppleDouble article for more information.

To set an environment variable on a Mac, open a terminal window and type:

export COPYFILE_DISABLE=true

Then in the same terminal window, change directories into where your template files reside and issue the zip command. For instance, if your template files have been built in a folder in your personal directory called myTemplate, then you would do the following:

cd myTemplate
zip -r myTemplate.zip *

Conclusion

You should now have created a template that works. It won't look like much yet. The best thing to do now is start experimenting with the layout.