Cómo se crea una plantilla para Joomla
Haz tu propio template para Joomla 1.5
Las plantillas ofrecen al usuario la posibilidad de elegir entre una gran variedad de diseños la que más se ajuste a sus necesidades, pero aunque existan tantas creaciones en websites como Template monster, no siempre se encuentra la que se desea. Para esto un desarrollador puede crear y personalizar sus propias plantillas.
Como se crea una plantilla para Joomla!
La creación y edición de plantilla es un proceso fácil y muy práctico. A continuación se describirá como crear una plantilla básica para Joomla, lo demás corre por cuenta de la imaginación del creador.
Una plantilla está compuesta por varias carpetas y archivos, cada uno de estos representa una parte de la plantilla. Algunos de estos archivos son:
Carpetas:
- css: Contiene los estilos en cascada de la plantilla.
- html: Contiene los archivos que funcionaran como plantilla específica para módulos y componentes. Con estos archivos se puede manejar la apariencia de los módulos y componente.
- images: Contiene las imágenes usadas para el diseño de la plantilla.
Archivos:
- index.php: El archivo principal, contendrá todo el HTML y directivas PHP de Joomla! para cargar el contenido (artículos, componentes, módulos, etc.)
- templateDetails.xml: Permite que la plantilla sea reconocida en el back-end del CMS. En este archivo se agregaran los parámetros y las posiciones de disponibles para mostrar los módulos.
- template_thumbnail.png: Es la imagen que actuará como pre visualización de la plantilla en la administración.
- template.css: Es el estilo en cascada principal que se encuentra dentro de la carpeta ‘css’. En la rama de Joomla! 1.0.x este archivo tenía el nombre de template_css.css
- favicon.ico: Es el favicon que se usará en el sitio.
Para iniciar con la creación de la plantilla, es necesario crear la carpeta donde estará toda la información de esta, incluyendo los archivos mencionados anteriormente. Lo que se debe hacer es crear una carpeta en el directorio ‘templates’ de Joomla!, con el nombre que se desee, en minúscula y sin espacios; se crean dentro de esta las subcarpetas necesarias: HTML ,css, images…
Para crear el archivo templateDetails.xml:
El templateDetails.xml se puede dividir en cuatro partes: el contenido de Datos, Archivos y Posiciones.
Para el contenido de Datos se debe ingresar la siguiente información:
<name> Nombre de la plantilla</</name>
<creationDate> Fecha de creación </creationDate>
<author> Nombre del autor </author>
<copyright> Licencia </authorEmail>
<authorUrl> Web del autor </authorUrl>
<version> Versión </version>
<description> Aquí va la descripción, puede usarse HTML o texto plano </description>
Esta información es sobre la plantilla y el autor.
Para el contenido de Archivos se debe ingresar la siguiente información:
<files>
< filename > index.php </ filename>
< filename > templateDetails.xml </ filename >
< filename > favicon.ico </ filename >
< filename > template_thumbnail.png </ filename >
< filename > css/template.css </ filename >
</ files >
Esta información es sobre los archivos que se han utilizado para el diseño, para luego comprimir todo en ZIP y tener un instalador de la plantilla. Como se está trabajando directamente en Joomla no es necesario referenciar todos los archivos, pero se debe tener en cuenta hacerlo.
Para las posiciones se debe ingresar la siguiente información:
< positions >
< position > left </ position >
< position > right </ position >
< position > user3</ position >
</ positions >
Estas posiciones son las que se usaran para mostrar el contenido en el sitio.
Crear el index.php:
Para la creación del index.php, se debe insertar el HTML que formará la maquetación de la plantilla. Se debe crear un encabezado, un cuerpo y un pie de página.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<jdoc:include type=»head» />
<link rel=»stylesheet» href=»templates//css/template.css» type=»text/css» />
</head>
<body>
<!– Contenedor –>
<div id=»contenedor»>
<!– Comienzo encabezado–>
<div id=»header»>
<h1><a href=»index.php»></a></h1>
</div>
<!– Fin encabezado –>
<!– Comienzo navegacion–>
<div id=»navegacion»>
<jdoc:include type=»modules» name=»user3″ style=»xhtml» />
</div>
<!– Fin navegacion –>
<!– Columna izquierda –>
<div id=»izquierda»>
<jdoc:include type=»modules» name=»left» style=»xhtml» />
</div>
<!– Fin columna izquierda –>
<!– Comienzo contenido –>
<div id=»contenido»>
<jdoc:include type=»component» />
</div>
<!– Fin contenido –>
<!– Columna derecha –>
<div id=»derecha»>
<jdoc:include type=»modules» name=»right» style=»xhtml» />
</div>
<!– Fin columna derecha –>
<!– Comienzo pie de página –>
<div id=»footer»>
<!–Cargo el footer–>
<?php include_once(‘includes/footer.php’); ?>
</div>
<!– Fin footer –>
</div>
<!– Fin contenedor –>
</body>
</html>
Este es un ejemplo de una plantilla básica de tres columnas, una barra de navegación, un encabezado y un pie de página.
Crear css:
En la carpeta ‘css’ se crea un archivo template.css el cual tendrá los estilos que usará la plantilla. A continuación unos ejemplos de CCS:
{
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
font-family: Verdana, Arial, Sans-Serif;
color: #333;
background-color:white;
}
Para finalizar se crea el template_thumbnail.png que es la imagen que se pre visualiza de la plantilla, no hay un tamaño estándar para esto pero por general que utiliza de 200px de ancho y 150px de alto.
Si no quieres emplear tu tiempo en crear una plantilla te recomendamos buscar un template de calidad que distinga tu website de otros en Template Monster. Siempre podrás realizar más tarde las modificaciones necesarias.
