Written by Nous allons voir comment faciliter l’indexaction de votre site par les moteurs de recherche avec l’utilisation d’un sitemap ou plan de site en français.
Salut les loulous (au bout du 4eme jour on est familier), j’espère que vous avez passé de bonnes vacances ? Vous avez bien fait vos devoirs lors du dernier article ?
Crédits : Aron Van De Pol
http://cinnk.com/magazine/aout-2016/788-dans-la-serie-j-aurais-du-rester-au-lit-ce-matin-jour-numero-3
Les champs : le pouvoir de FLEXIcontent
Comprendre les champs
Contrôler les champs
Les options qui rendent vos champs en mode Super Sayan
Afficher les champs
Ordonner les champs dans le formulaire de saisie
Le type offre
Les champs pour le type candidature
Le type candidature libre
Les champs : le pouvoir de FLEXIcontent
Après avoir mis en place vos types nous allons passer à l’ajout de champs supplémentaires. Il existe 32 champs dans FLEXIcontent. Chacun ayant ses propres fonctions.
En les utilisant correctement vous pourrez tout contrôler !!!!
Comprendre les champs
Chaque champ dispose de 3 affichages, tous paramétrables :
Dans le formulaire de saisie (front et back)
Dans les vues contenu et catégorie
Dans les filtres de recherche
Il y a plusieurs type de champs :
Les champs de données
Le champ radio : affiche une série de boutons radio
Le champ radio image : affiche une série de boutons radio sous format image
Le champ checkbox : affiche une série de cases à cocher
Le champ checkbox image : affiche une série de cases à cocher sous format image
Le champ select : affiche une liste déroulante
Le champ select multiple : affiche une liste déroulante avec choix multiple
Le champ date : permet de sélectionner une date (peut se mapper avec les dates de Joomla)
Le champ texte : un simple champ texte
Le champ textarea : une zone de texte avec éditeur html possible
Le champ textselect : c’est un champ un peu spécial mais ô combien pratique qui combine une liste déroulante de valeurs prédéfinies et un champ texte libre.
Toute nouvelle valeur mise dans le champ texte sera proposée dans la liste déroulante pour des futures saisies
Le champ weblink : champ de lien (déprécié au profit de extendweblink)
Le champ email : pour mettre un email
Le champ extendweblink : champ de lien avec de nombreux régalges
Le champ phone : un champ téléphone évolué
Le champ termlist : un champ text area mais multiple
Le champ file : un champ de chargement de fichier avec de nombreuses options permettant de gérer les paniers de téléchargement
Le champ image : l’un des plus gros champ de flexicontent, quasiment un composant à lui tout seul, il permet l’upload, le redimensionnement, le watermarking, les effets de présentation etc …. rien que pour ce champ ça vaudrait le coup d’installer flexi !
Le champ mini-gallery : c’est un vieu champ qui permet de créer des mini-carrousels mais il doit être mis à jour. En attendant, le mieux c’est d’utiliser le champ image.
Le champ video/audio : un champ d’import de video youtube / vimeo / soundcloud avec preview en live
Le champ googlemaps : ce champ permet d’afficher une adresse avec une carte googlemap
Les champs pour le formulaire de saisie
Le champ fieldgroup : permet de regrouper plusieur champs pour dupliquer un groupe
Le champ user account via submit : permet de créer un compte Joomla lors de la soumission d’un contenu dans FLEXIcontent
Le champ item form tab : permet d’ajouter des onglets des fieldset ou du html dans votre formulaire
Le champ core property : il permet de mapper les champs de joomla pour ainsi les placer ailleurs dans le formulaire de saisie
Les champs qui affichent des objets
Le champ toolbar : une barre de partage pour les réseaux sociaux, compatible Opengraph
Le champ chargement de module : permet de charger un module sans avoir besoin de {loadposition}
Le champ navigation : il permet d’afficher une navigation entre les articles
Le champ liste html : ce champ permet d’afficher une liste de liens (déprécié)
Le champ auteur : affiche un lien vers la page de l’auteur (en cour de développement pour plus d’options)
Le champ Joomla profile : en cours de développement, il permettra d’ajouter des champs flexicontent dans le profil d’un utilisateur
Les champs de liaisons
Le champ relation : alors ce champ là permet des trucs de fou … il permet de lier des contenus entre eux et affiche n’importe quel champ du contenu lié. Un petit exemple
Le champ relation inverse : est bien c’est l’inverse lol
Avez tous ces champs il est possible de construire des types de contenus riches et simples à mettre en place pour les utilisateurs courants. Plus besoin de penser à la mise en page, plus besoin de devoir mettre un appel plugin, plus besoin de préparer ses images avant chargement …
Ouf j’ai essayé de bien tout décrire mais je suis un peu essoufflé …
Contrôler les champs
Comme je l’ai déjà dis il y a 3 affichages pour chaque champ :
L’affi… alors vous avez suivi ? j’attend vos réponses dans les com
L’affi … c’est dur avec le mojito dans la main !
L’afficha….
Maintenant nous allons pouvoir créer un champ.
Depuis la liste de tous vos champs cliquez sur “Nouveau”
La fenêtre se découpe en 3 zones :
La partie haute permet de définir le champ, son nom, son type
La partie à gauche en dessous permet de faire les réglages dit basiques que l’on retrouve dans tous les champs, comme l’accès, le type lié, est-il disponible pour la recherche ou le filtrage ou la gestion des droits. Et oui dans FLEXI vous pouvez créer des champs qui respectent les ACL en terme de display et de saisie. Pratique pour créer un champ de commentaires à nos candidatures seulement accessible pour les administrator et invisible pour les demandeurs …
Dans le panneau de droite vous aurez les options d’un type de champ spécifique. Bien sûr je ne vais pas vous faire un screenshot par onglet ET par type sinon on se revoit l’année prochaine …
Mais l’on va retrouver à peu près le même rangement pour tous
Un onglet pour l’affichage dans le formulaire
Un onglet pour l’affichage dans le contenu
Un onglet pour la gestion seo
Un onglet pour la gestion du social (lors de partage)
Un onglet pour l’affichage du filtrage
Donc plus le champ est puissant plus il aura d’option …
Les options qui rendent vos champs en mode Super Sayan
Il existe 3 fonctions importantes qui vont changer votre approche lors de la conception de vos sites :
Les valeurs multiples
Les préfixes et suffixes
L’exécution des plugins
1 Quasiment tous les champs valeurs de FLEXIContent ont un mode multiple, cad que vous pouvez donner le droit à un utilisateur de mettre plusieurs valeurs.
On peut choisir le nombre maximum, la position des boutons … l’utilisateur pourra ajouter des valeurs et les ordonner par simple glissé / déposé
2 Derrière ce truc tout bête se cache une des fonction les plus sympa à utiliser. Pour chaque champs on peut définir un texte d’ouverture/fermeture et un texte de préfixe/suffixe…
GNNNEEEEEE (je sais je l’ai déjà fait)
Voici un petit schéma
<texte d’ouverture>
<prefixe>
valeur1
<suffixe>
<prefixe>
valeur2
<suffixe>
<texte de fermeture>
Vous comprenez mieux ?
Cela permet de créer des mises en page dans lesquelles l’utilisateur se concentre uniquement sur les valeurs et nous les gentils concepteurs on s’occupe de tout le reste.
ex :
Le prix : 12 €
texte d’ouverture “le prix :”
valeur on laisse la personne mettre ce qu’elle veut (on peut contraindre le type de valeur)
suffixe ou texte de fermeture “€”
et voilà c’est du tout cuit….
J’ai mis des <>, ce n’est pas anodin vous pouvez utiliser des balises … pratique pour gérer vos styles :
texte d’ouverture <div class=”monbloc”><img …/><span class=”label”>Prix :</span>
préfixe <span class=”bleu”>
suffixe </span>
texte de fermeture </div>
Voila avec ça, l’utilisateur saisit, vous, vous gérer les valeurs et leur affichage !!! C’est pas beau la vie ?!
Et alors en 3 c’est le top du top …. vous pouvez utiliser 98% des plugins joomla dans vos champs …..
Là c’est sans limite ….au lieu de taper des {appelplugin}… on les met en préfixe et suffixe et la c’est le pied : vos utilisateurs n’ont plus besoins de retenir des choses complexe ….
Un exemple concret :
Je veux afficher un bouton d’achat hikashop dans mon article flexi …
le plugin fonctionne comme suit {« product » 14|cart|pricedis3|pricetax1}
je crée un champ liste déroulante
pour les valeurs je fais une requete sql dans la table produit => l’utilisateur choisira son produit dans une liste
en affichage du champs on va activer l’exécution des plugin
en préfixe {product
en suffixe |cart|pricedis3|pricetax1}
en valeur on récupère l’id du produit
et voilà un bon gestionnaire de produits intégré entre flexicontent et hikashop
Afficher les champs
Tatata tu pensais que j’allais tout te donner ???? et non on verra l’affichage dans le prochain numéro
Ordonner les champs dans le formulaire de saisie
Allez après cette déception voici un petit tip pour gérer l’ordre de tes champs dans les formulaires.
On va dans la gestion des champs
On filtre par type :
Puis on clique sur “Ordre”
Maintenant on peut changer l’ordre par simple glissé / déposé
Attention ! bien penser à sauvegarder l’ordre :
Le type offre
Pour construire le type offre, j’ai utilisé :
1 champ texte “temps de travail hebdomadaire”
1 champ textselect pour le “type de poste” (pour éviter les double saisie mais resté évolutif pour l’administrateur)
1 champ liste déroulante pour le “type de contrat”
1 champ texte pour le “salaire horaire” avec un masque euro (cela aide la saisie)
1 champ texte “durée de contrat”
1 champ liste déroulante “expérience” (c’est le même champ affecté à plusieur type)
1 champ bouton radio “permis” (c’est le même champ affecté à plusieur type)
1 champ file
1 champ liste déroulante “expérience” (c’est le même champ affecté à plusieur type)
1 champ email (idem c’est le même)
1 champ texte multiple (idem c’est le même)
1 champ relation qui va permettre de lier une offre à une candidature manuellement
1 champ textselect “lieu d’intervention” qui permettra de faire une filtrage de localité
Les champs pour le type candidature
Rien de bien complexe ici, j’ai utilisé :
1 champ texte “téléphone”
1 champ email
1 champ case à cocher “type de permis”
1 champ radio “véhicule”
1 liste déroulante avec les “expériences”
1 champ texte en multiple pour les “diplômes”
1 champ file pour le “CV”
et la un champ groupe pour gérer les “disponibilités” … on crée 1 champs texte pour chaque jour, on leur active la fonction groupe
puis on crér un champ groupefield avec les champs jours … hop le tour est joué !
Le type candidature libre
Pour la partie candidature libre j’ai juste dupliqué “candidature” et j’ai ajouté un champ “secteur souhaité”
L’intérêt sera de pouvoir affecter un workflow et des emails de validation différents suivant le gestionnaire du site.
Vous voyez vous pouvez facilement faire évoluer vos type de contenus pour obtenir des contenus simples à remplir et où vous pourrez créer de beaux affichages !!!
Y a des intégrateurs qui vont être heureux !
Dans le prochain article nous aborderons les catégories et la puissance des filtres !
A chao !
À propos de l’auteur
Yannick Berges
Passionné du web, du multimédia et de technologies en tout genre, il bichonne des projets web et forme entre autre sur les logiciels open source comme Scribus, The Gimp ou Blender… Il est aussi très impliqué dans le projet Flexi, dont il est le Community manager.