Creación de una plantilla para Joomla 3. Una serie que comienza, donde entre todos vamos a aportar lo mejor de la creación de plantillas en Joomla 3. Y no solo en Joomla 3, ya que mientras avancen las versiones de Joomla, iremos actualizando nuestra plantilla.

En el artículo pasado, establecimos las bases para nuestra plantilla, por lo que podemos ir directamente al grano en este. La plantilla que usaremos para explicar cada paso, esta al final en el artículo pasado, como archivo adjunto.

Importante resaltar que este tipo de artículos son dedicados a aquellos que tengan un conocimiento básico de lo que aquí se habla, ya que es imposible realizar este tipo de artículos para usuarios noveles. No obstante, cualquier duda o problema, no duden en comentarlo en el artículo.

Este artículo lo dedicaremos para desarrollar los menús o el "header" de nuestro sitio.

Resultado Final (CLic para ampliar la imagen)

Editar archivo "index.php"

Primeramente abriremos el archivo index.php de nuestra plantilla "jcmagazine". Una vez dentro nos paramos en la línea 54, y borramos el comentario ( <!-- Cuerpo de la plantilla --> ) que ahí aparece, para escribir el código de nuestro "header". Una vez hecho esto, en esa misma línea ubicamos lo siguiente: 

<!-- Top Menu -->
<nav class="navbar navbar-inverse navbar-fixed-top">

</nav><!-- End Top Menu--> 

<!-- Title, download, demo -->
<header class="header">

</header><!-- End Title, download, demo --> 

<!-- Main Menu -->
<div class="subnav affix-top" data-spy="affix" data-offset-top="18">

</div><!-- End Main Menu -->

Como ven, ya definimos los tres bloques que conforman nuestro "header", el menú superior, la parte donde sale el título del sitio y los botones de descarga y del demo de Joomla y el menú principal del sitio. En esos tres bloques trabajaremos en este artículo. Resaltar que estamos usando etiquetas HTML 5 en nuestra plantilla.

Comencemos por el "Top Menu" o menu superior. Anteriormente se pudieron dar cuenta, que en el menu superior hemos puestos algunas clases en la etiqueta "nav". Estas clases pertenecen al framework bootstrap, y pueden ver su uso aquí. No es objetivo del artículo, explicar con detalles la funcionalidad de cada parte de este framework, ya que su documentación es amplia, pero ampliaremos algunos detalles que sean necesarios. Como por ejemplo, la clase "navbar-fixed-top", la cual fija nuestro menú en la parte superior de la pantalla, lo que hace que que el menú se quede fijo en ese lugar mientras damos scroll en nuestra página, por lo que siempre tendremos este menú visible en la pantalla.

Dentro de la etiqueta "nav" ubicamos lo siguiente: 

<!-- Top Menu -->
 <nav class="navbar navbar-inverse navbar-fixed-top"> 
   <div class="navbar-inner">
      <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </a>
 
         <div class="nav-collapse">
 
            <!-- posicion del menu superior -->
 
         </div><!--/.nav-collapse -->
      </div><!--/.container -->
   </div><!--/.navbar-inner -->
</nav><!-- End Top Menu-->

La parte que esta en rojo y en verde es lo que hemos añadido dentro de la etiqueta "nav". La parte en rojo, lo hemos extraido de bootstrap a partir del mismo enlace que les puse anteriormente, y es utilizado para darle la funcionalidad a nuestro menú de que sea "responsive". La parte en verde, pueden darse cuenta que es un comentario, en el cual hemos señalado que en ese lugar vamos a declarar la posición para el "Top Menu". Esto lo haremos después. 

Ya con esto, tenemos listo la estructura del menu superior. Si visitamos el sitio ahora, veremos una línea gruesa en negro en la parte superior de nuestro sitio, esto es una buena señal ;).

Menú Superior (Clic para ampliar la imagen)

Lo siguiente es la parte en donde sale el título del sitio, y los botones de descarga y del demo de Joomla. Esa parte quedaría de la siguiente forma: 

<!-- Title, download, demo -->
   <header class="header">
      <div class="container">
         <div class="row-fluid">
            <div class="span7">
               <!-- Nombre del sitio -->
            </div>
 
            <div class="span5">
               <div class="btn-toolbar pull-right">
                  <div class="btn-group">
                     <a href="/https://www.joomla.org/download.html" class="btn btn-large btn-warning">Download Joomla</a>
                  </div>
 
                  <div class="btn-group">
                     <a href="/http://demo.joomla.org/" class="btn btn-large btn-primary">Demo Joomla</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </header><!-- End Title, download, demo -->

Aquí hemos creado como bien han visto la posición para el nombre del sitio, y los dos botones. Recuerden que las clases que estamos usando por el momento, todas son pertenecientes al framework bootstrap.

En la parte del nombre del sitio (señalado en verde) solo hemos puesto un comentario, para saber que en ese lugar vamos a declarar el nombre del sitio, pero esto lo haremos luego. La parte de los botones esta remarcada en azul, y como ven ya estan puesto los enlace en cada botón, por lo que esta parte de los botones ya esta terminada. Para esta parte de los botones hemos usado otro de los componentes de bootstrap, en este caso los "button groups".

Por último, es el turno del menu principal del sitio, "Main Menu". Esta estructura queda de la siguiente forma: 

<!-- Main Menu -->
   <div class="subnav affix-top" data-spy="affix" data-offset-top="18">
      <div class="container"> 
         <!-- posicion del menu principal -->
      </div>
   </div>
<!-- End Main Menu -->

Acá hemos hecho igual. Hemos resaltado en verde, en donde vamos a declarar la posición del menú principal.

Con esto, hemos terminado de armar la estructura de nuestro "header". A partir de ahora no tenemos que tocar más código HTML. Si vamos a ver como va quedando el sitio, por supuesto que aún no veremos nada en concreto:

Botones de Descarga y Demo (Clic para ampliar la imagen)

Recuerden también, que al final del artículo encontraran el archivo adjunto perteneciente a la plantilla "jcmagazine", con el aspecto con que va a acabar la misma tras este artículo. Esto les puede ser de gran ayuda en el entendimiento de lo que explicamos acá. Sigamos entonces.

Para terminar de editar nuestro archivo "index.php", colocaremos las cosas que nos faltan, y que hemos ido marcando en verde anteriormente. Empezaremos ponien la posición del menú superior. Para ello ubicamos en esa línea lo siguiente: 

<!-- Top Menu -->
 <nav class="navbar navbar-inverse navbar-fixed-top"> 
   <div class="navbar-inner">
      <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </a>
 
         <div class="nav-collapse">
 
            <jdoc:include type="modules" name="top-menu" style="none" />
 
         </div><!--/.nav-collapse -->
      </div><!--/.container -->
   </div><!--/.navbar-inner -->
</nav><!-- End Top Menu-->

Esta es la sentencia que usa Joomla, para declarar posiciones dentro de la plantilla. El nombre de la posición es el que esta dentro del atributo "name", que en este caso es "top-menu". Al declarar una posición nueva en la plantilla, se debe actualizar el archivo templateDetails.xml de la plantilla, pero esto lo haremos luego. Por ahora terminemos con nuestro archivo index.php.

Ahora tendremos que poner el nombre del sitio. En este caso, no vamos a crear una posición nueva, ya que el nombre lo traeremos desde los parámetros de la plantilla. Es decir, haremos que nuestra plantilla escoga el nombre que le pondremos en la administración del sitio a la plantilla, y en caso de que no seleccionemos ninguno, que muestre el nombre que tiene el sitio como tal.

Para hacer esto, haremos uso de los parámetros que podemos crear en las plantillas de Joomla, que ya estan siendo capturados en la línea 13 de la plantilla "jcmagazine": 

// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;

En la variable $params ya tenemos los parámetros que vamos a configurar luego en el archivo templateDetails.xml. Ahora ubicamos lo siguiente, debajo de donde cargamos los archivos CSS de la plantilla: 

// Load Bootstrap CSS
   JHtmlBootstrap::loadCss();
   $doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

// Logo file or site title param
   if ($this->params->get('logoFile'))
   {
      $logo = '<img src="'. JUri::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
   }
   elseif ($this->params->get('sitetitle'))
   {
      $logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
   }
   else
   {
      $logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
   }

Como ven, en la variable $logo vamos a tener un valor, en dependencia de la opción que sea seleccionada desde la administración en la plantilla. Puede ser una imagen, o puede ser un nombre que pongamos, o sencillamente el nombre del sitio. Todo esto se va a configurar en el templateDetails.xml más adelante. De no entender aún lo que estamos haciendo, más adelante cuando editemos el archivo templateDetails.xml te daras cuenta para que es todo esto.

Ahora solo nos resta ubicar la variable $logo en la posición del nombre del sitio. Modificando esta parte, nos queda de la siguiente forma : 

<!-- Title, download, demo -->
   <header class="header">
      <div class="container">
         <div class="row-fluid">
            <div class="span7">
               <?php echo $logo;?>
            </div>
 
            <div class="span5">
               <div class="btn-toolbar pull-right">
                  <div class="btn-group">
                     <a href="/https://www.joomla.org/download.html" class="btn btn-large btn-warning">Download Joomla</a>
                  </div>
 
                  <div class="btn-group">
                     <a href="/http://demo.joomla.org/" class="btn btn-large btn-primary">Demo Joomla</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </header><!-- End Title, download, demo -->

Y con esto ya mostramos, en dependencia de la opción escogida en la plantilla desde la administración, el nombre del sitio. Recuerden que al final del artículo tienen la plantilla tal cual quedo con este artículo, para de esta forma puedan aclarar dudas que le hallan quedado, sobre en donde va cada código. No obstante, ante cualquier problema estaría encantado de ayudarles a través de los comentarios del artículo. 

Nuestra última modificación al index.php es la creación de la posición del menú principal, "Main Menu". Esto lo haremos de la misma forma que hicimos la anterior. Esta parte quedaría: 

<!-- Main Menu -->
   <div class="subnav affix-top" data-spy="affix" data-offset-top="18">
      <div class="container"> 
         <jdoc:include type="modules" name="main-menu" style="none" />
      </div>
   </div>
<!-- End Main Menu -->

Con esto hemos acabado de editar, todo lo que ibamos a editar en este artículo, en el index.php. Aún no vemos ningún resultado visual en la plantilla pero, ¡ya tenemos la estructura creada!.

Editar archivo "templateDetails.xml"

Una vez accedido a este archivo, que se encuentra en la raíz de la plantilla, editaremos la línea 19 (recuerden que estoy hablando de la plantilla jcmagazine). En esa línea lo que hay de momento es el comentario "<!-- Posiciones -->". Eliminamos entonces ese comentario, y pondremos las dos posiciones que definimos en el archivo index.php, "top-menu" y "main-menu". Quedaría de la siguiente forma: 

<positions>
   <position>top-menu</position>
   <position>main-menu</position>
</positions>

Con esto le estamos diciendo a Joomla, que la plantilla de nosotros por el momento, tiene dos posiciones. De esta forma es que se crean nuevas posiciones en las plantillas de Joomla. Primero las declaramos en nuestro archivo "index.php" y luego en el archivo "templateDetails.xml", o viceversa.

Ahora solo nos resta declarar los parametros que va a tener la plantilla. En el archivo "index.php" estabamos recogiendo en la variable "$logo" una imagen o un nombre, los cuales se pasaban a traves de la plantilla, en la administración de nuestro sitio. Si accedemos a la administración de nuestro sitio, y vamos al Gestor de plantillas, veremos nuestra plantilla ahí:

Si damos clic encima del nombre "jcmagazine - Predeterminado", accederemos a las opciones o parámetros de la plantilla. Una vez dentro, se daran cuenta que por el momento no hay ningún parámetro definido:

Por el momento visualizamos las dos pestañas que trae cualquier plantilla en Joomla, "Detalles" y "Asignación a los menús".

Pongamos los parámetros de la plantilla. Para esto, en el archivo templateDetails.xml ubicamos lo siguiente, debajo del bloque de las posiciones: 

<positions>
   <position>top-menu</position>
   <position>main-menu</position>
</positions>

<config>
   <fields name="params">
      <fieldset name="advanced">
         <!-- Parametros -->
      </fieldset>
   </fields>
</config>

Si guardan este cambio en el archivo, y volvemos a los parámetros de la plantilla en la administración del sitio, verán el siguiente cambio:

Ha salido una nueva pestaña, en este caso "Advanzado". Dentro de esta pestaña es donde saldrán los parámetros de la plantilla. Por el momento sale en blanco, ya que no hemos definido ningún parámetro, el cual es nuestro siguiente paso.

Para crear nuestros parámetros, quitamos el comentario "<!-- Parametros -->" que anteriormente pusimos, y en esa misma línea escribimos lo siguiente: 

<config>
   <fields name="params">
      <fieldset name="advanced">
         <field name="logoFile" class="" type="media" default=""
            label="TPL_JCMAGAZINE_LOGO_LABEL"
            description="TPL_JCMAGAZINE_LOGO_DESC" />
 
         <field name="sitetitle" type="text" default=""
            label="JGLOBAL_TITLE"
            description="JFIELD_ALT_PAGE_TITLE_LABEL"
            filter="string" />
     </fieldset>
  </fields>
</config>

Si guardan este cambio en el archivo, y volvemos a los parámetros de la plantilla en la administración del sitio, verán el siguiente cambio:

Como ven, ya tenemos nuestros parámetros en acción. El primero, para ubicar una imagen como logo, y el segundo para definir un nombre para nuestro sitio.

Nota: Resaltar que el código que ubicamos anteriormente, no es nada inventado ni mucho menos, esta es la forma que establece Joomla para configurar este tipo de acciones. Si quieres documentarte más sobre los campos que estan definidos en Joomla, puedes verlo en este enlace: http://docs.joomla.org/Form_field

Como pueden apreciar, la definición de un parámetro o campo en una plantilla consta de una etiqueta "<field />" con varios atributos dentro, como, "name", "type", "label", "description"....por citar algunos. De todos estos, los más importantes, y que siempre deben aparecer son, "type" y "name". El primero, type, es el que define que tipo de campo es el que se va a mostrar, (caja de texto, caja multi-media para elegir imagenes, listado de categorías, etc), y el segundo, name, es un nombre único, es decir, un identificador único para ese campo. ¿Qué función realiza este identificador? pues de hecho ya lo hemos utilizado. Recordemos un poco:

Cuando estabamos editando el archivo "index.php" escribimos las siguientes líneas: 

// Logo file or site title param
   if ($this->params->get('logoFile'))
   {
      $logo = '<img src="'. JUri::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
   }
   elseif ($this->params->get('sitetitle'))
   {
      $logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
   }
   else
   {
      $logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
   }

En rojo pueden ver como dentro de la condición "if", se comprueba uno de los campos que hemos definido en el archivo "templateDetails.xml". En este caso es "logoFile". Este campo es de tipo "media", y como vimos, lo que nos muestra es una caja multi-media, que nos lleva a la carpeta "images" en la raíz de nuestro sitio. ¿Qué es lo que comprueba? pues comprueba, que este campo tenga algún valor, es decir, que hallamos escogido alguna imagen desde los parámetros de la plantilla en la administración. De haberla escogido, pues se guarda en la variable "$logo", la imagen escogida para luego mostrarla en la posición del nombre del sitio, que habiamos declarado más abajo en el archivo "index.php". De no haber escogido ninguna imagen, pues pasa a la condición en verde.

La parte verde, comprueba que el campo "sitetitle" tenga algún valor. Este campo es de tipo "text", y de tener algún valor, es decir, que hallamos escrito algo en el, pues guardamos en la variable "$logo" lo que hallamos escrito en ese campo, para luego mostrarlo en la posición del nombre del sitio, que habiamos declarado más abajo en el archivo "index.php". De no haber escrito nada en el, pues pasa a la condición en azul.

Ya en la parte azul, no comprobamos nada, sino que guardamos directamente en la variable "$logo" el nombre que tenemos definido en el sitio, cuando instalamos Joomla. Este nombre esta guardado en la variable "$sitename", la cual fue establecida, en la línea 26 de nuestro archivo "index.php":

$sitename = $app->getCfg('sitename');

Con esta explicación hemos terminado de editar el archivo "templateDetails.xml".

Pasos finales

Como habran notado, visualmente aún no tenemos cambios en nuestra plantilla, y esto es debido a que nos restan dos pasos aún. Uno son los estilos CSS que va a tener la plantilla por el momento, dandole así el aspecto visual que queremos lograr en nuestro "header". Y el otro paso es la creación de los dos menú en la administración del sitio.

Como los estilos CSS, no lo vamos a explicar en el artículo, ya que nos saldriamos un poco del objetivo del mismo, puedes ver dichos estilos en la carpeta CSS en la plantilla que esta adjuntada al artículo al final del mismo. Les recuerdo que esa plantilla esta conforme con todo lo que hemos explicado en este artículo y en el anterior, ni más ni menos. La plantilla es perfectamente instalable en cualquier Joomla 3, por si quieren probarla en directo. 

Por lo que nos resta solamente crear los menús en la administración del sitio. No creo que se tenga que explicar como crear estos dos menús, por lo que una vez creados, y mostrados en las posiciones correspondientes, y sin aún haber escrito ningún estilo CSS, se vería algo así:

Como ven, sale totalmente desconfigurado visualmente. Pero una vez colocados los estilos en el archivo CSS "template.css" que esta dentro de la carpeta CSS de la plantilla, ya se ve como este:

Como ven, aún queda desconfigurado el menú principal. Esto es porque nos falta aún una clase. Esta clase CSS, es perteneciente a bootstrap, y es el que nos va, en conjunto con los estilos CSS que hemos escrito, a ayudar a arreglar ese menú. Esta clase es "nav-pills" y pueden ver su uso en la documentación de bootstrap. 

Vamos a insertar esta clase a traves de la administración de nuestro sitio. Cuando accedan, van al Gestor de módulos, y buscan el módulo encargado de mostrar el menú principal. Una vez dentro, van a la pestaña "Advanzado" y en el campo "Clase CSS" escriben dejando un espacio en blanco delante " nav-pills":

Guardan y cierran, y verán que ya nuestro menú tomo la forma deseada:

Sistema de menú sin dropdown (Clic para ampliar imagen)

A pesar de ello, aún no hemos acabado, pero ya casi. En la imagen de arriba, les marque el menú superior, porque aún nos falta que ese menú sea desplegable o que tenga la funcionalidad de "dropdown". Para ello, vamos a utilizar este override que se hace en este artículo. Solo descargamos el archivo compartado que ahí se adjunta, y lo ubicamos en la carpeta "html"de nuestra plantilla y lo descompactamos ahí dentro. Pero como aún no tenemos esta carpeta en la plantilla, pues la creamos. Recuerden actualizar el archivo "templateDetails.xml" para hacerle saber a Joomla que hemos puesto una nueva carpeta dentro de la plantilla.

Nota: Es necesario para el menú desplegable, que se sigan correctamente todos los pasos que se explican en el artículo pertinente.

Una vez que se siguen correctamente los pasos del "override" del menú, obtendremos el siguiente resultado:

Sistema de menú con dropdown (CLic para ampliar imagen)

Y con este último paso, nuestro sistema de menú ha quedado perfectamente configurado.

Conclusiones

El artículo quedo extenso, pero valio la pena el que quedara así, ya que hemos podido dar un "paso a paso" en la creación de los menú del diseño propuesto. Habrán notado, que del "header" aún nos quedan 2 elementos, como es el buscador, y el banner de color amarrillo de soporte que esta a la izquierda. No incluiremos estos elementos por ahora, pero no dejaremos de incluirlos luego.

En nuestro próximo artículo comenzaremos con la creación del contenido, por lo que entraremos en materia con el CCK K2, ya que la revista usa este componente para gestionar sus contenidos. Tendremos que hacer varios override, por lo que les recomiendo que no se lo pierdan.

Recuerden que al final del artículo, encontarán la plantilla tal cual ha quedado con estos dos artículos que hemos hecho.

---

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ú