Formation Logo Joomla Joomla!


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.


Notre client nous demande d'apporter une modification à l'apparence de son site. Il souhaite que les titres des articles de la page d'accueil s'affichent après le texte d'introduction.


Modifications avancées son template Joomla!


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


Modifications avancées son template Joomla!


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


Modifications avancées son template Joomla!


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

Modifications avancées son template Joomla!


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 !


Modifications avancées son template Joomla!


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.


Modifications avancées son template Joomla!


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


Modifications avancées son template Joomla!


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.


Modifications avancées son template Joomla!


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.


Modifications avancées son template Joomla!


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


Modifications avancées son template Joomla!


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.


Modifications avancées son template Joomla!


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.


Modifications avancées son template Joomla!


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


Modifications avancées son template Joomla!


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


Modifications avancées son template Joomla!


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.


Modifications avancées son template Joomla!


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.


Je travaille avec les substitutions parce que :





Please answer the question.


Et ensuite...

 

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.