Crear tu propia plantilla para Joomla, 3ª parte

Seguimos creando nuestra plantilla para Joomla, recordemos que ya teníamos organizadas las carpetas, la maquetación HTML5 + CSS y creado el archivo templateDetails.xml. Sólo nos queda crear index.php

Creación de index.php: implementar plantilla para joomla

Éste es el archivo más complejo que vamos a crear, al menos para mí porque mezclamos html+php+expresiones Joomla (jDoc)

Declaración de Documento

Aunque la primera línea es de seguridad para intentar que no te toquen el código, y por lo cual, es otro standar, tenemos que poner en esta parte la declaración del tipo de documento que creamos.

<!--?php defined('_JEXEC') or die('Restricted access');$app=JFactory::getApplication();$doc=JFactory::getDocument();$this->language=$doc->language;$this->direction=$doc->direction;$sitename=$app->getCfg('sitename');$logo='params->get('logoFile') .'" alt="'. $sitename .'"?-->';JHtml::_('bootstrap.framework');?>


La declaración del documento, por si lo ves más claro, de manera simple sería:

doctype de nuestra plantilla para joomla

Empezamos la cabecera

Como de HTML se tratara, introducimos:

  1.   Para indicar que incluya aquí la cabecera. Estos términos son las declaraciones jDoc, que debes conocer para poder entender a Joomla.
  2. Los meta. En primer lugar para que sea compatible con explorer, que aunque ya ni microsoft lo usa, hay muchos de sus clientes que si 😦
    El siguiente, para que la vista sea cómoda en un móvil.
    Los siguientes de autor y redes sociales (Open Graph y Twitter Card Tags)
  3. Los enlaces en php a las hojas de estilo.

Las rutas a las hojas de estilos y otras cuestiones de visualización responsive:

     
addStyleSheet('templates/'.$this->template.'/css/main.css'); 
 ?-->

Esta parte, como en todas las webs no es visible al usuario, solo es de lectura para los navegadores. Así que ahora, empezamos con lo que ve un cliente cuando vista nuestra web.

Cuerpo de web

Para que veamos la estructura de manera simple, esta parte estaría compuesta del siguiente modo:

body de nuestra plantilla Joomla

No intentéis leerlo, lo he puesto muy pequeñito para que podáis ver hasta que punto se puede enredarse el tema si hacemos una web de empresa estándar con todos sus módulos que en algún momento un cliente al navegar por nuestra web puede llegar a ver. Iremos viendo poco a poco.

La cabecera

La estructura HTML5 que creamos en la primera parte de cómo crear tu plantilla joomla con los estilos que nos facilita Bootstrap para una visualización responsive y alguno más que tu hayas personalizado, claro. Lo más interesante es la declaración:


Donde le decimos a Joomla, incluyeel módulo que en archivo templateDetails.xml te dije se llamaba “mainmenu” .

Y así con el resto de la página:

Contenido plantilla joomla

Por supuesto, echamos los cierres de etiquetas que faltan en las imágenes. Y listo!

Como la creación de este archivo, es denso… lo dejamos aquí por hoy para asimilarlo.

Ya solo nos queda empaquetarlo en nuestro joomla y algunas otras gestiones ya dentro del gestor. Por lo que para el próximo día, instala un servidor local si no lo tienes o prepara los datos para instalarlo en un servidor remoto.

Para verlo, instala XAMPP Server (windows – Linux -IOS).