Petite révolution de printemps chez Joomla qui introduit du CCK en natif (custom fields). Un petit bonus pour du templating au sein même du corpus de l'article.

Édité le

E-créatif

Les « customs fields », une petite dose de CCK dans Joomla

E-créatif

Le pas est franchit, les champs personnalisés (custom fields) intègrent désormais Joomla 3.7.0 !

Pour la création du template, ce n’est pas aussi modulable que sur WordPress, mais les divers champs sont très riches et peuvent, dans une moindre mesure, permettre de se dispenser d’un composant CKK de type K2, Seblog, F2C…

De l’intérêt du CCK (Content Creation Kit)

Dans un CMS classique, l’article que va créer un utilisateur lambda risque très vite d’être malmené côté codage…

Il sera fastidieux d’intégrer des médias ou de faire un minimum de mise en page (colonnes, fonds…) sans devoir passer par HTML. Il convient donc de simplifier, et canaliser l’utilisateur non pas au travers de deux seules zones à remplir (le titre et le corpus via l’éditeur WYSIWYG Tiny), mais grâce à divers champs à remplir ou à sélectionner.
Les contenus ainsi segmentés seront automatiquement mis en page, en amont.
Le rédacteur ne peut plus faire de bug, et la mise en page est parfaite.

Mise en œuvre des champs personnalisés pour un article

Le menu Champs personnalisés
Rien de plus simple, il suffit de se rendre dans le nouveau menu « Contenus / Champs » et de cliquer sur « Nouveau ».
En veillant à ce que le plugin « Système – Champs » soit activé.

On a alors le choix d’une quinzaine de champs, dont notamment trois types de champs texte : simple, multi-ligne et Éditeur.
A retenir également des champs images, des listes et cases à cocher, URL, calendrier, couleur… et même des listes issues de requêtes SQL !

Le menu Champs personnalisés

A la création d’un nouveau champ, on pourra choisir :

  • d’afficher le label ou pas
  • la longueur des textes
  • si le champs est requis ou non
  • l’accès aux champs en back-office / front-office
  • l’affichage par rapport au corpus de l’article (avant, après, ou après le titre)
  • les droits d’accès aux champs en fonction des utilisateurs
  • la possibilité de choisir plusieurs valeurs ou non
  • de traduire les champs si le site est multilingue.
  • d’ajouter des classes de rendu ou d’édition aux balises

Notons que ces 15 champs sont aussi, pour certains, configurables en tant que plugins « Champs – »

Et qu’il est possible d’organiser ces champs :

  • les affecter à des catégories en particulier
  • ou les grouper dans des groupes préalablement créés

NB : nous ne nous intéressons pas dans cet article aux champs personnalisés propres aux utilisateurs (fiches de contact personnalisables).

Insérer les champs dans l'article

Ainsi lors de l’édition d’un article de nouveaux onglets apparaissent : Champs, ou nom du groupe de champs, et ce en fonction de la catégorie sélectionnée.

D’autre part, dans l’éditeur Tiny apparaît un nouveau bouton « Champs ».
Celui-ci permet d’intégrer librement dans la page un ou plusieurs champs. Ils apparaitront donc dans le corpus même de l’article, et non pas dans les trois emplacements disponibles autour de l’article.

Cela s’active via le plugin « Contenu – Champs », avec les précisions :
Ce plug-in permet l’affichage d’un champ personnalisé inséré par le ‘Bouton – Champs’ ou en utilisant directement la syntaxe {field #} dans la zone de texte de l’éditeur :

  • {field 1} affichera le champ avec l’ID 1
  • {field 1,foo} affichera le champ avec le type de mise en page ‘foo’
  • {fieldgroup 2} affichera tous les champs dont le groupe de champs a l’ID 2

L’affichage des champs personnalisés

Affichage des champs personnalisés dans l'article Joomla
Et voilà le résultat !
En jaune, les trois emplacements des champs personnalisés :

  • « Après le titre » : champ texte simple
  • « Avant » : calendrier, cases, couleur, éditeur, liste, nombre, URL, radio, utilisateur, texte multi-ligne
  • « Après » : champs Média et Liste d’images, sans labels

J’ai également activé pour cet exemple les détails et affichages de l’article:

  • L’en-tête de page
  • Les liens « Imprimer » et « Envoyer à un ami »
  • Les Détails en positionnement « Divisé » : auteur, catégorie, dates, affichages, tags
  • Une image et sa légende, alignés à gauche, insérés via l’onglet « Images et liens »
  • Bouton de navigation « Précédent / Suivant », et Vote affichés en bas via leurs plugins respectifs
  • Trois liens via l’onglet « Images et liens », positionnés « au dessous »

Bref, cela fait beaucoup de bonus autour du contenu principal de l’article, il y a des redondances, et on s’égare vite dans les réglages : paramètres (globaux, de la catégorie, ou de l’article), plugins, boutons…

Voyons voir comment exploiter cette batterie pour de la mise en page…

Optimiser le template d’article avec les champs personnalisés

Nous disposons donc, dans « component », de trois nouveaux emplacements autour de l’article dans lesquels on peut insérer pas mal de choses intéressantes.
Mais la combinaison de ces trois positions avec les emplacements des affichages et détails de l’article est plutôt compliquée.

Et bien sûr, nous ne disposons pas d’un template secondaire dédié à l’article, à éditer en Smarty ou autre. Aucun moyen donc d’insérer des balises ou des attributs, des plugins, iframes… à moins de passer en PHP bien entendu.

D’un point de vue sémantique, une mise en page riche ne sera d’ailleurs pas très optimisée car tous les champs personnalisés sont insérés dans des balises de listes DL/DD.

Pour ceux qui construisent leurs templates, mais ne veulent pas trop hacker les fichiers PHP, il faudra donc s’adapter au balisage que génère Joomla, et passer en CSS.
Techniquement, cet ensemble Détails, Images et liens, affichages, et maintenant champs personnalisés reste difficilement manipulable en CSS. Les trois emplacements de champs n’ont pas de classes distinctes, d’ailleurs même le corpus de l’article n’en a pas. Difficile de créer des alignements et des fonds avec tout ça, mais pas impossible…

Enfin, les champs personnalisés ne concernent que le corpus de l’article entier, et non pas les introductions pour la vue en liste.
Et j’en profite pour relever qu’il n’y a toujours pas en natif de traitement d’image (redimensionner, rogner, formater) comme sur WordPress, dommage…

Bref, les nouveaux champs personnalisés natifs de Joomla ne sont pas un CCK en tant que tel, mais avec un peu d’habileté on peut sûrement bien les exploiter !

URL de référence:
https://docs.joomla.org/J3.x:Adding_custom_fields/fr