Written by Nous allons voir comment modifier des positionnements d’élément “par défaut” lorsque vous créez un site Joomla!.
Comment personnaliser vos templates Joomla! en utilisant les surcharges Vous auriez besoin de modifier des positionnements d’élément “par défaut” lorsque vous créez un site Joomla! ? C’est ce que nous allons voir dans cette article. Problème : Affichage par défaut de Joomla!
Avez vous déjà ressenti le besoin de modifier des positionnements d’élément “par défaut” lorsque vous créez un site Joomla! ? Bien, vous n’êtes pas seul. Nous avons tous été confrontés à des éléments que nous ne pouvions pas déplacer, mais simplement modifier (comme par exemple l’apparence). Par exemple, que faire si vous souhaitez placer le titre en dessous de chaque article au lieu d’au dessus ? Ou encore, comment faire si vous souhaitez créer plus de div pour des modifications plus importantes ?
Solution : Les surcharges Joomla!
Voici ici une bonne nouvelle:Joomla! nous permet de créer des surcharges de templates, qui sont des modifications sur les composants ou modules Joomla!, qui peuvent être apportées à partir du template, et surtout sans toucher les fichiers core de Joomla!.
Identifier le composant
Premièrement, vous devez identifier le composant que vous souhaitez modifier, vous connaîtrez alors le fichier à surcharger.Prenons l’exemple de placer le titre d’un article sous l’article lui-même.
C’est la manière dont Joomla! présente le blog par défaut (en utilisant les données d’exemple en blog et le template Protostar fourni avec Joomla 3) :
Blog avec Joomla 3 utilisant les données d’exemple par défaut
Pour identifier le composant, vous devez accéder à l’élément de menu de cette page, à partir de l’administration de votre site, et regarder quelle URL il a.
Identifier l’élément de menu
Quand vous entrez dans l’élément de menu lui-même, vous remarquerez qu’il a un lien qui apporte quelques informations sur le composant.
Identifier le lien dans l’élément de menu
Examinons le lien : index.php?option=com_content&view=category&layout=blog&id=9
File : index.php
Fait référence au point d’entrée de Joomla!, qui est commun à tous les composants.
Component : option=com_content
L’option paramètre dit que le composant utilisé est com_content, qui est le composant qui gère les catégories et articles du contenu Joomla!.
View : view=category
Cela signifie que le contenu du composant (qui a plusieurs vues) utilise une vue pour présenter une catégorie.
Layout : layout=blog
Il y a différents layouts disponibles pour la vue. Dans ce cas, c’est la présentation de la catégorie en utilisant un layout blog. Parfois, le layout n’est pas présent, et cela signifie que le layout par défaut est utilisé (appelé “default”).
Item : id=9
Enfin, cela signifie que l’ID de la catégorie est #9. C’est sans rapport pour créer les surcharges, alors que c’est une astuce très utile pour comprendre la structure de la base de données de Joomla!. Identifier le fichier à surcharger
Indépendamment du composant, de la vue ou du layout, tout va se situer dans un fichier PHP à la structure particulière, une structure qui ne nous convient pas. Mais lorsque nous comprenons la structure actuelle, il est alors facile d’identifier ce que nous souhaitons changer.
Structure du composant Joomla! avec ses fichiers, identification du fichier blog.php.
Si vous regardez l’installation de Joomla!, vous remarquerez que sous le dossier composant, vous avez le dossier “com_content” (que nous venons d’identifier), et ensuite vous avez le dossier “view”, avec le dossier “catégory” (avec la présentation de la vue catégorie). Ensuite, vous avez le dossier “tmpl” qui contient les layouts ; et enfin, nous avons le fichier blog.php, qui est le fichier que nous recherchons.
Layout avec plusieurs fichiers
Dans certains cas, le layout peut être une addition de vues. Par exemple, le blog est une addition de vues car il a le fichier principal pour la présentation du blog lui-même, mais également différents fichiers afin de présenter certaines parties individuellement, comme chaque article séparément. Vous remarquerez que ce layout a plus d’un fichier car il y a plusieurs fichiers php dans le dossier tmpl comme blog.php, blog_children.php, blog_item.php, et blog_links.php.
Maintenant, c’est le moment auquel nous avons besoin d’un peu de connaissance php, ou du moins d’une bonne logique. Nous souhaitons modifier chaque layout d’article dans le blog. Cela signifie que le fichier que nous devons modifier n’est pas blog.php mais le fichier qui présente chaque article.
Identification du fichier layout
A partir du code php, si vous n’en n’avez pas peur , vous pouvez voir qu’à chaque fois que php effectue un cycle pour présenter un article, il utilise le code echo $this->loadTemplate(‘item’); qui signifie qu’il utilise le fichier qui présente l’élément (article). Donc, le fichier que nous souhaitons modifier est blog_item.php.
Surcharger le fichier dans notre template
Maintenant que nous avons identifié le fichier (bien sûr, vous pouvez explorer d’avantage et faire des tests “echo” pour vous assurer que c’est le bon fichier), nous allons copier ce fichier dans notre template, en utilisant le dossier html et la même structure que celle présente dans le composant. Dans ce cas, ce sera : html/com_content/category/blog_item.php (notez que nous n’avons ici pas besoin des dossiers view et tmpl).
Fichier copié dans notre template
Maintenant le nouveau fichier est notre surcharge, car vous noterez que si vous effectuez des changements dans ce fichier, Joomla! préférera ce fichier à celui par défaut du composant. A partir d’ici, vous pouvez commencer vos changements. Apporter des changements
Bien sûr, apporter des changements ici requiert quelques connaissances basiques en php, mais vous noterez que des changements simples sont également réalisables en appliquant une logique et en identifiant les balises utilisées dans le html généré par Joomla!.
Dans ce cas, le titre est une balise h2, qui vient avec un IF (car Joomla! vérifie si nous avons choisi d’afficher le titre ou si nous l’avons désactivé à partir de l’administration).
Identification du code que nous souhaitons modifier
Allons-y, et déplaçons le titre afin de le placer sous l’article (juste avant l’appel afterDisplayContent, qui est un déclencheur exécuté après le contenu, utile pour les plugins), et le code final ressemblera à ça :
Voilà! Notre site ressemble à cela :
Conclusion
Dans toutes les créations de templates et de sites web, les changements peuvent être apportés à presque tous les niveaux, spécialement lorsque vous personnalisez les composants et les modules. Même si cela nous oblige à faire des tests et à mettre les mains dans le cambouis, cela nous permet d’apporter presque n’importe quelle personnalisation à nos sites Joomla!.
NOTE : Cet article est une traduction de l’article de Joomlashack : Customize Your Joomla Templates by Learning Overrides.