Substitutions de templates

Introduction

Les extensions Joomla définissent leur apparence avec des fichiers de template, qui contiennent du HTML et du balisage HTML généré par PHP, ainsi que des fichiers CSS qui définissent la mise en page, le jeu de couleurs, les polices, etc. Cela peut parfaitement convenir à vos besoins, d'autant plus que vous pouvez modifier l'apparence avec vos propres styles CSS. Parfois, vous souhaitez afficher des informations supplémentaires ou au contraire moins d'informations. Pour cela, vous devez créer une surcharge de template.

Beaucoup d'extensions Joomla ont des templates de sortie assez complexes et difficiles à lire. Il faut une bonne compréhension du HTML, du PHP et du CSS pour s'attaquer à certains d'entre eux. Cet article illustre donc le processus en créant une surcharge pour le formulaire de déconnexion qui se trouve en fait dans le module de connexion, mod_login. Le propriétaire du site souhaite que le formulaire de déconnexion affiche l'heure à laquelle la déconnexion automatique interviendra après une période d'inactivité.

Exemple : surcharge de template pour mod_login

Commencer par sélectionner Système → Templates → Templates du site dans le menu de l'Administration, puis sélectionner l'élément Détails et fichiers de Cassiopeia. Cela ouvrira le formulaire Templates : personnaliser (Cassiopeia) :

Important : ne modifiez aucun des fichiers fournis dans le cadre du template Cassiopeia. Lors de la prochaine mise à jour de Joomla, ces fichiers pourraient être écrasés et vos modifications seraient perdues.

Le dossier html est l'endroit où se trouvent les surcharges. Si vous développez le dossier html, vous verrez qu'il existe déjà des surcharges pour les layouts, mod_custom, mod_menu et tinymce. Développez chacun d'eux pour voir ce qu'ils contiennent. Il n'y a pas de mod_login à ce stade.

Créer des surcharges

Sélectionner l'onglet Créer des surcharges pour voir la liste des modules, composants, plugins et layouts pour lesquels vous pouvez créer des surcharges :

Sélectionner l'élément mod_login. Les fichiers php du template mod_login seront copiés dans le dossier html et vous serez renvoyé à l'onglet Éditeur. Développer les dossiers html et mod_login. Vous verrez default.php et default_logout.php.

Vous n'avez pas besoin du fichier default.php car il s'agit d'une surcharge pour le formulaire de connexion. Le sélectionner puis cliquer sur le bouton Supprimer le fichier dans la barre d'outils. Dans la boîte de dialogue d'alerte, confirmer que vous souhaitez supprimer le fichier.

Remarquez comme il est facile de supprimer des fichiers si vous changez d'avis. Et avec le bouton Gestion des dossiers, vous pouvez également supprimer des dossiers entiers. Faites attention à ne pas supprimer quelque chose que vous n'avez pas créé vous-même.

Modifier default_logout.php

Dans l'onglet Éditeur, sélectionner le fichier default_logout.php. Remarquez les boutons en haut à droite : Afficher le fichier original et Afficher les différences. Ce dernier a été défini sur Oui pour la capture d'écran suivante afin de montrer quelques lignes de code ajoutées près du début du fichier. Ces lignes de code calculent le moment où la session de l'utilisateur expirera après le chargement de la page contenant le formulaire de déconnexion.

La zone des différences affiche les lignes ajoutées sur fond vert et les lignes supprimées sur fond rouge. Il n'y a pas de lignes supprimées dans ce cas. Le code est présenté ici au cas où vous souhaiteriez le copier pour essayer cela vous-même.

    use Joomla\CMS\Factory;

    date_default_timezone_set('Europe/London');
    $config = Factory::getContainer()->get('config');
    $lifetime = $config->get('lifetime', 0);
    $time = time() + $lifetime * 60;
    $endTime = date('H:i:s', $time); // time() returns a time in seconds already

Plus bas dans le fichier de surcharge, ligne 36, quelques lignes supplémentaires ont été ajoutées pour afficher le message souhaité :

<p class="text-center">
Your session will expire at <br><?php echo $endTime; ?>
</p>

Enregistrer et recharger la page du site contenant le formulaire de déconnexion.

Vous devriez voir le formulaire de déconnexion changer à chaque rechargement de la page. Mais que faire si vous changez d'avis ? Ou si vous souhaitez des options différentes selon les groupes d'utilisateurs ? Bienvenue dans les Dispositions, sujet d'un article séparé.

Autres surcharges

L'onglet Créer des surcharges du formulaire Templates : Personnaliser (Cassiopeia) permet de créer n'importe lequel des éléments de sortie de Joomla pour lesquels il est possible de créer des surcharges. Les noms des dossiers de surcharge commencent généralement par com_, mod_ ou plg_. Notez que la seconde partie du nom d'un dossier de surcharge de plugin indique le groupe du plugin. Voici un exemple de sélection de dossiers de surcharge :

Exemples : surcharges pour mod_menu et les champs personnalisés

Voici quelques exemples de surcharges de template spécifiques présentées ailleurs dans ce guide utilisateur :

• Une surcharge pour mod_menu permettant de garder les sous-menus ouverts.
• Une surcharge pour les champs personnalisés.

Surcharges de disposition

De petits fichiers de disposition sont souvent utilisés pour des éléments individuels des pages de Joomla!. Le bouton Lire la suite des articles, l'image d'intro et l'image complète sont tous des exemples d'éléments générés par leur propre fichier de disposition. Ces micro-dispositions se trouvent dans le dossier /layouts. Par exemple, dans la vue Blog de catégorie, le fichier blog_item.php contient le code permettant de placer le titre de l'article, une image d'intro, le texte d'intro, ainsi que diverses autres parties pertinentes de la page. Il le fait en utilisant un appel LayoutHelper en passant la disposition à utiliser en paramètre. Voici un exemple, l'appel pour insérer le titre de l'article dans la disposition blog :

<?php echo LayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>

L'emplacement du fichier pour cet élément particulier est déterminé en remplaçant les symboles de point par des barres obliques, en ajoutant /layouts/ au début et .php à la fin :

    JOOMLAROOT/layouts/joomla/content/blog_style_default_item_title.php

Lorsqu'un fichier de surcharge est créé, il se trouve dans :

    JOOMLAROOT/templates/cassiopeia/html/layouts/joomla/content/blog_style_default_item_title.php

Informations complémentaires

• Notions de base sur les templates
• Dossiers et fichiers du template Cassiopeia
• Personnalisation du template Cassiopeia
• Surcharges de template
• Dispositions de template
• Template Cassiopeia simplifié - Une étude de cas - un template simple basé sur Cassiopeia