Google+
Linkedin

Modifier l’aspect des champs de Joomla !

Depuis les dernières versions du CMS Joomla, il a été intégré au noyau la fonctionnalité des champs personnalisés.

Cette fonctionnalité est très pratique, comme pour des fiches de cuisine, ou tout autre type de contenu dont certaines données se répètent.
Cela permet de structurer et d’uniformiser le contenu.

Conseils pour augmenter la vitesse de chargement de votre site internet

Seulement voilà, on peut avoir besoin que l’aspect et particulièrement le codage de ces champs soit différents de celui d’origine !

Layout de champ

Lorsque vous êtes dans les paramètres d’un champ depuis l’administration de votre site Joomla, vous avez un réglage intitulé Layout.
C’est ici que vous allez pouvoir changer l’apparence du champ en question.

Changer l'aspect d'un champ personnalisé sous le CMS Joomla

Overriding de l’aspect d’un champ

Mais avant de pouvoir avoir le choix d’un autre layout, il faut d’abord mettre un peu la main dans le code pour le créer. Il va donc falloir pour cela overrider, yeah!
La méthode consiste à substituer la vue d’origine par une autre depuis le dossier du template. Une méthode qui se trouve être toujours la même, à peu de chose près, avec Joomla.

Fichier d’origine

On va donc copier le fichier d’origine. Celui qui nous intéresse se nomme render.php et se trouve dans le dossier field du dossier layouts du dossier com_fields se trouvant dans le dossier components.
Vous me suivez où vous préférez une image ?

Override d'un champ personnalisé sous le CMS Joomla

Fichier du template

Ensuite, il faut créer un dossier field dans un dossier com_fields dans le dossier layouts du dossier html de votre template Joomla (attention l’ordre n’est pas le même que précédemment, ce serait trop simple). Et là vous collez votre fichier !
Encore une image ?

Override d'un champ personnalisé sous le CMS Joomla

Ceux qui ont suivi se disent "mais pourquoi qu’il s’appelle contreindics.php celui-là?"
Et bien tout simplement parce que je l’ai renommé au moment de le coller, na! Pourquoi ? parce que si vous le laissez avec son nom d’origine, il écrasera celui par defaut. Le but étant d’avoir le choix entre plusieurs présentations pour les champs.

Vous pouvez alors modifier dans les dernières lignes le code d’affichage du champ.

Code d'origine d'un champ personnalisé sous le CMS Joomla

Le conteneur des champs

Une fois que vous aurez mis la main dans ce cambouis technique, vous vous apercevrez que vous n’avez pas modifié le conteneur des champs.
Par défaut Joomla affiche le tout sous forme de liste de définition. Outre le fait que le code d’origine ne contient pas de balise <dt></dt> , ce mode d’affichage ne correspond pas forcément à tout type de contenu. Jetez un oeil sur pompage.net pour tout savoir sur la question.

On pourrait par exemple vouloir afficher cela sous forme de blocs avec des balises <div></div>.
Pour cela il suffit de refaire les manips vues plus haut, mais cette fois avec le dossier fields (et non field).

Override d'un champ personnalisé sous le CMS Joomla

Et modifier les dernières lignes concernant l’affichage du conteneur des champs.

Override d'un champ personnalisé sous le CMS Joomla

Attention !

  1. Pour que la modification du conteneur fonctionne, il ne faut pas renommer le fichier render.php
  2. La modification sera globale sur l’ensemble des conteneurs de champs. Il n’y a pas d’option pour choisir un layout comme sur un champ individuel.
Vous recherchez un Webdesigner ?
ou
comments powered by Disqus