Como instalar y crear un template para Joomla

En este tutorial aprenderemos como instalar Joomla! 1.7 y hacer un template (compatible para las versiones 1.5, 1.6 y 1.7) desde el inicio utilizando Dreamweaver.

Introducción

Como todos sabemos, Joomla! es un CMS muy sencillo de usar pero al principio puede costar un poco entenderlo (como todo cuando lo usamos por primera vez).

En esta oportunidad usare mi computadora como servidor para trabajar localmente, para esto usare el paquete APPSERV 2.5.10 (si lo descargan asegurense de bajar la versión 2.5.10 ya que la version 2.6.0 viene con un MYSQL versión Alpha y si no me equivoco con un PHP beta que les puede llegar a generar algunos problemas) pero ustedes si quieren pueden usar XAMPP que se ha vuelto muy popular en este tiempo.

Para aquellos que quieran descargar Joomla! 1.7 en español solo deben ir a Joomla! Spanish

PASO 1: INSTALANDO JOOMLA! 1.7

1.1 – Como haremos la instalación de Joomla! localmente, deberemos descomprimir el archivo y copiar su contenido en C:\appserv\www\joomla (A la carpeta joomla la creamos previamente).

1.2 – A continuación deberemos crear la base de datos para Joomla!, para hacer esto escribiremos en la barra de dirección http://localhost/phpmyadmin, como ejemplo le pondremos de nombre joomla a nuestra Base de Datos (recomendamos por su seguridad cuando vayan a crear una base de datos deben colocarle un nombre que sea dificil de descifrar) :

Ahora que tenemos creada la base de datos, procedemos a comenzar con la instalación.

1.3 – Escribimos http://localhost/joomla en la barra de direcciones y damos enter, nos aparecera una lista de elección de idioma en que estará Joomla!, en este caso nosotros elegimos Español y seguimos con la instalación.

1.4 – En la segunda pantalla nos aparecerá una comprobación para ver si nuestro servidor es apto para un instalación de Joomla!:

Como podrán ver pasamos la comprobación en la primera parte pero en la segunda tenemos dos advertencias en rojo que a estas no les daremos importancia ya que no son necesarias para la instalación.

1.5 – Damos siguiente y nos encontramos con la Licencia Pública General GNU (Podemos leerlo o simplemente seguimos adelante).

1.6 – En este paso deberemos ingresar los datos de nuestra base de datos

Tipo Base de Datos: Generalmente los servidor usan MySQL.
Nombre del Host: La mayoría de los servidores usan “localhost” como nombre del host pero hay algunos como GoDaddy que usan nombres aleatorios.
Usuario: Aquí debemos escribir nuestro nombre de usuario que creamos para el host, en nuestro caso al ser una instalación local con appserv nuestro usuario es root.
Contraseña: Contraseña de su mysql.
Nombre de la base de datos: En el paso 1-2 creamos una base de datos con el nombre joomla que es el que deberemos escribir aquí, ustedes deberán hacer lo mismo con el nombre que eligieron.
Prefijo de la tabla: Aquí joomla para nuestra seguridad siempre nos crea un prefijo de 5 caracteres aleatorios para que sea más difícil que puedan hackearon nuestra base de datos.

1.7 – Este paso es opcional, que es la configuración del FTP, en mi caso pase el siguiente paso.

1.8 – Llegamos a nuestra Configuración principal

Configuración Básica

Nombre del Sitio: Escribimos el nombre de nuestro sitio, en nuestro caso: Dinvaders.

Confirmar la contraseña y correo electrónico del usuario admin.

Su E-mail: Escribimos nuestro correo.
Usuario del Administrador: Como predeterminado nos aparecerá escrito el usuario admin, pero nosotros podremos cambiarlo por otro (es recomendado cambiarlo por un tema de seguridad)
Contraseña del Administrador: Escribimos una contraseña segura, es recomendado utilizar combinación de letras mayúsculas y minúsculas con números (NO usen contraseñas que se puedan adivinar fácilmente)
Confirmar contraseña del Administrador: Reescribimos nuestra contraseña.

Cargar datos de ejemplo (Español)

Datos de ejemplo: En este caso como nuestro objetivo es crear un template, instalaremos contenido de ejemplo para poder previsualizar nuestro template con un contenido.

1.9 – Este es el paso final, aquí se nos pedira que eliminemos la carpeta de instalación por un tema de seguridad haciendo click en el botón “Eliminar la carpeta de instalación (installation)”

Archivos del template

Para que nuestro template de Joomla funcione correctamente deberemos crear estos archivos:

  • index.php
  • templateDetails.xml
  • template.css

index.php – es el archivo que se encargará de contener nuestro código y los módulos.
templateDetails.xml – es el archivo que nos indicará que archivos estarán en nuestro tema y además habilitará las diferentes posiciones de los módulos.
template.css – Este archivo es opcional pero recomendado ya que albergará el estilo de nuestro template.

[destacar] Es importante que se respeten el nombre de los archivos para que no haya problemas con el template [/destacar]

Crearemos una carpeta con el nombre del template que dentro de ella colocaremos los archivos que creamos.

Creando el template

EMPEZANDO CON TEMPLATEDETAILS.XML

Abriremos el archivo templateDetails.xml con nuestro editor HTML (en mi caso usaré Dreamweaver CS5). Dentro de este archivo irá la información del template, como por ejemplo el nombre del tema, fecha de creación, autor, etc, además incluira el nombre de los archivos del template y las posiciones que queremos que aparezcan.

Primero comienza con información del archivo y que versión de Joomla! soporta

A continuación debemos detallar la información relacionada al template, como por ejemplo su nombre, fecha de creación, descripción del template, datos del autor y tipo de licencia.

Dentro de la etiqueta <files> hay que mencionar los archivos que utilizará el tema.

Y finalmente nos queda para agregar las posiciones que queremos que aparezcan.

Así quedaría el código completo

CREANDO INDEX.PHP

En el archivo index.php es donde irá el código HTML, módulos y/o código PHP

EXPLICANDO EL CÓDIGO UTILIZADO EN INDEX

Dentro de las etiquetas <head> podemos encontrar el <jdoc:include type=”head”> que es el que nos dará información sobre el estilo, scripts y contenido meta del sitio.

El jdoc:include type=”modules” nos indica que es un espacio dedicado para nuestros módulos especificando en name=”” la posición que llevará (las posiciones de los módulos fueron las que especificamos en el archivo templateDetails.xml, en el ejemplo usamos la posición RIGHT).

También podremos observar que se encuentra el <jdoc:include type=”component” /> que es el que se encargará de mostrar nuestro contenido.

DANDOLE ESTILO AL TEMPLATE

En mi caso crearé un css meramente de ejemplo ya que no es una parte importante del tutorial

Instalando el template

Lo que debemos hacer para instalar el template es comprimir la carpeta del tema en formato .zip. Para esto hacemos click con el botón derecho del mouse sobre la carpeta y clickeamos en “Añadir al archivo…” (En mi caso uso el programa WinRar)

A continuación se nos abrirá una ventana, en ella elegimos en “Formato de Archivo” la extensión ZIP (como vemos enmarcado en rojo en la imagen) y hacemos click en aceptar

En el administrador de Joomla! nos dirigiremos a “Extensiones > Gestor de Extensiones”

Hacemos click en “Examinar”, buscamos el zip del template que recién creamos, aceptamos y hacemos click en “Subir e instalar”

Cuando lo subamos nos aparecerá el mensaje “plantilla instalada correctamente.”

Modificado por última vez el día 27 de diciembre de 2012 a las 09:10
Posted in CMS
Scroll to top