Formation Joomla!

4.3 - Modifications avancées d'un template

Il y a deux façons de modifier l'apparence de son site : la bonne et la mauvaise.
- la mauvaise : modifier les fichiers d'origine depuis le panneau d'administration ou par FTP,
- la bonne : copier les fichiers d'origine et travailler sur cette copie.

Pourquoi procéder de la sorte ?

Simplement parce que si vous travaillez directement sur les fichiers d'origine, vous perdrez toutes vos modifications lors de la prochaine mise à jour de votre site.

La modification des fichiers de style CSS permet de personnaliser l'affichage du template de son site. On peut également modifier les fichiers source pour apporter des changements plus conséquents au code du template, d'un composant ou d'un module. Pour travailler sereinement et proprement, nous allons voir comment surcharger (overrider en anglais) le template Protostar.

Ici, une simple modification des styles CSS ne nous sera pas d'un grand secours. Il faut donc surcharger le template pour obtenir l'affichage demandé. Les étapes à suivre seront les suivantes :

• faire une copie du template
• identifier l'extension et le fichier à modifier
• effectuer la substitution

Copier le template

Nous l'avons vue en préambule, Protostar est le template "par défaut". Nous allons faire une copie de ce template et travailler sur cette copie pour réaliser la demande du client.

A partir du panneau d'administration de Joomla!, ouvrez "Extensions" puis "Templates".
Dans le menu latéral de gauche, cliquez sur "Templates" et filtrez l'emplacement "Site" pour afficher Protostar. Cliquez sur "Protostar Détails et fichiers".

Dans la barre d'outils, cliquez sur "Copier le template".

Indiquez le nom de votre nouveau template et cliquez sur "Copier le template".

La totalité des fichiers (CSS et autres) du template est maintenant copiée.

Si vous revenez à la page qui présente vos templates, vous constaterez que celui que vous venez de créer est bien présent !

Pour utiliser ce nouveau template, n'oubliez pas de le désigner comme template par défaut !

Effectuer une surcharge

La première chose à faire est d'identifier ce que l'on doit surcharger pour répondre à la demande du client (pour rappel : l'affichage des titres des articles sur la page d'accueil).
Pour cela, ouvrez le menu affichant la page d'accueil à partir du menu haut du panneau d'administration.

Ouvrez le lien de menu affichant votre page d'accueil. Portez votre attention sur l'URL du lien de menu :

Décortiquons cette URL pour la comprendre : index.php?option=com_content&view=featured

• Fichier : index.php
  
  • désigne le point d'entrée Joomla, qui est commun pour tous les composants,
• Composant : option=com_content
  
  • Le paramètre de l'option nous dit que le composant utilisé est com_content, qui est le composant qui gère les catégories et les articles de contenu dans Joomla,
• Vue : view=featured
  
  • cela indique que le composant de contenu utilise la vue "featured" pour afficher les articles.

Maintenant que nous savons quelle extension nous devons modifier, nous devons trouver quel est le fichier à surcharger.

Ouvrez "Extensions" puis "Templates".
Dans le menu latéral de gauche, cliquez sur "Templates" et filtrez l'emplacement "Site" pour afficher "Mon Template" (c'est à dire, le template que vous avez créé à la première étape). Cliquez sur "Mon Template Détails et fichiers".

Cliquez ensuite sur l'onglet "Créer des substitutions".
Dans la colonne du milieu sont répertoriés l'ensemble des composants installés sur votre site Joomla. Le deuxième d'entre eux est "com_content", celui sur lequel nous devons intervenir, justement.

En cliquant sur "com_content", vous faites apparaitre la liste des vues disponibles pour ce composant : categories, category, blog et featured.
Cliquez sur "featured" pour créer votre substitution.
Un message vous confirme que la subsitution a bien été créée.

Cliquez sur l'onglet "Editeur" pour afficher l'arborescence des dossiers et des fichiers de votre template. Ouvrez "HTML" puis "com_content" puis "featured".

Dans le dossier "featured", nous avons 3 fichiers :

• default.php
• default_item.php
• default_links.php

Ouvrons le premier fichier "default.php".
Le contenu s'affiche dans l'éditeur sur la partie droite de votre écran.

A la ligne 36, vous notez l'instruction suivante :

echo $this->loadTemplate('item');

En clair, cela signifie : "affiche le contenu du fichier 'item'" qui est généré par le fichier "default_item.php".

Ouvrons le fichier "default_item.php" dans lequel nous trouvons de la ligne 25 à 35, les instructions php qui génèrent l'affichage du titre des articles.

Il nous faut copier/coller l'ensemble de ces lignes à la ligne 79, c'est à dire juste avant l'affichage du bouton "Lire la suite".

Une fois l'opération terminée, votre code devrait ressembler à ça :

La partie du code affichant le titre des articles se retrouve maintenant entre les lignes 68 et 78.

Enregistrez votre saisie et affichez le frontend pour vérifier que votre susbtitution fonctionne.

Quizz

Dans le prochain article, nous verrons comment ajouter, retirer, changer des positions du template. Mais avant cela, je vous invite à répondre à une question portant sur l'article que vous venez de lire.

Et ensuite...