À partir de Joomla 3.7, il devient possible d'ajouter facilement des attributs supplémentaires aux articles, aux contacts et aux utilisateurs. Cela est rendu possible grâce à la nouvelle fonctionnalité "Custom fields", que l’on appelle en français "Champs personnalisés". Il y a 15 types de champs standards disponibles, comme un champ de texte, un menu déroulant, un champ date ou même encore un champ où vous pouvez créer votre propre sélection SQL. Avec ces champs, vous pouvez faire en sorte que les données soient saisies de manière structurée sur le site. On peut ensuite bien sûr exploiter ces champs personnalisés au niveau du rendu et de la présentation du contenu du site.

En tant qu'administrateur, vous pouvez facilement créer et configurer les champs personnalisés dans Joomla. Grâce aux nombreuses options on peut configurer les champs à souhait et les rendre visibles sur le frontend, sur le backend ou sur les deux. Les champs peuvent être regroupés et lors de l'édition de contenu ils sont alors affichés dans des onglets séparés. Il est également possible de définir des droits d’accès (ACL) pour les champs afin que seuls certains utilisateurs puissent modifier certains champs. Et on peut attribuer une langue à chaque champ afin de s’assurer qu’il ne soit visible que pour une langue spécifique.

Dans cet atelier, nous allons nous familiariser avec cette nouvelle fonctionnalité puissante de Joomla. Nous allons créer un site Web de recettes à l’aide de simples articles Joomla auxquels nous allons ajouter des attributs supplémentaires tels que le type de nourriture, les ingrédients, le nombre de personnes et le temps de cuisson. C’est grâce aux champs personnalisés que nous pourrons saisir et afficher cette information de manière structurée.

1 - Créer le Menu et la Catégorie Recettes

Dans cet atelier, nous commençons par une installation d’un site Joomla 3.7 vierge, mais vous pouvez également suivre les étapes sur un site Joomla existant 3.7. Tout d'abord, nous créons un nouvel élément de menu appelé "Recettes" dans le gestionnaire de menu Joomla et nous choisissons "Blog d’une catégorie". Une nouvelle fonctionnalité très pratique dans Joomla 3.7 est que nous pouvons aussi créer directement cette catégorie de "recettes" à la volée lors de la création du menu. Il n’est donc plus nécessaire de créer au préalable la catégorie pour pouvoir l’assigner ensuite lors de la création d’un élément de menu.

2 - Créer le Groupe de Champs

Nous créons ensuite un nouveau "Groupe de champs" pour les articles. Nous le faisons Contenu -> Groupes de champs. A ce premier groupe de champs nous donnons comme titre "Recettes", au deuxième nous donnons comme titre "Ingrédients". La description optionnelle que vous pouvez introduire sera visible au-dessus des champs lors de l'édition. Cela peut donc éventuellement être utilisé comme description pour un groupe sur le champs.

3 - Créer le Champ Texte

Maintenant que les groupes de champs ont été créés, nous pouvons commencer à ajouter des champs. Tout d'abord, nous créons un champ pour le temps de préparation d'une recette. Sous Contenu -> Champs, nous créons un nouveau champ de type "texte (text)" auquel on donne comme titre "Temps de préparation". Ce titre sera automatiquement utilisé comme Label de champ, mais peut être adapté plus bas sur l’écran si souhaité. Il y a encore une série d’autres options disponibles, comme par exemple le fait de rendre un champ obligatoire ou facultatif. Pour ce champ, ne modifions aucune autre option, contentons-nous de spécifier à droite de l’écran le Groupe de champs "Recettes" et enregistrons le champ. Notez qu’une fois qu’un champ a été enregistré, il n’est plus possible de changer son type.

4 - Créer l’Article

Maintenant que nous avons créé notre premier champ, nous allons le tester en créant un nouvel article de Recette. Au niveau du contenu de l'article, nous indiquons les étapes de préparation et sous l'onglet "Images et liens" nous sélectionnons une image pour la recette. Parmi les onglets standard qui sont habituellement visibles lors de l'ajout d'un article nous voyons maintenant apparaître un nouvel onglet "Recette". C'est le Groupe de champs que nous avons créé précédemment. Sur ce même onglet, nous retrouvons donc le champ "Temps de préparation". Indiquez le temps de préparation de la recette et enregistrez l’article.

5 - Position du Champ

Si nous regardons maintenant la recette sur le site internet, nous voyons le temps de cuisson au-dessus du texte même de l'article. Pour chaque champ, vous pouvez définir sur l’onglet Paramètres les options d’"affichage automatique". On peut choisir "Après le titre", "Avant l’affichage", "Après l’affichage" et "Non". Essayez les différentes possibilités et voyez ce que ça donne respectivement dans le front-end.

Nous savons maintenant comment créer des champs et comment choisir leur visibilité dans l’administration et sur le site. Il est maintenant temps d'ajouter un certain nombre d’autres champs.

6 - Créer un Champ Liste

Pour le nouveau champ "Type de plat" que nous ajoutons, nous choisissons le type "liste (list)". Ce champ produit une liste déroulante (dropdown) où l’utilisateur peut choisir parmi plusieurs options prédéfinies. Dans "Valeurs de la liste" nous mettons en place trois options: "Entrée", "Plat principal "et" Dessert". Il est également possible d’autoriser un utilisateur à choisir des valeurs multiples en indiquant Oui pour le paramètre "Multiple". Nous assignons ce nouveau champ également au Groupe de champ "Recette" afin qu'il soit visible sous l'onglet du même nom lors de l’édition de l'article.

7 - Créer un Champ Nombre

L'un des autres types de champs qui est à notre disposition est le "Nombre entier (integer)". C’est ce type de champ que nous utilisons pour générer automatiquement une liste déroulante de nombres. Dans le paramètre "Première" nous indiquons "1", pour "Dernière" "10" et pour "Incrémentation" nous indiquons "1". Si nous enregistrons ce champ et nous rendons sur l’article, nous voyons une liste déroulante avec les nombre de 1 à 10. Bien sûr, nous aurions pu choisir le type de champ "liste" et alors introduire manuellement toutes les valeurs autorisées.

8 - Créer un Champ URL

Pour entrer l'URL source d'une recette, nous créons un champ de type "URL (url)". Nous choisissons p.ex. de n’autoriser que les liens "http" et "https" et nous précisons ce choix dans l’option "Protocole". Sous l'onglet "Paramètres" nous choisissons "Après l’affichage" pour le paramètre "Affichage automatique", de sorte que notre lien soit visible au bas de l'article. Il est également possible de donner des "classes" qui sont utilisés pour affichage du champ (choisissez des classes qui existent déjà dans le template, ou adaptez le css en fonction). Au niveau du paramètre "Classe de rendu", indiquez comme classe "muted". En effet, Joomla utilise par défaut Bootstrap v2.3 comme framework CSS, où ce champ aura dès lors une une couleur de police grise.

9 - Créer un Champ Éditeur de Texte

Quant aux ingrédients de la recette, nous allons vouloir les faire introduire à l’aide d’un éditeur de texte. Par conséquent, nous créons un nouveau champ de type "Editeur (editor)", pour lequel nous pouvons préciser différents paramètres comme la largeur et la hauteur de l'éditeur. Pour le "Groupe de champ", nous indiquons le groupe "Ingrédients". Cela va permettre d’afficher le champ dans un nouvel onglet lors de l'édition d'un article. Pour la "classe de rendu" nous indiquons "well well-small", ce qui va faire en sorte que le visiteur verra la liste des ingrédients dans une sorte de cadre à part.
[ NDLR : voir plus bas pour la bonne configuration du plugin Éditeur ]

10 - Créer un Champ pour une citation

Le dernier champ que nous allons créer est un champ de type "texte (text)" que nous utiliserons pour ajouter un citation intégrée dans le corps même de l’article. Pour le paramètre "rendu de classe", nous indiquons "lead text-center" ce qui donne au texte une mise en forme différente et le centre au niveau de l’affichage. De plus, sur l’onglet Paramètres nous mettons l’Affichage automatique sur Non parce que nous allons placer manuellement ce champ au milieu du texte de la recette. Nous mettons le paramètre Afficher le label sur Masquer afin que seul le contenu du champ en question soit affiché et non son label.

11 - Afficher le Champ dans l’Article

Maintenant que nous avons créé le champ pour la citation, nous pouvons l’insérer au sein même du texte de l'article. Nous le faisons à l’aide du shorttag "" que l’on tape à l’endroit où le champ doit être visible. Ici, vous remplacez "X" par l'ID (le numéro) du champ que vous voulez charger. Si votre champ porte l’ID 7, alors vous tapez simplement "" (NDLR : le bouton Champ dans l’éditeur vous permet de réaliser cela encore plus facilement avec une interface graphique, sans à avoir à connaître l’ID du champ). Si nous avons introduit une citation dans ce champs et que nous sauvegardons l’article, alors cette citation sera visible sur le site à l’endroit voulu.

12 - Déterminer l’ordre des champs

Dans la gestion des champs, il est également possible de définir l'ordre des champs. Cela fonctionne grâce au principe de drag & drop de Joomla. Si vous allez Dans le menu Contenu -> Champs, vous pouvez cliquer sur les poignées (les trois mini carrés noirs) figurant devant chaque champ, maintenir appuyé et faire glisser les champs vers l'ordre souhaité.

13 - Affecter les Champs à des Catégories

Si votre site propose des articles classiques outre les articles de recettes, vous ne voudrez pas que les Groupes de champs des attributs de recettes soient également visibles sur les articles classiques. Ceci peut être évité en précisant les catégories d’articles pour lesquelles les différents champs doivent être disponibles. Lors de l’édition d’un champ se trouve ainsi à droite de l’écran une zone ‘Catégorie" où vous pouvez sélectionner une ou plusieurs catégories. De cette manière vous pouvez si souhaité créer facilement des champs spécifiques pour chaque catégori

14 - Définir la visibilité des Champs

Vous pouvez régler le niveau d'accès pour chaque Groupe de champs ou chaque Champ à l'aide de la liste déroulante "Accès" qui fonctionne de la même façon que notamment pour les articles, les éléments de menus et les modules. Comme exemple, nous voulons que les ingrédients soient visibles uniquement pour les membres du site. Nous obtenons ce résultat en mettant l’Accès du Champ "Ingrédients" sur "Enregistré (Registered)". Sur le site, le grand public ne voit plus les ingrédients dans un article. Mais si on se connecte, on voit à nouveau bien ce champ.

15 - Montrer les champs aux utilisateurs Invités

Pour les utilisateurs non connectés (les Guests/Invités) nous voudrions montrer un petit texte indiquant qu’il faut se connecter pour voir les ingrédients. Pour ce faire, nous créons un nouveau champ de type "Editeur (editor)" et dans le paramètre "Valeur par défaut" nous introduisons "<p>Connectez-vous pour voir les ingrédients. Pas encore de compte ? Créez-en un !</p>". De cette manière nous ne devons pas ajouter manuellement ce texte à chaque article. Ensuite, nous mettons l’Accès sur "Invité (Guest)", nous choisissons "Ingrédients" comme Groupe de champs et pour la Classe de rendu, nous indiquons "well well-small". Sur le site, ce champ est maintenant visible tant que le visiteur n’est pas connecté.

16 - Droits d’édition

En plus de définir la visibilité, il est également possible de définir quels sont les Groupes d’utilisateurs autorisés à modifier le contenu du champ. Sous l'onglet "Droits" vous pouvez autoriser ou interdire l'action "Modifier les valeurs des champs personnalisés". Ceci est paramétrable indépendamment pour chaque Champ, mais aussi carrément pour tout un Groupe de champs afin de ne pas devoir éditer chaque champ. De cette façon, vous pouvez autoriser un Groupe d’utilisateurs à modifier les articles, tout en rendant un champ donné non modifiable. Ceci est pratique si vous souhaitez configurer un workflow pour la publication d'articles où un département doit d’abord approuver tout article avant qu'il ne soit publié.

17 - Effectuer une surcharge (template override)

Les Champs sont maintenant tous visibles mais nous voudrions montrer les ingrédients à la gauche de l'article. Nous pouvons y parvenir en créant une surcharge (template override) en allant dans le menu Extensions -> Templates -> Templates. Sur cet écran, ouvrez le template actif et allez dans l'onglet "Créer des substitutions". Ensuite, cliquez sur "com_content" ->" article". La surcharge est maintenant créée et nous pouvons adapter davantage la présentation des articles en sélectionnant l’onglet Éditeur et en allant chercher le fichier suivant pour cliquer dessus : dossier html -> com_content -> article -> default.php.

Personnaliser le rendu de l’article

Dans ce fichier nous cherchons la ligne

 <?php echo $this->item->text; ?>,

que nous remplaçons par

<div class="row-fluid">
 <div class="span4"></div>
 <div class="span8">
 <?php echo $this->item->text; ?>
 </div>
</div>

(NDLR: les classes span4 et span8 fonctionneront sur le template par défaut Protostar, mais pour un template basé sur Boostrap 3, on les remplacera respectivement par col-md-4 et col-md-8 par exemple)

Après avoir sauvegardé cette modification, nous voyons sur le site que le texte de l'article s’est déplacé à droite et crée l'espace droit pour l'affichage du champ avec les ingrédients. Le div avec classe "span4" est encore vide pour l’instant.

19 - Afficher un Champ via la surcharge (template override)

Pour afficher le Champ contenant les ingrédients à l’endroit encore vide, nous plaçons le code suivant qui gère l’affichage d’un champ. Dans le div vide nous plaçons le code suivant :

<?php if (isset($this->item->jcfields[X])): ?>
<?php echo FieldsHelper::render('com_content.article', 'field.render', array('field' => $this->item->jcfields[X])); ?>
<?php endif; ?>
<?php if (isset($this->item->jcfields[Y])): ?>
<?php echo FieldsHelper::render('com_content.article', 'field.render', array('field' => $this->item->jcfields[Y])); ?>
<?php endif; ?>

Remplacer ici "X" par l’ID du Champ des ingrédients créé à l'étape 9 et remplacer "Y" par le champ de l’ID créé à l'étape 15, càd le champ qui n’est visible que pour les visiteurs non connectés. Vous verrez que le Champ Ingrédients est affiché à la fois au-dessus de l'article et dans la barre latérale. Dans les paramètres des champs nous changeons l’Affichage automatique pour le mettre sur Non afin que ces champs ne soient dorénavant visibles que dans la barre latérale.

20 - Personnaliser le style

L'affichage est presque comme nous l’avions à l'esprit. Nous voulons juste encore montrer un peu plus clairement les Labels des champs. Les Labels des champs reçoivent d’office une classe "field-label". On peut donc exploiter cette classe pour personnaliser l'apparence via le CSS. Au template nous allons donc ajouter le CSS suivant pour afficher les Labels en caractères gras :

.field-entry .field-label {
 font-weight: bold;
}

Le rendu de notre recette est maintenant prêt et vous avez pu voir comment étendre facilement les articles Joomla avec des Champs complémentaires et même comment via une surcharge (template override) on peut aller encore plus loin pour personnaliser la présentation et la mise en forme de ses pages. Il est temps maintenant pour vous de faire vos propres essais avec les nouveaux Champs sur votre propre site Joomla !

La documentation Joomla relative aux Champs se trouve en français sur
https://docs.joomla.org/J3.x:Adding_custom_fields/fr

Les Champs sont des plugins Joomla

Lors de la création d'un Champ, vous pouvez choisir parmi 15 types différents. Ces Champs sont tous les plugins séparés. Si vous allez dans le menu Extensions -> Plugins et filtrez les résultats en choisissant "champs" comme Type, vous allez tous les retrouver. Il est donc aussi possible de désactiver certains types de champs afin qu’ils ne soient pas disponibles. Par ailleurs, pour chaque type de champ, vous pouvez également spécifier les paramètres par défaut. Ceci vous évite alors de répéter ces modifications à chaque création de champs. [NDLR : par exemple, pour le plugin Editeur (editor), indiquez "safe html" ou "brut" ou "texte" comme Filtre, sinon vos textes libres risquent de perdre leur mise en forme à chaque sauvegarde de l'article. En effet, le "non" que j'avais interprété comme "non pas de filtre" signifierait en fait plutôt "non pas de html" ].

Parce que les champs sont des plugins, il est également possible en tant que développeur de créer ses propres plugins de champs et ainsi de mettre à disposition sur le site de nouveaux types de champs. On s’attend ainsi à ce que dans les mois à venir soient publiées de nouvelles extensions dans le Joomla Extensions Directory qui offriront comme fonctionnalité un nouveau type de champ. Pensez par exemple à un champ Google Maps, YouTube ou à un champ galerie avec lesquels on pourra facilement ajouter à un article respectivement une carte, une vidéo ou une galerie photos.