![\"Joomla](\"https:\/\/cinnk.com\/wp-content\/uploads\/2020\/10\/Joomla_sur_les_Champs.jpg\" "\\"Joomla")
<\/p>\nFort de son \u00e9volution Joomla! 3.7 nous apporte 40 nouvelles fonctionnalit\u00e9s et pr\u00e8s de 700 am\u00e9liorations!
L\u2019une d\u2019entre elles, et pas la moindre, nous donne la possibilit\u00e9 de rajouter des champs personnalis\u00e9s pour les articles, les utilisateurs et les fiches de contact. Cela va nous permettre de cr\u00e9er, sans CCK et sans codage, des \u00e9v\u00e9nements, des fiches produits, des articles de recettes etc …<\/p>\n
<\/p>\n
\nFort de son \u00e9volution Joomla! 3.7 nous apporte 40 nouvelles fonctionnalit\u00e9s et pr\u00e8s de 700 am\u00e9liorations!L\u2019une d\u2019entre elles, et pas la moindre, nous donne la possibilit\u00e9 de rajouter des champs personnalis\u00e9s pour les articles, les utilisateurs et les fiches de contact. Cela va nous permettre de cr\u00e9er, sans CCK et sans codage, des \u00e9v\u00e9nements, des fiches produits, des articles de recettes etc …<\/p>\n
A notre disposition ce sont 16 champs et la cr\u00e9ation de groupes de champs :<\/p>\n
Calendrier
\nCase \u00e0 cocher (checkboxes)
\nCouleurs
\n\u00c9diteur
\nGalerie
\nInteger
\nListe
\nListe d\u2019images
\nM\u00e9dia
\nRadio
\nSQL
\nTexte
\nZone de texte
\nUrl
\nUtilisateur
\nGroupes d\u2019utilisateurs<\/p>\n
Afin de mieux appr\u00e9hender l\u2019\u00e9tendue de ces champs vous en trouverez, \u00e0 suivre, la pr\u00e9sentation int\u00e9grale.Un exemple sous la forme d\u2019un article \u00c9v\u00e9nement suivra cette pr\u00e9sentation.
\nPr\u00e9ambule
\nVous trouverez la possibilit\u00e9 de cr\u00e9er des champs \u00e0 partir des menus :<\/p>\n
\u201cUtilisateurs\u201d > \u201cChamps\u201d \u201cGroupes de champs\u201d;
\n\u201cContenu\u201d > \u201cChamps\u201d \u201cGroupes de champs\u201d;
\n\u201cComposants\u201d > \u201cFiches de contacts\u201d > \u201cChamps\u201d \u201cGroupes de champs\u201d.<\/p>\n
Si vous utilisez la gestion des versions dans les articles, sachez que les champs n\u2019y sont pas stock\u00e9s! Vous ne trouverez donc aucune information sur les modifications des champs.<\/p>\n
Vues vers les liens de cr\u00e9ations des champs et groupes de champs
\nAffichage commun \u00e0 tous les champs
\nDans l\u2019onglet g\u00e9n\u00e9ral<\/p>\n
Onglet G\u00e9n\u00e9ral de la cr\u00e9ation d\u2019un champ
\nCertaines donn\u00e9es sont obligatoires pour tous les champs :<\/p>\n
Titre : Nom que vous donnerez \u00e0 votre champ. Il ne sera pas visible lorsque vous utiliserez le champ pour un article, un utilisateur ou un contact. Il reste modifiable apr\u00e8s enregistrement du champ.
\nType : Lorsque vous cr\u00e9ez un champ vous avez un choix disponible de 16 champs. Apr\u00e8s l\u2019enregistrement de ce champ le type n\u2019est plus modifiable.
\n\u00c9tiquette (Label) : Texte descriptif du champ, il se remplit automatiquement du \u201cTitre\u201d, mais reste modifiable. C\u2019est cette \u201c\u00c9tiquette\u201d qui sera utilis\u00e9e lors de la cr\u00e9ation du champ dans l\u2019article et qui sera visible dans le frontend de votre site internet.<\/p>\n
D\u2019autres donn\u00e9es ne sont pas obligatoires :<\/p>\n
Description : C\u2019est une bulle d\u2019aide qui appara\u00eetra lors de la saisie du champ dans un article, un utilisateur ou un contact. Ce texte n\u2019est pas accessible pour la fonction multilingue et n\u2019est pas visible dans le frontend de votre site internet.
\nObligatoire (Requis) : Vous rendez obligatoire le remplissage du champ lors de la cr\u00e9ation d\u2019un article, utilisateur ou contact. Il sera marqu\u00e9 d\u2019un ast\u00e9risque pour en informer le r\u00e9dacteur.
\nValeur par d\u00e9faut (Default Value) : Vous pouvez d\u00e9finir dans cet espace une valeur par d\u00e9faut pour votre champ. En fonction du champ il faudra le remplir par une valeur ou un indice. Ce texte reste traduisible pour les sites multilingues.
\nStatut : Comme pour la majorit\u00e9 des composants Joomla! vous avez la possibilit\u00e9 de choisir le statut du champ : Publi\u00e9, Non publi\u00e9, Archiv\u00e9 ou Dans la corbeille.
\nGroupes de champs (Field groups) : C\u2019est la possibilit\u00e9 de faire appartenir votre champ \u00e0 un ou plusieurs groupes de champs.
\nCat\u00e9gories : C\u2019est la possibilit\u00e9 d’attribuer le champ \u00e0 une ou plusieurs cat\u00e9gories d\u2019articles, utilisateurs ou contacts.
\nAcc\u00e8s : Comme pour un article pour pouvez choisir le niveau d\u2019acc\u00e8s du champ pour sa visibilit\u00e9 en frontend.
\nLangue : Dans le cas d\u2019un site multilingue vous pourrez choisir de l’attribuer \u00e0 toutes ou \u00e0 une seule langue.
\nNote : Saisir une note facultative pour le champ.<\/p>\n
Dans l\u2019onglet param\u00e8tres<\/p>\n
Onglet Param\u00e8tres de la cr\u00e9ation d\u2019un champ
\nDonn\u00e9es non obligatoires :<\/p>\n
Texte d\u2019information (Placeholder) : C\u2019est la possibilit\u00e9 d\u2019ins\u00e9rer, dans le champ \u00e0 remplir, un texte d\u2019information qui sera gris\u00e9 et non visible dans le frontend.<\/p>\n
Class CSS front (Render Class) : Ajout d\u2019un suffixe de classe CSS pour l\u2019affichage en frontend de votre site internet.
\nClass CSS \u00e9dition (Edit Class) : Ajout d\u2019un suffixe de classe CSS pour l\u2019\u00e9dition du champ, par exemple lors de la cr\u00e9ation d\u2019un article.
\nAfficher l\u2019\u00e9tiquette (Show Label) : Afficher ou masquer l\u2019\u00e9tiquette pour l\u2019affichage en frontend de votre article, utilisateur ou contact.
\nD\u00e9sactiv\u00e9 (Disabled) : Le champ est bien visible lors de la cr\u00e9ation d\u2019un article, utilisateur ou contact, mais il n\u2019est pas accessible pour le remplissage.
\nLecture seule (Read-Only) : Le champ est en lecture seule et donc non modifiable dans l’\u00e9dition.
\nVisibilit\u00e9 (Show On) : Le champ est visible dans le backend, frontend ou les deux.
\nPosition (Automatic Display) : Le champ sera visible en frontend en dessous du titre, au dessus du contenu de l\u2019article, en dessous du contenu de l\u2019article ou pas du tout.<\/p>\n
Vues des trois positions d\u2019un champ
\nLes deux onglets suivants \u201cPublications\u201d et \u201cDroits\u201d ont les m\u00eames caract\u00e9ristiques que la plupart des composants.<\/p>\n
Onglet Publication de la cr\u00e9ation d\u2019un champ <\/p>\n
Onglet Droits de la cr\u00e9ation d\u2019un champ
\nLe champ Calendrier<\/p>\n
Vues du champ Calendrier, cr\u00e9ation, article et frontend
\nLe champ \u201cCalendrier\u201d fournit une zone d\u2019\u00e9dition qui permet de rentrer une date manuellement ou en utilisant la petite ic\u00f4ne sur la droite. Un pop-up s\u2019ouvre pour permettre de s\u00e9lectionner une date, de l\u2019effacer ou choisir celle du jour.En option, lors de la cr\u00e9ation du champ, vous avez la possibilit\u00e9 de choisir un horaire. Le format d\u2019affichage de la date dans le frontend est fonction de la langue d\u2019affichage de votre site internet.
\nLe champ Case \u00e0 cocher (Checkboxes)<\/p>\n
Vues du champ Case \u00e0 cocher, cr\u00e9ation, article et frontend
\nCe champ nous fournit la possibilit\u00e9 de cr\u00e9er une liste de cases \u00e0 cocher simple. (pas de s\u00e9lection multiple) Cela veut dire qu\u2019une case coch\u00e9e d\u00e9s\u00e9lectionne les autres. Si vous devez remplir la case \u201cValeur par d\u00e9faut\u201d, elle correspond \u00e0 l\u2019une des cases \u201cValeur\u201d de la Checkboxes.Le bouton \u201c+\u201d vous permet de rajouter des lignes. Le bouton \u201c-\u201d de supprimer des lignes et le symbole \u201cmulti-fl\u00e8ches\u201d de d\u00e9placer les lignes pour organiser votre formulaire.
\nLe champ Couleurs<\/p>\n
Vues du champ Couleur, cr\u00e9ation, article et frontend
\nLe champ \u201cCouleurs\u201d permet d\u2019afficher une zone dans laquelle nous pouvons entrer un code couleur sous la forme #3498db . Il suffit de cliquer dans la zone pour faire appara\u00eetre un pop-up nous permettant de s\u00e9lectionner une couleur. L\u2019affichage en frontend correspond au code couleur s\u00e9lectionn\u00e9, sous la m\u00eame forme #3498db.
\nLe champ \u00c9diteur<\/p>\n
Vues du champ \u00c9diteur, cr\u00e9ation, article et frontend
\nLe champ \u201c\u00c9diteur\u201d poss\u00e8de 4 options suppl\u00e9mentaires :<\/p>\n
Afficher les Boutons (Show Buttons) : Trois choix possibles (Use From Plugin, Oui ou Non). Use From Plugin, correspond aux r\u00e9glages de plug-ins de l\u2019\u00e9diteur que vous utilisez.
\nMasquer les boutons (Hide Buttons) : Ici vous pouvez choisir de ne pas afficher des boutons sous forme de liste s\u00e9par\u00e9e par des virgules. Exemple : pagebreak,readmore.
\nLargeur (Width) : La largeur de l\u2019\u00e9diteur peut \u00eatre r\u00e9gl\u00e9e en largeur par une valeur en % ou px.
\nHauteur (Height) : La hauteur de l\u2019\u00e9diteur peut \u00eatre r\u00e9gl\u00e9e par une valeur en % ou px.<\/p>\n
Le fait d\u2019avoir un \u00e9diteur WYSIWYG comme champ nous permet toutes les solutions html existantes comme par exemple l\u2019affichage d\u2019une carte Google.
\nLe champ Galerie<\/p>\n
Vues du champ Galerie, cr\u00e9ation, article et frontend
\nLe champ \u201cGalerie\u201d offre la possibilit\u00e9 d\u2019afficher une galerie via un dossier dans le r\u00e9pertoire images de votre Joomla! avec des miniatures s\u00e9lectionnables.
\nListe des options dans l\u2019onglet g\u00e9n\u00e9ral du champ Galerie :<\/p>\n
Largeur des Miniatures (Thumbnail Width) : Donner une largeur aux miniatures en pixel ;
\nLargeur Maximale (Max Width) : Inscrire une largeur maximale \u00e0 l\u2019affichage de l\u2019image s\u00e9lectionn\u00e9e dans les miniatures en pixel.
\nHauteur Maximale (Max Height) : Inscrire une hauteur maximale \u00e0 l\u2019affichage de l\u2019image s\u00e9lectionn\u00e9e dans les miniatures en pixel.
\nInclus (Recursive) : Choisir si l\u2019on veut que les images des sous-dossiers soient incluses > R\u00e9glage du plug-ins, Oui ou Non.
\nMultiple : Choisir si l\u2019on veut pouvoir s\u00e9lectionner plusieurs dossiers source > R\u00e9glage du plug-ins, Oui ou Non.
\nDossier (Directory) : Pr\u00e9ciser ici le dossier parent tel que : \u201cimages\/sampledata\u201d. Si non pr\u00e9cis\u00e9 ce sera par d\u00e9faut le dossier \u201cimages\u201d.<\/p>\n
Le champ Integer<\/p>\n
Vues du champ Integer, cr\u00e9ation, article et frontend
\nLe champ \u201cInteger\u201d cr\u00e9e une liste d\u00e9roulante de nombres entiers compris entre un minimum (le plus petit nombre) et un maximum (le plus grand). Le \u201cpas\u201d d\u00e9termine l\u2019\u00e9cart r\u00e9gulier entre deux nombres entiers successifs.
\nLes options de r\u00e9glages sont :<\/p>\n
Multiple : Choisir si l\u2019on veut pouvoir s\u00e9lectionner plusieurs nombres entiers > R\u00e9glage du plug-ins, Oui ou Non.
\nPremier (First) : Le plus petit nombre entier.
\nDernier (Last) : Le plus grand nombre entier.
\nPas (Step) : \u00c9cart r\u00e9gulier entre deux nombres entiers successifs.<\/p>\n
Le champ Liste<\/p>\n
Vues du champ Liste, cr\u00e9ation, article et frontend
\nCe champ nous fournit la possibilit\u00e9 de cr\u00e9er une liste d\u00e9roulante pour un ou plusieurs textes. Si vous devez remplir la case \u201cValeur par d\u00e9faut\u201d, elle correspond \u00e0 l\u2019une des cases \u201cValeur\u201d de l\u2019un des champs .Le bouton \u201c+\u201d vous permet de rajouter des lignes. Le bouton \u201c-\u201d de supprimer des lignes et le symbole \u201cmulti-fl\u00e8ches\u201d de d\u00e9placer les lignes pour organiser votre formulaire.
\nLes options de ce champs sont :<\/p>\n
Multiple : Choisir si l\u2019on veut pouvoir s\u00e9lectionner plusieurs nombres entiers > R\u00e9glage du plug-ins, Oui ou Non.
\nListe de Valeurs (list Values) : Liste de champs \u00e0 pr\u00e9-remplir pour avoir une liste de s\u00e9lection lors de l\u2019\u00e9dition d\u2019un article, contact ou utilisateur.<\/p>\n
Le champ Liste d\u2019images<\/p>\n
Vues du champ Liste d\u2019images, cr\u00e9ation, article et frontend
\nLe champ \u201cListe d\u2019images\u201d nous permet de cr\u00e9er une liste d\u2019images qui sont regroup\u00e9es dans un r\u00e9pertoire de votre m\u00e9dia.
\nLes options de r\u00e9glages sont :<\/p>\n
R\u00e9pertoire (Directory) : Vous fournira un acc\u00e8s \u00e0 la liste de votre r\u00e9pertoire de m\u00e9dias.
\nMultiple : Choisir si l\u2019on veut pouvoir s\u00e9lectionner une ou plusieurs images > R\u00e9glage du plug-ins, Oui ou Non.
\nImage Class : la possibilit\u00e9 de rajouter une Classe CSS \u00e0 votre image s\u00e9lectionn\u00e9e.<\/p>\n
Le champ M\u00e9dias<\/p>\n
Vues du champ M\u00e9dias, cr\u00e9ation, article et frontend
\nLe champ \u201cM\u00e9dias\u201d nous donne la possibilit\u00e9 d\u2019ouvrir le pop-up du r\u00e9pertoire m\u00e9dia et ainsi de s\u00e9lectionner ou t\u00e9l\u00e9charger une image dans notre r\u00e9pertoire M\u00e9dias de Joomla!. L\u2019image s\u00e9lectionn\u00e9e sera affich\u00e9e dans le frontend du site.
\nLes champs optionnels sont :<\/p>\n
R\u00e9pertoire (Directory) : Vous fournira un acc\u00e8s \u00e0 la liste de votre r\u00e9pertoire de m\u00e9dias.
\nVignette (Pr\u00e9view) : Une ic\u00f4ne sur la gauche du champ dans la vue article, vous offre la possibilit\u00e9 de visualiser l\u2019image s\u00e9lectionn\u00e9e sans ouvrir le pop-up.<\/p>\n
Image Class : La possibilit\u00e9 de rajouter une Classe CSS \u00e0 votre image s\u00e9lectionn\u00e9e.
\nHome Directory : Seuls les utilisateurs identifi\u00e9s pourront voir l\u2019image dans le frontend.<\/p>\n
Vue pop-up du r\u00e9pertoire images
\nLe champ Radio
\nCe champ nous fournit la possibilit\u00e9 de cr\u00e9er une liste de mots \u00e0 s\u00e9lectionner. Il n\u2019y a pas de s\u00e9lection multiple possible. Cela veut dire qu\u2019un mot s\u00e9lectionn\u00e9 d\u00e9s\u00e9lectionne les autres. Si vous devez remplir la case \u201cValeur par d\u00e9faut\u201d, elle correspond \u00e0 l\u2019une des cases \u201cValeur\u201d de la Checkboxes.
\nLe bouton \u201c+\u201d vous permet de rajouter des lignes. Le bouton \u201c-\u201d de supprimer des lignes et le symbole \u201cmulti-fl\u00e8ches\u201d de d\u00e9placer les lignes pour organiser votre formulaire.<\/p>\n
Vues du champ Radio, cr\u00e9ation, article et frontend
\nLe champ SQL<\/p>\n
Vues du champ SQL, cr\u00e9ation, article et frontend
\nLe champ \u201cSQL\u201d nous fournit une liste d\u00e9roulante des r\u00e9sultats obtenus par l’ex\u00e9cution d\u2019une requ\u00eate SQL sur la base de donn\u00e9es de votre Joomla!
\nLes options de r\u00e9glages sont :<\/p>\n
Requ\u00eate (Query) : La requ\u00eate doit appeler deux colonnes > une premi\u00e8re \u201cvaleur\u201d qui contiendra les \u00e9l\u00e9ments de la liste; la deuxi\u00e8me \u201ctexte\u201d contenant le texte dans la liste d\u00e9roulante.
\nMultiple : C\u2019est le choix de pouvoir s\u00e9lectionner plusieurs valeurs dans la liste d\u00e9roulante.<\/p>\n
Pour plus d\u2019informations suivre : https:\/\/docs.joomla.org\/SQL_form_field_type
\nLe champ Texte<\/p>\n
Vues du champ Texte, cr\u00e9ation, article et frontend
\nLe champ \u201cTexte\u201d cr\u00e9era lors de la r\u00e9daction d\u2019un article, d\u2019un contact ou d\u2019un utilisateur une ligne de texte.
\nFiltre (Filter) : Accepter que certaines balises HTML fonctionnent. Il faut utiliser le filtre \u201cbrut\u201d (raw) pour que le code HTML soit affich\u00e9 sous sa forme de code.
\nLe champ Zone de texte<\/p>\n
Vues du champ Zone de texte, cr\u00e9ation, article et frontend
\nLe champ \u201cZone de Texte\u201d (Textarea) nous fournit la possibilit\u00e9 d\u2019int\u00e9grer dans un article un champ large et cumulable sur plusieurs lignes pour pouvoir ins\u00e9rer du texte. Cette zone de texte ne comporte pas de mise en forme du texte.
\nLes r\u00e9glages possibles sont :<\/p>\n
Le nombre de lignes (Rows) : C\u2019est le nombre de lignes affich\u00e9es dans le backend. Il n\u2019affecte pas la taille du texte qui sera affich\u00e9 dans le frontend du site internet.
\nColonnes (Columns) : C\u2019est le nombre de colonnes affich\u00e9es dans le backend. Ce nombre de colonnes n\u2019affecte pas l\u2019affichage dans le frontend du site internet.<\/p>\n
Le champ Url<\/p>\n
Vues du champ Url, cr\u00e9ation, article et frontend
\nLe champ \u201cUrl\u201d nous offre la possibilit\u00e9 de cr\u00e9er, pour un article, un contact ou un utilisateur, un champ de lien url personnalisable.Les options de r\u00e9glages sont :<\/p>\n
Schemes : Sept formats sont disponibles : HTTP, HTTPS, FTP, FTPS, URL, FILE ou MAILTO. C\u2019est une fa\u00e7on de restreindre le format lors de la cr\u00e9ation dans le backend.
\nRelative : Utilisez cette option pour d\u00e9terminer si les liens Url relatives sont autoris\u00e9s. Trois possibilit\u00e9s : R\u00e9glage plug-ins, oui ou non.<\/p>\n
Le champ Utilisateur<\/p>\n
Vues du champ Utilisateur, cr\u00e9ation, article et frontend
\nC\u2019est un champ simple sans option qui nous donne acc\u00e8s, via une fen\u00eatre pop-up, \u00e0 la liste des utilisateurs de Joomla! et nous permet d\u2019en s\u00e9lectionner un. L\u2019affichage dans le frontend n\u2019est qu\u2019une information, il n\u2019y a pas de lien cliquable.<\/p>\n
Affichage du pop-up pour s\u00e9lectionner un utilisateur Joomla! 3.7
\nLe champ Groupe d\u2019utilisateurs<\/p>\n
Vues du champ Groupe d\u2019utilisateurs, cr\u00e9ation, article et frontend
\nLe champ Groupe d\u2019utilisateurs affiche lors de la cr\u00e9ation d\u2019un article, contact ou utilisateur une liste d\u00e9roulante vers les groupes d’utilisateurs cr\u00e9\u00e9s dans Joomla!. La seule option de r\u00e9glage pour ce champ est la possibilit\u00e9 de s\u00e9lectionner un ou plusieurs groupes d’utilisateurs.
\nLe champ Groupe de champs<\/p>\n
Vues du champ Groupe de champs, cr\u00e9ation, champ, article et frontend
\nLe champ Groupe de champs, nous permet de cr\u00e9er un groupe dans lequel nous pourrons int\u00e9grer des champs lors de leur cr\u00e9ation. Il n\u2019y a aucun r\u00e9glage possible si ce n\u2019est la possibilit\u00e9 d’ins\u00e9rer une description du groupe de champs.
\nLe nom du ou des groupes de champs sera s\u00e9lectionnable lors de la cr\u00e9ation d\u2019un champ mais \u00e9galement visible lors de la cr\u00e9ation d\u2019un article, contact ou utilisateur. Il ne sera pas visible dans le frontend du site internet.
\nDans l\u2019exemple on peut visualiser les quatre \u00e9tapes (Cr\u00e9ation du Groupe de champs, d\u2019un des trois champs, remplissage des trois champs dans un article et affichage du groupe dans le frontend) pour un affichage de trois champs dans un groupe de champs.
\nR\u00e9alisation d\u2019un article \u00c9v\u00e8nement
\nA cet endroit pr\u00e9cis de votre lecture vous \u00eates, normalement, devenu Ma\u00eetre en ouverture de champs ! Travaillons plus en \u201cprofondeur\u201d et r\u00e9alisons maintenant un exemple sur la base d\u2019un article \u00c9v\u00e9nement. Sans trop complexifier les choses, pour r\u00e9aliser un article \u00c9v\u00e9nement il vous faut disposer au minimum de seulement trois \u00e9l\u00e9ments : une date de d\u00e9but, une date de fin et un lieu. Soit, en fait, deux champs \u201cCalendrier\u201d et un champ \u201cZone de texte\u201d.
\nCr\u00e9ation du lien de menu
\nPour l’exercice nous allons d’abord cr\u00e9er un lien de menu vers un nouvelle cat\u00e9gorie d\u2019article. Avec Joomla! 3.7 nous r\u00e9aliserons cette \u00e9tape en une seule fois !<\/p>\n
\u00c9tapes de la cr\u00e9ation d\u2019un lien de menu <\/p>\n
Ajouter un lien de menu
\nDonner un titre au lien de menu
\nS\u00e9lectionner le type de lien de menu \u201cblog d\u2019une cat\u00e9gorie\u201d
\nCliquer sur le bouton \u201cCr\u00e9er\u201d
\nDonner un nom \u00e0 la cat\u00e9gorie (Je propose \u00c9v\u00e9nements)
\nCliquer sur le bouton \u201cEnregistrer et fermer\u201d de la fen\u00eatre pop-up
\nCliquer sur le bouton \u201cEnregistrer et fermer\u201d de la cr\u00e9ation d\u2019un lien de menu<\/p>\n
Cr\u00e9ation du groupe de champs<\/p>\n
\u00c9tapes de la cr\u00e9ation d\u2019un groupe de champs
\nTout d\u2019abord nous allons cr\u00e9er un groupe de champs :<\/p>\n
Gestion des groupes de champs
\nCr\u00e9er un nouveau groupe de champs
\nDonner un nom au groupe de champs
\nVous pouvez ajouter une description au groupe de champs
\nCliquer sur le bouton \u201cEnregistrer et fermer\u201d<\/p>\n
Cr\u00e9ation des trois champs
\nEnsuite nous allons cr\u00e9er le premier champ date de d\u00e9but de l’\u00e9v\u00e9nement avec un champ \u201cCalendrier\u201d :<\/p>\n
Cliquer sur le bouton \u201cChamp\u201d
\nCr\u00e9er un nouveau champ
\nDonner un nom au champ
\nChoisir dans le liste d\u00e9roulante \u201cCalendrier\u201d
\nChoisir le groupe d\u2019articles \u201c\u00c9v\u00e9nement\u201d
\nDonner une description
\nChoisir la cat\u00e9gorie d\u2019article dans laquelle le champ sera visible
\nChoisir de montrer l\u2019heure de l\u2019\u00e9v\u00e9nement
\nCliquer sur le bouton \u201cEnregistrer et fermer\u201d<\/p>\n
\u00c9tapes de cr\u00e9ation du champ \u201cD\u00e9but de l\u2019\u00e9v\u00e9nement\u201d
\nPuis le champ \u201cfin de l\u2019\u00e9v\u00e9nement\u201d avec un deuxi\u00e8me champ \u201cCalendrier\u201d :<\/p>\n
Cliquer sur le bouton \u201cNouveau\u201d
\nDonner un nom au champ
\nChoisir le type de champ \u201cCalendrier\u201d
\nDonner une description si besoin
\nChoisir le nom du groupe de champs
\nS\u00e9lectionner la cat\u00e9gorie dans laquelle le champ sera visible
\nChoisir d\u2019afficher l\u2019heure de la fin de l\u2019\u00e9v\u00e9nement
\nCliquer sur le bouton \u201cEnregistrer et fermer\u201d<\/p>\n
\u00c9tapes de construction du champ fin de l\u2019\u00e9v\u00e9nement <\/p>\n
\u00c9tapes de construction du champ Adresse de l\u2019\u00e9v\u00e9nement
\nEt enfin la cr\u00e9ation du champ adresse de l\u2019\u00e9v\u00e9nement avec un champ \u201cZone de texte\u201d :<\/p>\n
Cliquer sur le bouton \u201cNouveau\u201d
\nDonner un nom au champ
\nChoisir le type de champ \u201cTexte Area\u201d
\nS\u00e9lectionner le groupe de champs \u201c\u00c9v\u00e9nements\u201d
\nEntrer une description si besoin
\nS\u00e9lectionner la cat\u00e9gorie d\u2019articles dans laquelle le champ sera visible
\nCliquer sur le bouton \u201cEnregistrer et fermer\u201d<\/p>\n
Nous constatons que nos trois champs ont bien \u00e9t\u00e9 cr\u00e9\u00e9s.
\nCr\u00e9ation de l\u2019article \u00c9v\u00e9nement
\nDerni\u00e8re \u00e9tape, la cr\u00e9ation d\u2019un article dans la cat\u00e9gorie \u201c\u00c9v\u00e9nements\u201d et le remplissage des trois champs.<\/p>\n
\u00c9tapes de r\u00e9daction des trois champs
\nNous sommes sur la page des champs pour articles.<\/p>\n
Cliquer sur le lien \u201cArticle\u201d \u00e0 gauche
\nCliquer sur le bouton \u201cNouveau\u201d
\nDonner un titre \u00e0 l\u2019article
\nChoisir dans la liste, le nom de la cat\u00e9gorie \u00e0 laquelle l\u2019article va appartenir. Pour nous ce sera \u201c\u00c9v\u00e9nements\u201d
\nCliquer sur l\u2019onglet \u201c\u00c9v\u00e9nements\u201d qui correspond au titre de notre groupe de champs. Si notre article n\u2019avait pas \u00e9t\u00e9 class\u00e9 dans la cat\u00e9gorie \u201cEv\u00e9nements\u201d, cet onglet ne serait pas pr\u00e9sent, tout comme le bouton \u201cFields\u201d dans l\u2019\u00e9diteur TinyMCE.
\nRemplir le champ \u201cD\u00e9but\u201d
\nRemplir le champ \u201cFin\u201d
\nRemplir le champ \u201cAdresse\u201d
\nCliquer sur le bouton \u201cEnregistrer et fermer\u201d<\/p>\n
Nous retrouvons ainsi notre article en frontend, et nos trois champs remplis.<\/p>\n
Vue frontend de l\u2019article \u00c9v\u00e9nements
\nPersonnalisation de l\u2019affichage
\nLa position automatique de ces trois champs n\u2019est pas forc\u00e9ment la plus agr\u00e9able et ne vous conviendra peut-\u00eatre pas. Nous avions laiss\u00e9s les param\u00e8tres d\u2019affichage du champ \u201cpar d\u00e9faut\u201d. Je vous propose de mettre les trois champs dans un bloc sur la droite du texte de l\u2019article.<\/p>\n
Pour ce faire revenir sur les param\u00e8tres des trois champs et modifier la position automatique sur \u201cNon\u201d.<\/p>\n
Suppression de la position automatique des champs <\/p>\n
Revenez sur votre article, et ins\u00e9rez un tableau d\u2019une colonne et deux lignes.<\/p>\n
Cr\u00e9ation d\u2019un tableau <\/p>\n
Ins\u00e9rez un titre sur la premi\u00e8re ligne (Informations), puis placez votre curseur au d\u00e9but de la deuxi\u00e8me ligne. Cliquez sur le bouton \u201cChamp\u201d (Field).<\/p>\n
Insertion des champs <\/p>\n
Une fen\u00eatre pop-up s\u2019ouvre et vous donne la possibilit\u00e9 de choisir l\u2019un des trois champs.<\/p>\n
S\u00e9lection des champs <\/p>\n
Choisissez \u201cD\u00e9but\u201d, puis \u00e0 la ligne.
\nRecommencez avec le champ \u201cFin\u201d et \u201cAdresse\u201d.<\/p>\n
Bouton propri\u00e9t\u00e9s du tableau
\nUne fois le tableau rempli, il nous reste \u00e0 le rendre un peu plus en accord avec le template Protostar de Joomla!.<\/p>\n
Cliquez sur le bouton propri\u00e9t\u00e9s du tableau en bas \u00e0 gauche, une fois le tableau s\u00e9lectionn\u00e9.
\nJe vous propose de donner une largeur au tableau de 240 pixels, de donner un espace int\u00e9rieur de 10 pixels, une \u00e9paisseur de bordure de 1 pixel, et enfin de faire flotter le bloc sur la droite du texte.<\/p>\n
Propri\u00e9t\u00e9s de l\u2019onglet G\u00e9n\u00e9ral
\nPour \u00eatre encore plus proche, nous pouvons aller sur l\u2019onglet \u201cAvanc\u00e9\u201d des propri\u00e9t\u00e9s du tableau et ajouter des couleurs aux bordures et \u00e0 l\u2019arri\u00e8re plan du tableau. On s’aper\u00e7oit que le champ \u201cStyle\u201d du tableau se remplit au fur et \u00e0 mesure de nos param\u00e8tres. Nous pouvons aussi ajouter du code, comme : margin-left: 10px; pour \u00e9viter que le texte ne soit coll\u00e9 \u00e0 gauche du tableau.<\/p>\n
Propri\u00e9t\u00e9s de l\u2019onglet Avanc\u00e9 <\/p>\n
Cliquez sur \u201cOk\u201d et le tableau dans l\u2019\u00e9diteur devient plus sympa. Nous pouvons encore : rendre le texte \u201cJustifi\u00e9\u201d en cliquant sur le bouton et mettre le titre du tableau au format H3.<\/p>\n
Titre du tableau en H3 <\/p>\n
Il ne vous reste plus qu\u2019\u00e0 cliquer sur le bouton \u201cEnregistrer\u201d. Et voil\u00e0 ce que cela donne.<\/p>\n
Vue backend de l\u2019article
\nC\u00f4t\u00e9 frontend, nous retrouvons notre bloc d\u2019informations sur la droite du texte, totalement int\u00e9gr\u00e9 au design du site internet.<\/p>\n
Vue Frontend de l\u2019article fini
\nIl ne s\u2019agit ici que d\u2019une proposition de pr\u00e9sentation. Libre \u00e0 vous d\u2019explorer \u00e0 votre guise l\u2019\u00e9norme \u00e9tendue des possibilit\u00e9s qui vous sont offertes pour la r\u00e9alisation de livres de recettes, de catalogues ou de n\u2019importe quels articles comprenant des informations.
\nNOTE : Aujourd’hui, Joomla! 3.7 est disponible en version beta, une version \u00e0 ne pas utiliser pour des sites en production, mais pour des tests. Si vous souhaitez participer au projet Joomla!, n’h\u00e9sitez pas \u00e0 tester cette version beta et \u00e0 faire remonter vos \u00e9ventuels retours. Cette version peut \u00eatre t\u00e9l\u00e9charg\u00e9e \u00e0 partir de ce lien : https:\/\/github.com\/joomla\/joomla-cms\/releases\/tag\/3.7.0-beta4.<\/p>\n
\u00c0 propos de l’auteur
\nCyrille POUSSIN
\nGeek et passionn\u00e9 d\u2019informatique depuis toujours, c\u2019est au Joomladay de Bordeaux que j\u2019ai d\u00e9couvert Joomla! et sa communaut\u00e9. Je me consid\u00e8re comme un curieux, un bricoleur, qui aime essayer, tester, d\u00e9couvrir tout ce qui touche \u00e0 Joomla! et \u00e0 la construction de site internet.
\n www.joomanji.fr<\/p>\n","protected":false},"excerpt":{"rendered":"
Fort de son \u00e9volution Joomla! 3.7 nous apporte 40 nouvelles fonctionnalit\u00e9s et pr\u00e8s de 700 am\u00e9liorations!L\u2019une d\u2019entre elles, et pas la moindre, nous donne la possibilit\u00e9 de rajouter des champs personnalis\u00e9s pour les articles, les utilisateurs et les fiches de contact. Cela va nous permettre de cr\u00e9er, sans CCK et sans codage, des \u00e9v\u00e9nements, des […]<\/p>\n","protected":false},"author":1,"featured_media":489,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-490","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archives"],"yoast_head":"\n