Joomla - Creazione di modelli

In questo capitolo, studieremo come farlo create a template in Joomla.

Creazione di modelli

Di seguito sono riportati i semplici passaggi per creare modelli in Joomla:

Step 1 - Crea una cartella chiamata MyFirstTemplate dentro il tuo Joomla → Templatescartella. DentroMyFirstTemplatecartella, crea altre 2 cartelle denominate come immagini e CSS per salvare tutte le immagini e i file CSS.

Step 2 - Dentro MyFirstTemplate cartella, crea un file chiamato come templateDetails.xml, senza questo file il modello non verrà visualizzato in 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>

Dettagli del codice

  • <files> - Contiene i file e le cartelle disponibili in formato MyFirstTemplate cartella.

  • <folder> - Prende tutte le cartelle disponibili in MyFirstTemplate cartella.

Step 3 - Crea un file chiamato come index.php. Questo aiuta nell'esecuzione di tutte le pagine di 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>

?>

Dettagli del codice

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

Questo codice viene utilizzato per indicare al browser quale tipo di pagina html viene utilizzato e inizia il documento HTML descrivendo la lingua utilizzata nel sito 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>

Queste linee vengono utilizzate per collegare i vari fogli di stile per il modello in Joomla.

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

Qui nella sezione del corpo, il file jdocviene utilizzato per includere l'output in Joomla da alcune parti del sistema Joomla. Ilname = "top" serve per impostare il menu in alto.

Step 4 - Dopo aver creato questi due file, accedi a Joomla e fai clic su Extension → Extension Manager e verrà visualizzata la pagina seguente.

Step 5 - Nella pagina sopra, fare clic su Discover link, viene visualizzata la pagina seguente.

Step 6 - Quindi, fare clic su Discover pulsante per scoprire il nuovo modello creato come mostrato di seguito.

Step 7 - Fare clic sulla casella di controllo per selezionare il modello e fare clic su Install pulsante per installare il modello in Joomla.

Step 8 - Dopo aver installato il modello è possibile visualizzare il nuovo modello creato facendo clic su Extension → Template Manager. Vedrai che il tuo nuovo modello creato è elencato come mostrato di seguito.

Barra degli strumenti

Di seguito sono riportate le opzioni della barra degli strumenti in Gestione modelli:

  • Default - Seleziona il modello predefinito.

  • Edit - Seleziona il modello per la modifica.

  • Duplicate - Duplica la copia del modello selezionato.

  • Delete - Elimina il modello per Joomla.