Joomla - Creación de plantilla

En este capítulo, estudiaremos cómo create a template en Joomla.

Creando Plantillas

Los siguientes son los pasos simples para crear plantillas en Joomla:

Step 1 - Crea una carpeta llamada MyFirstTemplate dentro de tu Joomla → Templatescarpeta. DentroMyFirstTemplatecarpeta, cree 2 carpetas más con el nombre de imágenes y CSS para guardar todas las imágenes y archivos CSS.

Step 2 - Dentro MyFirstTemplate carpeta, cree un archivo llamado como templateDetails.xml, sin este archivo, la plantilla no se mostrará en Joomla.

templateDetails.xml

<?xml version = "1.0" encoding = "utf-8"?>

<extension version = "3.0" type = "template">
   <name>Tutorials Point</name>
   <creationDate>2015-06-13</creationDate>
   <author>Tutorials Point</author>
   <authorEmail>[email protected]</authorEmail>
   <authorUrl>http://www.example.com </authorUrl>
   <copyright>Jack 2015</copyright>
   <license>GNU/GPL</license>
   <version>1.0.2</version>
   <description>My First Template</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>

Detalles del código

<files> - Contiene los archivos y carpetas disponibles en MyFirstTemplate carpeta.
<folder> - Toma todas las carpetas disponibles en MyFirstTemplate carpeta.

Step 3 - Crea un archivo llamado como index.php. Esto ayuda a ejecutar todas las páginas de Joomla.

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; ?>" >

   <head>                                         //head section
      <jdoc:include type = "head" />
      <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/system.css" type = "text/css" />
      <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/general.css" type = "text/css" />
      <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
   </head>

   <body>                                          //body section
      <jdoc:include type = "modules" name = "top" />
      <jdoc:include type = "component" />
      <jdoc:include type = "modules" name = "bottom" />
   </body>
	
</html>

?>

Detalles del código

<?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; ?>" >

Este código se utiliza para indicarle al navegador qué tipo de página html se está utilizando y comienza el documento HTML describiendo el idioma utilizado en el sitio web.

<head>                                         //head section
   <jdoc:include type = "head" />
   <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/system.css" type = "text/css" />
   <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/general.css" type = "text/css" />
   <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type = "text/css" />
</head>

Estas líneas se utilizan para vincular las distintas hojas de estilo de la plantilla en Joomla.

<body>                                          //body section
   <jdoc:include type = "modules" name = "top" />
   <jdoc:include type = "component" />
   <jdoc:include type = "modules" name = "bottom" />
</body>

Aquí en la sección del cuerpo, el jdocse utiliza para incluir la salida en Joomla de algunas partes del sistema Joomla. losname = "top" se utiliza para configurar el menú en la parte superior.

Step 4 - Después de crear estos dos archivos, inicie sesión en Joomla y haga clic en Extension → Extension Manager y se mostrará la siguiente página.

Step 5 - En la página de arriba, haga clic en Discover enlace, se muestra la siguiente página.

Step 6 - A continuación, haga clic en el Discover para descubrir la nueva plantilla creada como se muestra a continuación.

Step 7 - Haga clic en la casilla de verificación para seleccionar la plantilla y haga clic en Install para instalar la plantilla en Joomla.

Step 8 - Después de instalar la plantilla, puede ver su nueva plantilla creada haciendo clic en Extension → Template Manager. Verá que su nueva plantilla creada se enumera como se muestra a continuación.

Barra de herramientas

A continuación se muestran las opciones de la barra de herramientas en el Administrador de plantillas:

Default - Seleccione la plantilla predeterminada.
Edit - Seleccione la plantilla para editar.
Duplicate - Duplica la copia de la plantilla seleccionada.
Delete - Eliminar la plantilla para Joomla.

↰ Previous page Next page ↱