13.3 Création d’un template Joomla!

Nous voulons créer un template de partie publique de site. Bien des choses sont à réaliser dans l’ordre adéquat. Progressons pas à pas. Mais d’abord un peu de théorie.

13.3.1 Le concept

Commencez par définir les grandes lignes de votre projet de structure. Lorsque l’on envisage de
créer un template de site, il faut partir d’un schéma ou d’un croquis sommaire. Vous pouvez utiliser un crayon et du papier (millimétré) ou dégrossir le projet dans un outil d’édition graphique comme Adobe Photoshop ou son équivalent libre Gimp (http://www.gimp.org/).

Dimensions fixes ou adaptables ?

Les dimensions d’un template de site peuvent être soit fixes, soit variables. Un template variable est capable de s’adapter à la largeur et la hauteur d’affichage disponibles dans la fenêtre du navigateur du visiteur. Dans ce cas, si l’écran du visiteur offre une résolution de 1600 × 1200 pixels, s’il ouvre le navigateur en plein écran, les constituants de la page Web vont être distribués sur ce vaste espace. Les éléments graphiques, a priori non retaillables (logo, bannière, textes), n’auront plus l’aspect prévu par le concepteur du template. Le contrôle exact du résultat vous échappe.

L’autre approche est plus conservatrice. Vous décidez d’un format minimal d’écran, par exemple
800 × 600 (1024 × 768 est courant, mais pas universel) et vous positionnez exactement tous les
éléments au pixel près. Le contrôle est total. Si le visiteur dispose d’une meilleure résolution, les
marges libres devront être remplies par un motif répétitif pour éviter la vacuité.

Il n’y a pas de solution idéale. Pesez le pour et le contre de chaque approche puis décidez-vous.
Tenez compte de vos besoins de mise en conformité avec la Loi Handicap en étudiant l’accessibilité de votre template (voir le Chapitre 14) et concevez deux variantes. Vous connaissez sans doute des sites Web sur lesquels le visiteur peut faire varier la taille des textes. À côté de la commande de changement de taille se trouve souvent un bouton pour changer de présentation (voir Figure 13.1).

Figure 13.1 Changement de présentation.

Si vous optez pour la taille fixe 800 × 600 pixels que quasiment tous les écrans actuels supportent de nos jours (réfléchissez si votre site doit être accessible dans des pays en voie de développement moins richement dotés), vous devez tenir compte de la barre de défilement du côté droit de la fenêtre du navigateur et du cadre. Il ne vous reste donc plus que 780 pixels utilisables en largeur.

Structure

Vous travaillez sur des données structurées. Il faut donc organiser leur positionnement dans une
matrice qui sera plus ou moins visible. Joomla! exploite normalement la structure suivante (voir
Figure 13.2).

Figure 13.2 Exemple de structure de page.

Partie 1

• Section 1 : espace du logo ou image marquante et nom de page (header) ;
• Section 2 : champ de recherche ;
• Section 3 : champ servant de barre d’adresse (breadcrumbs).

Partie 2

• Section 4 : les menus principaux viennent en colonne gauche (left) ;
• Section 5 : le contenu de la page est au centre (mainbody) ;
• Section 6 : les menus secondaires et les cartouches viennent en colonne droite (right).

Partie 3

• Section 7 : pied de page avec accès aux mentions légales (footer).

13.3.2 La rédaction en langage HTML

Une fois la maquette élaborée, nous pouvons passer à la rédaction du code HTML correspondant. Si vous avez utilisé un éditeur graphique, vous pouvez parfois exporter l’image de la maquette sous forme de code HTML. Mais vous pouvez aussi travailler manuellement dans un éditeur de texte ou un éditeur HTML (il en existe plusieurs gratuits et d’autres payants comme Macromedia Dreamweaver).

Le code source du fichier HTML initial possède l’aspect du Listing 13.1. Nous avons volontairement conservé un contenu simple. D’ailleurs, l’en-tête n’est pas conforme au standard XHTML. Le nom du fichier de cette présentation doit être index.php. En effet, Joomla! va essayer de l’interpréter en tant que fichier du langage PHP.

Observez la section head. C’est à cet endroit que sera référencé le fichier CSS externe contenant les styles du template (voir Listing 13.2). Pour le moment, le fichier CSS ne contient qu’une seule
instruction pour définir la taille des caractères.

<html>
<head>
<link href="/joomla150/templates/livrejoomla150/css/template.css"
 rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Partie1">Zone d’en-tete / header<br /><br />
<div id="Section1">Section1</div>
<div id="Section2">Section2</div>
</div>
<div id="Partie2">Zone principale / main<br /><br />
<div id="Section3">Breadcrumbs</div>
<div id="Section6">Colonne droite</div>
<div id="Section4">Colonne gauche</div>
<div id="Section5">Contenu</div>
</div>
<div id="Partie3">Pied de page /footer<br /><br />
<div id="Section7">Section7</div>
</div>
</body></html>

Listing 13.1 : Fichier CSS /index.php

body{
   font-size: 12px;
   font-family: Helvetica,Arial,sans-serif; }
   #Partie1{ /* header */
   float: left;
   border: 2px dotted green; }
#Partie2{ /* main */
   float: left;
   border: 2px dotted yellow; }
#Partie3{ /* Pied */
   clear:all;
   border: 2px dotted red; }
#Section1{ /* A droite en haut */
   float: left; width: 18em;
   margin: 0 0 1.2em;
   border: 1px dashed silver; background-color: #eee; }
#Section2{ /* A gauche en haut */
   float: right; width: 12em;
   margin: 0 0 1.1em; background-color: #eee; border: 1px dashed silver; }
#Section3{ /* Breadcrumbs */
   border: 1px dashed silver;
   background-color: #eee; }
#Section4{ /* Colonne gauche */
   float: left; width: 15em;
   margin: 0 0 1.2em;
   border: 1px dashed silver; }
#Section5{ /* Contenu */
   margin: 0 12em 1em 16em;
   padding: 0 1em;
   border: 1px dashed silver; }
#Section6{ /* Colonne droite */
   float: right; width: 12em;
   margin: 0 0 1.1em;
   background-color: #eee; border: 1px dashed silver; }
#Section7{ /* Pied */
   margin: 0 0 1.1em;
   background-color: #eee; border: 1px dashed silver; }

Listing 13.2 : Fichier CSS /css/template.css

Pour ce premier essai, et dans un but pédagogique, nous allons mettre en place manuellement les
fichiers de ce template dans l’arborescence de Joomla!. Nous verrons ensuite comment créer un
fichier paquetage d’installation dont nous testerons l’installation au moyen du module approprié de Joomla!. Pour le moment, intéressez-vous à ce fichier HTML qui doit porter le nom index.php. Vous devez le transférer dans le sous-dossier [CheminJoomla]/templates/livrejoomla150/. Le fichier template.css doit se trouver dans un sous-dossier qui s’appelle [CheminJoomla]/templates/livrejoomla150/css/.

Ces deux fichiers suffisent à un template minimal. Il ne manque qu’un fichier XML pour que le
Gestionnaire de templates puisse prendre en compte ce nouveau couple de fichiers.

13.3.3 Arborescence de dossiers d’un template

Découvrons donc les conventions invariables que vous devrez suivre. Le template doit être stocké en utilisant les trois sous-dossiers suivants :

  [CheminJoomla]/templates/[NomDuTemplate]/

  [CheminJoomla]/templates/[NomDuTemplate]/css/

  [CheminJoomla]/templates/[NomDuTemplate]/images/

Dans NomDuTemplate, vous ne devez utiliser ni lettres accentuées, ni espaces, ni caractères spéciaux. Lorsque nous produirons un paquetage installable, l’installateur se servira de ce nom pour créer le sous-dossier. C’est ce qui peut entraîner des problèmes sur certains systèmes d’exploitation si vous utilisez des caractères ne faisant pas partie du jeu minimal. Essayez de choisir un nom suggestif malgré tout. Nous avons choisi pour notre exemple livre joomla150.

Plusieurs fichiers sont à prévoir dans les différents dossiers de cette structure, et leurs noms sont
invariables.

Fichiers de mise en page

/templates/livrejoomla150/index.php

C’est le fichier HTML que nous avons étudié plus haut. Il doit porter l’extension .php pour que
Joomla! puisse le faire interpréter comme du langage PHP.

Image miniature d’aperçu

/templates/livrejoomla150/template_thumbnail.png

Ce fichier dont le nom est figé contient une image réduite de la fenêtre du template. Cette image
apparaît lorsque vous amenez le pointeur dans la ligne du template désiré, dans la liste des templates (EXTENSIONS > GESTION DES TEMPLATES). Les aperçus doivent avoir un format d’environ 200 sur 150 pixels. Vous pourrez générer ce fichier plus tard, lorsque vous aurez besoin de vérifier l’affichage de l’aperçu.

Métadonnées du Template

/templates/livrejoomla150/templateDetails.xml

Ce fichier contient les instructions destinées à l’installateur du template. Les données sont utilisées
dans la liste des templates du gestionnaire. C’est ici que vous indiquez quels fichiers doivent être
copiés où, comment se nomme le concepteur du template, et d’autres métadonnées. Lorsque nous verrons comment installer le template automatiquement par l’interface, ce fichier sera exploité par le langage PHP pour copier les données en place à partir des indications. Dans notre exemple, vous pouvez partir du fichier présenté dans le Listing 13.3 et le personnaliser. Il faut définir une balise container XML pour chacun des fichiers utilisés par le template. Vous devez indiquer le nom de fichier et le chemin d’accès.

<files>
<filename> ... Nom du fichier dans la racine du template ... </filename>
<filename> ... Un conteneur filename par fichier</filename>
</files>

Les autres conteneurs du fichier XML servent à décrire le template. Voici le listing source complet de ce fichier XML (Listing 13.3) :

<install version="1.5" type="template">
<name>livrejoomla150</name>
<version>1.0</version>
<creationDate>11.11.2007</creationDate>
<author>Hagen Graf+OE</author>
<copyright>GNU/GPL</copyright>
<authorEmail>hagen@cocoate.com</authorEmail>
<authorUrl>http://www.cocoate.com</authorUrl>
<version>0.1</version>
<description>... Description</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>
</install>

Listing 13.3 : Le fichier templateDetails.xml

Le fichier templateDetails.xml doit lui aussi se trouver dans la racine relative [CheminJoomla]/ templates/livrejoomla150/.

Fichier CSS

/templates/livrejoomla150/css/template.css

Vous pouvez prévoir plusieurs fichiers CSS pour un seul template. Les noms et le contenu des
fichiers sont libres. Tenez cependant compte des conventions en vigueur pour les éléments CSS.
Vous trouverez quelques informations à ce sujet dans la section A.3 de l’Annexe. Pour l’instant, un seul fichier CSS nous suffira.

Images et illustrations

/templates/livrejoomla150/images/[fichiers d’images au choix]

C’est dans ce sous-dossier que vous pouvez réunir les fichiers graphiques référencés par votre
template. L’installateur copiera ces fichiers dans le sous-dossier images.

13.3.4 Premier essai

Une fois que tous les sous-dossiers sont prêts dans la racine relative [CheminJoomla]/templates/ avec les fichiers adéquats (voir Figure 13.3), nous pouvons tester le nouveau template en y accédant dans Joomla! Par le menu EXTENSIONS > GESTION DES TEMPLATES, ouvrez la liste des templates. Sélectionnez le nouveau template qui est apparu et cliquez sur le bouton DÉFAUT (voir Figure 13.4).

Si vous accédez à la partie publique de votre site, vous voyez le résultat (voir Figure 13.5). Pour
l’instant, il n’y a aucun contenu. En effet, les contenus étant générés de façon dynamique, il faut
ajouter des instructions pour les injecter dans les différentes sections du template. N’hésitez pas à
utiliser la structure d’exemple que nous avons préparée pour vous dans le dossier CHAP13 du CD-ROM accompagnant le livre.

Figure 13.3 Structure de sous-dossiers et fichiers du template livrejoomla150.

Figure 13.4 Le nouveau template dans la liste des templates.

Figure 13.5 Aspect du nouveau template minimal dans le navigateur.

13.3.5 Injection des données depuis les modules Joomla!

L’injection des données générées par les modules se base sur les instructions placées dans le code HTML. Le principe se fonde sur un espace de noms conventionnels appelé jdoc que Joomla! utilise pour positionner les éléments dans le template. Si nous ajoutons par exemple dans l’en-tête du fichier index.php la ligne de l’instruction jdoc suivante :

<head>
<jdoc:include type="head" />
</head>

le template affiche un titre et le petit symbole d’abonnement à un fi l d’actualités dans la barre
d’adresse (voir Figure 13.6).

Figure 13.6 La page avec un titre et une icône d’abonnement RSS.

Si vous demandez l’affichage du code source HTML de la page depuis votre navigateur, vous constatez que les métadonnées définies dans l’administration ont été injectées dans le code HTML (voir Listing 13.4). Les fils d’actualités RSS ont été référencés par les balises de liens. C’est ce qui permet à un navigateur du type Firefox d’afficher l’icône d’abonnement RSS dans la barre d’adresse.

  ...
 <head>
 <base href="http://localhost/joomla150/" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="robots" content="index, follow" />
 <meta name="keywords" content="joomla, joomla!, Joomla, Joomla!, J!" />
 <meta name="description" content="Joomla! - dynamische Portal-Engine und
 Content-Management-System" />
 <meta name="generator" content="Joomla! 1.5 - Gestion CMS Open Source" />
 Joomla_Book.indb 234 25/02/08 11:52:57
 <title>Welcome to the Frontpage</title>
 <link href="/joomla150/index.php?format=feed&amp;type=rss"
 rel="alternate" type="application/rss+xml" title="RSS 2.0" />
 <link href="/joomla150/index.php?format=feed&amp;type=atom"
 rel="alternate" type="application/atom+xml" title="Atom 1.0" />
 <script type="text/JavaScript" src="/joomla150/media/system/js/mootools.js">
 </script>
 <script type="text/JavaScript" src="/joomla150/media/system/js/caption.js">
 </script>
 ...

Listing 13.4 : Extrait du code source de la page générée

Puisque notre première injection s’est bien déroulée, nous pouvons maintenant insérer les autres
instructions jdoc.

L’instruction suivante :

<jdoc:include type="modules" name="top" style="none" />

attend en paramètre d’entrée le type d’injection, qui est ici modules. Le paramètre name détermine la position du module (top, right, left, user1...) sur la page. Vous contrôlez cette position dans la section des modules de la commande EXTENSIONS > GESTION DES MODULES. Le paramètre nommé style indique une valeur qui détermine la nature exacte du code HTML générée par le module. Lorsque la valeur est none, les données HTML sont pures, sans aucune balises de structuration <div> (voir le Tableau 13.1).

Tableau 13.1 : Paramètres de module

Voyons l’ensemble des instructions d’injection jdoc dans le fichier définitif index.php est visible
dans le Listing 13.5.

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN" « http://
 www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <jdoc:include type="head" />
 <link href="css/template.css" rel="stylesheet" type="text/css" />
 <link href="/joomla150/templates/livrejoomla150/css/template.css"
 rel="stylesheet" type="text/css" />
 </head> <body>
 <div id="Partie1">Zone d‘en-tete / header<br /><br />
 <div id="Section1">Section1
 <jdoc:include type="modules" name="user3" style="xhtml" />
 </div> <div id="Section2">Section2
 <jdoc:include type="modules" name="top" style="xhtml" />
 </div>
 </div> <div id="Partie2">Zone principale / main<br /><br />
 <div id="Section3">Miettes de pain / breadcrumbs
 <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
 </div>
 <div id="Section6">Colonne droite
 <jdoc:include type="modules" name="right" style="xhtml" />
 </div>
 <div id="Section4">Colonne gauche
 <jdoc:include type="modules" name="left" style="xhtml" />
 </div>
 <div id="Section5">Contenu
 <jdoc:include type="component" style="xhtml" />
 </div>
 </div> <div id="Partie3">Pied de page /footer
 <br /><br />
 <div id="Section7">Section7
 <jdoc:include type="modules" name="footer" style="xhtml" />
 </div>
 </div>
 </body>
 </html>

Listing 13.5 : index.php avec les injections jdoc

Si vous affichez la version mise à jour de votre template sur le site Web, vous voyez dorénavant les contenus dynamiques. Le template a accueilli toutes les données du module. L’aspect visuel pourrait être encore amélioré, mais vous avez compris les principes. Vous savez maintenant créer un template.

Figure 13.7 Un template contenant des données dynamiques.

Voyons enfin comment créer un paquetage pour installer automatiquement le template.

13.3.6 Création d’un paquetage de template

Pour diffuser votre template, vous devez le conditionner dans une archive compressée. Pensez à
créer tout d’abord, si ce n’est encore fait, le fichier image d’aperçu (fichier template_thumbnail.png) en lui donnant les dimensions 227 sur 162 pixels. C’est cette miniature qui permet d’avoir un aperçu du template avant de l’activer (voir Figure 13.8).

Figure 13.8 Image d’aperçu du template livrejoomla150.

Il ne reste plus qu’à créer un fichier compressé à partir de tous les fichiers qui se trouvent dans la
racine relative livrejoomla150, avec les sous-dossiers. Méfi ez-vous de ne pas créer deux sousniveaux homonymes en créant l’archive.

Placez-vous dans la racine relative suivante et sélectionnez tous les fichiers et sous-dossiers :
[CheminJoomla]/templates/livrejoomla150/

Produisez un fichier d’archive portant le nom livrejoomla150.zip.

Faites une sauvegarde de votre template. C’est fini !

Désinstallation de l’ancien template

Vous pouvez maintenant diffuser votre paquetage auprès des autres. Pour le tester, il nous faut
d’abord désinstaller le même template que nous avions installé manuellement.

Pour ce faire, il faut réactiver l’un des autres templates. Par la commande EXTENSIONS > GESTION DES TEMPLATES, sélectionnez un autre template et cliquez sur le bouton DÉFAUT.

Vous pouvez maintenant désinstaller le template. Par la commande EXTENSIONS > INSTALLER/DÉSINSTALLER, cliquez sur le lien de la page TEMPLATES. Choisissez le template livrejoomla150 puis cliquez sur le bouton DÉSINSTALLER (voir Figure 13.9).

Figure 13.9 Desinstallation du template installé manuellement.

13.3.7 Installation avec l’installateur de template de Joomla!

Une fois que vous avez éliminé toute trace de l’installation manuelle antérieure (supprimez le sousdossier s’il n’a pas pu l’être par Joomla! parce que vous aviez laissé une fenêtre d’explorateur ouverte), choisissez la commande EXTENSIONS > INSTALLER/DÉSINSTALLER.

Servez-vous du bouton PARCOURIR pour désigner votre fichier livrejoomla150.zip puis cliquez sur le bouton TRANSFERT DE FICHIER & INSTALLATION. Normalement, l’installateur affiche ensuite un message comme quoi l’installation a réussie. Le message qui apparaît a été tiré du fichier XML (voir Figure 13.10).

Si vous revenez dans la liste des templates, vous devriez maintenant voir réapparaître livrejoomla150 (revoir la Figure 13.8).

Figure 13.10 Réussite de l’installation du paquetage du template.

13.3.8 Quel code source provient de Joomla! ?

Nous savons maintenant créer un template. Étudions brièvement le code HTML généré avec les
données injectées par Joomla!. Joomla! génère le code qui est présenté dans les conteneurs de la présentation. Il s’agit de balises HTML qui font référence à des classes de styles CSS et à des identificateurs ID. Joomla! se base notamment sur deux fichiers CSS qui décrivent certaines classes et identificateurs et qui doivent être présentes dans tout template.

Ces deux templates se nomment /templates/system/css/system.css et /templates/system/css/general.css.

Les deux fichiers sont référencés dans la section d’en-tête <head> du template au moyen des instructions suivantes :

<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" />

Découvrons brièvement les classes et les identificateurs ID que contiennent ces fichiers.

Étude détaillée de la position de module left

Prenons comme sujet d’étude le container correspondant à la colonne de gauche (voir Figure 13.11).

Voici le code HTML qui se trouve dans le fichier de mise en page index.php :

<div id="Section4">Colonne gauche <jdoc:include type="modules"
   name="left" style="xhtml" />

La balise <div> de la section est reliée à un identificateur de style CSS par le nom Section4.

Si vous affichez le code source dans le navigateur, le listing résultant sera bien plus long, puisque
toutes les instructions jdoc ont fait l’objet d’une injection de données par Joomla! (Listing 13.6).

Figure 13.11 Le module dans la position left.

 ... Autres instructions HTML
 <div id="Section4">Colonne gauche
 <div class="moduletable_menu">
 <h3>Menu principal</h3>
 <ul class="menu">
 <li id="current" class="active item1">
 <a href="http://localhost/joomla150/">Accueil</a>
 </li>
 <li class="item2">
 <a href="/joomla150/joomla-license">Licence de Joomla! </a>
 </li>
 </ul>
 </div>
 ... Autres instructions HTML

Listing 13.6 : Extrait du code source HTML généré et affiché

Remarquez dans cet extrait les trois classes CSS appelées menu, active item1 et item2. Nous avons présenté les différents suffixes CSS dans les paramètres de module au Chapitre 7. Ces suffixes sont utilisés ici. Vous les repérez aisément dans un fichier CSS du template standard rhuk_milkyway :

div.module_menu h3 {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #eee;
   margin: -23px -4px 5px -5px;
   padding-left: 10px;
   padding-bottom: 2px;
   }
div.module_menu {
   margin: 0;
   padding: 0;
   margin-bottom: 15px;
   }
div.module_menu div div div {
   padding: 10px;
   padding-top: 30px;
   padding-bottom: 15px;
   width: auto;
   }
div.module_menu div div div div {
   background: none;
   padding: 0;
   }
div.module_menu ul {
   margin: 10px 0;
   padding-left: 20px;
   }
div.module_menu ul li a:link, div.module_menu ul li a:visited {
   font-weight: bold;
 }

Dans ce cas précis, les blocs CSS permettent d’afficher des coins arrondis pour les menus. D’autres instructions dans le même fichier permettent de contrôler le format des titres de troisième niveau (<h3></h3>) et les listes non triées (les éléments de menu).

C’est bien cette méthode de formatage des contenus à laquelle nous nous attendions. Les données générées dans les structures de balises <div> peuvent recevoir une personnalisation supplémentaire via l’attribut style. Dans notre template d’exemple, nous nous sommes cantonné à un paramètre style avec la valeur XHTML. Dans le précédent template, le même paramètre utilisait la valeur rounded. Il correspond à la balise en quatre parties <div>.

Ce mode de génération du code est tout à fait approprié au contrôle du format par des styles CSS. Mais si vous poursuivez la lecture du code source, vous allez à nouveau tomber sur des balises de tableaux ! En effet, le composant Content continue à utiliser cette ancienne méthode. C’est là que vos problèmes commencent, si vous prenez l’idée de vouloir contrôler le format de Content (le contenu du milieu de la page) de façon individuelle, sans utiliser le tableau. Mais Joomla! vous propose une solution.

Template Overrides (adaptation des données HTML en sortie sans modification des données de départ)

Pour résoudre le problème de l’utilisation des tableaux en sortie, il faudrait normalement modifier
les données d’origine dans Joomla!. Content serait dans ce cas libéré du problème des tableaux,
mais vos données personnalisées seraient sans doute écrasées dès la prochaine mise à jour de
Joomla!.

Pour se libérer de ce souci, Joomla!1.5.0 propose le concept de vue (View). À chaque composant est associé un sous-dossier supplémentaire appelé views dans lequel se trouvent différentes vues de sortie des données du composant. Dans le cas du composant nommé com_content, les cinq sousdossiers s’appellent archive, article, category, frontpage et section. Chacun d’eux contient des fichiers qui offre des vues différentes du contenu. Souvenez-vous des affichages sous forme de tableau et de blog. Chacun des cinq sous-dossiers contient un dossier tmpl qui contient à son tour plusieurs fichiers chargés de contrôler la présentation (voir Figure 13.12).

Pour adopter cette nouvelle approche, il faut définir un nouveau sous-dossier dans le dossier de votre template. Si nous conservons le même exemple, ce sous-dossier doit s’appeler com_content/article si vous désirez intervenir sur la présentation des données du composant Content dans la mise en page du type article.

Autrement dit, il faut copier les fichiers suivants :

  [CheminJoomla]/components/com_content/view/article/tmpl/*.*

Dans le nouveau sous-dossier du template puis les adapter à vos besoins exacts.

  [CheminJoomla]/templates/[nomtemplate]/html/com_content/article

Cette approche est facile à adopter en relation avec le template Beez. Dans ce cas précis, les fichiers se trouvent à cet endroit :

  [CheminJoomla]/templates/beez/html/com_content/article

Ils passent outre les données du noyau sans les modifier (surcharge, override).
Joomla! va ensuite chercher les différents fichiers dans le dossier du template. S’il les trouve, il les
utilise. S’il ne les trouve pas, il utilise les données du noyau provenant du composant lui-même.

Figure 13.12 Structure arborescente du sous-dossier views.