The Joomla! Community Magazine™

Cómo crear una plantilla front-end para Joomla! desde cero (parte 3)

Escrito por | Monday, 01 December 2014 00:00 | Publicado en Diciembre 2014
En esta oportunidad aprenderemos cómo configurar nuestra plantilla para poder empaquetarla e instalarla desde el gestor de extensiones. Y también veremos cuán fácil es usar las declaraciones Jdoc de Joomla! para mostrar el contenido dinámico de nuestro sitio.

El corazón de nuestra plantilla: el archivo index.php

Como podemos observar en la figura, Boilerplate ya ha hecho el trabajo inicial por nosotros y nos brinda un archivo index.php configurado de tal manera que podamos concentrarnos en la maquetación.

La etiqueta <meta name=”viewport” content=”width=device-width, initial-scale=1”> permitirá que nuestra plantilla se adapte al ancho del dispositivo; en otras palabras, será una plantilla adaptable o “responsive” (por favor, no digas que es ¡¿“responsiva”?! :D).

El index.php también está optimizado para mostrarse correctamente en cualquier navegador (css/normalize.min.css y js/vendor/modernizr-2.6.2.min.js) y trae una hoja de estilos (css/main.css) para que podamos agregar nuestras reglas CSS. También incluye dos archivos en JavaScript por si deseamos agregarle más funcionalidad a nuestra web (la librería js/vendor/jquery-1.11.1.min.js y js/main.js).

figura-01-indexphp-original

Ahora nuestro trabajo será modificar este archivo index.php para que el sistema Joomla! lo reconozca como plantilla.

Las tres primeras líneas del index.php

Si revisamos la documentación oficial de Joomla!, una plantilla debe comenzar con las siguientes líneas:

  • <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> es una instrucción de seguridad en PHP que evita que los intrusos accedan a nuestro código.
  • <!DOCTYPE html> es la declaración del tipo de documento. En este caso, se indica que es un documento HTML5.
  • <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > inicia la etiqueta HTML e identifica automáticamente cuál es el idioma de nuestro.

Luego de realizar estos cambios, nuestro index.php debe verse así:

figura-02-indexphp-primer-cambio

Aunque todavía falta mucho por hacer; con estas tres líneas ya podemos subir nuestra plantilla a nuestro sitio desde el panel de administración de Joomla!

Empaquetar e instalar nuestra plantilla

Como cualquier extensión de Joomla!, en primer lugar tenemos que comprimir el contenido de la carpeta miplantilla dentro del archivo miplantilla.zip y lo guardamos en algún lugar de nuestro ordenador (por ejemplo, en el escritorio de Windows).

figura-03-miplantillazip

En segundo lugar, desde el panel de administración de Joomla!, ingresamos al gestor de extensiones (Gestor de extensiones: Instalar) y “subimos” el archivo miplantilla.zip.

figura-04-extension-manager

figura-05-extension-manager-zoom

En tercer lugar, ingresamos al Gestor de plantillas (Gestor de plantillas: Estilos) y establecemos nuestra plantilla como estilo por defecto del sitio.

figura-06-template-manager-styles

figura-07-template-manager-styles-zoom

Para comprobar que todo salió bien, abrimos nuestro sitio en el navegador y deberíamos ver una página con fondo blanco que muestra el texto de la imagen.

figura-08-hello-world

Es importante tener presente que nuestra plantilla se encuentra en la carpeta templates/miplantilla dentro de la instalación de Joomla!

figura-09-templates

Antes de continuar, tengamos en cuenta lo siguiente:

  • Si nuestra instalación de Joomla! está en un servidor local (localhost), podemos trabajar directamente con los archivos ubicados en la carpeta templates/miplantilla/.
  • En el caso de que hayamos instalado Joomla! en un servidor remoto, cada vez que modifiquemos el contenido de algún archivo de nuestra plantilla será necesario actualizar dicho archivo vía FTP (por ejemplo, mediante un cliente FTP como FileZilla).

Ahora sí, continuaremos con la configuración correcta del archivo index.php.

El <head> del index.php

Toda la información de nuestro documento se encuentra entre las etiquetas <head>...</head> dentro del index.php.

figura-10-head-original

Tenemos que reemplazar las cuatro líneas sombreadas en la imagen por la declaración Jdoc de Joomla! <jdoc:include type="head" /> que coloca automáticamente toda la información correcta en el encabezado <head>: el título de la página, la información de las meta-etiquetas (description, generator, etc.) y las librerías JavaScript del sistema.

Después del cambio, tendremos lo siguiente:

figura-11-head-jdoc

Opcionalmente, es una buena práctica incluir las hojas de estilo del sistema interno ubicadas, por defecto, en la carpeta templates/system/css de la instalación de Joomla!

¿Cómo lo hacemos? Pues, después de la etiqueta <meta name=”viewport”...> agregamos estas dos líneas:

  • <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> para cargar la hoja de estilos system.css.
  • <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> para cargar la hoja de estilos general.css.

Nuestro index.php tiene ahora este aspecto:

figura-12-head-system-css

Para cargar correctamente las hojas de estilo que nos brinda Boilerplate (ubicadas en la carpeta templates/miplantilla/css) debemos agregar la instrucción PHP <?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/ a las rutas de enlace en el atributo href:

  • <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/normalize.min.css" type="text/css" /> para cargar el archivo css/normalize.min.css.
  • <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/main.css" type="text/css" /> para cargar el archivo css/main.css.

figura-13-head-boilerplate-css

Finalmente, para cargar correctamente los <script> JavaScript debemos agregar la instrucción PHP <?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/ a los atributos src:

  • <script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/vendor/modernizr-2.6.2.min.js"></script> para cargar el archivo js/vendor/modernizr-2.6.2.min.js.
  • <script>window.jQuery || document.write('<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/vendor/jquery-1.11.1.min.js"><\/script>')</script> para cargar el archivo js/vendor/jquery-1.11.1.min.js.
  • <script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/main.js"></script> para cargar el archivo js/main.js.

figura-14-head-boilerplate-js

Ahora, si vemos nuestro sitio en el navegador observaremos que el estilo de la fuente tipográfica ha cambiado; lo que quiere decir que el index.php carga correctamente las hojas de estilo y las librerías JavaScript que utilizará nuestra plantilla.

figura-15-hello-world-new

El <body> del index.php

Todo el contenido de nuestro sitio se muestra entre las etiquetas <body>...</body> en el index.php.

En la primera parte de esta serie de artículos vimos que nuestro sitio consta de cuatro secciones:

  • Inicio
  • Portafolio
  • Blog
  • Contacto

Y, en principio, además del contenido también se desea mostrar dos módulos:

  • El acceso de usuarios.
  • Una lista con los artículos recientes del blog.

Empecemos borrando la línea <p>Hello world! This is HTML5 Boilerplate.</p> que, por defecto, coloca Boilerplate en el <body>:

figura-16-body-en-blanco

Ahora escribimos la etiqueta semántica <header> que contendrá:

  • un <div class=”logo”> con una imagen, el título principal del sitio y un párrafo a manera de “eslogan”;
  • y la etiqueta semántica <nav class=”mainmenu”> con el menú principal.

figura-17-body-header

El contenido del sitio se encuentra dentro de la etiqueta semántica <section class=”main”> dividida en tres partes:

  • la etiqueta <article class=”content”> mostrará el contenido principal del sitio;
  • la etiqueta <aside class=”left”> mostrará el módulo de acceso de usuarios;
  • y la etiqueta <aside class=”right”> mostrará la lista de los artículos recientes del blog.

figura-18-body-section

El pie de página se mostrará en la etiqueta semántica <footer>. El <body> tendrá el siguiente aspecto.

figura-19-body-footer

Si cargamos nuestro sitio en el navegador, observaremos lo siguiente:

figura-20-vista-previa-inicial

Antes de continuar, recordemos que en la segunda parte de esta serie definimos tres posiciones para los módulos en el archivo templateDetails.xml:

figura-21-template-details-xml

¿Cómo hacemos para mostrar el contenido dinámico de nuestro sitio? Es muy sencillo. Usaremos las declaraciones Jdoc de Joomla!

  • Para mostrar el módulo del menú principal en la posición “mainmenu”, reemplazamos la frase “MENU PRINCIPAL” por la declaración <jdoc:include type=”modules” name=”mainmenu” style="xhtml" />.
  • El contenido principal se carga en el componente principal de Joomla!; por lo tanto, para mostrarlo reemplazamos la palabra “CONTENIDO” por la declaración <doc:include type=”component” />. No es necesario definir una posición para el componente.
  • Para mostrar el módulo de acceso de usuarios en la posición “left” reemplazamos la frase “ACCESO DE USUARIOS” por la declaración <jdoc:include type=”modules” name=”left” style="xhtml" />.
  • Para mostrar el módulo de la lista de artículos recientes del blog en la posición “right” reemplazamos la frase “ARTICULOS RECIENTES” por la declaración <jdoc:include type=”modules” name=”right” style="xhtml" />.

figura-22-body-final

Sin embargo, si probamos nuestro sitio en el navegador, veremos que se muestra el contenido principal del sitio pero no aparece ninguno de los módulos.

figura-23-vista-previa

Desde el panel de administración de Joomla! ingresamos al gestor de módulos (Gestor de módulos: Módulos) y observamos que todavía no hemos asignado las posiciones de nuestra plantilla a los módulos.

figura-24-module manager-posiciones-iniciales

Según lo establecido líneas arriba, la asignación debe ser:

  • Módulo “Main Menú” en la posición “mainmenu”.
  • Módulo “Login Form” en la posición “left”.
  • Módulo “Artículos recientes” en la posición “right”.

Luego de hacer los cambios correspondientes, el gestor de módulos debería quedar así:

figura-25-module manager-posiciones-finales

Y ahora sí, al cargar nuestro sitio en el navegador observaremos que se muestra el contenido principal y los tres módulos.

figura-25-1-vista-previa-sin-logo

Podemos observar que todavía no se muestra la imagen del logotipo; solamente se muestra el atributo alt=”Logotipo” de la etiqueta <img>. Esto quiere decir que la ruta del archivo de la imagen es incorrecta. Para solucionarlo debemos agregar la instrucción PHP <?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/ al atributo src de la etiqueta <img>:

figura-26-correccion-img

Finalmente, la estructura de nuestro sitio está completa, según los requerimientos iniciales:

figura-27-vista-final

Nuestro archivo index.php ha quedado así:

figura-28-index-final

En la cuarta parte de esta serie de artículos nos dedicaremos exclusivamente a trabajar en la hoja de estilos para que nuestra plantilla se adapte correctamente a cualquier dispositivo conectado a Internet.

Hasta la próxima. ¡Abur!

Visto 21748 veces
Etiquetado como Spanish, Desarrollador
César Vargas-Machuca B.

César Vargas-Machuca B.

Freelance web developer (front-end). I am focused on responsive web design, SEO and Joomla!

Frequent reader. Passionate about good music. Amateur chef. Friend of animals. Overly punctual. I hate spam. Single yesterday and today. Peruvian, always!

Desarrollador web independiente (front-end). Diseño websites en Joomla!, adaptables al entorno del usuario y optimizados para los motores de búsqueda.

Lector frecuente. Apasionado por la buena música. Cocinero aficionado. Amigo de los animales. Excesivamente puntual. Detesto el spam. Soltero ayer y hoy. Peruano, ¡siempre!

Cambiar de idioma

¡Suscríbase!
Su correo electrónico:
Invalid Input

contribuya-articulo p