PDA

Afficher la version complète : Création d'un champ personnalisé (Champs de profil)



Ombre
21/08/2011, 10h41
Dans ce tutoriel, je vais vous expliquez comment ajouté un champ personnalisé, et l'ajouter dans la zone d'information des messages (userinfo_extra).

Création du champs personnalisé (champ de profil).
Ajout du champ personnalisé (champ de profil).
Mise en image du choix du champ personnalisé (champ de profil).
Création d'expressions du titre et de la description du champ de profile, et aussi création de l'expression pour le titre du champ de profile pour le postbit et/ou postbit_legacy.



Création d'un champ personnalisé

Dans mon exemple, je vais créer un champ personnalisé qui va me permette d'ajouter comme information, le sexe du membre, et cela après qu'il est paramétré cette option, qui sera obligatoire dans mon exemple, et j'ajouterais ce champ personnalisé dans la partie "A propos de moi" du profil du membre.


Dirigez vous sur votre admincp >> Champs du profil >> Ajouter un champ du profil
Sélectionner l'option désiré, pour moi dans mon cas je sélectionne l'option "Boutons radio avec une seule sélection", puis je clique sur "Continuer".
Sur la page "Ajouter un champ du profil" je vais paramétré celle ci de façon à avoir un champ personnalisé comme je le désire.


17526






Titre: le titre de votre champ personnalisé, le titre du champ est aussi celui qui apparaitra à coté de lui sur les différentes pages du forum selon la configuration de celui ci choisi (une fois le champ créer vous pourrez facilement modifier l'expression de cette option, de façon à ce que si votre forum est multilingue que cette option soit traduite sur votre forum, nous y reviendrons plus tard).
Description: une description, brève mais précise de l'utilité de votre champ personnalisé (une fois le champ créer vous pourrez facilement modifier l'expression de cette option, de façon à ce que si votre forum est multilingue que cette option soit traduite sur votre forum, nous y reviendrons plus tard).
Choix d'une catégorie de champs: choisissez une catégorie, dans mon exemple, j'ai sélectionner "(Aucune catégorie)", mais je reviendrais plus tard sur cette option.
Options: c'est un point important, vous devez indiquer les choix possible de votre champ personnalisé, dans cet exemple, je vais mettre les deux choix suivants "Homme" et "Femme", vous devez indiquer les choix de façon à en avoir un par ligne, un saut de ligne permet la séparation de ces choix.
Valeur par défaut pour ce champ ?: cette option vous permet d'ajouter une valeur par défaut, cette valeur sera la première dans la liste de vos choix indiquer juste au dessus, dans mon exemple je ne veux pas que un choix soit indiquer par défaut, je désire que les membres le sélectionne d'eux même ne connaissant pas ce choix pour eux.
L'ordre d'affichage: ne permet pas seulement de classé selon vos besoin la liste des champs personnalisé dans votre admincp, mais aussi et surtout de choisir l'ordre dans lequel apparaitra le champ personnalisé sur la page du compte du membre.
Champ requis, vous permet comme option, d'obliger le membre à devoir remplir ce champ, vous avez 4 choix, à vous de choisir celui qui convient le plus, dans mon exemple je vais indiquer que l'option sur OUI, toujours.
L'utilisateur peut modifier le champ?: permet au membre de changer le choix qui lui est proposer, sinon ça sera à l’administrateur du forum de le faire. J'indique donc pour mon exemple, OUI de façon à ce que le membre puisse sélectionner son sexe lui même.
Le champ est privé?, rend publique ou pas l'apparition de ce champ dans le profile du membre, ici dans mon exemple je veux que tous le monde puisse le voir, je met donc sur OUI.
Ce champ peut être utilisé pour rechercher des membres dans la liste de membres ?: Permet d'ajouter ou non ce critère de recherche dans la partie "Rechercher des utilisateur disponible dans la recherche avancée de la liste des membres de votre forum.
Afficher ce champ dans la liste des membres ?: Cette option devrait faire apparaitre le choix fait par le membre du champ dans la liste des membres, mais je n'ai pas réussi à le faire, ou alors je n'ai pas compris le sens de cette option.
Autoriser les utilisateur à insérer leur propre valeur pour cette option ?: Cela permet à vos membre d'ajouter leurs propres valeur pour le choix via un champ qui s'ajoutera, dans mon exemple je met l'option sur NON.
Longueur de texte maximale autorisée: vous permet d'indiquer le nombre de caractères maximum de votre champ personnalisé. Dans mon exemple je n'ai pas l'utilité de cette option, je laisse donc le choix par défaut.
Longueur du champ: sert à indiquer une valeur sur la largeur du champ personnalisé, à utiliser avec précaution, pour ne pas avoir un champ trop grand. Dans mon exemple je n'ai pas l'utilité de cette option, je laisse donc le choix par défaut.
Expression régulière: est une option que je n'ai jamais utilisé, permet d’exiger de faire correspondre des expressions régulière du champ de saisi: http://fr2.php.net/manual/en/function.preg-match.php.
Page du forum où s'affiche l'option: est une option assez importante, elle permet de savoir ou sera visible l'option du champs que vous créez à un endroit précis du compte et du profile du membre, la première option ajoutera le champs dans la partie du compte du membre sur "A propos de moi" et le reste des choix d'option, permettent de positionner le choix de ce champ personnalisé, dans la partie du compte du membre sur "Mes options".



Une fois tout les paramètres remplis, vous devriez voir le champ apparaitre dans la liste des autres champs par défaut, comme ici sur cette capture pour le champ que je viens de créer pour cette exemple (sur la capture l'ID du champ est visible, notez le car il vous sera utile pour la suite, dans mon exemple l'ID est le 13):


17528






La création du champ personnalisé (Champ de profil) est maintenant terminé, à tout moment vous pouvez le modifier, enfin certains paramètres.

Ajout du champ personnalisé dans le postbit ou postbit_legacy

Dans cette phase du tutoriel, je vais ajouter le résultat de l'option du champ personnalisé, dans la zone d'information du membre situé dans tout ses messages, et visible par tous le monde, dans mon exemple je vais l'ajouter dans la présentation de message horizontal, donc via le template postbit, mais vous pouvez faire de même sur la présentation de message verticale, en utilisent le template postbit_legacy. Dans cette exemple je veux que le choix du membre apparaisse simplement sous forme brut, sans ajout d’image ou autre.

Dans le template postbit du style visé par l'ajout de ce champ, recherchez ceci (libre à vous de choisir un autre emplacement pour l'apparition du champ):


{vb:raw template_hook.postbit_userinfo_right_after_posts}

Juste au dessus j'ajoute ce bout de code qui correspond à mon champ personnalisé que je viens d'ajouté, tout en utilisent une condition, qui me permet de le rendre visible si il est utilisé par le membre en question:


<vb:if condition="$post['field13']"><dt>Sexe</dt> <dd>{vb:raw post.field13}</dd></vb:if>

Et voici ce que ça donne en capture:


17529





Détails du code pour un ajout brut du champ personnalisé:


<vb:if condition="$post['field13']"><dt>Sexe</dt> <dd>{vb:raw post.field13}</dd></vb:if>

La condition: La condition, permet de ne pas afficher le champ, si celui ci n’est pas utiliser par le membre, ou rempli, dans la condition l'ID du champ personnalisé est obligatoirement à indiquer, ici dans mon exemple l'ID est l'ID 13.
Le titre du champ: Le titre du champ permet de savoir à quoi correspond le champ; dans mone xemple j'ai indiquer un titre sans utiliser d'expression, mais si votre forum est multilingue alors il vous faudra utiliser une expression afin que le titre sois traduit.
L'option du champ choisie: le choix du champ apparaitra face à cette variable qui pointe sur l'ID du champ personnalisé, ici dans mon exemple l'ID est l'ID 13.

Détails du code pour un ajout en image du choix du champ personnalisé:

Ici je vais vous montrez comment ajouter les choix en images, je ne répéterais pas les différentes étapes d'ajout du bout de code dans le template, juste le procédé pour la mise en place.
j'importe sur mon espace d'hébergement les deux images prévue pour mon exemple, de façon à ce que à la place du choix , une image apparaisse, donc si le membre sélectionne le choix "Homme", une image représentent son sexe, apparaitra dans la zone d'information des messages du membre.
Je place mes images qui doivent avoir le nom exacte des choix de mon champ personnalisé que je met en place, dans le dossier MISC de mon style, et je modifie le code que j'ai ajouté dans mon template (postbit dans mon exemple), par celui ci:


<vb:if condition="$post['field13']"><dt>Sexe</dt> <dd><img src="{vb:stylevar imgdir_misc}/{vb:raw post.field13}.png" alt="{vb:raw post.field13}" /></dd></vb:if>

Chemin ou se trouve l'image.
L'extension de l'image.
Le texte de remplacement en cas ou l'image soit inaccessible.


17532





Ajout d'une expression du titre du champ personnalisé ajouté

Maintenant que nous savons comment ajouter un champ personnalisé, et aussi remplacer le choix du champ sous forme de texte en image, nous allons créer une expression au titre de notre champ, pour les différents langages installer sur votre forum.
Dirigez vous donc sur votre admincp >> Champs du profil >> Gérer les champs de profil >> et sur le champs que vous venez de créer cliquer sur "[EDITER], et cliquer après sur [Traductions] juste en dessous de l'intitulé "Titre", voir capture:


17530






Une fois sur la page de création d'expression personnalisée, indiquez dans les différentes langues installées sur votre forum, les traductions du titre, si vous ne maitrisez pas les langues installées, vous avez le choix sur internet de traducteur, comme celui ci: http://www.google.fr/language_tools?hl=fr, pour mon exemple, je traduit donc mes deux langues installées qui sont le Français et l'Anglais comme ceci, tout en copient l'expression personnalisé pour la placé dans le champs d'informations des messages du membre:


17533






Une fois l'expression personnalisé, enregistré, le titre dans votre profile sera traduit automatiquement selon la langue choisie par le visiteurs sur le profile du membre.
Maintenant vous pouvez faire de même pour la description, le procédé est le même.
Voici le résultat pour cette ajout d'expression qui ne fonctionne que pour le profile des membres:


1753817540






Créer une expression pour le titre, de façon à ce que le champ personnalisé ajouté, dans la zone d'information du membre dans ses messages soit traduit, je vais en créer une pour le titre du champ personnalisé, car l'expression créer par le système plus haut, ne fonctionne que sur le profile, et pas sur les templates postbit et postbit_legacy.
pour créer une expression, rien de plus simple, dirigez vous sur votre admincp >> Langues & Expressions >> Gérer les expressions >> Et cliquez sur le bouton "Ajouter une expression", et suivez les indications suivantes:


17534







Laisser comme tel sur "Global", afin de faire fonctionner cette expression sur tout votre forum, en cas ou vous en auriez besoin ailleurs que sur le postbit et postbit_legacy.
Laisser sur vbulletin, c'est le produit visé.
Ici c'est important, c'est le nom de votre expression, donc à ce souvenir pour l'ajout de celle ci dans le code d'ajout du champ personnalisé, dans mon exemple afin de me rappeler ce que vise cette expression, je met en nom ceci: filed13_sexe, qui me rappellera que l'expression vise le champ ayant l'ID13, c'est un exemple, vous pouvez mettre ce que vous désirez.
Le texte qui devra être traduit.
La traduction du texte ci-dessus pour la langue visé, ici pour moi c'est l'Anglais.
Pareil, pour ici, qui est le Français pour mon exemple, faite de même si vous avez d'autres langues installées et enregistré la.



Et enfin modifier le bout de code dans le template postbit ou postbit_legacy, en ajoutent l'expression.

Détails du code pour un ajout brut du champ personnalisé en utilisant une expression pour le titre du champ:

<vb:if condition="$post['field13']"><dt>{vb:rawphrase filed13_sexe}</dt> <dd>{vb:raw post.field13}</dd></vb:if>
Expression personnalisé que j'ai créer.

Détails du code pour un ajout en image du choix du champ personnalisé en utilisant une expression pour le titre du champ:

<vb:if condition="$post['field13']"><dt>{vb:rawphrase filed13_sexe}</dt> <dd><img src="{vb:stylevar imgdir_misc}/{vb:raw post.field13}.png" alt="{vb:raw post.field13}" /></dd></vb:if>
Expression personnalisé que j'ai créer.

Et voici le résultat en capture:


1753517536




A savoir



Il existe différentes méthode pour l'utilisation de ces champs personnalisés (champs de profile), après avec un peu de connaissance et / ou d'imagination, libre à vous de peaufiner cela, et pourquoi pas de le partager sur vb-r.
Vous pouvez aussi utiliser des condition, pour faire apparaitre dans la zone d'informations des messages des membres le champs aux groupes, au membre, etc..., visé: http://www.vbulletin-ressources.com/forum/showthread.php?p=127191.
Selon vos style, si ils sont très personnalisé, il vous faudra prendre exemple sur les balises HTML et class CSS de celui ci pour adapter les code que je propose qui sont pris du style par défaut, afin d'avoir un rendu compatible avec votre style personnalisé.

Ombre
21/08/2011, 12h33
***** Réserver *****

Simon
21/08/2011, 14h03
Merci pour ce tutoriel. Claire et bien expliqué comme d'habitude :delicious:

Freddy.k
21/08/2011, 14h51
Oui Ombre jolie tuto je regarde sa et merci pour se travail

Seed
22/08/2011, 01h42
Bonsoir,

Bravo pour se tuto ;)

Je pense qu'il y a des millions de possibilité en créant des champ perso...

donc merci.

wahid
23/08/2011, 00h31
Merci Beaucoup Ombre pour se très beau tutoriel

Fozzy
25/08/2011, 23h14
Merci ! Très détaillé, et tout de suite aller au fond des choses (cacher dynamiquement si champ non renseigné) c'est la classe !