Día: 21 de octubre de 2012 • JnjSite.com

Hablando sobre la creación de páginas web con CMSs. Podemos llegar a ver que la cantidad de CMSs que hay para poner en marcha una web sin programar nada de código fuente es muy grande. He visto que los principales vienen siendo WordPress, Drupal y Joomla. Y en orden de gente que los usa, Joomla viene ganando, o por lo menos eso es lo que he leido en varias páginas de habla hispana y a fecha de hoy.

Me decidí a aprender Joomla en un principio, pero acabé probando WordPress y Drupal también. El Joomla para el que va éste post es la versión 2.5 y tal vez sirva también para los de la 1.5 y en futuro. Yo de momento la versión que tengo instalada es la 2.5 y es la que he usado para escribir éste tutorial.

Vamos a comenzar por ver la estructura en líneas generales de Joomla, si vamos al directorio, por los nombres podremos hacernos una idea de que la carpeta templates/ (plantillas en castellano) es la carpeta en cuestión que nos interesa.

administrator/
cache/
cli/
components/
images/
includes/
language/
libraries/
logs/
media/
modules/
plugins/
templates/
tmp/
uploads/
configuration.php
favicon.ico
htaccess.txt
index.php
LICENSE.txt
README.txt
robots.txt
web.config.txt

Dentro de la carpeta tenemos las carpetas correspondientes a todas las plantillas que tenga instaladas nuestro Joomla. Podemos editarlas directaremente de aquí, o a través del administrador de Joomla, actualizamos la página y los cambios se verán.

La plantilla ‘atomic’ es una plantilla básica, sin muchas florituras, para que hagamos a partir de ella, la nuestra propia. Pero mirando los archivos que la componen podemos ver que hay demasiado código fuente si es que estas haciendo tu primera plantilla, así que vamos a crear otra más simple todavía y luego le podrás añadir todo lo que quieras.

La plantilla básica ‘atomic’ que proporciona Joomla tiene la siguiente estructura:

css/ <- aquí van las hojas de estilo
html/ <- páginas html peladas
images/ <- imágenes de la plantilla

js/ <- scripts de javascript

language/ <- archivos para las traducciones
component.php <- para mostrar el contenido de los componentes
error.php <- página de error
favicon.ico <- el icono de la web
index.html <- el index en html
index.php <- el index en php
template_preview.png <- vista previa de la plantilla
template_thumbnail.png <- imagen pequeña de la vista previa
templateDetails.xml <- descripción de la plantilla, para uso interno

Hay plantillas muy grandes, con muchos añadidos, pero ésta que suponemos básica vamos a reducirla de la manera siguiente. Sólo necesitamos lo siguiente para nuestra nueva plantilla:

css/
favicon.ico
index.php
template_preview.png
template_thumbnail.png
templateDetails.xml

Todo ésto lo creamos en una carpeta nueva, yo la he llamado mynew/ dentro de la carpeta templates/

Y dentro de la carpeta css/ vamos a crear un archivo llamado ‘template.css’ para hacer la presentación mediante CSS. No se recomienda poner la estructura de una página web mediante tablas ni directamente formateando el archivo index.php. Ésto es porque no todos los navegadores interpretan exactamente igual las etiquetas HTML, sin embargo mediante CSS tenemos un control mucho mejor, afinando incluso pixel a pixel las posiciones y tamaños de todo. Así que vamos con esto y veremos que simple va a quedar y se va a entender cómo funciona todo.

El archivo index.php de ejemplo que vamos a usar es:

<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»

xml:lang=»<?php echo $this->language; ?>» lang=»<?php echo $this->language; ?>» >

<head>

<jdoc:include type=»head» />

</head>

<body>

</body>

</html>

No voy a explicar en éste minitutorial cómo se maqueta con CSS porque es muy extenso. La idea es que hay que poner todo con DIVs y esos DIVs se posicionan en el navegador mediante el archivo CSS que luego veremos.

Si queremos usar un archivo desde el index.php debemos usar la instrucción PHP: <?php echo $this->baseurl ?> como se usa en el ejemplo anterior, por ejemplo, para incluir el archivo template.css

Las posiciones vienen definidas por: <jdoc:include type=»modules» name=»nombrePosicion» /> y podemos poner tantas posiciones como queramos.

La posición principal que va a mostrar el contenido viene definida por: <jdoc:include type=»component» /> que sólo la vamos a poner una vez.

Ahora nos queda hacer el CSS y el templateDetails.xml. El favicon.ico y los archivos PNG, son imágenes, el favicon es el icono que sale en el navegador cuando alguien nos visita en la página, y los archivos PNG son los vistas previas, en grande y pequeño, que muestra Joomla dentro del gestor de plantillas. Así que seguimos con el CSS (hoja de estilo para los amigos) llamado ‘template.css‘, por ejemplo ponemos:

#arriba {

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 30px;

background-color: blue;

}

#izquierda {

position: fixed;

left: 0px;

top: 30px;

width: 100px;

height: 100%;

background-color: green;

}

#derecha {

position: fixed;

right: 0px;

top: 30px;

width: 100px;

height: 100%;

background-color: red;

}

#contenido {

margin: 40px 110px 40px 110px;

background-color: grey;

}

#abajo{

position: fixed;

left: 0px;

bottom: 0px;

width: 100%;

height: 30px;

background-color: blue;

}

El archivo templateDetails.xml es el archivo que define todo lo que necesita Joomla para poner las cosas en las posiciones en concreto y los contenidos. Un ejemplo para mi plantilla que he hecho llamada ‘mynew’ es:

<?xml version=»1.0″ encoding=»utf-8″?>

<name>mynew</name>

<author>Yo mismo</author>

<authorEmail>Aquí v@ tu email .com</authorEmail>

<authorUrl>http://elblogdejnj.blogspot.com</authorUrl>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>favicon.ico</filename>

<filename>template_preview.png</filename>

<filename>template_thumbnail.png</filename>

</files>

<position>arriba</position>

<position>izquierda</position>

<position>derecha</position>

<position>abajo</position>

<position>contenido</position>

</positions>

</extension>

Llegado éste punto, acabamos de crear la nueva carpeta dentro de templates/ y hemos puesto todos estos archivos. Ahora resulta que tal cual Joomla no ve la plantilla dentro del administrador de plantillas. Podemos ir al Gestor de Extensiones y darle a Encontrar, con lo que Joomla buscará todo lo que hayamos puesto manualmente sin usar el instalador de Joomla. Ahora ya veremos la nueva plantilla en el Gestor de Plantillas, la ponemos como plantilla del sitio y nuestro sitio tendrá la apariencia que acabamos de hacer.

Ahora podemos editar éstos archivos directamente, añadirles imágenes, cambiar la hoja de estilos CSS, las posiciones, etc.. y sólo con refrescar la página veremos los cambios.

Otra opción para usar ésta plantilla, es comprimir el directorio donde está, y después instalarlo con el gestor de extensiones. Es decir, en el ejemplo anterior, hemos creado el directorio mynew/ dentro de templates/, comprimimos el directorio mynew/ con todos los archivos que hemos puesto y nos quedará, en éste caso, el archivo mynew.zip con toda la plantilla. Éste archivo comprimido es el que usamos en el gestor de extensiones para instalar la plantilla.

Para terminar, si todo ha ido bien, entonces tenemos que ver algo parecido a lo siguiente en nuestro navegador:

Sólo queda poner en cada posición los módulos que queramos usando Joomla. En las posiciones ahora tendremos: arriba, izquierda, derecha, contenido y abajo; que son los valores que hemos usado en el index.php y hemos puesto también en el ‘templateDetails.xml’. Ahora todo es imaginación y con buena documentación sobre CSS podremos hacer que nuestra página con Joomla tenga una apariencia única, totalmente personalizada, con efectos 3D o cualquier otra cosa que se pueda hacer con HTML, Javascript, CSS, etcétera…

Ésto es todo un mundo, las plantillas, los editores de plantillas, maquetación, etcétera… hay mucha información por Internet. Espero que haya servido.

Un saludo.
Hasta la próxima

¡Suscríbete a las novedades!