Création de votre premier groupe de champs

Un groupe de champs est une collection de champs qui apparaissent ensemble lors de l’édition d’un article ou d’une page. Cette section vous guide à travers la création d’un groupe de champs complet et concret, de A à Z. Au lieu d’un exemple simpliste, vous allez créer un profil “Membre de l’équipe” qu’une société de conseil pourrait utiliser — avec une photo, un nom, un titre de poste, une biographie, des spécialités et une URL LinkedIn. À la fin, vous comprendrez chaque partie de l’éditeur de groupe de champs et serez prêt à construire vos propres configurations personnalisées.

Le scénario

Imaginez que vous dirigez une société de conseil appelée Apex Partners. Vous souhaitez que chaque consultant ait une page de profil dédiée sur votre site Web affichant sa photo, son nom complet, son titre de poste, une biographie professionnelle, une liste de spécialités et un lien vers son profil LinkedIn. Vous avez un type de publication personnalisé appelé “Membres de l’équipe” (votre développeur a configuré cela), et vous avez besoin des champs à remplir pour les éditeurs.

Étape 1 : Créer le groupe de champs

1. Allez à Field Forge > Nouveau groupe de champs
2. Dans le champ de titre en haut, tapez : Profil du membre de l’équipe
3. Ce titre est ce que les éditeurs voient comme l’en-tête de la metabox lors de l’édition d’un article sur un membre de l’équipe

[Capture d’écran : l’éditeur de groupe de champs avec “Profil du membre de l’équipe” saisi comme titre et une liste de champs vide en dessous]

Étape 2 : Ajouter le champ Photo

1. Cliquez sur le bouton Ajouter un champ — une grille des types de champs disponibles apparaît
2. Cliquez sur Image dans la grille
3. Configurez le champ :

– Nom : profile_photo (généré automatiquement à partir de l’étiquette — laissez-le tel quel)

– Instructions : Téléchargez une photo professionnelle. Taille recommandée : 400×400 pixels, recadrage carré.

– Obligatoire : Oui (activez ceci — chaque membre de l’équipe a besoin d’une photo)

– Format de retour : Tableau d’images (donne à votre développeur accès à plusieurs tailles d’image)

– Taille de l’aperçu : Moyen (cela contrôle la miniature d’aperçu affichée dans l’éditeur)

– Largeur de l’enveloppe : 30 % (nous mettrons la photo à gauche, avec le nom et le titre à droite)

Étape 3 : Ajouter le champ Nom

1. Cliquez à nouveau sur Ajouter un champ, choisissez Texte
2. Configurez :

– Nom : full_name

– Instructions : Entrez le nom complet du consultant tel qu’il doit apparaître sur le site web.

– Requis : Oui

– Espace réservé : “Jane Doe”

– Limite de caractères : 100 (empêche de coller accidentellement un paragraphe)

– Largeur de l’enveloppe : 35%

Étape 4 : Ajouter le champ Titre du poste

1. Cliquez sur Ajouter un champ, choisissez Texte
2. Configurez :

– Nom : job_title

– Instructions : Leur rôle au sein de l’entreprise (par exemple, Consultant senior, Associé gérant).

– Obligatoire : Oui

– Espace réservé : “Consultant senior”

– Largeur de l’enveloppe : 35%

Étape 5 : Ajouter le champ Bio

1. Cliquez sur Ajouter un champ, choisissez Zone de texte
2. Configurez :

– Nom : professional_bio

– Instructions : Écrivez 2-3 paragraphes sur le parcours, l’expertise et l’approche du consultant. Cela apparaît sur leur page de profil.

– Requis : Oui

– Lignes : 6 (rend la zone de texte suffisamment haute pour quelques paragraphes sans faire défiler)

– Largeur de l’enveloppe : 100 % (pleine largeur — les biographies ont besoin d’espace)

Étape 6 : Ajouter le champ Spécialités

1. Cliquez sur Ajouter un champ, choisissez Case à cocher
2. Configurez :

– Nom : specialties

– Instructions : Sélectionnez tous les domaines d’expertise qui s’appliquent.

– Choix : Ajoutez chaque spécialité sur sa propre ligne :

– Stratégie

– Opérations

– Transformation numérique

– Conseil financier

– Capital humain

– Gestion des risques

– Technologie

– Durabilité

– Disposition : Horizontale (affiche les cases à cocher sur une ligne au lieu d’une liste verticale, économisant de l’espace)

– Largeur de l’enveloppe : 100%

Étape 7 : Ajouter le champ URL LinkedIn

1. Cliquez sur Ajouter un champ, choisissez URL
2. Configurez :

– Nom : linkedin_profile

– Instructions : Collez l’URL complète du profil LinkedIn (par exemple, https://linkedin.com/in/janedoe).

– Requis : Non (tous les membres de l’équipe n’en ont pas nécessairement un)

– Espace réservé : “https://linkedin.com/in/username”

– Largeur de l’enveloppe : 50%

Étape 8 : Définir les règles de localisation

1. Faites défiler vers le bas des champs jusqu’à la section Règles de localisation
2. Réglez le premier menu déroulant sur Type de publication
3. Réglez l’opérateur sur est égal à
4. Réglez la valeur sur Membre de l’équipe (ou quel que soit le nom de votre type de publication d’équipe)
5. Cela signifie que chaque publication Membre de l’équipe sur votre site affichera la metabox “Profil du membre de l’équipe”

Étape 9 : Enregistrer et tester

1. Cliquez sur Enregistrer le groupe de champs (ou appuyez sur Cmd+S / Ctrl+S)
2. Allez dans votre type de publication Équipe de membres dans la barre latérale d’administration
3. Ouvrez un article de membre de l’équipe existant ou créez-en un nouveau
4. Faites défiler vers le bas de l’éditeur de contenu — vous verrez la métabox “Profil du membre de l’équipe”
5. Remarquez que le champ Photo de profil (30% de largeur) est à gauche, avec Nom complet (35%) et Titre du poste (35%) à droite sur la même ligne
6. Remplissez quelques données de test : téléchargez une photo, entrez un nom, un titre et une biographie, cochez quelques spécialités, collez une URL LinkedIn
7. Cliquez sur Publier ou Mettre à jour pour enregistrer
8. Rouvrez l’article pour confirmer que toutes les données sont préservées

[Capture d’écran : un article de membre de l’équipe dans l’éditeur montrant la métabox “Profil du membre de l’équipe” avec tous les champs remplis — photo à gauche, nom et titre à droite, biographie en dessous, cases à cocher pour les spécialités, et un champ d’URL LinkedIn]

Plus d’exemples de groupes de champs que vous pourriez créer

Conseils pour organiser les champs

• Faites glisser les champs pour les réorganiser — l’ordre dans l’éditeur est l’ordre que les éditeurs voient sur les publications
• Double-cliquez sur une étiquette de champ pour la renommer en ligne sans ouvrir le panneau de paramètres complet
• Utilisez la Largeur de Wrapper pour créer des mises en page à plusieurs colonnes. Deux champs à 50 % se placent côte à côte. Trois à 33 % créent une rangée à trois colonnes
• Ajoutez un champ Onglet (sous Types de mise en page) pour diviser un grand groupe de champs en sections à onglets. Mettez les champs de contenu dans un onglet, les champs SEO dans un autre, et les paramètres dans un troisième
• Utilisez un champ Message pour ajouter des instructions, des avertissements ou des notes que les éditeurs verront en remplissant les champs. Par exemple : “Les images doivent faire au moins 1920×1080 pixels pour la section héros.”
• Gardez les noms de champs courts et descriptifs — hero_title est mieux que the_title_for_the_hero_section_at_the_top

> Bon à savoir : Le nom du champ (comme full_name) est ce que votre développeur utilise dans le code du thème pour afficher les données. Une fois qu’un groupe de champs est en production, évitez de changer les noms de champs — cela rompt la connexion entre les données enregistrées et le thème. Changer l’étiquette (ce que les éditeurs voient) est toujours sans risque et n’a aucun effet sur les données ou le code.

> Erreur courante : Les nouveaux utilisateurs créent parfois un groupe de champs mais oublient de définir des règles de localisation. Les champs existent mais n’apparaissent jamais nulle part. Faites toujours défiler vers le bas jusqu’aux Règles de localisation avant de sauvegarder et assurez-vous qu’au moins une règle est configurée.