Un article de recette ne se lit pas comme un communiqué de presse. La recette veut ses ingrédients dans une colonne, le temps de cuisson en fiche, la photo à côté du titre ; le communiqué veut une colonne de texte et rien d'autre. Joomla ne sait poser qu'une seule disposition pour tous les articles du site.
L'onglet Templates article du style lève cette limite. Vous y composez plusieurs mises en page, et vous en attribuez une à chaque catégorie. Les sous-catégories en héritent, sauf si vous en décidez autrement.
C'est l'exact pendant des templates blog du chapitre précédent : même principe, même écran, même carte. Celui-ci décrit la page d'un article, l'autre sa vignette dans une liste.
Vous n'avez rien à installer de plus. Les templates font partie du paquet Corpus. Ils s'appuient sur les rangées, les champs personnalisés et les positions de module de Joomla : aucun composant tiers, aucune table en base qui vous appartiendrait à moitié.
Où cela se règle
Style → Templates article. Vous y trouvez trois choses :
- Template par défaut du site. Celui qui s'applique aux articles dont ni la catégorie ni ses parentes n'en désignent un. Laissez-le sur Joomla natif tant que vous n'avez pas de raison d'en changer.
- Les templates. La liste de ceux que vous composez. Quatre ou cinq suffisent dans la plupart des sites.
- La carte, à droite. Elle dessine chaque template tel qu'il sortira. Elle se met à jour pendant que vous réglez, et sert à vérifier d'un coup d'œil.
Puis, catégorie par catégorie : Contenus → Catégories → votre catégorie → onglet Corpus. Un seul champ, Template article. Sur Hériter, la catégorie prend celui de sa parente, et ainsi de suite jusqu'au template par défaut du site.
Les deux templates livrés
Ils figurent en bas de la liste, marqués verrouillé. Aucun des deux ne se modifie ni ne se supprime, chacun se copie : le bouton Copier de sa carte en fait une ligne ordinaire, que vous n'avez plus qu'à déplacer.
Joomla natif reproduit exactement l'ordre de Joomla : titre, icônes, bloc d'information, étiquettes, image, sommaire, corps, outils, pagination.
Article avec plan pose le plan de l'article et son sommaire dans une colonne de gauche, sur trois douzièmes, et tout le reste à droite. C'est une mise en page que tout le monde veut à l'identique, et qui coûterait six écrans de réglages à refaire à la main : une rangée à deux colonnes, un rapport, puis onze briques à reposer une par une, dont une oubliée fait disparaître les étiquettes ou la pagination.
Un module sous le plan reste visible. Si vous posez un module (un contact, un formulaire, une annonce) dans la même colonne que le plan, c'est toute la colonne qui reste collée en haut pendant la lecture : le plan, puis le module au bout. Si elle est plus haute que l'écran, elle défile d'un bloc. Un plan seul se comporte comme avant. La colonne qui porte le texte de l'article ne colle jamais. Sous 62 rem de large, plus rien ne colle et tout s'empile.
Le natif sert deux fois. C'est le point de retour : si un template part de travers, vous le remettez sur les articles concernés et la page redevient celle de Joomla. Et c'est le point de départ : sa copie vous donne l'ordre du cœur, que vous n'avez plus qu'à réarranger.
Commencez toujours par une copie. Composer un template depuis la page blanche revient à réinventer un ordre que Joomla a déjà réfléchi.
Un template se compose en deux tableaux
Les rangées
Une rangée est une bande horizontale. Elles s'empilent dans l'ordre affiché.
| Réglage | Ce qu'il fait |
|---|---|
| Colonnes | Une, deux ou trois. |
| Rapport | La largeur relative des colonnes, en douzièmes : 5 / 7, 8 / 4, 3 / 6 / 3… Sans objet sur une rangée d'une seule colonne. |
| Fond | Aucun, Alterné, un gris neutre, ou Teinté : une dérive de la teinte du site, elle la suit donc. |
| Appliquer à | Où le fond se pose : toute la rangée, ou une seule de ses colonnes. N'apparaît que si un fond est choisi. |
Une rangée sans aucune brique ne sort pas dans la page. Vous pouvez donc en préparer plus que nécessaire sans salir le résultat.
Attention en déplaçant une rangée. Les briques désignent une rangée par son numéro. Déplacer une rangée déplace son numéro, pas son contenu : la troisième rangée devient la deuxième, et les briques qui visaient la deuxième se retrouvent dedans. Réglez plutôt les numéros dans le tableau des briques.
Les briques
Une ligne, une brique. Dans une même cellule, elles sortent dans l'ordre affiché.
| Réglage | Ce qu'il fait |
|---|---|
| Brique | Ce qui sort. La liste complète est plus bas. |
| Rangée | Le numéro de la rangée qui la reçoit. |
| Colonne | Pleine, Gauche, Centre ou Droite, selon le nombre de colonnes de la rangée. |
| Option | Ce que la brique doit montrer : quel champ, quel groupe, quelle position de module. Les autres briques n'en ont pas besoin. |
Une brique qui désigne une rangée ou une colonne inexistante ne sort pas, et la carte le signale. Elle n'est pas déplacée d'office : une brique qu'on remet ailleurs sans le dire est plus difficile à retrouver qu'une brique absente.
La liste des briques
Le contenu de l'article
| Brique | Ce qu'elle sort |
|---|---|
| Titre de l'article | Le titre, en h1, ou en h2 si l'élément de menu affiche déjà son propre titre de page. |
| Introduction | Le seul texte d'introduction, celui qui précède le lien Lire la suite. |
| Corps de l'article | Le texte. Avec l'option Sans l'introduction, seulement ce qui suit Lire la suite. |
| Image de l'article complet | L'image Article complet de l'onglet Images et liens. |
| Image d'introduction | L'image Intro. |
Les données de l'article
| Brique | Ce qu'elle sort |
|---|---|
| Un champ | Un champ personnalisé, choisi dans l'Option. |
| Un groupe de champs | Tous les champs d'un groupe, en fiche : intitulé à gauche, valeur à droite. |
| Bloc d'information | Catégorie, auteur, date. L'Option permet de n'en prendre qu'une, ou les trois. |
| Étiquettes | Les tags de l'article. |
Autour de l'article
| Brique | Ce qu'elle sort |
|---|---|
| Modules d'une position | Les modules publiés sur article-1 à article-6. |
| Liens associés | Les liens de l'onglet Images et liens. |
| Sommaire de l'article | Le sommaire des sauts de page. |
| Pagination | La navigation entre les pages d'un article découpé. |
| Imprimer, courriel, partager | Selon ce que vous avez activé dans le Theme Customizer. |
| Icônes de modification | Le crayon, pour qui a le droit de modifier. |
Les sorties de plugins
Trois briques, après le titre, avant le contenu, après le contenu, placent ce que produisent vos plugins de contenu : boutons de partage, notes, blocs publicitaires. Si vous ne les posez pas, Corpus les sort quand même à la fin : personne ne doit perdre du contenu en oubliant une brique.
Et une brique de mise en page
Respiration n'écrit rien : elle ajoute une hauteur. Quand vous voulez seulement espacer, n'écrivez pas un trait horizontal : un <hr> porte un sens, il sépare deux sujets.
Les cas qui demandent une explication
L'introduction et le corps
Quand vous posez la brique Introduction, la brique Corps retire d'office l'introduction : sans cela, le chapô sortirait deux fois. La carte l'écrit sur la pastille : Corps de l'article (sans l'introduction). Si vous choisissez vous-même une option sur le Corps, c'est votre choix qui l'emporte.
Un article sans lien « Lire la suite » n'a pas d'introduction distincte : Joomla range tout le texte au même endroit. La brique Introduction se tait alors, et le corps sort en entier.
Un champ qui sort deux fois
Un champ personnalisé réglé sur Affichage automatique est déjà posé par Joomla. Le poser en plus comme brique le fait sortir deux fois. La liste des options vous le dit à l'endroit même où vous choisissez :
Conseil du chef (attention : affichage automatique actif, le champ sortira deux fois)
Le remède est dans le champ, pas dans le template : Champs → votre champ → Options d'affichage → Affichage automatique → Ne pas afficher automatiquement.
Le titre du groupe de champs
Joomla n'affiche jamais le titre d'un groupe en page publique. Corpus peut le faire : dans la liste des options, chaque groupe figure deux fois : En bref et En bref (avec son titre). Le titre sort en h2, ou en h3 si l'article est déjà en h2. Jamais en h1 : il n'y en a qu'un par page.
Le titre de l'article ne se perd pas
Si vous ne posez pas la brique Titre, elle sort quand même, en tête. Un article sans titre de premier niveau est un défaut d'accessibilité, pas un choix de mise en page. Et si vous la posez deux fois, elle ne sort qu'une fois.
La roue dentée : habiller une brique
Au bout de chaque ligne de brique, après la colonne Option, une roue dentée ouvre un panneau. Il contient deux réglages, et seulement deux.
Classe. Une classe déjà dessinée par le template. La liste ne propose que celles dont la règle existe : une classe qui ne fait rien vous ferait chercher la panne ailleurs. Corpus en livre quelques-unes : Corps d'introduction, Mention, en petit et gris, Filet sous le titre, Fiche : intitulé à gauche, valeur à droite.
Identifiant. Un nom unique, pour viser cette brique-là depuis le champ CSS personnalisé des Paramètres avancés. Lettres, chiffres, tiret et souligné, et il doit commencer par une lettre : un identifiant qui commence par un chiffre est valide en HTML mais illégal dans un sélecteur CSS, donc inutilisable là où il doit servir.
L'enrobage n'existe que si l'un des deux est rempli. Une brique sans réglage sort exactement comme avant, sans balise de plus. Sinon, Corpus l'entoure ainsi :
<div class="brique-article ma-classe" id="mon-id"> … </div>brique-article n'a aucune règle dans la feuille : c'est une prise, pas un dessin. Lui donner un style ferait un cadeau empoisonné : une marge que vous n'auriez pas demandée et dont vous ne sauriez pas d'où elle vient.
Dans la carte, une brique qui porte l'un des deux réglages est marquée d'une petite roue. Passez la souris dessus pour lire ce qu'elle contient : un réglage caché derrière un bouton est un réglage oublié.
Ajouter vos propres classes
Paramètres avancés → Vos classes pour les briques, juste sous le champ CSS personnalisé. Deux colonnes : la classe, sans le point, et l'intitulé que la liste affichera.
Le voisinage des deux champs n'est pas décoratif. La règle s'écrit au-dessus, la classe se déclare en dessous :
/* dans « CSS personnalisé » */
.encadre-alerte {
border-left: 4px solid var(--accent);
padding-left: var(--e-4);
}puis une ligne encadre-alerte / « Encadré d'alerte » dans le tableau. Après enregistrement, elle apparaît dans la roue dentée de toutes vos briques, sous Vos classes.
Vos classes vivent dans les paramètres du style : elles survivent aux mises à jour de Corpus, et elles partent avec un préréglage. Celles que nous livrons, elles, sont dans un fichier du template et sont réécrites à chaque version : ne les modifiez pas sur place, ajoutez les vôtres ici.
Un exemple complet : la fiche recette
Sept rangées, pour obtenir une photo à gauche et le résumé à droite, puis les ingrédients en colonne et les étapes au centre.
| Rangée | Colonnes | Rapport | Fond | Ce qu'on y met |
|---|---|---|---|---|
| 1 | Une | Titre, Icônes de modification | ||
| 2 | Une | Bloc d'information, Étiquettes | ||
| 3 | Deux | 6 / 6 | Teinté sur la Droite | Image de l'article complet, puis le groupe En bref (avec son titre) |
| 4 | Une | Introduction | ||
| 5 | Trois | 3 / 6 / 3 | Le champ Ingrédients, le Corps, les modules article-2 | |
| 6 | Une | Teinté | Le champ Conseil du chef | |
| 7 | Une | Imprimer courriel partager, Plugins : après le contenu |
Le fond Teinté posé sur la seule colonne de droite de la rangée 3 donne l'encadré « En bref » sans teinter la photo à côté.
Combien de templates, et jusqu'où
Les templates sont enregistrés dans les paramètres du style, comme tous vos autres réglages. Ce champ a une taille maximale en base de données. Cinq templates complets en occupent environ un septième : vous avez donc largement la place, et Corpus vous avertit bien avant que ce soit un problème.
Au-delà d'une dizaine de templates, la difficulté n'est plus technique : c'est la liste elle-même qui devient pénible à parcourir, et vos rédacteurs ne sauront plus lequel choisir. Quatre ou cinq, nommés clairement, valent mieux que douze.
Emporter vos templates vers un autre site
Style → Paramètres avancés → Sauvegarde et transport, colonne de droite.
Le bouton Exporter, les templates article seuls produit un fichier .json qui contient trois choses, et rien d'autre :
- le template par défaut du site ;
- vos templates, avec leurs rangées et leurs briques ;
- votre liste de classes de briques.
La ligne sous le bouton les compte : 1 template, 7 rangées, 18 briques, 3 classes (7,4 Ko).
Pourquoi les classes suivent. Une brique enregistre un nom de classe pris dans votre liste. Sans la liste, elle désignerait à l'arrivée une classe que le sélecteur ne propose pas, et la valeur serait perdue au premier enregistrement, sans message.
Ce qui ne suit pas : l'affectation aux catégories. Elle vit dans les catégories, pas dans le style. Sur le site d'arrivée, vos templates existent mais aucune catégorie ne les désigne encore : refaites l'affectation une fois, catégorie par catégorie.
L'import remplace, il ne complète pas. Les templates du style cèdent la place à ceux du fichier, et votre liste de classes à celle du fichier. Exportez les vôtres d'abord (un clic) si vous voulez pouvoir revenir en arrière. Les catégories qui désignaient un template disparu retombent sur le template par défaut du site, sans rien casser.
Pour emporter tout le style (teinte, typographie, layout, CSS), voir Aller plus loin.
Si vous désinstallez Corpus
Les templates vivent dans les paramètres du style Corpus et dans un champ ajouté aux catégories. En repassant sur Cassiopeia :
- vos articles ne changent pas : le texte, les champs, les images, les tags sont ceux de Joomla et le restent ;
- vos articles reprennent la disposition de Cassiopeia, celle de Joomla ;
- le champ Template article disparaît des catégories ;
- si vous réinstallez Corpus, vos templates et vos affectations sont retrouvés intacts tant que le style n'a pas été supprimé.
Rien de ce que vous écrivez n'est enfermé dans le template. C'est le principe, et c'est vérifiable : videz vos catégories de leur template, tout continue de fonctionner.
À jour pour Corpus 2.1.684.