Desarrollamos su visibilidad y ventas en linea

 


Tutorial como crear una plantilla joomla básica 

 
Este tutorial pretende ser una introducción a la creación de plantillas en joomla. Se centrará en los archivos indispensables y el código que debe tener una plantilla básica.
 

Estructura de directorios o carpetas de una plantilla joomla básica:

 
  • Deberá crear una nueva carpeta en la carpeta templates  y darle el nombre “nuevaplantilla”.
  • Puede utilizar un editor de texto y crear 2 archivos: index.php y templateDetails.xml.
  • Deberá crear 2 carpetas en la carpeta “nuevaplantilla”: images y css. 
  • Dentro de la carpeta css debe crear el archivo template.css.
 
A pesar de que está muy bien para colocar todo el código CSS  directamente en el archivo index.php, muchos desarrolladores web prefieren colocar su código CSS en un archivo independiente que puede ser enlazada desde varias páginas.  Esto además puede acortar el tiempo de carga de las paginas. Ya que el archivo independiente se puede almacenar en caché.
 

La estructura de nuestra plantilla básica:

 
/Nuevaplantilla
 
/CSS
Template.css
/images
index.php
templateDetails.xml.
 
El Archivo templateDetails.xml sirve para instalar la plantilla en el CMS. Posee la siguiente información:
 
Datos relacionados con la plantilla: nombre de la plantilla, autor, licencia, versión, etc;
Estructura de carpetas, archivos y lenguajes;
Nombres de las posiciones de módulos que la plantilla admite;
Opciones de configuración de la plantilla.
 
Creación del archivo templateDetails.xml con su editor de texto favorito, puede utilizar el bloc de notas.
 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
  <extension 
  version="2.5" 
  type="template"
  client="site">
         <name> AtomicaI</name>
         <creationDate>17/09/2014</creationDate>
         <author>Estela Silva</author>
         <authorEmail>Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. </authorEmail>
         <authorUrl> http://tuconsultoraseo.com</authorUrl>
         <copyright>Estela Silva </copyright>
         <license> GNU / GPL </license>
         <version> 1.0.2 </version>
         <description> Mi nueva plantilla </description>
         <files>
                 <filename>index.php</filename>
                 <filename>templateDetails.xml</filename>
                 <folder>images</folder>
                 <folder>css</folder>
         </files>
         <positions>
                <position>breadcrumb</position>
<position>left</position>
                <position>right</position>
                <position>top</position>
                <position>user1</position>
                <position>user2</position>
                <position>user3</position>
                <position>user4</position>
                <position>footer</position>
         </positions>
 </extension>
 
Copie el código anterior, peguelo en su editor de texto, cambie los ítems relacionados con la plantilla  y guárdelo con extensión .xml:
 
   <name>plantilla</name>
         <creationDate>17/09/2014</creationDate>
         <author>Estela Silva</author>
         <authorEmail>Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. </authorEmail>
         <authorUrl> http://tuconsultoraseo.com</authorUrl>
         <copyright>Estela Silva </copyright>
         <license> GNU / GPL </license>
         <version> 1.0.2 </version>
         <description> Mi nueva plantilla </description>
 
 
El texto entre las etiquetas <name> </name> es el nombre de la plantilla.
 
La sección <files> debe contener todos los archivos que se utilizarán y que muy posiblemente aún no conoce todavía. – puede actualizarlo después. 
 
Deje las posiciones como están, luego podrá actualizarlas
 
Creación del archivo index.php básico:
 
El archivo index.php es el núcleo de cada página que joomla entrega. Consiste en hacer una página HTML, pero se coloca código php en el lugar del contenido donde deberá ir. Contiene llamadas a archivos CSS y JavaScript llamadas a archivos CSS y JavaScript. Su contenido está formado por etiquetas HTML y PHP.
 

¿Cómo trabaja la plantilla joomla? 

El código de Joomla se coloca en las posiciones de módulo y la sección de componentes de la plantilla.  Cualquier cosa agregada a la plantilla aparecerá en todas las páginas a no ser que se añada a una de estas secciones a través de Joomla (o código personalizado).
 
Esta página le mostrará el código escueto listo para cortar y pegar en su propio diseño.
 
Una plantilla Joomla comienza con las siguientes líneas que se colocan en el archivo index.php:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
 
La primera línea <?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
se incorpora por motivos de seguridad, su objetivo es asegurar que el archivo PHP está siendo ejecutado dentro de la sesión y contexto del CMS (de forma tal que si un usuario quiere vulnerar el sitio ejecutando un archivo en particular, le sea difícil realizarlo). Es por tanto altamente recomendable su uso en toda plantilla joomla.
 
La segunda línea se refiere a la declaración del tipo de documento (DOCTYPE),  la cual le dice al navegador (y rastreadores web) el tipo de página HTML que está utilizando. El tipo de documento utilizado anteriormente es HTML5 , una nueva versión de HTML que es en gran medida compatible con versiones anteriores, pero contiene muchas características nuevas.  Es posible que desee investigar esta situación y los deseos de sus clientes antes de decidir que DOCTYPE que desea utilizar. Sin embargo, esto se utiliza en Joomla   y más alto.
 
La tercera línea comienza nuestro documento HTML y describe en que  lenguaje está la página web. Un documento HTML se divide en dos partes, la cabecera (head) y el cuerpo (body). El head contendrá la información sobre el documento y el body contendrá el código del sitio web que controla el diseño.
 
El Head 
<head>
<?php $app = JFactory::getApplication();?>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
 
Utilizando la línea  <?php $app = JFactory::getApplication();?> es posible obtener información del sitio para mostrar dentro de la plantilla (por ejemplo: nombre del sitio, título de la página, nombre del template, etc).
 
La segunda línea crea e incorpora las etiquetas necesarias para rellenar la cabecera de la plantilla:
 
Etiqueta <base />;
Etiquetas <meta />:
content-type;
robots;
keywords;
rights;
language;
generator;
Etiqueta <title />;
Etiquetas <link /> para cargar estilos CSS predeterminados, favicon y RSS;
Etiquetas <script /> para cargar archivos y funciones JavaScript predeterminados.
 
La tercera línea crea un enlace a su propia hoja de estilos,  si se llama template.css y está situado en la carpeta css.
 
El BODY
 
<body>
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/images/logo.png" />
<h1><?php echo $app->getCfg('sitename'); ?></h1>
<jdoc:include type="message" />
 
  <?php if($this->countModules('breadcrumb')) : ?>
        <div id="breadcrumb">
           <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
        </div>
      <?php endif; ?>
  <?php if($this->countModules('left')) : ?>
        <div id="left">
          <jdoc:include type="modules" name="left" style="none" />
        </div>
      <?php endif; ?>
 <jdoc:include type="component" />
   <?php if($this->countModules('right')) : ?>
        <div id="right">
          <jdoc:include type="modules" name="right" style="none" />
        </div>
      <?php endif; ?>
</body>
</html>
 
La primera línea del body o cuerpo sirve para insertar una imagen en la página, en este caso, el logo de la plantilla.
 
La segunda línea, entre etiquetas H1 se utiliza $app para mostrar el nombre del sitio. Dicho nombre es obtenido de la configuración del CMS.
 
La tercera línea: <jdoc:include type="message" />
Se utiliza para mostrar diferentes mensajes del CMS (por ejemplo: cuando un usuario se registra en el sitio, el CMS le informa que el registro fue exitoso o erróneo). Dichos mensajes aparecen en la zona en donde se incorpore la directiva. Aparecerá solo una vez en la plantilla.
 
Las siguientes líneas varian dependiendo de la posición del modulo
<?php if($this->countModules('posicion')) : ?>
        <div id="posicion">
           <jdoc:include type="modules" name="posicion" style="xhtml" />
        </div>
      <?php endif; ?>
 
La function $this->countModules('posicion') lo que hace es contar la cantidad de módulos publicados en una determinada posición de la plantilla. Si es mayor o  igual  a 1, se ejecuta el código siguiente. Esto se suele hacer para que no se muestre código HTML vacío en caso que un módulo no esté publicado.
 
Por último, la sentencia <jdoc:include type="component" />. Esta línea permite mostrar el contenido de un componente. El contenido de los componentes suelen ocupar la zona principal de la plantilla.
 
Para probarlo cree un artículo y un ítem de menú que enlace a “Mostrar un solo artículo”, el artículo se mostrará en la zona del componente. Vea el sitio.
 
Elimine la sentencia y vea el sitio.
 
Nota: Esta es una plantilla básica con algunas sentencias de utilidad para ayudarte a entender la creación de plantillas joomla.
 
Recuerda incluir las posiciones que faltan en el index.php.

Descargar Plantilla Basica Joomla

 
 
Si te ha parecido útil el artículo compártelo.
 
Sobre la autora
Author: Estela Silva
Estela Silva es fundadora y desarrollador principal en Tu Consultora Seo, su función principal es el diseño y desarrollo de sitios web Joomla. Ella también es apasionada del posicionamiento en buscadores. Estela ha construido sitios web basados ​​en CMS Joomla desde el año 2000, así como tiendas en línea, cuando no está escribiendo PHP, Javascript o CSS.

Suscripción por email

 

suscripción por email

Ingrese su email

Contenido Especial Para Ti Joomla

Web Analytics