Joomla - Création d'un modèle

Dans ce chapitre, nous étudierons comment create a template dans Joomla.

Création de modèles

Voici les étapes simples pour créer des modèles dans Joomla -

Step 1 - Créez un dossier appelé MyFirstTemplate à l'intérieur de votre Joomla → Templatesdossier. À l'intérieurMyFirstTemplatedossier, créez 2 autres dossiers nommés en tant qu'images et CSS pour enregistrer toutes les images et fichiers CSS.

Step 2 - À l'intérieur MyFirstTemplate dossier, créez un fichier appelé templateDetails.xml, sans ce fichier, le modèle ne sera pas affiché dans 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>

Détails du code

<files> - Il contient les fichiers et dossiers disponibles dans MyFirstTemplate dossier.
<folder> - Il prend tous les dossiers disponibles dans MyFirstTemplate dossier.

Step 3 - Créez un fichier appelé index.php. Cela aide à exécuter toutes les pages 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>

?>

Détails du code

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

Ce code est utilisé pour indiquer au navigateur quel type de page html est utilisé et commence le document HTML en décrivant la langue utilisée dans le site 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>

Ces lignes sont utilisées pour lier les différentes feuilles de style du modèle dans Joomla.

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

Ici, dans la section corps, le jdocest utilisé pour inclure la sortie dans Joomla à partir de certaines parties du système Joomla. lename = "top" est utilisé pour définir le menu en haut.

Step 4 - Après avoir créé ces deux fichiers, connectez-vous à Joomla et cliquez sur Extension → Extension Manager et la page suivante s'affichera.

Step 5 - Dans la page ci-dessus, cliquez sur Discover lien, la page suivante s'affiche.

Step 6 - Ensuite, cliquez sur le Discover pour découvrir le nouveau modèle créé comme indiqué ci-dessous.

Step 7 - Cliquez sur la case à cocher pour sélectionner le modèle et cliquez sur Install bouton pour installer le modèle dans Joomla.

Step 8 - Après avoir installé le modèle, vous pouvez afficher votre nouveau modèle créé en cliquant sur Extension → Template Manager. Vous verrez que votre nouveau modèle créé est répertorié comme indiqué ci-dessous.

Barre d'outils

Voici les options de la barre d'outils dans le gestionnaire de modèles -

Default - Sélectionnez le modèle par défaut.
Edit - Sélectionnez le modèle à modifier.
Duplicate - Dupliquer la copie du modèle sélectionné.
Delete - Supprimez le modèle pour Joomla.