Le Web du 34

Que signifie un template enfant ?

Il s’agit d’un template qui dépend de son parent, chargeant tout à partir du parent, sauf si vous décidez de charger des fichiers spécifiques à partir du template enfant. Imaginez que vous ayez un template principal et que vous souhaitiez créer une variante : vous pouvez le faire avec un template enfant, en chargeant tout à partir du template parent mais en utilisant un css personnalisé ou en ajoutant une position personnalisée dans le fichier index.php. 

Vous pouvez également imaginer que vous souhaitez personnaliser le template Cassiopeia qui est livré avec Joomla 4. Si vous modifiez les fichiers, vos modifications seront perdues à chaque mise à jour de Joomla.

Maintenant, vous pouvez créer un template enfant pour obtenir toutes les fonctionnalités de Cassiopeia mais sans risquer de perdre votre travail.

Comment créer un template enfant ?

Un template enfant n’a besoin que d?un seul fichier pour fonctionner : templateDetails.xml
Mais vous pouvez ajouter autant de fichiers que vous le souhaitez !

Commencez simplement par créer un nouveau dossier de template appelé template_enfant

SITE/templates/template_enfant

Copiez le fichier xml du template cassiopeia et collez-le dans votre nouveau dossier

SITE/templates/template_enfant/templateDetails.xml

Définir le parent : modifier le fichier XML et remplacer la ligne 1 avec cette ligne Cassiopeia

Notez que nous remplaçons la ligne car le template enfant ne doit pas avoir la fonctionnalité héritable, vous devez donc la supprimer.

Remplacer le nom du template Cassiopeia avec template_enfant

Installer le template enfant
Allez dans votre administration pour installer le template enfant : Extensions >> Gérer >> Découvrir

Install

Vous pouvez sélectionner votre nouveau template enfant et l’installer.

Vous devez avoir le message de réussite :  success 

Ensuite, vous pouvez voir votre nouveau template dans les styles de templates.

Maintenant, sélectionnez-le et configurez-le pour en faire le template par défaut de votre site web et allez dans le frontend : vous verrez le modèle Cassiopiea !

Apporter quelques modifications au template enfant

Vous pouvez maintenant adapter le CSS de votre nouveau modèle pour le styliser comme vous le souhaitez.

Copiez le fichier

SITE/media/templates/site/cassiopeia/css/template.css dans SITE/media/templates/site/template_enfant/css/template.css

Ce fichier est maintenant utilisé par Joomla pour le rendu votre template enfant.

N’oubliez pas que vous n’avez que 2 fichiers dans votre template enfant, le xml et le css copiés.

Joomla sait automatiquement où charger les fichiers lors de l’utilisation d’un template enfant.

Quelques rappels Joomla

<?php defined(’_JEXEC’) or die;?>
    

C’est une ligne de commande pour sécuriser le système. Il vérifie que les données proviennent de Joomla.

<jdoc:include type="head" /> 

On dit à joomla d’ouvrir les balises

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    

On dit à joomla d’ouvrir le fichier template.

--> $this->baseurl : utilise l’adresse du site
    --> $this->template : utilise le nom du template.
    

 

<div id="cadre_texte"><jdoc:include type="component" style="xhtml" /></div>

Cette ligne indique que l’on va afficher le texte (component) dans le bloc que l’on appelle cadre_texte

<div id="cadre_droite"><jdoc:include type="modules" name="droite" style="xhtml" /></div> 

C’est la même ligne que pour la colonne gauche, sauf que l’on met les paramètres pour la droite.

Il faut retenir ceci :

<jdoc:include type="modules" name="nom de la position" style="xhtml" /> : indique le nom d’un module
    <jdoc:include type="component" style="xhtml" /> : Affiche le texte
    

Ce sont ces 2 commandes qu’il faut connaître.
Ces 2 lignes sont spécifiques à Joomla.
C’est cela qui permet d’afficher le texte et les modules

<div class="clr"></div> : c’est une commande que l’on utilise pour réinitialiser les positions
    <div id="footer"><jdoc:include type="modules" name="pied_de_page" style="xhtml" /></div> :
    

On indique à Joomla d’afficher un module qui à la position pied_de_page en utilisant le style footer.