Crear plantilla para Joomla 2.5

Una de las partes fundamentales para empezar con Joomla 2.5, es aprender a crear plantillas. Cualquier web que hagamos, por pequeña que sea, va a necesitar una personalización a nivel visual. Además, a partir de las plantillas, podemos ir atreviendonos a indagar más y más en el código de Joomla, como ha sido mi caso.

Los requesitos necesarios para crear una plantilla para Joomla, son un buen conocimiento de html y css, y tener claras las diferencias entre módulo y componente.

No voy a explicar todos los recursos de los que disponemos al crear la plantilla, sino que me voy a centrar en los necesarios y/o más importantes. Después con el tiempo, iremos incorporando nuevos archivos con diferentes funcionalidades a nuestra plantilla.

En realidad sólo son necesarios 2 archivos para crear la plantilla, “index.php” y “templatedetails.xml”. Aunque evidentemente otros archivos como estilos, imagenes, scripts, etc, serán más que recomendables. Voy a explicar los archivos más necesarios:

  • index.php: Es el archivo que va a contener el html que conforma la estructura general de nuestra plantilla. Luego explicaré màs detalladamente este archivo.
  • templatedetails.xml: Es un archivo de configuración, que el indica a Joomla la estructura de nuestra plantilla.
  • template_thumbnail.png: Es una vista en miniatura de nuestra plantilla.
  • template_preview.png_ Es una imagen mayor que la anterios qeu se mostrará al poner el cursor sobre nuestra plantilla.
  • css: Carpeta para contener nuestros archivos css.
  • scripts: Carpeta para contener nuestro código JavaScript.

Estos son los archivos más básicos, aunque convendría tener otros, como los archivos de idiomas de la plantilla, etc…

Configurar estructura de nuestra plantilla en Joomla 2.5 – templatedetails.xml

El archivo TemplateDetails.xml, sirve para indicarle a Joomla los datos básicos de la plantilla (nombre, tipo de plantilla, nombre autor, email autor, etc…), los archivos y carpetas que la componen; y por último, los nombres de las posiciones de nuestra plantilla en las que podremos añadir módulos.

Como vemos, éste es un archivo de configuración de nuestra plantilla para Joomla 2.5. Pongo un ejemplo de un templatedetails.xml.

<?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">
<extension version="2.5" type="template" client="site">
    <name>Plantilla Prueba</name>
    <creationDate>15 Diciembre 2012</creationDate>
    <author>Mikel Garcia</author>
    <authorEmail>prueba@prueba.es</authorEmail>
    <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>1.0</version>
    <description>Plantilla para pruebas del Blog</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>css</folder>
    </files>
    <positions>
        <position>posicion1</position>
        <position>posicion2</position>
    </positions>
</extension>

Creo que la mayor parte del archivo se explica por si sólo, pero es importante fijarse en la tercera línea. En ella le indicamos a joomla, que es una extensión del tipo “template”, y que se podrá utilizar en el sitio web público. Ya que podríamos haber creado una plantilla para nuestro BackEnd.

La siguiente zona a resaltar, es la subsección “files”. En esta sección, indicamos los nombres de los archivos y/o carpetas que queremos subir a nuestro servidor.

Por último, la zona “positions”, lista las posiciones en las que podremos incluir módulos, dentro de nuestra plantilla joomla 2.5.

Punto de entrada a la plantilla joomla 2.5 – index.php

Este es el punto de entrada a nuestra plantilla y el archivo que va a contener la estructura de la misma. Voy a poner un ejemplo de este archivo, para tener un ejemplo y que resulte más entendible lo que voy a explicar.

<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/estilos.css.php" type="text/css" media="screen,projection" />
    <jdoc:include type="head" />
</head>
<body>
    <div id="cabecera"><jdoc:include type="modules" name="posicion1" /></div>
    <div id="contenido"><jdoc:include type="component" /></div>
    <div id="cabecera"><jdoc:include type="modules" name="posicion2" /></div>
</body></html>

Como podemos ver es un ejemplo muy simple, pero nos va a servir para entender las partes más importantes de este archivo. Lo primero extraño, que podemos apreciar, es un codigo como este:

<jdoc:include type="head" />

En él, le estamos indicando a Joomla, que debe cargar todos los datos de la cabecera en esa posición. Serán los metadatos, y los archivos CSS y JavaScript que necesiten los módulos y componentes que vayamos a incorporar en nuestro portal web.

Despues hay dos códigos, que realizan una acción muy similar:

<jdoc:include type="modules" name="posicion1" />
<jdoc:include type="modules" name="posicion2" />

Como se puede ver claramente, le estamos diciendo a Joomla, que en esa región, se van a cargar todos los módulos, que tengan asignadas las posiciones “posicion1” y “posicion2” respectivamente. Si hechamos un vistazo a la definición de nuestro templatedetails.xml, vemos que son las posiciones que hemos definido en él.

Por último, falta de explicar este otro código:

<jdoc:include type="component" />

Es el lugar donde se va a cargar el módulo que corresponda, dependiendo de la página en la que estemos. Es la parte funcional de nuestra web. No hace falta indicar nada más a Joomla, al contrario que en los módulos, porque como expliqué en un post anterior, sólo puede haber un componente por página.

Por último, tendríamos que empaquetar todos los archivos en un ZIP, y subrirlo a Joomla, utilizando el “Gestor de Extensiones”.

Con lo explicado hasta aquí, ya podemos crear nuestar primera plantilla para Joomla 2.5. Por supuesto, podemos complicar la plantilla, tanto como queramos, pero este es un buen punto de partida.

Esta entrada fue publicada en Plantillas. Guarda el enlace permanente.

15 respuestas a Crear plantilla para Joomla 2.5

  1. David Lara dijo:

    Hola! He leído acerca sobre como crear una plantilla para joomla 2.5, he seguido las indicaciones pero me sale un error:
    JInstaller: :Install: Archivo no existe C:\wamp\www\icirealestate\tmp\install_512a8ce04cea2\icirealestate\css

    Dice que hay un error instalando la plantilla, es decir el ejemplo que aportas aqui mismo. Necesito ayuda urgente en ello, por favor.

  2. todojoomla dijo:

    Revisa el “templatedetails.xml” para ver como has añadido la carpeta css y si ésta existe…

    Un Saludo

  3. David Lara dijo:

    Mikel, he revisado bien el codigo del ‘templateDetails.xml’ y el de ‘index.php’ pero todavia me sale el mismo error, ahora dentro de la carpeta ‘css’ que ya esta creada deberia haber un archivo con extension css, ¿No será eso lo que no me deja instalarlo? el ejemplo que das se ve muy sencillo y practico de entender y aplicar pero no se que estoy omitiendo por que lo he revisado.

  4. aitor dijo:

    hola me e descargado una plantilla un tema de yootheme en especial el sphere y cuando voy a index.php no me sale nade de lo que dices, gracias podria añadir yo directamente lo que dices en tu pos gracias

  5. todojoomla dijo:

    Desconozco la plantilla de la que hablas. Pero es indispensable que contenga los códigos arriba descritos. Puede ser que estén en otros archivos y los añada a través de includes.
    La plantilla los necesita para “funcionar”. Si la plantilla es de pago, pide soporte a YooTheme.

  6. alex dijo:

    exelente tus aportes, ya realice el componente holamundo…¡¡¡
    mi problema es el siguiente :
    JInstaller: :Install: Archivo no existe C:\wamp\www\joomla 2.5\tmp\install_515555fa1a23d\demo\templateDetails.xml…y no se que es.

  7. francisco dijo:

    Hola muchas gracias por las informaciones. Soy muy nuevo en joomla y no es que sepa mucho. Tengo una plantilla gratuita pero quisiera cambiar el tamaño al slider de unas imàgenes para que se adapten al tamaño de pantalla de un portátil y también subir el titulo de mi página. Es joomla 2.5 ¿cómo accedo y desde dónde a esos códigos? ¿desde el administrador? Si es posible un paso a paso, pues soy muy novato. Muchas gracias.

  8. george dijo:

    hola amigo donde puedo conseguir plantillas ya realizadas que el archivo XML este bien ya que mi joomla dice que no lo tienen

    • Mikel dijo:

      Asegurate de que las plantillas que has descargado sean las correctas para tu versión de Joomla. Comprueba también que exista el mencionado archivo dentro del paquete zip. Algunas veces hay que descomprimir primero para llegar al archivo ZIP que contiene nuestra plantilla.

      Un saludo.

  9. Winifred dijo:

    Tengo un blog de WordPress y me gustaría quitar todo ( se aloja en mi propio dominio y hosting) porque me gustaría borrar mi sitio. ¿Cómo puedo guardar mis mensajes de blog en una carpeta o algo en mis documentos ( offline) , porque no quiero borrar todo completamente . ¿Puedo hacerlo de una sola vez , si hasta yo puedo hacerlo ? Gracias ! .

  10. emlinea dijo:

    Hola estoy editando una plantilla html que contiene imágenes y java scrip, ya logre crear la estructura de las plantillas edite el templatedetails incluyendo las posiciones y carpetas, ya la tengo montada en joomla pero tengo los siguientes problemas:

    1. no toma correctamente los css de la plantilla original principalmente en los menús para las clases.
    2. las imágenes de la plantilla no se muestra, no se como vincularlas a la plantilla para que las tome automaticamente o dinamicamente.
    3. el java scrip tampoco parece estar ejecutandose correctamente.

    Te agradezco si puedes ayudarme con estas inquietudes.

    saludos

  11. Santiago dijo:

    Mikel, que tal, te comento, me descargué una plantilla pero vino sin el templateDetails.xml, ahora bien, en base a tu tutorial armé dicho archivo, pero sigue sin reconocermelo en joomla, sale la leyenda de que no puede encontrar dicho archivo (está en la carpeta correcta, y en el xml está en file para que lo suba y lo lea joomla. No se si necesitás más data para poder ayudarme, o si te sirve que suba una impresión de pantalla de la carpeta de archivos internos + el código del xml.
    Desde ya muchas gracias por tu tiempo

  12. Seguramente es porque tienes el templatedetails todo en minusculas, no con templateDetails

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s