Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Cómo Crear Su Primera Plantilla para Joomla

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

En este tutorial, aprenderá acerca de los conceptos básicos de una plantilla de Joomla y creará una desde cero. Vamos a pasar rápidamente a través de la instalación de un servidor local y de Joomla en sí y luego crearemos una plantilla básica en funcionamiento.


1. Preparación

Antes de comenzar nuestra plantilla, hay algunas cosas que usted necesita preparar.
Al igual que la mayoría de los CMS, Joomla requiere un servidor con PHP y MySQL instalados. La instalación de lo anterior manualmente puede ser bastante molesto y para ser sinceros, una pérdida de tiempo (a menos que desee aprender cómo se hace exactamente).
Lo que vamos a hacer es descargar un solo instalador para todo lo anterior que incrustará un servidor local en su sistema y le dará también un panel de control realmente ingenioso.

Así que diríjase a WAMP y descargue la última versión. (MAMP para Mac)

Una vez descargado el instalador, ejecútelo e instale WAMP en un lugar fácil de recordar. Si todo va de acuerdo al plan usted debe estar mirando una carpeta nombrada: wamp

Ahora debe tener un ícono en la barra de notificación (donde está el reloj) que le da acceso al panel de control de WAMP. Puede usar esto para varias cosas, incluyendo reiniciar el servidor.


2. Descargando e instalando Joomla

Ahora que tenemos un servidor instalado, podemos obtener Joomla y configurarlo. Vaya a Joomla y descargue la última versión.

Antes de continuar, echemos un vistazo nuevamente a nuestra carpeta wamp. Dentro de ella usted encontrará una gran cantidad de carpetas, pero la que nos interesa es la carpeta www.
Esta es la raíz de su configuración de servidor y aquí es donde vamos a instalar Joomla. (Nota: puede instalar tantas copias de Joomla aquí como desee, o cualquier otra cosa para el caso)

Así que descomprima su descarga de Joomla en la carpeta www. Normalmente la renombro en este punto con el nombre de mi sitio o simplemente lo acorto a joomla.

Joomla está ahora en nuestro servidor. Sin embargo, hay una última cosa que tenemos que hacer antes de instalar y eso es crear una base de datos. Abra su navegador y vaya a http://localhost.
Aquí encontrará el área de administración de su servidor, aquí es donde creamos nuestra base de datos.

Para crear la base de datos, haga clic en phpmyadmin en la sección Sus Alias.

Para efectos de este tutorial, estaremos llamando a nuestra base de datos joomla. No creará un usuario con contraseña aquí, sino que usará los detalles del usuario root. Se recomienda encarecidamente crear un usuario con una contraseña segura en situaciones reales.

Ahora que tenemos una base de datos, podemos comenzar a instalar Joomla. Lance su navegador y vaya a http://localhost/joomla (o como quiera que haya llamado su sitio al desempaquetarlo.)

La primera pantalla habla por sí misma. Elija un idioma y pulse Siguiente.

La siguiente pantalla que usted ve es la lista de verificación Pre-Instalación. Esta es una lista de los elementos y configuraciones requeridas que Joomla necesita instalar correctamente. Asegúrese de tener la configuración necesaria y haga clic en Siguiente.

En la página siguiente, lea atentamente la licencia y cuando esté listo, haga clic en Siguiente e introduzca los detalles requeridos (Nombre de host: localhost, Nombre de usuario: root, sin contraseña y joomla como nombre de base de datos) y pulse Siguiente.

Omita la pantalla de Configuración FTP haciendo clic en Siguiente y en la página siguiente, ingrese el nombre de su sitio, una dirección de correo electrónico y elija una contraseña. Esta será la contraseña que utilizará para iniciar sesión en el área administrativa de joomla junto con el nombre de usuario: admin.
No vamos a instalar ningún dato de muestra en este momento, ya que queremos agregar los módulos uno por uno para ver cómo nuestra plantilla se desarrolla más adelante en el tutorial. Haga clic en Siguiente.

Felicitaciones! Joomla está funcionando, pero antes de que podamos entrar y jugar tenemos que eliminar la carpeta de instalación. Así que vaya a su carpeta www dentro de wamp, y luego dentro de la carpeta joomla y elimine la carpeta de instalación


3. Una mirada de cerca a Joomla

Es muy difícil en estos días empezar cualquier debate acerca de un CMS de Código Abierto sin que aparezca el nombre de Joomla.
Su instalación junto con el intuitivo panel de administración hace que sea muy popular entre los usuarios que están en busca de un CMS fácil, mientras que al mismo tiempo, esté lleno de características que mantienen
a miles de desarrolladores ocupados contribuyendo aplicaciones y módulos. Si es necesario, familiarícese con el back-end (recomiendo este rápido artículo de Joomla 101 en el blog de Themeforest para obtener una sensación rápida).

Para visitar su sitio, haga clic en la vista previa en la esquina superior derecha del área de administración. Lo que obtendrá es la plantilla predeterminada sin contenido y los módulos más básicos cargados.


4. La plantilla

Para empezar a entender la estructura de la plantilla, echemos un vistazo a la plantilla predeterminada. Vaya a su carpeta www, luego dentro de la carpeta joomla debe ver una carpeta de plantillas.
(wamp /www/joomla/templates). Aquí es donde van todas las diferentes plantillas. Puede cambiar entre plantillas en el panel administrativo.

Dentro de la carpeta de plantillas, verá una carpeta por cada plantilla instalada. Joomla viene con tres plantillas: beez, rhuk_milkyway y ja_purity. Recuerde esta ubicación, ya que aquí es donde va a instalar sus nuevas plantillas en el futuro.

Aunque la mayoría de las plantillas están compuestas por bastantes archivos, sólo se necesitan dos para crear una plantilla funcionando. Estos son:

  • index.php
  • templateDetails.xml

El primero - index.php - es donde va todo el marcado dentro del cual se incrustan los "includes" Joomla. Estos pueden ser vistos como pequeños ganchos donde joomla cuelga información, como módulos por ejemplo

El segundo archivo es templateDetails.xml. Usted puede ver esto como una lista de instrucciones para Joomla. Esta lista debe incluir el nombre de la plantilla, los nombres de los archivos utilizados en la plantilla (imágenes, etc.) y las posiciones que desea utilizar (los "includes" mencionados anteriormente).

El ejemplo anterior es un archivo templateDetails.xml. Como puede ver, esta es una lista específica que le cuenta a Joomla acerca de la plantilla, como el nombre, el autor, fecha de creación, etc ...
Observe la sección de posiciones en el código anterior. Estas son las posiciones de las que hablamos anteriormente, los "includes".
Algunos se explican por sí solos, como el pie de página.
Si usted pone el "include" del pie de página de joomla en el área de pie de página de su diseño, usted será capaz de controlar algunos aspectos del pie de página utilizando el back-end de Joomla. Vamos a intentar juntas con una plantilla simple.


5. Empezando la plantilla

Vamos a hacer algo de preparación de tal manera que tengamos algo con qué trabajar. Vaya a su carpeta de plantillas y cree una nueva carpeta. Vamos a llamarla template_tut.

Dentro de su nueva carpeta, cree un archivo llamado index.php y otro llamado templateDetails.xml (copie/pegue el código en el ejemplo anterior dentro del mismo).

Abra su archivo index.php en el bloc de notas o cualquier otra cosa que utilice para editar el código y copie/pegue lo siguiente dentro de él:

Tenemos un DOCTYPE, un código PHP para el lenguaje, y en la sección principal nuestro primer "include" Joomla. Esto no está en la lista xml puesto que no es una posición.

Lo que esto hace es incluir el código de encabezado de joomla (el cual incluye el título de la página) y un montón de otras cosas que probablemente podrían llenar medio tutorial por sí mismas.

Finalice el marcado en la página mediante la adición de las etiquetas de body y cerrando la etiqueta html.


6. Utilizando la plantilla

Ahora que tenemos los archivos básicos en su lugar, vamos a añadir otro "include", esta vez para mostrar el contenido principal de cualquier página que se está viendo.

Ahora debería tener esto en su index.php

Antes de probar nuestra plantilla, vamos a agregar un artículo para que tengamos algún contenido. Asegúrese de que WAMP se esté ejecutando y vaya a su área administrativa en Joomla con http://localhost/joomla/administrator

Introduzca sus datos de acceso

Vaya a Contenido en el menú y luego a Administrador de artículos en el menú desplegable

Haga clic en Nuevo para añadir un artículo

Dele a su artículo un título, rellene un alias, asegúrese de que se publique en la página frontal y pulse Guardar

Veamos cómo se ve nuestro artículo en la portada. Haga clic en vista previa en la esquina superior derecha después de guardar. Debe ver la portada de su sitio con su texto.

Ahora que hemos publicado contenido, vamos a ver si la plantilla que hicimos funciona realmente. Vuelva al área administrativa y haga clic en Extensiones y luego en Administrador de Plantillas.

Debería ver template_tut en la lista, así que prosiga y elíjala y establézcala como predeterminada.

Haga clic en vista previa y eche un vistazo a su nueva plantilla gloriosa. Bueno, tal vez no tan gloriosa, pero su primera plantilla joomla. ¡HURRA!


7. Añadiendo carne a nuestra plantilla

Tenemos nuestra plantilla de trabajo, está recuperando la información de cabecera, incluyendo el título y mostrando el contenido que creamos en el back-end joomla. Antes de añadir más "includes", echemos un vistazo a los "includes" del módulo position; los que detallamos en nuestro archivo xml.

Se incluyen de la siguiente manera:

Así que para añadir, por ejemplo, la posición izquierda, nuestro index.php se verá así:

Mientras estamos en ello, vamos a agregar la posición de pie de página

Si usted vuelve a su área administrativa y va al Administrador de Módulos, notará un módulo ya existente, el módulo del Menú Principal. Este módulo se instala incluso si elegimos instalar la versión sencilla de Joomla.

El menú ya está enganchado a la posición izquierda (que acabamos de incluir en nuestra plantilla), así que veamos cómo se ve. Haga clic sobre Vista previa

Como puede ver, ahora tenemos un menú con un enlace al Inicio. Puede agregar más elementos de menú y vincular a diferentes contenidos a través del Administrador de Menús.

Vamos a obtener un pie de página. Vaya al Administrador de Módulos, haga clic en nuevo y seleccione Pie de página. A continuación, pulse Siguiente.

En la siguiente página, dé al nuevo módulo el título: Pie de página, y en la lista desplegable Posición, seleccione Pie de página.

Haga clic en Guardar y a continuación previsualice la página.
Ahora también debe ver información del pie de página en su plantilla.


8. Añadiendo más posiciones y módulos

Demos un poco de estilo a nuestra página para que podamos ver lo que estamos haciendo. En su carpeta template_tut cree una nueva carpeta y llámela "CSS", y cree un archivo dentro de ella llamado 'template.css'.

Incruste los "includes" de index.php en algunos divs y envuélvalo todo en un div contenedor y luego vincule su hoja de estilo como en el ejemplo. Siéntase libre de copiar mi diseño desordenado si no está usando uno de los suyos. Hice el mío realmente rápido para este tutorial.

y el CSS

Vamos a enganchar nuestra barra lateral derecha y el encabezado con las posiciones. Agregue la posición superior a la cabecera y la posición derecha a la barra lateral derecha.

Ahora vamos a crear los módulos para esas dos posiciones. Vaya al área de administración de Joomla, inicie sesión si es necesario, y vaya al Administrador de Módulos bajo el menú desplegable Extensiones. Debería ver Menú principal y el Pie de Página que creamos anteriormente. Siga los mismos pasos para crear dos módulos más. Un módulo de búsqueda que colocará en la posición superior y un módulo de Inicio de sesión que colocará en la posición derecha.

Previsualice su página, ahora debe tener una barra de búsqueda en su encabezado y un formulario de inicio de sesión en su barra lateral derecha. Estos son más o menos los conceptos básicos de una plantilla de Joomla. Usted crea posiciones en su diseño, como pequeños ganchos para que Joomla pueda enviarles información, que en la mayoría de los casos se crea en el back-end. Puede aplicar esto a casi cualquier diseño utilizando las muchas posiciones que Joomla ofrece. Espero que esto haya sido útil para usted, tenga en cuenta que estos son los conceptos básicos, las plantillas de Joomla se pueden ser hechas tan complejas y poderosas como usted quiera.

  • Suscríbase al canal RSS de NETTUTS para obtener más información sobre tutorialess y artículos de desarrollo web.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.