Plantillas en Joomla

Plantillas Joomla

Las plantillas en Joomla son extensiones que permiten cambiar el apartado visual del CMS. El archivo index.php de la plantilla de Joomla, determina donde cargarán los componentes y los módulos. Las plantillas en Joomla funcionan tanto para la parte del Front-end como para el Back-end, aunque Joomla permite tener una plantilla diferente para cada uno de los dos apartados.

Ubicación Plantillas en joomla

La ubicación de nuestra plantilla sera en la carpeta templates/plantilla/, la carpeta de nuestra plantilla tendrá la siguiente estructura:

  • CSS: carpeta donde tendremos las hojas de estilo.
  • img: carpeta donde tendremos las imágenes relacionadas con la plantilla.
  • js: carpeta donde tendremos todos los archivos con nuestras funciones de javascript/jQuery.

estrucura plantillas joomla

index.php

Según la documentación de Joomla el archivo debe empezar con las siguientes lineas:

  • <?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?> con este linea usaremos una función de seguridad de PHP para que nadie acceda a nuestro código.
  • <!DOCTYPE html> es la declaración del tipo de 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 nuestro idioma.

Head

Dentro de la etiqueta head introduciremos las siguientes lineas:

  • <jdoc:include type=”head” /> que coloca automáticamente toda la información correcta en el head, como el titulo, meta-etiquetas, importación de librerías JavaScript para el sistema.
  • <link rel=”stylesheet” href=”/<?php echo $this->baseurl ?>/templates/system/css/archivo a importar.css” type=”text/css” /> para importar las hojas de estilo por defecto de Joomla.
  • <link rel=”stylesheet” href=”/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/archivo a importar.css” type=”text/css” /> para importar nuestras hojas de estilo personalizadas.
  • <script src=”/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/vendor/archivo a importar.js“></script> donde importaremos nuestras funciones JavaScript/jQuery.

Body

El contenido de nuestro sitio se muestra entre las etiquetas <body>, en la que tendremos tres partes principales.

  • Inicio
  • Blog
  • Contacto

Y dos módulos.

  • Acceso de usuarios.
  • Artículos recientes

Dentro del body tendremos un header que contendra, un <div class=”logo”> con el logo, el título principal del sitio y un párrafo de “eslogan” y el <nav class=”mainmenu”> con el menú principal.

El contenido del sitio se encuentra dentro del <section class=”main”> dividida en tres partes:

  • la etiqueta <article class=”content”> mostrará el contenido principal.
  • la etiqueta <aside class=”left”> con el acceso de usuarios.
  • y la etiqueta <aside class=”right”> con la lista de artículos recientes.

El pie de página se mostrará en la etiqueta <footer>.

Para mostrar el contenido dinamico de la web usaremos las declaraciones de Jdoc.

  • Mostraremos el módulo del menú principal con la declaración <jdoc:include type=”modules” name=”mainmenu” style=”xhtml” />.
  • El contenido principal usaremos la declaración <doc:include type=”component” />.
  • Mostraremos el módulo de acceso de usuarios usando la declaración <jdoc:include type=”modules” name=”left” style=”xhtml” />.
  • Para mostrar el módulo de la lista de artículos recientes usamos la declaración <jdoc:include type=”modules” name=”right” style=”xhtml” />.

Una vez tenemos todo esto, veremos todo el contenido de nuestra pagina web, pero estara todo alineado al lado y sin ningun tipo de formato, posicionamiento, tamaños. Ahora tocara empezar a añadir nuestra lineas de codigo CSS para dar formato al estilo visual de la web.

Share