Comment personnaliser vos templates Joomla! en utilisant les surcharges

Comment personnaliser vos templates Joomla! en utilisant les surcharges

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) :

surcharges joomla

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.

overrides element de menu joomla!

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.

Surcharges joomla element de menu blog

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.

Identifier le fichier a modifier

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.

La boutique

Trucs @ Astuces Joomla! 3Le livre 100 Trucs & Astuces pour Joomla! 3
vous permet de faire les bons choix parmi ceux qui s'offrent à vous lors de la création de votre site web ou lors de l'ajout de fonctionnalités ou d'extension grâce à de simple conseils, de vous simplifier la tâche grâce à des astuces et des mini-tutoriels pour gagner du temps dans la gestion de votre site Joomla!, ainsi que dans l'organisation de sa sécurité, son référencement, ses performances, et bien plus encore.

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.

overrides-Identifying-the-layout-file

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

overrides-Override

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

overrides-Overriding-title

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 :

overrides-Performing-change

 

Voilà! Notre site ressemble à cela :

overrides-New-blog-look

 

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 JoomlashackCustomize Your Joomla Templates by Learning Overrides.

 

Notez cet article:
11
Comment rapporter un bug Joomla! sur Joomlacode.or...
Versioning de contenu, un aperçu de la nouvelle fo...

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
lundi 17 juin 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.