7 minutos de lectura ( 1348 palabras)

¿Será necesario crear un "paso a paso" para una plantilla Joomla 3?

¿Será necesario crear un "paso a paso" para una plantilla Joomla 3?

“Si”, se que la respuesta es esa para muchos, pero en verdad la respuesta es “No, no es necesario crear un “paso a paso”, para desarrollar una plantilla en Joomla 3”. ¿Porque? pues porque la diferencia entre crear una plantilla para Joomla 2.5 y una para Joomla 3, sólo se separan a partir de la palabra “Bootstrap”.

Pues efectivamente, el desarrollo de una plantilla para Joomla 3, es el mismo de una plantilla para Joomla 2.5, con la excepción de que a la hora de “diseñar” nuestra plantilla en Joomla 3, lo hacemos vía Bootstrap como vía primaria para crearla. Digo “vía primaria” porque al usar Joomla 3, pues tenemos la posibilidad de tener desde el mismo núcleo de Joomla este “framework frontend” disponible para hacer y deshacer todo lo que queramos. Pero esto no quita que podamos utilizar otros “framework frontend” para nuestra plantilla.

Pero ojo, esta “excepción diferencial” puede verse suprimida, si hacemos que nuestra plantilla Joomla 2.5 utilice Bootstrap para su diseño. Acá algunos artículos dedicados a esto: 

Entonces, si quedamos que hacer una plantilla para Joomla 3 es lo mismo que Joomla 2.5, sin duda que todos estos artículos anteriormente puestos, nos ayudan a crear nuestra plantilla compatible con Joomla 3.

Sin embargo, para aquellos que no se han convencido aún, ayudándonos un poco de google podemos encontrar guías o manuales para nuestro desarrollo, acá les pongo algunas: 

Como pueden ver, nuestro paso a paso, ya esta creado en todos lados. Y en caso de que ya hayas desarrollado una plantilla para Joomla 2.5, pues no te será nada difícil, modificarla, o crear una para Joomla 3. Sin embargo quisiera resaltar como es que en Joomla 3, se integra los css y script de bootstrap en nuestra plantilla. En el “Taller de desarrollo de Plantillas” que les puse anteriormente veíamos algunos tips, incluidos estos: 

// Añadir archivos JavaScript del Frameworks Boostrap
JHtml::_('bootstrap.framework');
// Cargar archivos CSS del Framework Boostrap
JHtmlBootstrap::loadCss();

Estos son los hombres que nos hacen falta en el index.php de nuestra plantilla. Ya con estas dos líneas podemos hacer uso del potencial de Joomla 3. Si se dan cuenta, si no ponemos estas líneas, nuestra plantilla sigue funcionando igual en Joomla 3, pero sin poder hacer uso de Bootstrap, por lo menos no de la versión que Joomla trae, la 2.3.2, aunque si podemos incluir la versión 3 de Bootstrap. Veanlo en este artículo: Joomla 3 - Bootstrap 3

¿Satisfecho?

Se que no. Porque lo que buscas en este artículo es ¿cómo crear una plantilla para Joomla 3? y a pesar que te he puesto algunas referencias para este tema, a pesar de que no es necesario un paso a paso para crear una plantilla en Joomla 3, vamos a crear nuestra propia plantilla para Joomla 3. Por supuesto, no profundizaremos en partes que no sean necesarias, o que ya han sido tomadas en los enlace anteriores, pero si las mencionaremos.

Tenía en mente, crearlo con la versión 3 de Bootstrap como bien les había propuesto a ustedes en el enlace anterior, pero hubo un pequeño cambio de planes. Durante la JWC (Conferencia Mundial de joomla) pasaron muchas cosas increíbles, y una de ella es que mostraron una propuesta de plantilla para la Magazine, que se le presentó a los responsables de la Magazine, por parte de un diseñador Hispano establecido en Atlanta, y que por lo menos a mi, me encanto:

Diseño propuesto en la JWC, a los representantes de la Magazine.

¿Bonita verdad? Pero más que bonita, muy bien estructurada, organizada y usable, esto es lo que me encanto de este diseño. Hace un tiempo, yo también diseñe, para mi, un diseño propio de como me gustaría ver la magazine - no soy un experto en el diseño pero en aquel entonces estaba probando Bootstrap - pero sin lugar a duda, este diseño presentado en la JWC se ganó el premio en todos los sentidos. De todas formas acá les muestro mi diseñó (que en si son tres en uno), ya que vamos a utilizar algunos elementos que utilice en el: Magazine Ñ 

“jcmagazine” <- Plantilla Joomla 3 desde 0 -> “Capítulo 1”

Como les decía, el diseño presentado en la JWC, me hizo cambiar de idea, por lo que ahora realizaremos ese diseño en Joomla 3 completamente, es decir, utilizando el Bootstrap que trae en el núcleo. Este diseño también implica que tengamos que utilizar K2 ya que la revista usa este CCK para gestionar sus artículos, por lo que tendremos que plantear nuestro diseño sobre el. Pero ya esto lo veremos en otro artículo de la serie.

Como este artículo ya esta un poco desarrollado y a modo de no extendernos en el, y salirnos del objetivo principal que perseguimos, por ahora solo nos dedicaremos a crear las condiciones para el desarrollo de nuestra plantilla. De esta forma, a partir del “Capítulo 2” empezaremos con cada parte del diseño propuesto.

Como nuestra web es de 0, pues la versión recomendable es Joomla 3.2, por lo que lo primero es tener nuestro sitio montado con Joomla 3.2. Una vez hecho esto, vamos a la carpeta “templates” en la raíz de nuestro sitio. Dentro creamos una nueva carpeta, la cual va a ser nuestra carpeta para la plantilla. En mi caso la he llamado jcmagazine (/misitio/templates/jcmagazine/). Una vez dentro de nuestra plantilla, pues creamos un archivo llamado “index.php” y lo abrimos para editarlo.

Este va a ser nuestro archivo principal, en él se genera toda la plantilla que vamos a crear. Las primeras líneas que colocaremos serán estas: 

index.php

<?php
/**
* @package Magazine.Site
* @subpackage Templates.jcmagazine
*
* @copyright Copyright (C) 2013. All rights reserved.
* @license GNU General Public License version 3
*/

defined('_JEXEC') or die;

// Obtener los parametros de la plantilla
$params = JFactory::getApplication()->getTemplate(true)->params;

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Detectar variables activas
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = $app->getCfg('sitename');

Aquí, no hemos hecho nada, tan solo obtener algunos datos, como los parámetros de la plantilla (estos se definen en el archivo XML) y algunas variables útiles que podremos usar en nuestra plantilla. Si se le hace difícil la comprensión de estas líneas, solo cópiela y péguelo tal cual, ya que más adelante en esta serie, usaremos las mismas variables, y ya entenderá su función.

Más abajo en el mismo archivo ubicamos lo siguiente:

index.php

// Añadir archivos JavaScript
JHtml::_('bootstrap.framework');
$doc->addScript('templates/'.$this->template.'/js/template.js');

La primera línea, es para añadir los script de Bootstrap, alojados en Joomla. La segunda es para añadir el archivo template.js que esta en la carpeta “js” de nuestra plantilla. Como no hemos creado, ni la carpeta ni el archivo, pues lo hacemos ahora.

Más abajo en el mismo archivo ubicamos lo siguiente: 

index.php

// Añadir archivos CSS
JHtmlBootstrap::loadCss();
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
?>

La primera línea, es para añadir los archivos css de Bootstrap, alojados en Joomla. La segunda es para añadir el archivo template.css que esta en la carpeta “css” de nuestra plantilla. Como no hemos creado, ni la carpeta ni el archivo, pues lo hacemos ahora. Resaltar la tercera línea, que es el cierre de la apertura de php, sino, no le funcionará correctamente la plantilla.

Más abajo en el mismo archivo ubicamos lo siguiente: 

index.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" />
</head>

Estas líneas son standars. En las referencias que les puse pueden encontrar argumentos del porqué de estas líneas. Aquí solo hay una excepción, que es esta línea:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" />

la cual la puse porque me gusta mucho trabajar con esta fuente tipográfica. Pero ustedes pueden optar por no ponerla, o poner otra de “Google Font”, como ustedes quieran.

Más abajo en el mismo archivo ubicamos lo siguiente: 

index.php

<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
?>">
<!-- Cuerpo de la plantilla -->
</body>

Bueno ya aqui iria el cuerpo de la plantilla, que por ahora no lo hemos puesto. Note que ya hemos usado las variables que les comentaba más arriba. Como pueden ver, cada variable es asignada, como una clase por separado, ¿Que nos permite esto? Personalización, al tener en cada página, clases diferentes, pues podemos hacer referencias a esa página y crear estilos individuales. De todas formas, si no lo comprende, no se preocupe pónganlo así tal cual, y veremos en el resto de la serie el uso de esto.

Por ahora, ya tenemos nuestro archivo index.php terminado. El otro archivo principal que tenemos que crear, es el templateDetails.xml. De este archivo se habla en todas las referencias que les pase, así que no vamos a entrar en detalle con él por el momento. No obstante, al final de este artículo, pueden descargar la plantilla como quedo despues de esta primera parte, así tienen por donde guiarse.

Con esto es más que suficiente para instalar la plantilla. Ahora vamos a la administración de nuestro sitio, para instalar la plantilla. Como hemos creado la carpeta directamente en nuestro sitio, usaremos la función “Descubrir” para instalar la plantilla. Para esto tiene que ir a Gestor de Extensiones -> Descubrir. Una vez ahí, le damos al botón “Descubrir” para que salga nuestra plantilla, la marcamos y le damos al botón “Instalar”. Con esto hemos acabado de instalar nuestra plantilla correctamente. Por supuesto si la marcamos como plantilla por defecto, en el frontend va a salir todo en blanco porque no hemos hecho nada aún en la plantilla, pero ya esto será a partir del Capítulo 2.

Conclusión

Creo que con este artículo hemos asentado bien las bases para crear nuestra plantilla, y hemos trazado futuros artículos de mucho interés y útiles para todos. Más abajo encontrarán la plantilla tal cual quedó, para sí quieren instalarla o revisarla. Ya en el Capítulo 2, entraremos en materia, así que si quieren pueden auxiliarse de las referencias que les deje, para que en el próximo capítulo podernos entender mucho mejor


Capítulos de la serie hasta el momento

Capítulo 1: ¿Será necesario crear un "paso a paso" para una plantilla Joomla 3?

Capítulo 2: Plantilla "jcmagazine": Creación del menú

0
Master Bootstrap para Joomla 3
 

Comentarios

¿Ya està registrado? Ingresa Aquí
No hay comentarios por el momento. Sé el primero en enviar un comentario.

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/