Joomla! 3 - Bootstrap 3
Recientemente salió la versión 3 de Bootstrap con grandes cambios incluidos. Como todos conocemos, Joomla 3 integró a Bootstrap dentro del núcleo, creándose así la librería JUI (Joomla User Interface). Pero, Joomla por el momento no va a actualizar a esta versión, lo cual no implica que no podamos crear nuestras propias plantillas utilizando Bootstrap 3.
------------
NOTA: El objetivo de este artículo es mostrar cómo realizar una plantilla desde 0 sin utilizar la librería JUI, incorporando a Bootstrap 3 en su lugar. Por consiguiente pasaremos algunas cosas por alto, asumiendo que tiene algún conocimiento con respecto a la creación de plantillas para Joomla.
------------
Para utilizar Bootstrap en el desarrollo y diseño de una plantilla para Joomla 3, solo necesitamos incluir estas líneas dentro del archivo index.php de nuestra plantilla:
// Carga los archivos CSS de bootstrap
JHtmlBootstrap::loadCss();
// Añade el archivo Javascript de bootstrap
JHtml::_('bootstrap.framework');
Como bien puedes ver en los comentarios de cada línea, uno es para los archivos CSS y el otro para el Javascript. Con esto dentro de nuestra plantilla, ya la podemos desarrollar usando las clases y demás estructuras, que nos brinda este framework front-end.
Como bien puedes deducir, si no incluimos estas líneas, pues entonces no se carga la librería JUI (la cual se encuentra en la carpeta /raíz-joomla/media/jui/ ) en nuestra plantilla, por ende, no hay Bootstrap. Por tanto, este es el primer paso, no incluir estas líneas dentro de nuestro archivo index.php.
Ahora que no tenemos al JUI presente, pues es hora de integrar la nueva versión de Bootstrap. Para ello, podemos hacerlo de distintas formas.
Descargando los archivos
Descargar los archivos de “http://getbootstrap.com” y ubicarlos en las carpetas css y js respectivamente, que se encuentran dentro de la carpeta de la plantilla, para poder hacerles referencia dentro del index.php. Si lo hacemos así, el index.php quedaría de la siguiente forma:
<?php
defined( '_JEXEC' ) or die; $doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction; // Añadiendo las hojas de estilos CSS
$doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.min.css'); ?> <!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; ?>">> <html>
<head>
<jdoc:include type="head" />
</head> <body> <!--ESTRUCTURA Y CONTENIDO DE LA PLANTILLA--> <!--Archivos javascript
================================================== -->
<!-- Ubicado en lo último de la página para no afectar en la velocidad de su carga -->
<?php $doc->addScript('templates/'.$this->template.'/js/bootstrap.min.js'); ?> </body>
</html>
Como pueden ver, les he marcado las líneas necesarias para incluir ambos archivos desde sus carpetas en donde se encuentran, que en este caso son “css” y “js”. A partir de aquí ya pueden estructurar su plantilla utilizando el framework Bootstrap en su versión 3.
Bootstrap CDN
¡Exacto!. A través de esta vía Bootstrap tiene soporte CDN, gracias a NetDNA, que amablemente se lo ofrecieron. Si utilizamos esta genial opción, solo tendríamos que incluir en nuestro archivo index.php lo siguiente:
<?php
defined( '_JEXEC' ) or die; $doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction; // Añadiendo las hojas de estilos CSS
<link rel="stylesheet" href="/http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> ?> <!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; ?>"> <html>
<head>
<jdoc:include type="head" />
</head> <body> <!--ESTRUCTURA Y CONTENIDO DE LA PLANTILLA--> <!--Archivos javascript
================================================== -->
<!-- Ubicado en lo último de la página para no afectar en la velocidad de su carga -->
<script src="/http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body>
</html>
Y listo. Con esto ya tenemos a Bootstrap 3 a nuestra disposición. ¿Ventaja de este método? pues, la que más me gusta a mi, “Más velocidad de carga”
Ahora solo tenemos que dirigirnos a la nueva documentación de Boostrap 3 y dejar que nuestra imaginación nos guíe.
¿Este es el final?
Pues la respuesta a esta pregunta es “Depende”. He estado haciendo una plantilla para practicar en Joomla 3, utilizando a Bootstrap 3 en conjunto con Font Awesome (otro que me encanta), a la cual la he llamado “jSpanish”. Acá pueden verla.
Ahora, si ustedes les parece bien, puedo hacer una serie de artículos explicando el desarrollo de cada apartado que he puesto en el menú, empezando por el de “Inicio”. La plantilla no es gran cosa, pero sí necesaria para entender lo básico y un poquito más allá. Ya que incluye, por ejemplo, overrides a extensiones del núcleo, sobre todo al “com_content”.
Pero esto depende de lo que ustedes piensen. Así que si les parece bien, me lo hacen saber a través de los comentarios del artículo, y con gusto lo haré. No solo les explicaré lo que tengo hecho, sino que también realizare sugerencias que ustedes me puedan dar, sobre alguna duda, sobre algún pedazo de código…..sobre cualquier cosa que ustedes me digan.
¡Así que ustedes deciden! :)
Sobre el autor
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comentarios