| 
Tutoriales Cómo crear un template para Joomla! (Primera parte)

Cómo crear un template para Joomla! (Primera parte)

Share
CompartirJoomla!Primera parte sobre como crear un template para Joomla!

 

A diferencia de otros tutoriales que explican como crear un template para Joomla!, en este, no sera necesario ningún programa del tipo Dreamweaver, ni nada por el estilo, tan solo un editor de textos y conocimiento básico de HTML, CSS y PHP (no mucho).

La estructura básica de un template de Joomla! consta de:

  •  'Index.php' el cual contendrá el HTML y las directivas PHP;
  •  'TemplateDetails.xml', esencial para la instalación del template y su reconocimiento en la administración;
  •  Una carpeta llamada 'css' que contendrá el estilo en cascada 'template_css.css';
  •  Una carpeta llamada 'images' que contendrá las imágenes utilizadas para el diseño de la plantilla;
  •  'Template_thumbnail.png', una pequeña imagen que funcionará como previsualizacion del template en la administración.


Por lo tanto un template en Joomla! tendrá la siguiente apariencia:

Estructura de un template en Joomla!

Todos las plantillas van alojadas en la carpeta 'templates', dentro del directorio raiz de Joomla!. En este caso la plantilla será de tres columnas, header y footer [ Ver Layout ] [ Descargar ]. No es la esencia de esta guia explicar cómo crear el layout, existen varios sitios para descargarlos y ahorrar trabajo.

Creación del index.php. Con tan solo saber como se desempeñan tres funciones PHP y dos variables ya se puede empezar con la creación del index...

 

  • mosShowHead(): Esta función al invocarla muestra la información metatag, el titulo y favicon. Se lo usa entre <head> y </head>.
  •  mosMainBody(): Se utiliza para mostrar el cuerpo principal del documento. Se lo usa en el body del documento.
  •  mosLoadModules (): Carga los módulos en una posición predispuesta y en un estilo determinado. Para eso posee dos parámetros (posición , estilo). El primero dirá que módulos cargar (left, right, user1, user2, user3, top, etc). El segundo parámetro dirá en que forma cargarlos: 1= horizontal (cada modulo se cargan en celdas en una única fila), 0= normal (cada modulo se cargan en celdas en una única columna), -1= raw (los módulos se cargan en bruto y sin título), -2= XHTML (muestra a los módulos en divs), -3= extra divs (similar al anterior, pero con más divs). De esta forma si tenemos mosLoadModules (left, -2) cargará los módulos predispuestos en la posición 'left' y los mostrará en diferentes divs. Otro ejemplo. Si tenemos mosLoadModules (user2, 1) cargamos los módulos predispuestos en la posición 'user2' y los mostrará de manera horizontal.


Variables:

  •  $mosConfig_live_site: Esta variable contiene la URL del sitio en cuestión. Asi por ejemplo la variable $mosConfig_live_site para este sitio es http://www.leandrodonofrio.com. Se la utilizará para cargar el CSS.
  •  $mosConfig_sitename: Contiene el nombre del sitio en cuestión. Asi la variable $mosConfig_sitename para este sitio es Leandono´s Blog.



Con esto ya podemos empezar. El paquete de descarga del layout posee dos archivos, 'index.html' y 'main.css'. Al estilo en cascada lo renombramos 'template_css.css' y lo guardamos en la carpeta 'css' anteriormente creada. En tanto que a index.html lo abrimos con nuestro editor de textos. Veremos un código similar a:

HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Fixed Width CSS Layouts - 3 Column - fw-34-3-col</title>
  6. <link rel="stylesheet" type="text/css" href="main.css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11.    <!-- Begin Wrapper -->
  12.    <div id="wrapper">
  13.    
  14.          <!-- Begin Header -->
  15.          <div id="header">
  16.      
  17.            This is the Header     
  18.          
  19.      </div>
  20.      <!-- End Header -->
  21.      
  22.      <!-- Begin Left Column -->
  23.      <div id="leftcolumn">
  24.      
  25.            Left Column
  26.      
  27.      </div>
  28.      <!-- End Left Column -->
  29.      
  30.      <!-- Begin Content Column -->
  31.      <div id="content">
  32.            
  33.             <a href="#">Download this CSS Layout</a>     
  34.      
  35.      </div>
  36.      <!-- End Content Column -->
  37.      
  38.      <!-- Begin Right Column -->
  39.      <div id="rightcolumn">
  40.      
  41.            Right Column
  42.      
  43.      </div>
  44.      <!-- End Right Column -->
  45.      
  46.      <!-- Begin Footer -->
  47.      <div id="footer">
  48.            
  49.          This is the Footer   
  50.          
  51.        </div>
  52.      <!-- End Footer -->
  53.      
  54.    </div>
  55.    <!-- End Wrapper -->
  56.    
  57. </body>
  58. </html>

 

Lo que haremos será copiar todo el código y pegarlo en un nuevo archivo. Este último lo guardamos como 'index.php' y lo metemos dentro de la carpeta de nuestro template. Lo siguiente será insertar las funciones PHP y las variables para cargar el contenido a nuestra plantilla. Para eso abrimos el archivo recién guardado. Empezaremos por la cabecera del documento:

PHP
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <!--Incorporo el Título, Info Meta, y Favicon-->
  4. <?php mosShowHead(); ?>
  5. <!--Obtengo mi estilo en cascada-->
  6. <link href="<?php echo $mosConfig_live_site;?>/templates/nombre_del_template/css/template_css.css" rel="stylesheet" type="text/css" />
  7.  
  8. </head>

 

Lo primero que se hizo fue mostrar toda la información metatag, titulo del documento y el favicon. Esto se hizo con la directiva <? php mosShowHead(); ?>. Por otro lado utilizando la variable <?php echo $mosConfig_live_site;?>  se cargo el estilo en cascada del documento guardada en la carpeta 'css' dentro del directorio de nuestro template (nombre_del_template). Esta carpeta se ubicará en el directorio 'templates' cuando hallamos instalado la plantilla.

Siguiendo con el header del documento lo que haremos será mostrar el nombre del sitio y linkearlo:

PHP
  1. <!-- Begin Header -->
  2.         <div id="header">
  3. <!-- Muestro el nombre del sitio -->   
  4. <h1><a href="<?php echo $mosConfig_live_site; ?>"><?php echo $mosConfig_sitename; ?></a></h1>   
  5.          
  6.   </div>
  7. <!-- End Header -->

 

Con <?php echo $mosConfig_sitename; ?> estamos mostrando el nombre del sitio. A su vez se utiliza <?php echo $mosConfig_live_site; ?> para poder crear un link.

Lo siguiente será cargar y mostrar el contenido principal y los módulos:

PHP
  1. <!-- Begin Left Column -->
  2.   <div id="leftcolumn">
  3.      
  4. <!-- Cargo los modulos left a la izquierda -->   
  5. <?php mosLoadModules ( 'left',-2);?> 
  6.      
  7.   </div>
  8. <!-- End Left Column -->
  9.      
  10. <!-- Begin Content Column -->
  11.   <div id="content">
  12.  
  13. <!-- Cargo el contenido principal -->         
  14. <?php mosMainBody(); ?>   
  15.      
  16.   </div>
  17. <!-- End Content Column -->
  18.      
  19. <!-- Begin Right Column -->
  20.   <div id="rightcolumn">
  21.  
  22. <!-- Cargo los modulos right a la derecha -->   
  23. <?php mosLoadModules ( 'right',-2);?> 
  24.      
  25.   </div>
  26. <!-- End Right Column -->

 

La lectura del documento es fácil. En el div 'leftcolumn' cargaremos los módulos predispuestos en la posición 'left' (<?php mosLoadModules ( 'left',-2);?>). Estos serán mostrados en diferentes divs. Lo mismo sucede con el div 'rightcolumn' y los módulos en posición 'right' (<?php mosLoadModules ( 'right',-2);?>). Mientras tanto, el contenido principal del documento se muestra en la columna central a través de <?php mosMainBody(); ?>.

Finalmente nos queda el footer. Aqui podemos poner lo que queramos o incluir los datos predispuestos en 'footer.php'. Para eso:

PHP
  1. <!-- Begin Footer -->
  2.   <div id="footer">
  3.  
  4. <!-- Cargo el footer -->       
  5. <?php include_once('includes/footer.php'); ?> 
  6.          
  7.   </div>
  8. <!-- End Footer -->

 

Editando el archivo 'footer.php' (dentro del directorio 'includes', en la carpeta raiz de Joomla!) podremos cambiar la información a mostrar. Y asi terminamos el 'index.php', el resultado final es:

PHP
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <!--Incorporo el Título, Info Meta, y Favicon-->
  6. <?php mosShowHead(); ?>
  7. <!--Obtengo mi estilo en cascada-->
  8. <link href="<?php echo $mosConfig_live_site;?>/templates/nombre_del_template/css/template_css.css" rel="stylesheet" type="text/css" />
  9. </head>
  10.  
  11. <body>
  12.  
  13. <!-- Begin Wrapper -->
  14.    <div id="wrapper">
  15.    
  16. <!-- Begin Header -->
  17.         <div id="header">
  18. <!-- Muestro el nombre del sitio -->   
  19. <h1><a href="<?php echo $mosConfig_live_site; ?>"><?php echo $mosConfig_sitename; ?></a></h1>   
  20.          
  21.   </div>
  22. <!-- End Header -->
  23.      
  24. <!-- Begin Left Column -->
  25.   <div id="leftcolumn">
  26.      
  27. <!-- Cargo los modulos left a la izquierda -->   
  28. <?php mosLoadModules ( 'left',-2);?> 
  29.      
  30.   </div>
  31. <!-- End Left Column -->
  32.      
  33. <!-- Begin Content Column -->
  34.   <div id="content">
  35.  
  36. <!-- Cargo el contenido principal -->         
  37. <?php mosMainBody(); ?>   
  38.      
  39.   </div>
  40. <!-- End Content Column -->
  41.      
  42. <!-- Begin Right Column -->
  43.   <div id="rightcolumn">
  44.  
  45. <!-- Cargo los modulos right a la derecha -->   
  46. <?php mosLoadModules ( 'right',-2);?> 
  47.      
  48.   </div>
  49. <!-- End Right Column -->
  50.      
  51. <!-- Begin Footer -->
  52.   <div id="footer">
  53.  
  54. <!-- Cargo el footer -->       
  55. <?php include_once('includes/footer.php'); ?> 
  56.          
  57.   </div>
  58. <!-- End Footer -->
  59.      
  60.    </div>
  61. <!-- End Wrapper -->
  62.    
  63. </body>
  64. </html>

 

 

 

Comentarios  

 
0 #2 Guido Albornoz Carrazza 07-06-2009 12:17
HOla, como estas? Gracias por compartir este tutorial. No se si soy muy novato o no has sido muy claro. Hay archivos que no has utilizado u omitido? Como creo el xml? y las imagenes en que momento y como las utilizo? Esta plantilla la debo instalar como todas no es cierto? como se personalizan los colores? en fin... quizas hago preguntas tontas, pero para alguien que recien comienza creo que no son tan obvias!
Espero tu respuesta y muchas gracias nuevamente!
Citar
 
 
0 #1 Manuel 30-04-2009 09:33
Como hago para bajarme este articulo en pdf. (si se puede)
Citar
 

Escribir un comentario


Código de seguridad
Refescar