Cargando



Crear una plantilla para Joomla

Joomla es un cms muy popular que se basa en un sistema de plantillas para implementar el diseño del sitio web. Veremos en este tutorial como crear un diseño de plantilla para Joomla que podremos utilizar en un desarrollo o publicar para que utilicen otros usuarios.


mar 02 2015 10:36
Intermedio
Antes de desarrollar nuestra plantilla necesitamos conocer algunos conceptos de la estructura de directorio y de archivos de Joomla. Algunos directorios, elementos y archivos principales son:

Template
Es grupo de directorios y archivos que especifican la estructura y el diseño que adoptara el sitio web. Podemos tener varias plantillas instaladas para seleccionar y así cambiar el diseño según el desarrollo que estemos llevando acabo.
Un archivo de plantilla generalmente combina código HTML y php donde se definen los bloques o capas div de la web en la que se visualizaran a los contenidos de la web según la página o sección.

Además se pueden definir otros bloques en la plantilla HTML para insertar plugins o código de funcionalidades que necesitemos ejecutar. Por lo general, los bloques que definimos bloques son la cabecera de la web, la barra de navegación o menú , las columnas laterales si hubiese, la zona de contenido , si necesitamos podemos crear todos los bloques que deseemos, todo depende de los requisitos a desarrollar. Estos bloques o áreas se denominan posiciones.


Módulo
Un módulo de joomla es un objeto con HTML, PHP , CSS o código JavaScript que se pueden mostrar en ciertas posiciones o bloques designados en la plantilla de la web. Por ejemplo podemos poner un acceso de usuario en la cabecera un selector de idiomas, un formulario de contacto, etc.


Plugin
Un plugin de Joomla es un objeto con HTML, PHP, CSS o código JavaScript que puede ser incrustado en el contenido de la web. La diferencia con el módulo es el lugar donde aparece el plugin en la página. El plugin generalmente no podemos indicar en que posición va ya que se ejecutan a producirse algún evento por ejemplo validar un email,


Componente
Un componente es un conjunto de módulos y plugins. Por ejemplo, un componente puede ser una tienda virtual como Virtuemart, todos los objetos del componente tiene configuraciones propias y se pueden mostrar en una página aparte.


Estructura de una plantilla Joomla

Una plantilla es un conjunto de archivos que definen la estructura de la web y los bloques o posiciones donde podremos asignar los distintos elementos. Una Plantilla para Joomla consta de los siguientes archivos:

index.php: es el archivo principal que describe la estructura y el diseño de la página web

error.php: es el archivo que contendrá las directivas en caso de que se produzca el error de páginas no encontrada, error 404.

Imágenes de vista previa: son aquellas denominadas template_preview.png y template_thumbnail.png, que permitirá ver una vista previa de la plantilla en miiatura desde el administrador.

Components.php: este archivo si necesitamos tener una versión imprimible de la web entonces configuramos las hojas de estilo para presentar el artículo a imprimir.

Images: es el directorio donde guardaremos todas las imágenes del diseño para imágenes.

js: en este directorio pondremos los scripts javascript o Jquery o lo que utilicemos.

language: en este directorio podremos los archivos necesarios para traducciones a diferentes idiomas.


Un aspecto importante es que por razones de seguridad en cada directorio debe tener un archivo index.html vacío para evitar que puedan ser leídos desde fuera así cualquiera que quiera acceder al directorio solo vera un documento vacío.

Después de instalar Joomla para nuestro ejemplo, no indicaremos ahora cómo instalarlo, simplemente se puede descargar desde http://www.joomlaspanish.org/

joomla-plantilla.jpg


Después de Instalar Joomla vamos a crear en otro lugar un directorio que no sea el directorio de Joomla y lo denominamos Demo para crear nuestra plantilla. En este directorio crearemos primer el archivo templateDetails.xml, que es el que contiene la configuración de la plantilla, dentro escribimos el siguiente código xml.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 3.0//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/3.0/template-install.dtd">
<extension version="3.0" type="template" client="site">

  <name>Demo Plantilla</name>
  <version>1.0</version>
  <creationDate>26/02/2015</creationDate>
  <author>Sergio</author>
  <authorEmail>demo@gmail.com</authorEmail>
  <copyright>Copyright (C) 2015 Demo</copyright>

  <description>Plantilla demo para Joomla 3.0</description>

  <files>
    <filename>index.php</filename>
    <folder>css</folder>
    <folder>images</folder>
   </files>

  <positions>
        <position>debug</position>
        <position>position-0</position>
        <position>position-1</position>
        <position>position-2</position>
        <position>position-3</position>
        <position>position-4</position>
        <position>position-5</position>
        <position>position-6</position>
        <position>position-7</position>
        <position>position-8</position>
        <position>position-9</position>
        <position>position-10</position>
  </positions>

<config>
</config>
</extension>
Definimos el nombre de la plantilla la denominamos Demo plantilla, cuando instalemos la plantilla en Joomla el gestor utilizará ese nombre para crear un directorio y guardar los archivos de la plantilla, además será el nombre que se verá en el panel de administrador , el autor, los directorios que contiene la plantilla y las posiciones que tendrá, podemos definir varias aunque no las utilicemos todas.

Luego crearemos el archivo index.php donde definiremos la estructura de la web y las posiciones correspondientes.
<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

    <!—Contenedor de la webr -->

    <div class=contenedor'>

        <!-- cabecera -->

        <div class=cabecera>Cebecera de la web</div>

   

        <!—Contendedor principal incluye  bloque de contennido y columna derecha -->

        <div class=contenidocentral>

  

            <!—area de contenido de la web -->

            <div class='contenido>


            <!—posición 1 para contener un modulo o un widget -->
               <jdoc:include type="modules" name="position-1" style="pos1" />

            <!—posición para algún mensaje o titulo -->
                <jdoc:include type="message" />

            <!—posición para algún componente -->

                <jdoc:include type="component" />

            <!—posición 2 para contener un modulo o un widget -->

                <jdoc:include type="modules" name="position-2" style="none" />

            </div>

   

            <!—columna derecha -->

            <div class=”colder”>

                 <jdoc:include type="modules" name="position-3" style="pos3" />

            </div>

            <div style='clear:both;'></div>

   

        </div>

   

        <!—pie de pagina -->

        <div class=pie>

            Este es el pie de la página

        </div>

       

    </div>

</body>

</html>
Luego creamos las hojas de estilo que llamaremos estilos.css, dentro escribimos el siguiente código:
.contenedor {     width:980px;     margin-left:auto; /* centramos la web */   
 margin-right:auto; border: solid 1px black; } 
.contenedor {     margin:20px 0px; /* aplicamos un margen de 20px al contenido */   
border: solid 1px green; } 
.contenido {     float:left;     width:750px; border: solid 1px red; } 
.colder {     float:right;     width: 270px; } 
.colder, .pie, .cabecera {     border:1px solid blue; }

Las clases css son sencillas para determinar que bloques tenemos y que posiciones. Finalmente creamos un archivo zip con el directorio que contiene la plantilla y lo instalamos desde el administrador de joomla. Accedemos al panel de administración de Joomla.

joomla-plantilla2.jpg


Desde allí vamos al menú Extensiones > Gestor de Extensiones y procedemos a instalar la plantilla que tenemos en formato zip.

Recuerda
Recordemos que cada plantilla difiere según la versión de Joomla en ese caso es compatible con 2.5 a 3.x. Además para instalar todos los directorios deben tener permisos para subir archivos.



Pulsa en la imágen para ampliarla


La plantilla instalada y tomando la información por defecto de Joomla en este caso la versión 2.5 en Español, vemos como el módulo de acceso de usuario se ubicó en la posición 3 automáticamente porque así está designado por defecto, mientras que el contenido de la web se ubicó en la posición 1 que es la que tenemos asignada en contenido de la web. Desde el administrador podemos cambiar de posición los distintos elementos que gestionamos.

Una vez que hemos instalado la plantilla si queremos actualizar o modificarla podemos actuar sobre el código de la plantilla instalada en joomla en el directorio templetes o bien trabajar fuera de Joomla en otro directorio volver a crear el archivo zip, luego eliminar la plantilla desde joomla y volver a instalarla.

joomla-plantilla4.jpg


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X