Crear tu propia plantilla para Joomla, 1a parte

Crear plantillas para joomla personalizada a tu diseño es lo que veremos en esta serie de artículos, ya que como  maquetadora,  es la mejor manera de conocer un gestor de contenidos.

En este en concreto, vamos a ver la estructura de las carpetas en el servidor.

Descargar librerías

Para crear plantillas para joomla, lo primero es crear el proyecto en el servidor, normalmente uno de desarrollo para que cuando ya esté todo listo simplemente haya que subirlo al de producción. Nuestro proyecto será, cómo no, en HTML5+Bootstrap, necesitaremos las librerías y archivos básicos/standar que bien te los puedes descargar directamente de bootstrap o utilizar esta herramienta que te descarga prácticamente la estructura: https://html5boilerplate.com/

Para que no te descargue un montón de archivos que no te van a servir, dale a personalizar:

plantillas Joomla 1

Pulsamos en la opción Classic y se nos despliegan otras opciones:

plantillas Joomla 2

Descmarcamos todas menos: No Template / Modernizr

Y descargamos:

plantillas Joomla 3

Creamos la estructura del sitio en nuestro servidor

Así tenemos la estructura mínima necesaria:

plantillas Joomla 4

Tres carpetas: img, CSS y js y el index.html

Dentro de js y css tenemos los archivos que nos interesa para su correcta visibilidad:

Archivos css para plantilla para joomla

 

Ya está en ti si quieres añadir jquery y bootstrap y se incorporarán a su correspondiente carpeta.

Información de interés para crear plantillas para joomla

Debes saber que los archivos .min. son los mismos archivos pero comprimidos que los que no la llevan y tienen el mismo nombre.

A menudo me han preguntado porqué escribes CSS en una línea, por la velocidad de carga de la web, por lo mismo que los archivos a conservan en el servidor publico deben ser los archivos .min.

Un proyecto de empresa, no suele llevar sólo una página de CSS lleva varias, cada una su función, ya que las webs de gran envergadura no necesitan cargar todos los CSS para todas las páginas, hay css para la estructura, otra para algún módulo/sección/plugin en concreto, otra para la función resert/responsive, otra para las fuentes, otra para etc.. según el grado de envergadura de los proyectos.

Es decir, se hace para reducir peso de archivos, igual que optimizamos las imágenes aunque nos parezcan poco pesadas, hay que encontrar el peso óptimo de css.

Así que, para aprender y entendernos, los estilos en cada línea, pero una vez quieras hacer un proyecto final, comprimelo todo y edita sobre éste ya en una línea. Al principio es un choque visual, luego te acostumbras.

Cuando tengas tu web lista, verifica la velocidad de carga.

Puntos a tener en cuenta:

  • Si quieres elimina normalize.css porque lo tienes en normalize.min.css o déjalo, pero son lo mismo.
  • Cambia la extensión del index.html a index.php
  • Crea un archivo templateDetails.xml
  • Guardalo a la altura de index.php aunque esté vacío.
  • Crea una imagen favicon.ico al mismo nivel de index.php
  • Crea un logo para tu web en su carpeta de img

Final de la creación del sitio web de Joomla en tu servidor.

plantillas para joomla 6

Por seguridad aseguraté de crear un archivo index.html en cada carpeta, vacío no tiene que contener nada.

Una vez vista la estructura necesaria, trabajaremos principalmente con tres archivos:

  • templateDetails.xml: que contiene la información de la plantilla, la relación de las zonas de nuestra plantilla.
  • index.php: es la plantilla lo que pondriamos en HTML + una serie de condiciones que entiene joomla.
  • CSS/main.css: la hoja de estilos principal, dependiendo de la embergadura del proyecto ya puedes crear otras.

Con todas las carpetas preparadas, sólo nos queda empezar con nuestra maquetación HTML5 y CSS3, así iremos desarrollando lo que será nuestra plantilla para joomla, aunque lo veremos en el siguiente artículo.

En esta sección, de maquetación web te dejo algunos artículos que pueden ayudarte con el HTML básico y con el CSS3

Enlaces de interés:

Anuncios