Para la creación del index.php, lo primero que haremos será insertar el HTML que formará la maquetación de la plantilla. Para eso partiremos desde este layout de Code-Sucks [ descargar ], que posee un diseño básico de tres columnas, barra de navegación, header y footer. Una vez descargado el ZIP, al descomprimirlo veremos dos archivos: 'index.html' y 'main.css'.
A 'main.css' lo renombramos 'template.css' y lo guardamos en la carpeta 'css' creada antes. Más adelante nos centraremos en este estilo en cascada.
Por otro lado abrimos a 'index.html' con nuestro editor, copiamos todo el código HTML y lo pegamos en un nuevo archivo llamado 'index.php'. Lo guardamos en la carpeta principal de la plantilla.
Lo siguiente será borrar todo el contenido de ejemplo y la información en la cabecera de 'index.php' para luego insertar las directivas PHP que cargaran el contenido de Joomla!
Por lo tanto 'index.php' quedará...
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Lo siguiente será ir incorporando las directivas que cargaran toda la información para que la plantilla funcione. Aquí es cuando comienzan muchas de las nuevas caracteristicas en la creación de plantillas para Joomla! 1.5.
<jdoc:include type="head" /> (nueva caracteristica): Esta directiva irá dentro de la cabecera de la plantilla. Cargará el título de la página en cuestión, metatags, feed, y framework. Esto último me parece más que destacable: Joomla! a partir de esta versión decide usar como framework javascript a Mootools . Y esto lo hace de forma nativa, es decir que no nos dá la posibilidad de elegir entre cargarlo o no (a menos que editemos algun archivo fuente). Obviamente no hay que tomarlo para mal, sino al revés, entre lineas el equipo de Joomla! nos esta diciendo que echemos rienda suelta a nuestra imaginación y utilicemos a Mootools para añadir efectos, nuevas propiedades o lo que queramos a la plantilla. En otras palabras, que explotemos todo su potencial. Otro hecho destacable es que ahora no se carga más el favicon del sitio, sino que tendremos que añadir las líneas manualmente para mostrarlo. Es por eso que 'favicon.ico' es uno de los archivos que puede integrar la plantilla.
$this->template: Obtendremos el nombre de la carpeta contenedora de nuestra plantilla. Se puede utilizar para cargar el estilo en cascada, favicon y cualquier archivo que queramos y se encuentre dentro de esta carpeta.
Con esto ya podemos obtener la cabecera de la plantilla, que queda:
$mainframe->getCfg('sitename') (nueva característica): Obtendremos el nombre del sitio en cuestión. Lo utilizaremos para mostrarlo en el header.
<jdoc:include type="modules" name="posición" style="estilo" /> (nueva característica): Con esta directiva estamos indicando la carga de un módulo en particular y de una manera especifica. Esto se establecerá a partir de los parámetros 'name' y 'style'. En el caso del primero, escribiremos la posición de módulos que queremos cargar. Por ejemplo, si deseamos todos los módulo derechos, el parámetro será 'name="right"'. El segundo parámetro posee algunas variantes, el uso de cada una va a depender de nuestras necesidades. Las variedades de estilo pueden ser 'table', 'horz', 'xhtml', 'rounded' y 'raw'. Tanto con 'table' como con 'horz' el contenido del módulo será cargado a través de tablas, la diferencia es que el primer parámetro lo hará de forma vertical (a través de una columna) y el segundo lo hará horizontalmente (a través de una fila). Si utilizamos 'xhtml' el contenido en vez de ser cargado en tablas será insertado en DIVs. El parámetro 'rounded' es similar a 'xhtml' con la diferencia que carga el contenido en varios DIVs anidados. Este último se suele utilizar para realizar bordes redondeados a los módulos a través de imágenes. Finalmente el parámetro 'raw' cargará el contenido solamente sin contenedores ni título. Ejemplo: si queremos insertar en DIVs todos los módulos izquierdos en determinada parte del sitio, la directiva quedará conformada así: <jdoc:include type="modules" name="left" style="xhtml" /> Otro ejemplo: Queremos cargar los módulos que se encuentran en la posición 'top' de manera horizontal: <jdoc:include type="modules" name="top" style="horz" /> En caso de no especificar el estilo, por default el valor será 'table'.
<jdoc:include type="component" /> (nueva característica): Utilizándola cargaremos el contenido principal del sitio (artículos, secciones, categorías, etc). A diferencia de la inclusión de módulos, esta directiva no posee parámetros para manejar en donde cargar el contenido.
Aprendiendo esto ya estaremos resolviendo el 80% de index.php. Mostrando el nombre del sitio, cargando los módulos y el contenido principal en la secciones pertinentes, el body del archivo quedará:
Si cargamos el archivo como plantilla, y utilizando el estilo en cascada que aun no hemos editado, veremos algo similar a esto:
Queria dejar para lo último otra nueva característica, presisamente 'countModules' la cual es una función condicional para realizar acciones dependiendo de los módulos que esten publicados. Ejemplo: Si tenemos publicado los modulos left, right y user1, entonces la plantilla debe ser a 3 columnas. En caso contrario debe mostrarse un diseño a 2 columnas. La escritura de esta función es:
countModules
<?phpif($this->countModules(‘condición’)) : ?>
si se cumple la condicion, realizar una acción
<?phpelse : ?>
si no se cumple, realizar otra acción
<?phpendif; ?>
La condición puede ser:
countModules('left'): Se cumple la condición si existe un módulo publicado en la posición 'left'
countModules('left and right') : Se cumple la condición si existe un módulo publicado en la posición 'left' y 'right'
countModules('left or right') : Se cumple la condición si existe un módulo publicado en la posición 'left' ó 'right'
countModules('left + right') : Devuelve el número total de módulos en las posiciones 'left' y 'right'
Seguramente más adelante hagamos una plantilla práctica usando esta metodología.
Comentarios (7)
