Tutorial como crear una plantilla joomla básica - Consultoria SEO

Buscar

Ruta de Navegación

Post patrocinados

Post patrocinados

 

Seo

SEO

El posicionamiento en buscadores,  search engine optimization (SEO) es el proceso que afecta la visibilidad en línea de un sitio web en los resultados impagos de un motor de búsqueda web. Nos dedicamos a mejorar significativamente su visibilidad en los resultados de búsqueda, para atraer visitas y posteriormente convertirlos en clientes. Saber más.

 

Keywords

Investigación Profunda de KeyWords

El análisis de palabras clave es de hecho un asunto muy complejo. La visibilidad de su website comienza con una investigación profunda de palabras clave. Promover su sitio  es vital para su negocio, por lo tanto investigar palabras clave pertinentes, relevantes a su nicho de mercado es muy importante.


 

Facebook Marketing

Facebook Marketing

  Facebook Marketing

El dinero gastado en marketing de Facebook es felicidad y negocios creciendo a pasos agigantados. Saber más.

Auditoría SEO

Auditoría SEO

La auditoría SEO es una de las herramientas de marketing en Internet más importantes que se implementan para proporcionar a un sitio web una visión detallada y general sobre cómo mejorar su visibilidad en línea. Problemas relacionados con el dominio del sitio web, análisis de enlaces entrantes y salientes, problemas de navegación del sitio web, configuración del servidor web, atribuciones de etiquetas y más son los asuntos que nos ocupan con el fin de optimizar su presencia en línea.

Email marketing

Email Marketing

Cuando se trata de la adquisición de clientes, una excelente forma de llegar a clientes potenciales es hacer Email Marketing sin embargo; un aspecto vital es la planificación. Saber más.

Anuncios de Google

Google Ads Certificado

 Anuncios de Google

Ya sea que lo haga con texto solo o use imágenes, con la galería de anuncios incluida en su cuenta, decida cuándo se mostrarán sus anuncios y oriente su campaña específicamente en función de los intereses o la demografía de los clientes que desea atraer. Saber más.

Marketing de Contenidos

Marketing de Contenidos

En la búsqueda del ‘contenido de oro’, los proveedores de servicios de marketing se dirigen hacia la creación y dominio del marketing de contenidos. Creamos y ofrecemos servicios de contenido que atrae, vende y ayude a retener clientes. Saber más.

Desarrollo web

Desarrollo Web

El desarrollo de su sitio web es importante para su negocio, definir los objetivos del sitio, idealmente la apariencia de su sitio debe ser hermosa y debe coincidir con el tema de su negocio y los servicios que ofrece. El desarrollo de un sitio web es el componente más importante para cualquier empresa que aspire a mantener una sólida presencia en línea.

 


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 y especialista Adwords certificada. 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.

Clientes

Marketing digital Marketing digital Marketing digital Marketing digital Marketing digital