También estoy en: Ver el perfil de Jon González Garrido en LinkedIn

Joomla: Guía de diseño y maquetación. Parte 1

Valora este artículo
(0 votos)
Este es un pequeño artículo que es la primera parte de una guia dedicada a un compañero de trabajo especializado en diseño y maquetación en Wordpress que aún siendo un máquina estará muy contento con esta mini guia de maquetación de diseño en Joomla.

Cuando un diseñador que viene de otros sistemas se encuentra con la necesidad de modificar la maquetación y CSS de un template de Joomla se encuentra con que no sabe donde se está "pintando" el HTML.

En Joomla para encontrar las cosas lo mas importante es identificar qué es para nuestro gestor de contenidos lo que queremos modificar.

Podríamos estar ante una de las siguientes posibilidades:

  • Componentes
  • Módulos
  • Plugins
  • Literales

Empezaré explicando los componentes con una pequeña pista que ayuda a idenficar el tipo de elemento.


¿Qué es un componente?

Cuando desde el panel de administración se crea un nuevo elemento de menú se despliega un listado de opciones disponibles como "tipo de menú". Los componentes son esos "tipos de menús".

En la imágen de la derecha se pueden ver diferentes componentes que pueden ser elegidos como elementos de menú. Es importante saber que por cada componente existirán una o mas vistas. Por ejemplo, en el caso del componente encargado de mostrar los artículos (com_content) existen varias vistas para mostar un solo artículo, listar artículos de una categoría concreta etc.

Una vez que tenemos idenficado que se trata de un componente también resulta sencillo saber como se llama el componente, es suficiente con seleccionar ese tipo de menú en un elemento de menú nuevo y fijarse en fijarse en el enlace que se crea que tendrá la siguiente forma:

index.php?option=com_content&view=article

En el ejemplo en componente se llama content y la vista article. Si se quiere modificar directamente la vista que crea el HTML resultante del componente hay que ir a la siguiente ruta

/components/com_content/views/article/tmpl/default.php

Aún así se recomienda no modificar la vista del componente directamente para no tener problemas en futuras actualizaciones del componente. Resulta mejor opción usar la posibilidad que da Joomla de reescribir la vista del componente desde el template.

Realmente no cuesta nada llevar al template la sobreescritura, puede pasar que en algunos componentes la poca separación de capa de presentación o induso la necesidad de "que funcione y sea barato y rápido" nos haga caer en la tentación de realizar la modificación directamente pero yo lo dejaría solo como último recurso si la sobreescritura no funciona como se desea.

 A pesar de que se explica perfectamente en esta página voy a explicarlo en castellano y de manera resumida y práctica.

 


¿Cómo sobreescribir desde el template la vista de un componente?

Siguiendo con el ejemplo del mostrado de artículos imaginemos que queremos modificar la vista que muestra un artículo cuya ruta hemos comentado pero desde el template. En caso de existir una sobreescritura en el template, Joomla hará caso al template. Además para llevar estos cambios de un template a otro simplemente se debe copiar la carpeta al nuevo template.

En el ejemplo anterior se debería de crear en el template la siguiente estructura:

RUTA_TEMPLATE/html/com_NOMBRE_COMPONENTE/NOMBRE_VISTA/NOMBRE_FICHERO_PHP.php

En el caso anterior crearíamos la siguiente estructura (imaginando el template protostar)

Se copiaría el fichero /components/com_content/views/article/tpl/default.php

A la siguiente ruta del template:

/templates/protostar/html/com_content/article/default.php

En caso de que existan mas de un fichero php como es este caso se recomienda copiar todos para evitar problemas.

Este método funcionará bien siempre que la programación del componente se haya realizado siguiendo las recomendaciones para programar en Joomla y se separen correctamente las diferentes capas. En la mayor parte de los componentes será muy sencillo realizar estas sobreescrituras.

Con esto termino este primer apartado de la guía que espero que os guste y difundais entre vuestros compañeros. No olvideis que teneis a vuestra disposición los botones sociales de Facebook, Twitter y Google+.

También os animo a participar con vuestra dudas y sugerencias en el apartado de comentarios que se muestra justo debajo de cada artículo, no es necesario registrarse para hacerlo.

Ya está disponible la segunda parte de la guia en la que se muestra como realizar esto mismo desde el menú de administración de Joomla 3.x

 

 

 

Visto 2393 veces Modificado por última vez en Miércoles, 11 Junio 2014 06:28
Jon González Garrido

Email Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

Contacto

La mejor manera de contactar conmigo es el formulario de contacto de esta página, aquí.

Acerca de mi

Soy un Ingeniero superior que ha obtenido la ingeniería técnica mediante la UPV/EHU y la superior mediante la UNED.

Mi carrera laboral se ha desarrollado sobre varias tecnologías, en especial PHP, MySQL y Apache.