Aquí encontrará una guía para la creación de plantillas de joomla básicas, los ejemplos que se permiten descargar al final del documento es una plantilla en blanco sin diseño alguno pero completamente instalables. Se indicarán cuales son los archivos principales que forman parte de una plantilla de Joomla.
[Necesitas personalizar una plantilla, te ayudamos a hacerlo clic para pedir ayuda !]
Estructura de los directorios
Debe crear un directorio con el nombre que desee dar a su plantilla, para nuestro ejemplo vamos a crear un directorio pcreandoweb, en la base de nuestra nueva carpeta se crean los archivos index.php, y el archivo templateDetails.xml (este archivo es diferente entre las versiones). Para mantener una organización vamos a crear dos carpetas adicionales una CSS donde incluiremos los archivos necesarios de Estilo para nuestra web y una carpeta imagenes donde incluiremos las imágenes que utilizaremos en nuestro diseño. Dentro de la carpeta CSS crearemos un nuevo archivo para nuestro caso lo llamaremos estilo.css.
Al final debemos tener la siguiente estructura:
- pcreandoweb/
- css/
- estilo.css
- imagenes/
- index.php
- templateDetails.xml
Creando el archivo templateDetails.xml
Este archivo es el encargado de instalar y dar características especiales a nuestra plantilla, es un documento esencial sin él la plantilla no será vista en Joomla!
La sintaxis del archivo es diferente para cada versión de Joomla!
Sintaxis para 1.5
<?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>pcreandoweb</name>
<creationDate>2012-01-01</creationDate>
<author>Nombre del Autor</author>
<authorEmail>emaildelautor@url.com</authorEmail>
<authorUrl>http://www.urldelautor.com</authorUrl>
<copyright>Creandoweb 2012</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>Esta es la descripcion de mi plantilla </description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>imagenes</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>
Sintaxis para 1.6 y superiores
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.6" type="template">
<name>pcreandoweb</name>
<creationDate>2012-01-01</creationDate>
<author>nombre del autor</author>
<authorEmail>emaildelautor@url.com</authorEmail>
<authorUrl>http://www.url.com</authorUrl>
<copyright>Creandoweb 2012</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>Plantilla basica para joomla 1.6</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>imagenes</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>
En estructura son muy similares, en la primera parte vemos la descripción de nuestra plantilla, nombre, datos del autor, licencia, versión y descripción, esta parte la pueden personalizar para cada plantilla con sus propios datos.
<files></files> aquí van todos los archivos que se cargan al instalar la plantilla, si olvidan indicar alguno puede que su plantilla no instale correctamente, puede ser de tipo <filename> los que indican que cargan archivo por archivo o de tipo <folder> que crean una nueva carpeta y suben todos los archivos que se encuentren dentro de esta carpeta.
<positions></positions> dentro van cada una de las posiciones que vamos a habilitar dentro de nuestra plantilla personalicen todas las que crean necesarias y adicionen suficientes posiciones que puedan utilizar en cualquier caso. En estas posiciones se insertan los módulos de Joomla ! y es mejor tener posiciones de sobra, para instalar todo lo que se nos presente.
Creando el index.php (Básico)
El archivo index.php se convierte en la puerta de entrada a nuestro sitio en joomla, contiene, en esencia se construye un documento html normal, incluyendo las entradas php que son de dos tipos el componente, y los módulos adicionados con código joomla creado especialmente para estos casos. Esta estructura no deja limite ningúno en diseño, se puede crear cualquier diseño para Joomla.
Comienzo:
Comenzando el archivo index.php usted debe agregar lo siguiente:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
Está primera línea es por seguridad incluida en Joomla y restringe el acceso a su sitio, comprueba si está definida la variable “_JEXEC”, y si no está definida se muestra un mensaje de error por pantalla mediante la función “die”. Es recomendable usarla en todos nuestros archivos .php que tengamos en el sitio, no solo en la plantillas, y evitara que la gente acceda a las paginas directamente sin hacer antes las comprobaciones de seguridad que lleva incluida Joomla!
Las siguientes líneas son la declaración de tipo de documento (DOCTYPE), debe escoger el tipo que más se adecue a su desarrollo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se define el inicio de nuestro documento html aquí ya encontramos la primera variable definida por joomla $this->language. Que permite la internacionalización de nuestra web.
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
El Head
<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/estilo.css" type="text/css" />
</head>
El <jdoc:include type="head" /> debe incluirse en todas nuestras plantillas de joomla es el encargado de cargar los archivos necesarios para el funcionamiento de módulos y componentes de joomla, y los archivos generales de todo joomla.
Se incluyen nuestros propios archivos de joomla para encontrar la ruta correcta utilice las variables $this->baseurl y $this->template, la primera nos da la ruta base exacta de nuestro servidor para entrar a joomla, y la segunda el nombre de nuestra carpeta de plantilla, debemos agregar todos los archivos CSS que creamos para nuestra plantilla.
El Body
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
Módulos
<jdoc:include type="modules" name="top" /> está línea incluye los modulos asignados en el administrador Extensiones / Gestor de módulos dentro de nuestra plantilla. Lo importante de esta línea es el name que debe coincidir con la posición asignada.
Recomendación:En algunos casos los módulos se incluyen solo en ciertas partes de nuestra web, por esto es recomendable utilizar el siguiente código para pintar el módulo solo en caso de que esté presente en esa parte de nuestra web: $this->countModules('NombredelaPosición'), ejemplo:<?php if ($this->countModules('top')) ?><jdoc:include type="modules" name="top" /><?php endif; ?>
Usted puede incluir todos los módulos que sean necesarios para su web. Solo debe tenerlos en cuenta en la estructura y diseño que vaya dando a su plantilla.
<jdoc:include type="component" /> está línea incluye el contenido real de su web. Esto es el centro de la plantilla.
Finalizamos
Finalizamos nuestro archivo con el tag </html>, y listo ya tenemos nuestro archivo index.php
Incluyendo Imágenes:
Si va a incluir imágenes directamente en el código de su plantilla utilice la siguiente ruta:
<img src<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/imagenes/miimagen.png" alt="Imagen" />
Por último
Tome todos los archivos y cree un paquete .zip, este archivo será el que se instale, para esto debe ingresar a su web por el administrador, Extensiones – Instalar/Desistalar, si todo ha salido bien saldrá un letrero verde su plantilla ha sido instalada con éxito.
Descargas: plantilla base 1.5 - Plantilla base 1.6 y superior
Si te ha servido está guía, puedes invitarme un café !
_______________________________________________
Dominios .com con descuento
Dominios .co con descuento !
